/* ============================================================
   CHURCH GUESTASSIST — Master Stylesheet v2
   Palette : Midnight Navy · Amber Gold · Electric Violet · Teal
   Fonts   : Playfair Display · DM Sans
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --navy-900: #070E20;
  --navy-800: #0C1530;
  --navy-700: #111D40;
  --navy-600: #172350;
  --navy-500: #1E2E63;

  --gold:       #F0A500;
  --gold-deep:  #C88800;
  --gold-light: #F9C23C;
  --gold-glow:  rgba(240,165,0,.22);
  --gold-soft:  rgba(240,165,0,.10);

  --violet:       #7B2FFF;
  --violet-mid:   #9B5FFF;
  --violet-light: #B98AFF;
  --violet-glow:  rgba(123,47,255,.25);
  --violet-soft:  rgba(123,47,255,.10);

  --teal:       #00C9AD;
  --teal-dark:  #00A892;
  --teal-glow:  rgba(0,201,173,.20);

  --rose:       #FF4D6D;
  --rose-glow:  rgba(255,77,109,.18);

  --bg:        #070E20;
  --surf-1:    #0C1530;
  --surf-2:    #111D40;
  --surf-3:    #172350;
  --surf-4:    #1E2E63;

  --bdr:     rgba(255,255,255,.07);
  --bdr-mid: rgba(255,255,255,.13);
  --bdr-hi:  rgba(255,255,255,.20);

  --tx-bright: #EEF2FF;
  --tx-main:   #BAC4E0;
  --tx-soft:   #7C8DB5;
  --tx-muted:  #4A5880;

  --sb-w:  260px;
  --tb-h:  62px;
  --r:     10px;
  --r-lg:  16px;
  --r-xl:  22px;

  --sh:        0 6px 28px rgba(0,0,0,.40);
  --sh-violet: 0 4px 22px rgba(123,47,255,.45);
  --sh-gold:   0 4px 20px rgba(240,165,0,.35);
  --sh-teal:   0 4px 18px rgba(0,201,173,.30);

  --transition: all .22s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:15px; scroll-behavior:smooth }
body {
  font-family:'DM Sans',sans-serif;
  background:var(--bg);
  color:var(--tx-main);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5 {
  font-family:'Playfair Display',serif;
  color:var(--tx-bright);
  line-height:1.25;
}
a { text-decoration:none; color:inherit }
ul { list-style:none }
img { max-width:100% }
button,input,select,textarea { font-family:'DM Sans',sans-serif }
button { cursor:pointer }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px }
::-webkit-scrollbar-track { background:var(--surf-1) }
::-webkit-scrollbar-thumb { background:var(--navy-500); border-radius:4px }
::-webkit-scrollbar-thumb:hover { background:var(--violet) }

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }
@keyframes fadeIn   { from { opacity:0 } to { opacity:1 } }
@keyframes spin     { to { transform:rotate(360deg) } }
@keyframes slideDown{ from { opacity:0; transform:translateY(-10px) } to { opacity:1; transform:none } }
@keyframes pulse    { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes countUp  { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* ── Background Canvas ─────────────────────────────────────── */
.bg-canvas {
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.bg-canvas::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 8% 18%,  rgba(123,47,255,.13) 0%, transparent 60%),
    radial-gradient(ellipse 55% 70% at 92% 82%,  rgba(0,201,173,.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 55% -5%,  rgba(240,165,0,.07) 0%, transparent 55%);
}
.bg-canvas::after {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(45deg,  rgba(123,47,255,.03) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(123,47,255,.03) 1px, transparent 1px);
  background-size:44px 44px;
}

/* ============================================================
   APP SHELL LAYOUT
   ============================================================ */
.app-shell {
  display:flex; min-height:100vh; position:relative; z-index:1;
  overflow-x:hidden; /* stop table content from pushing page wider than viewport */
}

/* ── Sidebar Overlay (mobile) ──────────────────────────────── */
.sb-overlay {
  position:fixed; inset:0; z-index:149;
  background:rgba(0,0,0,.3);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
  pointer-events:none;  /* invisible + unclickable when closed */
  transition:opacity .28s ease;
}
.sb-overlay.show {
  opacity:1;
  pointer-events:all;   /* clickable only when open */
}

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar {
  width:var(--sb-w);
  background:var(--surf-1);
  border-right:1px solid var(--bdr);
  position:fixed; top:0; left:0; height:100vh;
  display:flex; flex-direction:column;
  z-index:400; /* above overlay (199) and topbar (100) */
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
  will-change:transform; /* own GPU layer — prevents overlay bleed-through */
}

/* Brand */
.sb-brand {
  padding:18px 16px 14px;
  border-bottom:1px solid var(--bdr);
  display:flex; align-items:center; gap:11px;
  flex-shrink:0;
}
.sb-logo {
  width:42px; height:42px; flex-shrink:0; border-radius:var(--r);
  background:linear-gradient(135deg, var(--violet), var(--violet-mid));
  box-shadow:var(--sh-violet);
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
}
.sb-brand-text .b-name {
  font-family:'Playfair Display',serif;
  font-size:.84rem; font-weight:700; color:var(--tx-bright); line-height:1.2;
}
.sb-brand-text .b-tag {
  font-size:.64rem; color:var(--tx-muted); letter-spacing:.4px; margin-top:1px;
  text-transform:uppercase;
}

/* User chip */
.sb-user {
  padding:12px 16px;
  border-bottom:1px solid var(--bdr);
  display:flex; align-items:center; gap:10px;
  flex-shrink:0;
}
.sb-av {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--violet), var(--teal));
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff;
}
.sb-uname { display:block; font-size:.80rem; font-weight:600; color:var(--tx-bright) }
.sb-urole { font-size:.65rem; color:var(--tx-muted); text-transform:capitalize }

/* Nav */
.sb-nav { flex:1; padding:6px 0; overflow-y:auto }
.sb-section {
  font-size:.58rem; font-weight:700; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--tx-muted);
  padding:13px 18px 4px;
}
.sb-item { margin:2px 8px }
.sb-item a {
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-radius:var(--r);
  color:var(--tx-soft); font-size:.835rem; font-weight:500;
  transition:var(--transition);
}
.sb-item a .ic { width:20px; text-align:center; font-size:13px; flex-shrink:0 }
.sb-item a:hover { background:var(--surf-2); color:var(--tx-bright) }
.sb-item.active a {
  background:linear-gradient(135deg, var(--violet), var(--violet-mid));
  color:#fff; font-weight:600;
  box-shadow:0 3px 14px rgba(123,47,255,.38);
}

/* Footer */
.sb-foot {
  padding:8px 8px 12px;
  border-top:1px solid var(--bdr);
  flex-shrink:0;
}
.sb-foot a {
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-radius:var(--r);
  color:var(--tx-muted); font-size:.835rem;
  transition:var(--transition);
}
.sb-foot a:hover { background:var(--rose-glow); color:var(--rose) }
.sb-foot a .ic { width:20px; text-align:center; font-size:13px }

/* ── Main Wrapper ──────────────────────────────────────────── */
.main-wrap {
  margin-left:var(--sb-w);
  flex:1; display:flex; flex-direction:column;
  min-height:100vh; position:relative; z-index:1;
  min-width:0; /* prevent flex child from overflowing parent width */
  width:0;    /* force flex child to shrink; flex:1 still expands it correctly */
}

/* ── Topbar ────────────────────────────────────────────────── */
.topbar {
  height:var(--tb-h);
  background:var(--surf-1);
  border-bottom:1px solid var(--bdr);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px;
  position:sticky; top:0; z-index:100;
  flex-shrink:0;
}
.tb-left { display:flex; align-items:center; gap:12px }
.tb-title { font-size:1rem; font-weight:600; color:var(--tx-bright); font-family:'DM Sans',sans-serif }
.tb-breadcrumb {
  font-size:.70rem; color:var(--tx-muted);
  display:flex; align-items:center; gap:4px; margin-top:1px;
}
.tb-right { display:flex; align-items:center; gap:7px }

.ic-btn {
  width:34px; height:34px; border-radius:var(--r);
  background:var(--surf-2); border:1px solid var(--bdr);
  display:flex; align-items:center; justify-content:center;
  color:var(--tx-soft); font-size:13px; cursor:pointer;
  transition:var(--transition); position:relative;
}
.ic-btn:hover { background:var(--violet); color:#fff; border-color:var(--violet) }
.notif-pip {
  position:absolute; top:6px; right:6px;
  width:7px; height:7px; border-radius:50%;
  background:var(--rose); border:2px solid var(--surf-1);
}
.tb-clock {
  font-size:.72rem; font-weight:600; color:var(--tx-soft);
  padding:5px 10px; background:var(--surf-2);
  border:1px solid var(--bdr); border-radius:var(--r);
  letter-spacing:.3px;
}

/* Mobile menu button — hidden on desktop */
.menu-btn { display:none }

/* ── Page Content ──────────────────────────────────────────── */
.page { padding:22px; flex:1; overflow-x:hidden; min-width:0; }
.page-hdr { margin-bottom:20px }
.page-hdr h2 { font-size:1.38rem; margin-bottom:3px }
.page-hdr p  { color:var(--tx-soft); font-size:.84rem }
.page-hdr-row {
  display:flex; align-items:center;
  justify-content:space-between; gap:12px; flex-wrap:wrap;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background:var(--surf-1);
  border:1px solid var(--bdr);
  border-radius:var(--r-lg);
  /* overflow:hidden removed — was clipping .tbl-wrap horizontal scroll on mobile */
  animation:fadeUp .35s ease both;
}
/* Header/footer still get clipping for their border-radius corners */
.card-hdr { border-radius:var(--r-lg) var(--r-lg) 0 0 }
.card-foot { border-radius:0 0 var(--r-lg) var(--r-lg) }
.card-hdr {
  padding:14px 18px 12px;
  border-bottom:1px solid var(--bdr);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.card-hdr h3 {
  font-family:'DM Sans',sans-serif;
  font-size:.90rem; font-weight:700; color:var(--tx-bright);
  display:flex; align-items:center; gap:7px;
}
.card-body { padding:18px }
.card-foot {
  padding:12px 18px;
  border-top:1px solid var(--bdr);
  background:var(--surf-2);
}

/* ── Stat Cards ────────────────────────────────────────────── */
.stats-row {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(175px,1fr));
  gap:13px; margin-bottom:20px;
}
.stat-card {
  background:var(--surf-1);
  border:1px solid var(--bdr);
  border-radius:var(--r-lg);
  padding:16px 14px;
  display:flex; align-items:flex-start; gap:12px;
  transition:var(--transition);
  position:relative; overflow:hidden;
  animation:fadeUp .35s ease both;
}
.stat-card:nth-child(1){animation-delay:.05s}
.stat-card:nth-child(2){animation-delay:.10s}
.stat-card:nth-child(3){animation-delay:.15s}
.stat-card:nth-child(4){animation-delay:.20s}
.stat-card:nth-child(5){animation-delay:.25s}
.stat-card:nth-child(6){animation-delay:.30s}

.stat-card::before {
  content:''; position:absolute; top:0; left:0;
  width:3px; height:100%; background:var(--violet);
}
.stat-card.gold::before { background:var(--gold) }
.stat-card.teal::before { background:var(--teal) }
.stat-card.rose::before { background:var(--rose) }
.stat-card:hover { transform:translateY(-2px); border-color:var(--bdr-mid); box-shadow:var(--sh) }

.stat-ico {
  width:42px; height:42px; border-radius:var(--r); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.stat-ico.v { background:var(--violet-soft); color:var(--violet-light) }
.stat-ico.g { background:var(--gold-soft);   color:var(--gold-light) }
.stat-ico.t { background:var(--teal-glow);   color:var(--teal) }
.stat-ico.r { background:var(--rose-glow);   color:var(--rose) }

.stat-val  { font-size:1.65rem; font-weight:700; color:var(--tx-bright); line-height:1 }
.stat-lbl  { font-size:.70rem; color:var(--tx-soft); margin-top:4px; font-weight:500 }
.stat-note { font-size:.66rem; font-weight:600; margin-top:5px; display:flex; align-items:center; gap:3px }
.stat-note.up   { color:var(--teal) }
.stat-note.down { color:var(--rose) }

/* ── Two-col dashboard layout ──────────────────────────────── */
.dash-2 {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(340px,1fr));
  gap:16px;
}

/* ── Section label ─────────────────────────────────────────── */
.sec-lbl {
  font-size:.60rem; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--tx-muted);
  margin-bottom:10px; margin-top:4px;
}

/* ============================================================
   TOGGLE SWITCHES
   ============================================================ */
.toggle-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:10px;
}
.tog-card {
  background:var(--surf-2); border:1px solid var(--bdr);
  border-radius:var(--r); padding:13px 15px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  transition:var(--transition);
}
.tog-card:hover { border-color:var(--bdr-mid); background:var(--surf-3) }
.tog-info  { display:flex; align-items:center; gap:10px; min-width:0 }
.tog-ico   {
  width:36px; height:36px; border-radius:var(--r); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:16px;
  background:var(--violet-soft);
}
.tog-title { font-size:.83rem; font-weight:600; color:var(--tx-bright); line-height:1.2 }
.tog-desc  { font-size:.68rem; color:var(--tx-muted); margin-top:2px }

/* Switch */
.sw { position:relative; display:inline-block; width:46px; height:24px; flex-shrink:0 }
.sw input { opacity:0; width:0; height:0 }
.sw-track {
  position:absolute; cursor:pointer; inset:0;
  background:var(--surf-4); border-radius:24px;
  border:1px solid var(--bdr-mid);
  transition:var(--transition);
}
.sw-track::before {
  content:''; position:absolute;
  width:16px; height:16px; left:3px; top:3px;
  background:var(--tx-muted); border-radius:50%;
  transition:var(--transition);
}
.sw input:checked + .sw-track {
  background:linear-gradient(135deg, var(--teal-dark), var(--teal));
  border-color:var(--teal);
}
.sw input:checked + .sw-track::before { transform:translateX(22px); background:#fff }

/* ============================================================
   FORMS
   ============================================================ */
.form-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(235px,1fr));
  gap:16px;
}
.fg { display:flex; flex-direction:column; gap:5px }
.fg.full { grid-column:1/-1 }
.fl { font-size:.76rem; font-weight:600; color:var(--tx-main); letter-spacing:.2px }
.req { color:var(--rose); margin-left:2px }

.fc {
  width:100%; padding:9px 11px;
  background:var(--surf-2); border:1.5px solid var(--bdr-mid);
  border-radius:var(--r); font-size:.845rem;
  color:var(--tx-bright); outline:none;
  transition:var(--transition);
}
.fc:focus { border-color:var(--violet); background:var(--surf-3); box-shadow:0 0 0 3px var(--violet-soft) }
.fc::placeholder { color:var(--tx-muted) }
.fc.err { border-color:var(--rose); box-shadow:0 0 0 3px var(--rose-glow) }

select.fc {
  cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%237C8DB5' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
  padding-right:30px;
}
select.fc option { background:var(--surf-2); color:var(--tx-bright) }
textarea.fc { resize:vertical; min-height:84px }

.fhint { font-size:.68rem; color:var(--tx-muted) }

.radio-row { display:flex; gap:8px; flex-wrap:wrap }
.radio-opt {
  display:flex; align-items:center; gap:7px;
  padding:8px 13px; border:1.5px solid var(--bdr-mid);
  border-radius:var(--r); cursor:pointer;
  font-size:.835rem; color:var(--tx-soft);
  transition:var(--transition);
}
.radio-opt:hover { border-color:var(--violet); color:var(--tx-bright) }
.radio-opt.sel {
  border-color:var(--violet);
  background:var(--violet-soft); color:var(--tx-bright); font-weight:500;
}
.radio-opt input { accent-color:var(--violet) }

/* Char count area */
.divider-line {
  font-size:.68rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--tx-muted); text-align:center; margin:18px 0;
  display:flex; align-items:center; gap:10px;
}
.divider-line::before,.divider-line::after {
  content:''; flex:1; height:1px; background:var(--bdr-mid);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px; padding:9px 17px;
  border-radius:var(--r); font-size:.835rem; font-weight:600;
  border:none; transition:var(--transition);
  white-space:nowrap; line-height:1; cursor:pointer;
}
.btn-sm  { padding:6px 11px; font-size:.76rem; gap:5px }
.btn-lg  { padding:11px 22px; font-size:.92rem }
.btn-w   { width:100% }

.btn-primary {
  background:linear-gradient(135deg, var(--violet), var(--violet-mid));
  color:#fff; box-shadow:var(--sh-violet);
}
.btn-primary:hover { filter:brightness(1.1); transform:translateY(-1px) }

.btn-gold {
  background:linear-gradient(135deg, var(--gold-deep), var(--gold));
  color:var(--navy-900); font-weight:700; box-shadow:var(--sh-gold);
}
.btn-gold:hover { filter:brightness(1.06); transform:translateY(-1px) }

.btn-teal {
  background:linear-gradient(135deg, var(--teal-dark), var(--teal));
  color:var(--navy-900); font-weight:700;
}
.btn-teal:hover { filter:brightness(1.06); transform:translateY(-1px) }

.btn-danger {
  background:linear-gradient(135deg, #c0284c, var(--rose));
  color:#fff;
}
.btn-ghost {
  background:transparent; border:1.5px solid var(--bdr-mid);
  color:var(--tx-soft);
}
.btn-ghost:hover { border-color:var(--violet); color:var(--violet-light); background:var(--violet-soft) }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none!important; filter:none!important }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:20px;
  font-size:.67rem; font-weight:700; letter-spacing:.2px; white-space:nowrap;
}
.bdg-dot { width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0 }

.b-guest   { background:var(--gold-soft);   color:var(--gold-light) }
.b-member  { background:var(--violet-soft); color:var(--violet-light) }
.b-ok      { background:var(--teal-glow);   color:var(--teal) }
.b-off     { background:var(--surf-3);      color:var(--tx-muted) }
.b-danger  { background:var(--rose-glow);   color:var(--rose) }
.b-admin   { background:var(--violet-soft); color:var(--violet-light) }
.b-comm    { background:var(--gold-soft);   color:var(--gold-light) }
.b-email   { background:var(--violet-soft); color:var(--violet-light) }
.b-sms     { background:var(--teal-glow);   color:var(--teal) }
.b-gold    { background:var(--gold-soft);   color:var(--gold-light) }
.b-live    { background:var(--teal-glow);   color:var(--teal) }

/* ============================================================
   TABLES
   ============================================================ */
/* ── Table wrapper — isolated horizontal scroll ── */
.tbl-wrap {
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch; /* smooth on iOS */
  width:100%;
  /* contain:inline-size keeps scroll box from leaking outside card */
  display:block;
}
/* Give tables a minimum width so they scroll rather than wrap text */
.tbl-wrap table {
  min-width:540px;
}
table { width:100%; border-collapse:collapse; font-size:.835rem }
thead th {
  padding:10px 13px; text-align:left;
  font-size:.63rem; font-weight:700; letter-spacing:.7px;
  text-transform:uppercase; color:var(--tx-muted);
  background:var(--surf-2); border-bottom:1px solid var(--bdr);
  white-space:nowrap;
}
tbody td {
  padding:11px 13px; border-bottom:1px solid var(--bdr);
  color:var(--tx-main); vertical-align:middle;
}
tbody tr:last-child td { border-bottom:none }
tbody tr { transition:var(--transition) }
tbody tr:hover { background:var(--surf-2) }

.td-person { display:flex; align-items:center; gap:9px }
.td-av {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--violet), var(--teal));
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff;
}
.td-nm  { font-weight:600; color:var(--tx-bright); font-size:.835rem; white-space:nowrap }
.td-sub { font-size:.68rem; color:var(--tx-muted) }

/* Toolbar */
.tbl-bar {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 16px; border-bottom:1px solid var(--bdr);
  flex-wrap:wrap;
}
.search-box { position:relative; flex:1; min-width:160px; max-width:270px }
.search-box .si {
  position:absolute; left:9px; top:50%; transform:translateY(-50%);
  color:var(--tx-muted); font-size:11px; pointer-events:none;
}
.search-box input {
  width:100%; padding:7px 9px 7px 28px;
  background:var(--surf-2); border:1.5px solid var(--bdr-mid);
  border-radius:var(--r); font-size:.815rem; color:var(--tx-bright); outline:none;
  transition:var(--transition);
}
.search-box input:focus { border-color:var(--violet); background:var(--surf-3) }
.search-box input::placeholder { color:var(--tx-muted) }
.filter-row { display:flex; align-items:center; gap:7px; flex-wrap:wrap }

/* Action buttons */
.act-row { display:flex; align-items:center; gap:4px }
.act-btn {
  width:27px; height:27px; border-radius:7px;
  border:1px solid var(--bdr); background:var(--surf-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--tx-soft); cursor:pointer;
  transition:var(--transition); text-decoration:none;
}
.act-btn:hover        { background:var(--violet); color:#fff; border-color:var(--violet) }
.act-btn.del:hover    { background:var(--rose); border-color:var(--rose) }
.act-btn.resend:hover { background:var(--teal); color:var(--navy-900); border-color:var(--teal) }

/* Pagination */
.pager {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 16px; font-size:.74rem; color:var(--tx-muted);
}
.pg-btns { display:flex; gap:4px }
.pg-btn {
  width:28px; height:28px; border-radius:7px;
  border:1px solid var(--bdr); background:var(--surf-2);
  display:flex; align-items:center; justify-content:center;
  font-size:.74rem; color:var(--tx-soft); cursor:pointer;
  transition:var(--transition);
}
.pg-btn:hover  { border-color:var(--violet); color:var(--violet-light) }
.pg-btn.active { background:var(--violet); border-color:var(--violet); color:#fff; font-weight:700 }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; border-radius:var(--r);
  font-size:.82rem; line-height:1.55;
}
.alert-info    { background:var(--violet-soft); border:1px solid var(--violet-glow) }
.alert-success { background:var(--teal-glow);   border:1px solid rgba(0,201,173,.3) }
.alert-warning { background:var(--gold-soft);   border:1px solid var(--gold-glow) }
.alert-danger  { background:var(--rose-glow);   border:1px solid rgba(255,77,109,.3) }

.a-ico { font-size:15px; flex-shrink:0; margin-top:1px; color:var(--violet-light) }
.alert-success .a-ico { color:var(--teal) }
.alert-warning .a-ico { color:var(--gold) }
.alert-danger  .a-ico { color:var(--rose) }
.a-body { flex:1 }
.a-title { font-weight:700; color:var(--tx-bright); margin-bottom:3px; font-size:.83rem }

/* ============================================================
   MODALS
   ============================================================ */
.modal-ov {
  display:none;
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:20px;
}
.modal-ov.open { display:flex; animation:fadeIn .2s ease }
.modal {
  background:var(--surf-1); border:1px solid var(--bdr-mid);
  border-radius:var(--r-xl); width:100%; max-width:460px;
  animation:fadeUp .25s ease;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
}
.modal-hdr {
  padding:16px 20px 14px;
  border-bottom:1px solid var(--bdr);
  display:flex; align-items:center; justify-content:space-between;
}
.modal-hdr h3 {
  font-family:'DM Sans',sans-serif;
  font-size:.95rem; font-weight:700; color:var(--tx-bright);
}
.modal-cls {
  width:28px; height:28px; border-radius:7px;
  background:var(--surf-2); border:1px solid var(--bdr);
  color:var(--tx-muted); font-size:17px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:var(--transition);
}
.modal-cls:hover { background:var(--rose-glow); color:var(--rose) }
.modal-body { padding:18px 20px }
.modal-ftr {
  padding:13px 20px 16px;
  border-top:1px solid var(--bdr);
  display:flex; gap:8px; justify-content:flex-end;
}

/* ============================================================
   LOGS
   ============================================================ */
.log-list { display:flex; flex-direction:column; gap:0 }
.log-row {
  display:flex; align-items:flex-start; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--bdr);
}
.log-row:last-child { border-bottom:none }
.log-pip {
  width:8px; height:8px; border-radius:50%;
  background:var(--violet-light); flex-shrink:0; margin-top:5px;
}
.log-pip.email { background:var(--violet-light) }
.log-pip.sms   { background:var(--teal) }
.log-pip.fail  { background:var(--rose) }
.log-title { font-size:.835rem; font-weight:500; color:var(--tx-bright) }
.log-meta  {
  display:flex; align-items:center; gap:8px;
  margin-top:3px; font-size:.68rem; color:var(--tx-muted); flex-wrap:wrap;
}

/* ============================================================
   REPORTS — Progress bars
   ============================================================ */
.rbar-row {
  display:flex; align-items:center; gap:10px;
  margin-bottom:12px;
}
.rbar-row:last-child { margin-bottom:0 }
.rbar-lbl { font-size:.78rem; color:var(--tx-soft); min-width:100px; flex-shrink:0 }
.rbar-track {
  flex:1; height:6px; background:var(--surf-3);
  border-radius:3px; overflow:hidden;
}
.rbar-fill { height:100%; border-radius:3px; transition:width .8s ease }
.rbar-val  { font-size:.78rem; font-weight:700; color:var(--tx-bright); min-width:36px; text-align:right }

/* ============================================================
   TEMPLATE EDITOR
   ============================================================ */
.tmpl-tabs {
  display:flex; gap:6px; flex-wrap:wrap;
  margin-bottom:18px; padding-bottom:16px;
  border-bottom:1px solid var(--bdr);
}
.ttab {
  padding:6px 13px; border-radius:20px;
  border:1.5px solid var(--bdr-mid);
  background:transparent; color:var(--tx-soft);
  font-size:.775rem; font-weight:600; cursor:pointer;
  transition:var(--transition);
}
.ttab:hover  { border-color:var(--violet); color:var(--violet-light) }
.ttab.active { background:var(--violet); border-color:var(--violet); color:#fff }
.t-panel.hidden { display:none }

/* Placeholder tags */
.ph-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px }
.ph-tag {
  padding:4px 10px; border-radius:20px;
  background:var(--surf-3); border:1px solid var(--bdr-mid);
  font-size:.72rem; font-weight:600; color:var(--violet-light);
  cursor:pointer; transition:var(--transition); font-family:monospace;
}
.ph-tag:hover { background:var(--violet-soft); border-color:var(--violet) }

/* ============================================================
   SETTINGS — QR Block
   ============================================================ */
.qr-block {
  display:flex; flex-direction:column; align-items:center;
  gap:12px; padding:8px 0;
}
.qr-frame {
  width:176px; height:176px; border-radius:var(--r-lg);
  overflow:hidden; border:2px solid var(--bdr-mid);
  background:var(--navy-900);
  display:flex; align-items:center; justify-content:center;
}
.qr-frame img { width:168px; height:168px; display:block }
.qr-url {
  font-size:.72rem; font-family:monospace;
  color:var(--violet-light); background:var(--surf-2);
  border:1px solid var(--bdr-mid); border-radius:7px;
  padding:6px 12px; word-break:break-all; text-align:center;
}

/* ============================================================
   PUBLIC PAGES  (register / success)
   ============================================================ */
.pub-page {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:20px; position:relative; z-index:1;
}
.pub-card {
  background:var(--surf-1);
  border:1px solid var(--bdr-mid);
  border-radius:var(--r-xl);
  padding:36px 32px;
  width:100%; max-width:600px;
  box-shadow:var(--sh);
  animation:fadeUp .45s ease both;
}
.pub-card h1 {
  font-size:1.55rem; text-align:center; margin-bottom:6px;
}
.pub-card .sub {
  text-align:center; font-size:.875rem; color:var(--tx-soft);
  margin-bottom:22px; line-height:1.7;
}
.pub-logo-ring {
  width:68px; height:68px; border-radius:50%;
  background:linear-gradient(135deg, var(--violet), var(--teal));
  display:flex; align-items:center; justify-content:center;
  font-size:30px; margin:0 auto 16px;
  box-shadow:var(--sh-violet);
}

/* Check list (success page) */
.check-list {
  list-style:none; padding:0; margin:22px 0;
  display:flex; flex-direction:column; gap:10px;
}
.check-list li {
  display:flex; align-items:center; gap:9px;
  font-size:.855rem; color:var(--tx-main);
}
.check-list li i { color:var(--teal); flex-shrink:0 }

/* Spin ring (success page) */
.spin-ring {
  width:72px; height:72px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold-deep), var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-size:32px; margin:0 auto 18px;
  box-shadow:var(--sh-gold);
  animation:pulse 2s ease infinite;
}

/* ============================================================
   LOGIN PAGES
   ============================================================ */
.login-shell {
  min-height:100vh;
  display:flex; position:relative; z-index:1;
}

/* Left branding panel */
.login-panel {
  width:420px; flex-shrink:0;
  background:linear-gradient(160deg, var(--navy-700) 0%, var(--navy-800) 100%);
  border-right:1px solid var(--bdr);
  display:flex; align-items:center; justify-content:center;
  padding:40px 36px;
}
.login-brand { text-align:center }
.lbrand-ico {
  width:72px; height:72px; border-radius:var(--r-lg);
  background:linear-gradient(135deg, var(--violet), var(--violet-mid));
  box-shadow:var(--sh-violet);
  display:flex; align-items:center; justify-content:center;
  font-size:32px; margin:0 auto 18px;
  animation:pulse 3s ease infinite;
}
.login-brand h1 { font-size:1.65rem; margin-bottom:10px }
.login-brand p  { font-size:.84rem; color:var(--tx-soft); line-height:1.7; margin-bottom:30px }

/* Feature list */
.lfeats { display:flex; flex-direction:column; gap:10px; text-align:left; margin-top:4px }
.lfeat  { display:flex; align-items:center; gap:10px }
.fi { font-size:16px; width:28px; flex-shrink:0; text-align:center }
.ft { font-size:.80rem; color:var(--tx-soft); line-height:1.45 }

/* Right form panel */
.login-form-side {
  flex:1; display:flex; align-items:center; justify-content:center; padding:32px 20px;
}
.login-box {
  width:100%; max-width:400px;
  animation:fadeUp .4s ease both;
}
.login-box h2 { font-size:1.5rem; margin-bottom:6px }
.ls { color:var(--tx-soft); font-size:.855rem; margin-bottom:24px }
.login-alt { font-size:.78rem; color:var(--tx-muted) }
.login-alt a { color:var(--violet-light); font-weight:600 }
.login-alt a:hover { color:var(--gold) }

/* Password toggle */
.pw-wrap { position:relative }
.pw-wrap .fc { padding-right:38px }
.pw-eye {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--tx-muted); font-size:13px; cursor:pointer;
  transition:var(--transition); padding:4px;
}
.pw-eye:hover { color:var(--violet-light) }

/* ============================================================
   UTILITY
   ============================================================ */
.flex          { display:flex }
.items-c       { align-items:center }
.gap-2         { gap:8px }
.gap-3         { gap:12px }
.mt-3          { margin-top:12px }
.mt-4          { margin-top:18px }
.mb-4          { margin-bottom:16px }
.mb-6          { margin-bottom:22px }
.tc            { text-align:center }
.fw7           { font-weight:700 }
.text-sm       { font-size:.80rem }
.text-soft     { color:var(--tx-soft) }

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

/* Tablet */
@media (max-width: 900px) {
  .login-panel { display:none }
  .login-form-side { padding:28px 20px }
  .pub-card { padding:28px 22px }
  .stats-row { grid-template-columns:repeat(2,1fr) }
  .dash-2 { grid-template-columns:1fr }
  .toggle-grid { grid-template-columns:1fr }
}

/* Mobile */
@media (max-width: 768px) {
  /* Sidebar off-canvas */
  .sidebar { transform:translateX(-100%) }
  .sidebar.open { transform:translateX(0); box-shadow:4px 0 32px rgba(0,0,0,.5) }

  /* Show hamburger */
  .menu-btn { display:flex !important }

  /* Main shifts right */
  .main-wrap { margin-left:0 }

  /* Topbar */
  .topbar { padding:0 14px }
  .tb-clock { display:none }
  .tb-right .ic-btn:not(.menu-btn):nth-child(n+2) { display:none }
  .tb-right .ic-btn:last-child { display:flex } /* keep profile */

  /* Page */
  .page { padding:14px }
  .page-hdr h2 { font-size:1.18rem }
  .page-hdr-row { flex-direction:column; align-items:flex-start; gap:10px }
  .page-hdr-row .btn { width:100% }

  /* Stats */
  .stats-row { grid-template-columns:repeat(2,1fr); gap:10px }
  .stat-val { font-size:1.38rem }

  /* Cards */
  .card-body { padding:14px }
  .card-hdr  { padding:12px 14px }

  /* Tables — horizontal scroll */
  .tbl-bar { flex-direction:column; align-items:stretch; gap:8px }
  .search-box { max-width:100% }
  .filter-row { flex-wrap:wrap }

  /* Table hide non-essential cols on mobile */
  .hide-mob { display:none !important }

  /* Form grid single col */
  .form-grid { grid-template-columns:1fr }
  .fg.full { grid-column:1 }

  /* Modals full-width */
  .modal { max-width:100% }

  /* Login */
  .login-box { max-width:100% }

  /* Pub card */
  .pub-card { padding:22px 16px }

  /* Template tabs scroll */
  .tmpl-tabs { flex-wrap:nowrap; overflow-x:auto; padding-bottom:10px }
  .tmpl-tabs::-webkit-scrollbar { height:3px }

  /* Toggle grid */
  .toggle-grid { grid-template-columns:1fr }

  /* Dash grid */
  .dash-2 { grid-template-columns:1fr }
}

/* Very small phones */
@media (max-width: 380px) {
  .stats-row { grid-template-columns:1fr }
  .radio-row { flex-direction:column }
  .tmpl-tabs { gap:4px }
  .ttab { font-size:.70rem; padding:5px 10px }
}

/* ── MOBILE (Final) ─────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { transform:translateX(-100%); width:82vw !important; max-width:290px !important; background:#0e1535 !important; border-right:none !important; box-shadow:none !important; z-index:500 !important; }
  .sb-brand { border-bottom:1px solid rgba(123,47,255,.4) !important; }
  .sb-logo { box-shadow:0 0 24px rgba(123,47,255,.8) !important; }
  .sb-brand-text .b-name { color:#fff !important; font-weight:700 !important; }
  .sb-brand-text .b-tag { color:#8899cc !important; }
  .sb-user { border-bottom:1px solid rgba(123,47,255,.25) !important; }
  .sb-uname { color:#fff !important; font-weight:700 !important; }
  .sb-urole { color:#b0c4e8 !important; }
  .sb-section { color:#7090c0 !important; letter-spacing:1.5px !important; font-weight:700 !important; }
  .sb-item { margin:3px 8px !important; }
  .sb-item a { color:#e8eeff !important; font-size:.95rem !important; padding:13px 14px !important; min-height:48px !important; display:flex !important; align-items:center !important; gap:12px !important; pointer-events:all !important; position:relative !important; z-index:501 !important; }
  .sb-item a:hover { background:rgba(123,47,255,.35) !important; color:#fff !important; }
  .sb-item.active a { background:linear-gradient(135deg,#7B2FFF,#9B5FFF) !important; color:#fff !important; box-shadow:0 3px 16px rgba(123,47,255,.6) !important; }
  .sb-foot { border-top:1px solid rgba(123,47,255,.25) !important; }
  .sb-foot a { color:#e8eeff !important; pointer-events:all !important; }
  .sb-foot a:hover { background:rgba(255,77,109,.2) !important; color:#FF4D6D !important; }
  .sb-overlay { display:none !important; }
  .menu-btn { display:flex !important; }
  .main-wrap { margin-left:0 !important; }
  .topbar { padding:0 14px !important; }
  .tb-clock { display:none !important; }
  .page { padding:12px 10px !important; }
  .page-hdr h2 { font-size:1.1rem !important; }
  .page-hdr-row { flex-direction:column !important; align-items:flex-start !important; gap:8px !important; }
  .page-hdr-row .btn { width:100% !important; }
  .stats-row { grid-template-columns:1fr 1fr !important; gap:10px !important; }
  .stat-val { font-size:1.3rem !important; }
  .stat-card { padding:12px 10px !important; }
  .dash-2 { grid-template-columns:1fr !important; }
  .toggle-grid { grid-template-columns:1fr !important; }
  .form-grid { grid-template-columns:1fr !important; }
  .fg.full { grid-column:1 !important; }
  .add-contact-grid { grid-template-columns:1fr !important; }
  .card { border-radius:10px !important; }
  .card-hdr { padding:12px 14px !important; flex-wrap:wrap !important; gap:6px !important; }
  .card-body { padding:12px !important; }
  .card-foot { padding:10px 14px !important; }
  .modal { max-width:100% !important; }
  .tbl-wrap { overflow-x:auto !important; width:100% !important; -webkit-overflow-scrolling:touch !important; }
  .tbl-wrap table { table-layout:auto !important; width:100% !important; min-width:unset !important; }
  .tbl-wrap table th { text-align:center !important; font-size:.6rem !important; font-weight:700 !important; text-transform:uppercase !important; padding:10px 3px !important; white-space:normal !important; }
  .tbl-wrap table td { text-align:center !important; font-size:.72rem !important; padding:10px 3px !important; vertical-align:middle !important; word-break:break-word !important; }
  .tbl-wrap table th:first-child, .tbl-wrap table td:first-child { text-align:left !important; padding-left:8px !important; }
  .td-person { justify-content:flex-start !important; gap:5px !important; }
  .td-av { width:26px !important; height:26px !important; font-size:.65rem !important; }
  .td-nm { font-size:.72rem !important; white-space:normal !important; }
  .td-sub { font-size:.62rem !important; }
  .badge { font-size:.58rem !important; padding:2px 5px !important; }
  .act-row { justify-content:center !important; }
  .hide-mob { display:none !important; }
  .tbl-bar { flex-direction:column !important; gap:8px !important; padding:10px 12px !important; }
  .search-box { max-width:100% !important; }
  .filter-row { flex-wrap:wrap !important; gap:6px !important; }
  .filter-row select { flex:1 !important; min-width:90px !important; }
  .pager { flex-wrap:wrap !important; justify-content:center !important; gap:6px !important; }
  .log-row { flex-wrap:nowrap !important; gap:8px !important; padding:10px 0 !important; }
  .log-title { font-size:.75rem !important; }
  .log-meta { flex-wrap:wrap !important; gap:4px !important; font-size:.64rem !important; }
  .pub-card { padding:22px 16px !important; }
  .login-box { max-width:100% !important; }
  .tmpl-tabs { flex-wrap:nowrap !important; overflow-x:auto !important; }
}

/* ── SIDEBAR DEFINITIVE FIX ─────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    height: 100dvh !important;
    width: 78vw !important;
    max-width: 285px !important;
    min-width: 230px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #0e1535 !important;
    z-index: 700 !important;
    transform: translateX(-100%) !important;
    transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
    will-change: transform !important;
  }
  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 8px 0 40px rgba(0,0,0,.7) !important;
  }
  .sb-brand {
    flex-shrink: 0 !important;
  }
  .sb-user {
    flex-shrink: 0 !important;
  }
  .sb-nav {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .sb-foot {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    min-height: 60px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 8px 8px 20px !important;
    background: #0e1535 !important;
    border-top: 1px solid rgba(123,47,255,.35) !important;
    position: relative !important;
    z-index: 1 !important;
  }
  .sb-foot a {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: all !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 12px !important;
    min-height: 44px !important;
    color: #FF4D6D !important;
    font-size: .88rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
  }
  .sb-foot a:active {
    background: rgba(255,77,109,.15) !important;
  }
}