@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;
}

/* 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;
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; user-select:none;
}
.sb-section::after { content:'▾'; font-size:.72rem; opacity:.7; }
.sb-section.collapsed::after { transform:rotate(-90deg); }
.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 }

.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-left { flex:1; display:flex; align-items:center; gap:10px }
.tb-right { flex-direction: row !important; display:flex; align-items:center; gap:7px; margin-left:auto }

.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;
  background:var(--rose,#f87171); color:#fff;
  border-radius:10px; min-width:16px; height:16px;
  padding:0 4px;
  display:none;
  align-items:center; justify-content:center;
  font-size:9px; font-weight:700; line-height:1;
  border:1.5px solid var(--navy-800,#0f172a);
  font-family:inherit;
}
.notif-pip:not(:empty) { display:flex; }

.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-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-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-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 }

.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);
}

.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 }

.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) }

/* ── 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 }

.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 }

.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;
}

.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;
}

.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 }

.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) }

.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;
}

.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-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) }

.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) }

/* 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 }

  /* mobile topbar: show bell + logout, hide everything else */
  /* .tb-right .ic-btn — visibility managed below */
  .tb-right .mob-show { display:flex !important }
  .tb-badge-sa { display:none }
  /* all topbar buttons visible on mobile */

  /* 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 }
}

/* =================================================================
   R70 DEFINITIVE LAYOUT — sole source of truth
   Strategy: mobile-first (display:block), desktop LAST (display:grid)
   Both use !important so source order always wins.
   ================================================================= */

/* ── Base resets ── */
html, body { margin: 0; padding: 0; }

/* ── App-shell: default flex (mobile will override to block) ── */
.app-shell {
  display:grid!important;
  position: relative !important;
  min-height: 100vh !important;
}

/* ── Sidebar defaults ── */
.sidebar {
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  width: 240px !important;
  background: var(--surf-1) !important;
  border-right: 1px solid var(--bdr-faint) !important;
  overflow-y: auto !important;
  z-index: 100 !important;
}

/* ── Main area ── */
.main-wrap {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  overflow-x:clip !important;
}

/* ── Topbar ── */
.topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 22px !important;
  min-height: 60px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 400 !important;
  flex-shrink: 0 !important;
  background: var(--surf-1) !important;
  border-bottom: 1px solid var(--bdr-faint) !important;
}

/* ── Page ── */
.page {
  flex: 1 !important;
  padding: 22px !important;
  overflow-x: hidden !important;
  min-width: 0 !important;
}

/* ── Overlay: hidden on desktop ── */
.sb-overlay, #sbOverlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.55) !important;
  z-index: 699 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.24s ease !important;
  display: none !important;
}
.sb-overlay.open, #sbOverlay.open {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ── Hamburger: hidden on desktop ── */
.menu-btn {
  display: none !important;
}

/* ── Clock: visible on desktop ── */
.tb-clock, #liveClock {
  display: inline-block !important;
  font-family: monospace !important;
  font-size: .82rem !important;
  color: var(--tx-soft, #64748b) !important;
}

/* ── Stat grids ── */
.r71-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

/* ── Dash two-column layout ── */
.r71-dash, .r69-cols {
  display: grid !important;
  gap: 20px !important;
}
.r71-dash {
  grid-template-columns: 1fr 1fr !important;
}
.r69-cols {
  grid-template-columns: 1fr 320px !important;
  align-items: start !important;
}

/* =================================================================
   MOBILE ≤ 900px — sidebar slides over, full-width main
   ================================================================= */
@media (max-width: 900px) {
  .app-shell {
    display: block !important;
    position: relative !important;
  }
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: min(82vw, 280px) !important;
    transform: translateX(-110%) !important;
    transition: transform 0.27s cubic-bezier(.4,0,.2,1) !important;
    z-index: 800 !important;
  }
  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 6px 0 40px rgba(0,0,0,.65) !important;
  }
  .sb-overlay, #sbOverlay {
    display: block !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .sb-overlay.open, #sbOverlay.open {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .main-wrap {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
  }
  .tb-clock, #liveClock { display: none !important; }
  .topbar { padding: 0 14px !important; }
  .page   { padding: 14px !important; }
  .r71-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .r71-stats > *:nth-child(3) { grid-column: 1 / -1 !important; }
  .r71-dash  { grid-template-columns: 1fr !important; }
  .r69-cols  { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .r71-stats { grid-template-columns: 1fr !important; }
  .r71-stats > *:nth-child(3) { grid-column: auto !important; }
}

/* =================================================================
   DESKTOP ≥ 901px — sidebar fixed left, main fills rest
   THIS BLOCK IS LAST — source order wins over everything above
   ================================================================= */
@media (min-width: 901px) {
  .app-shell {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;
    min-height: 100vh !important;
    position: relative !important;
  }
  .sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    overflow-y: auto !important;
    transform: none !important;
    z-index: 10 !important;
  }
  .main-wrap {
    min-width: 0 !important;
    overflow-x:clip !important;
  }
  .menu-btn   { display: none !important; }
  .sb-overlay, #sbOverlay { display: none !important; }
  .tb-clock, #liveClock { display: inline-block !important; }
}
/* ── END R70 ── */

/* R84: Sidebar mobile full-height + scroll fix */
@media (max-width: 900px) {
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -260px !important;
    width: 240px !important;
    height: 100dvh !important;
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 300 !important;
    transition: left .25s ease !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: env(safe-area-inset-bottom, 20px) !important;
  }
  .sidebar.open {
    left: 0 !important;
  }
  .sb-nav {
    flex: 1 !important;
    overflow-y: auto !important;
  }
  .sb-foot {
    flex-shrink: 0 !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }
  .sb-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.55) !important;
    z-index: 299 !important;
    display: none !important;
  }
  .sb-overlay.open {
    display: block !important;
  }
  .main-wrap {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* R84: c-btn.msg clickable fix */
.c-btn.msg, a.c-btn.msg {
  pointer-events: auto !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ═══════════════════════════════════════════════════════════
   R91 DEFINITIVE LAYOUT — single source of truth
   ═══════════════════════════════════════════════════════════ */

/* Desktop (>900px): sidebar always visible */
@media (min-width: 901px) {
  .app-shell {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;
    min-height: 100vh !important;
  }
  .sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    z-index: 100 !important;
    transform: none !important;
    left: auto !important;
  }
  .sb-overlay { display: none !important; }
  .menu-btn   { display: none !important; }
  .main-wrap  { min-width: 0 !important; overflow-x:clip !important; }
}

/* Mobile (<=900px): sidebar slides in, logout never cut */
@media (max-width: 900px) {
  .app-shell {
    display: block !important;
    position: relative !important;
  }
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(80vw, 260px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 500 !important;
    transform: translateX(-110%) !important;
    transition: transform 0.27s cubic-bezier(.4,0,.2,1) !important;
    background: var(--surf-1) !important;
  }
  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 40px rgba(0,0,0,.6) !important;
  }
  .sb-nav {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .sb-foot {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid var(--bdr-faint) !important;
  }
  .sb-overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.55) !important;
    z-index: 499 !important;
  }
  .sb-overlay.open { display: block !important; }
  .main-wrap {
    margin-left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Contact action buttons always clickable */
a.c-btn, .c-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}
.c-acts, .ct-actions {
  position: relative !important;
  z-index: 5 !important;
  flex-shrink: 0 !important;
}
/* ═══ END R91 ═══ */


/* R108 START */

/* Superadmin stat grid — mobile responsive */
.sa-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}
@media (max-width: 900px) {
  .sa-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 480px) {
  .sa-stats { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
}

/* Reports — Team Performance + Message Breakdown tables */
.rpt-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
}
.rpt-table {
  width: 100% !important;
  min-width: 340px !important;
  border-collapse: collapse !important;
}
.rpt-table th {
  font-size: .70rem !important;
  font-weight: 700 !important;
  color: var(--tx-muted, #64748b) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  padding: 8px 12px !important;
  border-bottom: 2px solid var(--bdr-faint, #1e2a45) !important;
  white-space: nowrap !important;
  text-align: left !important;
}
.rpt-table td {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--bdr-faint, #1e2a45) !important;
  vertical-align: middle !important;
  font-size: .84rem !important;
}
.rpt-table tr:last-child td { border-bottom: none !important; }
.rpt-table tr:hover td { background: rgba(255,255,255,.025) !important; }

/* Logs table responsive */
.log-tbl-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.log-tbl { width: 100% !important; border-collapse: collapse !important; min-width: 500px !important; }
.log-tbl th {
  font-size: .70rem !important; font-weight: 700 !important;
  color: var(--tx-muted, #64748b) !important; text-transform: uppercase !important;
  padding: 8px 12px !important; border-bottom: 2px solid var(--bdr-faint, #1e2a45) !important;
  white-space: nowrap !important; text-align: left !important;
}
.log-tbl td {
  padding: 9px 12px !important; border-bottom: 1px solid var(--bdr-faint, #1e2a45) !important;
  font-size: .83rem !important; vertical-align: middle !important;
}
.log-tbl tr:last-child td { border-bottom: none !important; }
.log-tbl tr:hover td { background: rgba(255,255,255,.025) !important; }
@media (max-width: 640px) { .hide-mob { display: none !important; } }

/* Rename modal */
.rename-modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.rename-modal-bg.open { display: flex !important; }
.rename-modal {
  background: var(--surf-1, #1a1d2e);
  border: 1px solid var(--bdr-mid, #2a2d3e);
  border-radius: 14px;
  padding: 28px 24px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
}

/* R108 END */


/* ╔══════════════════════════════════════════════════════════╗
   ║  R110 FINAL — TOPBAR STICKY + SIDEBAR (wins everything) ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Desktop: sidebar grid */
@media (min-width: 901px) {
  .app-shell {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;
    min-height: 100vh !important;
    align-items: start !important;
  }
  .sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
    z-index: 50 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .menu-btn { display: none !important; }
  .sb-overlay, #sbOverlay { display: none !important; pointer-events: none !important; }
  .topbar { padding: 0 22px !important; }
}

/* Mobile: sidebar slides in from left */
@media (max-width: 900px) {
  .app-shell { display: block !important; position: relative !important; }
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: 82vw !important;
    max-width: 280px !important;
    transform: translateX(-110%) !important;
    transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
    z-index: 700 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 40px rgba(0,0,0,.6) !important;
  }
  .sb-overlay, #sbOverlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    z-index: 699 !important;
    background: rgba(0,0,0,.55) !important;
    pointer-events: none !important;
  }
  .sb-overlay.open, #sbOverlay.open {
    display: block !important;
    pointer-events: all !important;
  }
  .menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }
  .main-wrap { margin-left: 0 !important; width: 100% !important; min-width: 0 !important; }
  .topbar { padding: 0 14px !important; }
}
/* ══ END R110 ══ */











/* ═══════════════════════════════════════════════════════════════
   R118 — TOPBAR position:fixed (always, no sticky ambiguity)
   ═══════════════════════════════════════════════════════════════ */
.topbar {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 600 !important;
  background: var(--surf-1, #0b1020) !important;
  
  
  border-bottom: 1px solid var(--bdr-faint, #1e2a45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 60px !important;
  box-sizing: border-box !important;
}
/* Desktop: offset by sidebar width; JS will correct precisely */
@media (min-width: 901px) {
  .topbar { left: 260px !important; padding: 0 24px !important; }
}
@media (max-width: 900px) {
  .topbar { left: 0 !important; padding: 0 14px !important; }
}
/* Push page content below fixed topbar */
.page,
header.topbar + *,
header.topbar ~ .page,
.l-page { margin-top: 0 !important; }

/* ═══ SIDEBAR R118 ═══════════════════════════════════════════ */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:580;-webkit-}
.sb-overlay.open{display:block!important;}
.menu-btn{background:transparent;border:none;cursor:pointer;
  color:var(--tx-soft,#a0aec0);font-size:1.15rem;border-radius:8px;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;flex-shrink:0;}
.menu-btn:hover{background:var(--surf-2,#13172a);color:var(--violet-light,#a78bfa);}
@media(max-width:900px){
  .menu-btn{display:flex!important;}
  .sidebar{position:fixed!important;inset:0 auto 0 0!important;width:262px!important;
    max-width:84vw!important;z-index:590!important;transform:translateX(-110%)!important;
    transition:transform .28s cubic-bezier(.4,0,.2,1)!important;
    overflow-y:auto!important;height:100vh!important;}
  .sidebar.open{transform:translateX(0)!important;box-shadow:4px 0 48px rgba(0,0,0,.7)!important;}
}
@media(min-width:901px){
  .menu-btn{display:none!important;}
  .sb-overlay{display:none!important;}
  .sidebar{position:sticky!important;top:0!important;height:100vh!important;
    flex-shrink:0!important;overflow-y:auto!important;transform:none!important;}
}
/* ─── END R118 ─── */

/* ══ R127: LAYOUT BOTTOM FIX ══════════════════════════════════ */
/* Main content wrapper: flex column so page fills vertical space */
.main-wrap {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh;
  overflow-x:clip;
}
/* Page area: grows to fill remaining space, proper bottom breathing room */
.page {
  flex: 1 1 auto !important;
  padding: 16px 22px 40px !important;  /* top | sides | BOTTOM */
  box-sizing: border-box;
  min-height: 0;
}
@media (max-width: 768px) {
  .page { padding: 16px 14px 48px !important; }
}
/* Broadcast 2-col: proper alignment so both cols start at top */
.bc-master {
  align-items: start !important;
  padding-bottom: 0 !important;
}
/* Log panel sticky: bound max height relative to viewport, never clips */
.log-panel {
  position: sticky;
  top: 68px;
  max-height: calc(100vh - 90px) !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.log-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: none !important;
}
/* Accordion items: proper bottom spacing so last item isn't flush */
.acc-list { padding-bottom: 8px; }
.acc-item:last-child { margin-bottom: 0; }
/* Inside accordion body: proper bottom padding */
.tpl-inner:last-child { padding-bottom: 18px; }
/* ══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   R130 TOPBAR AUTHORITY — appended last, wins over everything
   ═══════════════════════════════════════════════════════════════ */
.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 500 !important;
  background: var(--surf-1, #0b1020) !important;
  
  
  border-bottom: 1px solid var(--bdr-faint, #1e2a45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 60px !important;
  flex-shrink: 0 !important;
}
@media (max-width: 900px) {
  .topbar { padding: 0 14px !important; }
}
@media (min-width: 901px) {
  .topbar { padding: 0 22px !important; }
}
/* ── END R130 ── */


/* ─── r260: Committee panel sticky topbar + mobile hamburger guarantees ─── */
.topbar{position:sticky!important;top:0!important;z-index:600!important;}
.sidebar{z-index:700!important;}
.sb-overlay,#sbOverlay{z-index:699!important;}
@media(max-width:900px){
  .sidebar{position:fixed!important;top:0!important;left:0!important;height:100vh!important;width:min(82vw,280px)!important;transform:translateX(-110%)!important;transition:transform .28s cubic-bezier(.4,0,.2,1)!important;z-index:700!important;overflow-y:auto!important;}
  .sidebar.open{transform:translateX(0)!important;box-shadow:6px 0 40px rgba(0,0,0,.6)!important;}
  .sb-overlay,#sbOverlay{display:none;position:fixed!important;inset:0!important;z-index:699!important;background:rgba(0,0,0,.55)!important;pointer-events:none!important;}
  .sb-overlay.open,#sbOverlay.open,.sb-overlay.active,#sbOverlay.active{display:block!important;pointer-events:auto!important;}
  .menu-btn{display:inline-flex!important;}
}
@media(min-width:901px){
  .menu-btn{display:none!important;}
  .sb-overlay,#sbOverlay{display:none!important;}
}


/* ─── r261: committee panel polish ────────────────────────────── */
/* Sidebar must scroll internally so logout (sb-foot) stays visible */
.sidebar{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
.sidebar .sb-nav{
  flex:1 1 auto!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  min-height:0!important;
}
.sidebar .sb-foot{
  flex-shrink:0!important;
  background:var(--surf-1,#0f172a)!important;
  border-top:1px solid var(--bdr-faint,rgba(255,255,255,.08))!important;
  padding:10px 12px max(12px,env(safe-area-inset-bottom))!important;
}
@media(max-width:900px){
  .sidebar{
    height:100vh!important;
    height:100dvh!important;
  }
}

/* QR action buttons — make sure they're clickable above any siblings */
.qr-actions{position:relative!important;z-index:5!important;}
.qr-actions .btn,.qr-actions a.btn,.qr-actions button.btn{
  position:relative!important;z-index:5!important;cursor:pointer!important;pointer-events:auto!important;
}

/* QR card url box — selectable */
.qr-url-box{user-select:all!important;-webkit-user-select:all!important;}

/* Main content scroll context — must NOT have overflow:hidden on parents */
.main-wrap{overflow-y:visible!important;}


/* ═══ r262: FINAL LOCK — sticky topbar + mobile sidebar slide ════════ */
/* Parent containers must NOT have overflow that kills position:sticky */
html, body { overflow-x: hidden !important; }
body { overflow-y: auto !important; }
.app-shell { overflow: visible !important; }
.main-wrap {
  overflow-x:clip !important;
  overflow-y: visible !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 100vh !important;
}

/* Mobile sidebar slide — overrides ANY inline transform:none */
@media (max-width: 900px) {
  .app-shell { display: block !important; grid-template-columns: none !important; }
  .sidebar, aside.sidebar, #sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    width: min(82vw, 280px) !important;
    transform: translateX(-110%) !important;
    transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
    z-index: 700 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .sidebar.open, aside.sidebar.open, #sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 6px 0 40px rgba(0,0,0,.6) !important;
  }
  .sb-overlay, #sbOverlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    z-index: 699 !important;
    background: rgba(0,0,0,.55) !important;
    pointer-events: none !important;
  }
  .sb-overlay.open, #sbOverlay.open,
  .sb-overlay.active, #sbOverlay.active {
    display: block !important;
    pointer-events: auto !important;
  }
  .menu-btn { display: inline-flex !important; }
  #liveClock, .tb-clock { display: none !important; }
  .main-wrap { width: 100% !important; margin-left: 0 !important; }
}

/* Desktop — sidebar fixed-position column */
@media (min-width: 901px) {
  .menu-btn { display: none !important; }
  .sb-overlay, #sbOverlay { display: none !important; }
  .sidebar, aside.sidebar, #sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    transform: none !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
}

/* Sidebar internal — nav scrolls, brand+user pinned top, sb-foot pinned bottom */
.sidebar > .sb-brand, .sidebar > .sb-user { flex-shrink: 0 !important; }
.sidebar > .sb-nav {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  min-height: 0 !important;
}
.sidebar > .sb-foot {
  flex-shrink: 0 !important;
  background: var(--surf-1, #0f172a) !important;
  border-top: 1px solid var(--bdr-faint, rgba(255,255,255,.08)) !important;
  padding: 10px 12px max(12px, env(safe-area-inset-bottom, 12px)) !important;
}

/* QR action buttons — guarantee clickable above any siblings */
.qr-actions { position: relative !important; z-index: 5 !important; }
.qr-actions .btn,
.qr-actions a.btn,
.qr-actions button.btn {
  position: relative !important;
  z-index: 5 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
.qr-url-box { user-select: all !important; -webkit-user-select: all !important; }

/* push content below topbar */
}
/* Mobile sidebar clickable fix */
.sidebar {
    z-index: 1100 !important;
}
.sidebar-overlay {
    z-index: 1099 !important;
}
/* Remove any transform on sidebar that blocks clicks */
@media (max-width: 768px) {
    .sidebar {
        pointer-events: auto !important;
    }
}


/* ═══ r263: logout confirmation modal ════════ */
.logout-modal{position:fixed;inset:0;z-index:9999;}
.logout-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);}
.logout-modal-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--surf-1,#0f172a);
  border:1px solid var(--bdr-faint,rgba(255,255,255,.1));
  border-radius:16px;
  padding:28px 24px 22px;
  width:min(90vw,360px);
  text-align:center;
  box-shadow:0 24px 64px rgba(0,0,0,.5);
  animation:r263pop .18s cubic-bezier(.4,0,.2,1);
}
@keyframes r263pop{from{opacity:0;transform:translate(-50%,-46%) scale(.94);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
.logout-modal-icon{
  width:60px;height:60px;border-radius:50%;
  background:rgba(239,68,68,.15);
  color:#ef4444;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;
  margin:0 auto 16px;
}
.logout-modal-card h3{margin:0 0 8px;font-size:1.15rem;color:var(--tx-bright,#fff);}
.logout-modal-card p{margin:0 0 20px;font-size:.88rem;color:var(--tx-muted,#9ca3af);}
.logout-modal-actions{display:flex;gap:10px;justify-content:center;}
.logout-modal-actions .btn{flex:1;max-width:140px;}

/* Notification pip on topbar bell */
.notif-pip{
  position:absolute;top:2px;right:2px;
  background:#ef4444;color:#fff;
  font-size:.62rem;font-weight:700;
  min-width:16px;height:16px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;line-height:1;
}


/* ═══ r264: DEFINITIVE STICKY TOPBAR LOCK ════════════════════════════ */
/* Sticky needs: scrollable ancestor, no overflow:hidden between sticky and scroll root.
   Approach: make BODY the scroll root, ensure NO ancestor has overflow set
   (other than overflow-x:hidden on body which doesn't break sticky on Y axis). */
html{height:auto!important;overflow-y:auto!important;}
body{
  height:auto!important;
  min-height:100vh!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
.app-shell{
  overflow:visible!important;
  min-height:100vh!important;
}
.main-wrap{
  overflow-x:clip!important;
  overflow-y:visible!important;
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  min-height:100vh!important;
}
/* ╔══════════════════════════════════════════════════════════════╗
   ║  r275 — DEFINITIVE TOPBAR FIX (do not add more after this)  ║
   ║  ROOT CAUSE: overflow-x:hidden on .main-wrap created a new  ║
   ║  scroll container; position:sticky stuck to it not viewport. ║
   ║  FIX: position:fixed + overflow-x:clip + padding-top:56px   ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* 1. App shell: grid on desktop, block on mobile */
.app-shell {
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  min-height: 100vh !important;
  overflow: visible !important;  /* never clip here */
}

/* 2. Sidebar: sticky column on desktop, drawer on mobile */
@media (min-width: 901px) {
  .sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    overflow-y: auto !important;
    z-index: 900 !important;
    transform: none !important;
  }
  .menu-btn { display: none !important; }
  .sb-overlay, #sbOverlay { display: none !important; }
}

@media (max-width: 900px) {
  .app-shell {
    display: block !important;
    grid-template-columns: unset !important;
  }
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: min(82vw, 280px) !important;
    z-index: 1000 !important;
    transform: translateX(-110%) !important;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
    overflow-y: auto !important;
  }
  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 6px 0 40px rgba(0,0,0,0.6) !important;
  }
  .sb-overlay, #sbOverlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    z-index: 999 !important;
    background: rgba(0,0,0,0.55) !important;
  }
  .sb-overlay.open, #sbOverlay.open {
    display: block !important;
    pointer-events: auto !important;
  }
  .menu-btn { display: inline-flex !important; }
}

/* 3. main-wrap: scroll container for page content only */
.main-wrap {
  overflow-x: clip !important;  /* clip NOT hidden — does not create scroll ctx */
  overflow-y: visible !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  /* padding-top added by topbar rule below via padding compensation */
}

/* 4. THE FIX: topbar is FIXED — immune to ALL parent overflow/scroll contexts */
.topbar {
  position: fixed !important;
  top: 0 !important;
  /* Desktop: starts after the 240px sidebar */
  left: 240px !important;
  right: 0 !important;
  z-index: 950 !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 20px !important;
  background: var(--surf-1, #0f172a) !important;
  border-bottom: 1px solid var(--bdr-faint, rgba(255,255,255,0.08)) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
  flex-shrink: 0 !important;
}

/* On mobile, topbar spans full width (sidebar slides over it) */
@media (max-width: 900px) {
  .topbar {
    left: 0 !important;
    padding: 0 12px !important;
    min-height: 52px !important;
  }
}

/* 5. Compensate for fixed topbar — push page content down */
.page,
.main-wrap > .page,
.main-wrap > div:not(.topbar):first-of-type {
  padding-top: 72px !important;  /* 56px topbar + 16px breathing room */
}

/* If page already has padding-top set inline, override it for these pages */
.main-wrap > .page[style*="padding"] {
  padding-top: 72px !important;
}

/* 6. Ensure nothing else tries to be sticky/fixed on topbar */
header.topbar[style] {
  /* Strip any inline position that fights the above */
  position: fixed !important;
}
/* ── END r275 ── */

/* ==============================================================
   r280 DEFINITIVE TOPBAR FIX
   position:FIXED is immune to ALL parent overflow/scroll contexts.
   overflow-x:clip does NOT create a scroll container (unlike hidden).
   ============================================================== */

/* TOPBAR: fixed to viewport — cannot be trapped by any parent rule */
.topbar {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 240px !important;
  z-index: 600 !important;
  min-height: 56px !important;
  background: var(--surf-1, #0f172a) !important;
  border-bottom: 1px solid var(--bdr-faint, rgba(255,255,255,.08)) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.22) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 20px !important;
  flex-shrink: 0 !important;
}

/* MAIN-WRAP: clip = no scroll context created */
.main-wrap {
  overflow-x: clip !important;
  overflow-y: visible !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

/* PAGE CONTENT: pad top to clear the fixed bar */
.main-wrap > .page,
.page {
  padding-top: 72px !important;
}

/* MOBILE: topbar spans full width, sidebar z-index slides over it */
@media (max-width: 900px) {
  .topbar {
    left: 0 !important;
    right: 0 !important;
    z-index: 600 !important;
    padding: 0 12px !important;
    min-height: 52px !important;
  }
  .main-wrap > .page,
  .page {
    padding-top: 64px !important;
  }
  .sidebar {
    z-index: 900 !important;
  }
  #sbOverlay, .sb-overlay {
    z-index: 899 !important;
  }
}

/* DESKTOP: sidebar sticky beside fixed topbar */
@media (min-width: 901px) {
  .app-shell {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;
    min-height: 100vh !important;
  }
  .sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    overflow-y: auto !important;
    z-index: 10 !important;
  }
  .menu-btn {
    display: none !important;
  }
}
/* END r280 ============================================================ */

/* ============================================================
   r501: MOBILE SIDEBAR — OFF-CANVAS FIX
   Sidebar hidden by default on mobile, slides in on .open
   ============================================================ */

/* Force sidebar off-canvas on mobile */
@media (max-width: 900px) {
  /* Hide sidebar off-screen by default */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 240px !important;
    height: 100vh !important;
    height: 100dvh !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), box-shadow 0.28s ease !important;
    z-index: 900 !important;
    overflow-y: auto !important;
    box-shadow: none !important;
  }

  /* Slide in when .open */
  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 32px rgba(0,0,0,0.7) !important;
  }

  /* Overlay — dark behind sidebar */
  .sb-overlay, #sbOverlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.6) !important;
    z-index: 850 !important; display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.28s ease !important;
  }
  .sb-overlay.open, #sbOverlay.open,
  .sb-overlay.show, #sbOverlay.show {
    opacity: 1 !important;
    pointer-events: all !important;
  }

  /* Show hamburger menu button */
  .menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.05) !important;
    color: #fff !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }
  .menu-btn:hover { background: rgba(139,92,246,.2) !important; }

  /* Main content takes full width */
  .main-wrap {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* Desktop: sidebar always visible, no hamburger */
@media (min-width: 901px) {
  .menu-btn { display: none !important; }
  .sb-overlay, #sbOverlay { display: none !important; }
}
/* --- Professional Shell Standard (r230) --- */
.sidebar { z-index: 1100 !important; }
.sb-overlay.open { 
    display: block !important; 
    opacity: 1 !important; 
    pointer-events: auto !important; 
}
.tb-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--tx-muted); }
.tb-breadcrumb span { opacity: 0.8; }
.tb-breadcrumb i { font-size: 8px; opacity: 0.5; }

/* --- Professional Shell Standard (r231) --- */
.sidebar { z-index: 1100 !important; }
.sb-overlay.open { display: block !important; opacity: 1 !important; pointer-events: auto !important; }
.tb-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--tx-muted); }
.tb-breadcrumb span { opacity: 0.8; }
.tb-breadcrumb i { font-size: 8px; opacity: 0.5; margin: 0 4px; }
/* ── Desktop Full-Width Fix ── chapel-layout-fix2 ── */
.page       { max-width: 100% !important; }
.main-wrap  { max-width: 100% !important; }


@media (min-width: 901px) {
  html, body { overflow-x: hidden; }
  .app-shell {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;
    min-height: 100vh !important;
    align-items: stretch !important;
    position: relative !important;
  }
  .sidebar, #sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
    z-index: 200 !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
  }
  .main-wrap {
    min-width: 0 !important;
    flex: 1 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 600 !important;
    background: var(--surf-1, #0f172a) !important;
    border-bottom: 1px solid var(--bdr-faint, rgba(255,255,255,.08)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 20px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
  }
  .menu-btn, .hamburger { display: none !important; }
  .sb-overlay, #sbOverlay { display: none !important; }
}
@media (max-width: 900px) {
  .app-shell { display: block !important; position: relative !important; }
  .sidebar, #sidebar {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    height: 100vh !important;
    width: min(82vw, 280px) !important;
    transform: translateX(-110%) !important;
    transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
    z-index: 700 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .sidebar.open, #sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 6px 0 40px rgba(0,0,0,.6) !important;
  }
  .sb-overlay.open, #sbOverlay.open {
    display: block !important;
    pointer-events: auto !important;
  }
  .main-wrap { width: 100% !important; margin-left: 0 !important; }
  .menu-btn, .hamburger { display: inline-flex !important; }
  #liveClock, .tb-clock { display: none !important; }
  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 600 !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 12px !important;
  }
}
/* Topbar contents must NOT stretch the bar's height */
.topbar .tb-left,
.topbar .tb-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 100% !important;
  max-height: 56px !important;
}
.topbar .ic-btn,
.topbar .tb-icon {
  height: 36px !important;
  width: 36px !important;
  min-height: unset !important;
  max-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.topbar .tb-role-badge {
  height: 26px !important;
  min-height: unset !important;
  max-height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  border-radius: 20px !important;
}
.topbar .tb-clock,
.topbar #liveClock {
  font-size: .72rem !important;
  line-height: 1 !important;
  max-height: 20px !important;
  white-space: nowrap !important;
}
/* ══════════════════════════════════════════════════════════
   END LAYOUT LOCK R301
══════════════════════════════════════════════════════════ */

/* r322 — hide badge+clock on mobile, all panels */
@media (max-width: 900px) {
  .tb-role-badge,
  .badge-superadmin,
  .badge-admin,
  .badge-committee,
  span.tb-role-badge { display: none !important; }
}