/* =========================================================
   TASHJEE — Creative Community Theme
   CSS-only visual redesign. No functionality changed.
   ========================================================= */

:root{
  --forest:#1f5b4b;
  --forest-dark:#173f37;
  --teal:#2f7f78;
  --terracotta:#c96f52;
  --mustard:#d5a63d;
  --sage:#8faa84;
  --plum:#76506f;
  --blue:#4f7fa7;
  --cream:#f8f3e9;
  --paper:#fffdf8;
  --ink:#263833;
  --muted:#6f7d75;
  --line:#e4dccf;
  --soft-green:#edf4eb;
  --soft-teal:#e9f4f2;
  --soft-gold:#faf0d7;
  --soft-coral:#faece6;
  --danger:#9b493d;
  --shadow:0 16px 38px rgba(48,65,56,.10);
  --shadow-soft:0 8px 22px rgba(48,65,56,.08);
  --radius:22px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Verdana,Arial,sans-serif;
  color:var(--ink);
  min-height:100vh;
  background-color:var(--cream);
  background-image:
    linear-gradient(30deg, rgba(31,91,75,.035) 12%, transparent 12.5%, transparent 87%, rgba(31,91,75,.035) 87.5%, rgba(31,91,75,.035)),
    linear-gradient(150deg, rgba(31,91,75,.035) 12%, transparent 12.5%, transparent 87%, rgba(31,91,75,.035) 87.5%, rgba(31,91,75,.035)),
    linear-gradient(30deg, rgba(201,111,82,.025) 12%, transparent 12.5%, transparent 87%, rgba(201,111,82,.025) 87.5%, rgba(201,111,82,.025)),
    linear-gradient(150deg, rgba(213,166,61,.025) 12%, transparent 12.5%, transparent 87%, rgba(213,166,61,.025) 87.5%, rgba(213,166,61,.025));
  background-size:64px 112px;
  background-position:0 0,0 0,32px 56px,32px 56px;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 8% 8%, rgba(213,166,61,.12), transparent 20%),
    radial-gradient(circle at 92% 14%, rgba(47,127,120,.10), transparent 22%),
    radial-gradient(circle at 78% 82%, rgba(201,111,82,.08), transparent 24%);
}

/* Header */

.app-header{
  display:flex;
  gap:18px;
  align-items:center;
  padding:26px 48px;
  color:white;
  background:
    linear-gradient(120deg,var(--forest-dark),var(--forest) 58%,var(--teal));
  border-bottom:5px solid var(--mustard);
  box-shadow:0 8px 28px rgba(23,63,55,.18);
  position:relative;
  overflow:hidden;
}

.app-header::after{
  content:"✦  ✧  ✦";
  position:absolute;
  right:34px;
  top:16px;
  font-size:40px;
  letter-spacing:13px;
  color:rgba(255,255,255,.12);
  transform:rotate(-6deg);
}

.brand-mark{
  width:68px;
  height:68px;
  flex:0 0 68px;
  border:2px solid rgba(255,255,255,.65);
  border-radius:20px;
  display:grid;
  place-items:center;
  color:var(--mustard);
  font-size:30px;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.04);
  transform:rotate(-2deg);
}

.app-header h1{
  margin:0;
  font-size:40px;
  letter-spacing:.4px;
}

.app-header p{
  margin:5px 0 0;
  color:#edf6f1;
  font-weight:700;
  opacity:.92;
}

/* Layout */

.shell{
  max-width:1320px;
  margin:30px auto;
  padding:0 18px;
}

.hero-card,.card,.debug-panel{
  background:rgba(255,253,248,.97);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
  margin-bottom:22px;
  border:1px solid rgba(228,220,207,.95);
}

.hero-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  overflow:hidden;
  border-top:5px solid var(--mustard);
}

.hero-card::before{
  content:"";
  position:absolute;
  right:-45px;
  top:-55px;
  width:190px;
  height:190px;
  border:24px double rgba(31,91,75,.05);
  transform:rotate(45deg);
  pointer-events:none;
}

.eyebrow{
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--terracotta);
  font-weight:900;
  font-size:12px;
}

.hero-card h2{
  font-size:46px;
  line-height:1.08;
  margin:16px 0 10px;
  color:var(--forest-dark);
}

.hero-card p{color:var(--muted)}

.miles-badge{
  width:150px;
  height:150px;
  min-width:150px;
  color:white;
  border-radius:28px;
  display:grid;
  place-items:center;
  text-align:center;
  background:
    linear-gradient(145deg,var(--forest),var(--teal));
  border:5px solid rgba(213,166,61,.7);
  box-shadow:0 14px 28px rgba(31,91,75,.18);
  transform:rotate(1deg);
}

.miles-badge span{
  font-size:48px;
  color:#ffe19a;
  font-weight:900;
  line-height:1;
}

.miles-badge small{
  font-weight:800;
  letter-spacing:.7px;
  padding:0 12px;
}

/* Navigation */

.tabs,
.admin-menu,
.scan-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.tabs{margin-bottom:22px}
.admin-menu{margin-bottom:18px}
.scan-actions{margin-top:14px}

.tab,.ghost,button{
  border:0;
  border-radius:14px;
  padding:12px 20px;
  font-weight:800;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}

.tab{
  background:var(--paper);
  color:var(--forest-dark);
  border:1px solid var(--line);
  box-shadow:0 3px 10px rgba(48,65,56,.04);
}

.tab:hover,.ghost:hover,button:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-soft);
}

.tab.active,
.admin-subtab.active{
  background:linear-gradient(135deg,var(--forest),var(--teal));
  color:white;
  border-color:transparent;
  box-shadow:0 8px 18px rgba(31,91,75,.18);
}

.hidden-tab{display:none!important}
.panel{display:none}
.active-panel{display:block}

/* Cards / grids */

.grid.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.card{
  position:relative;
}

.card h3{
  margin-top:0;
  color:var(--forest-dark);
}

.card h3::after{
  content:"";
  display:block;
  width:42px;
  height:4px;
  margin-top:8px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--mustard),var(--terracotta));
}

.form-row{
  display:flex;
  gap:12px;
  align-items:center;
}

.form-row input,
.form-grid input,
.form-grid select,
.inline-input{
  width:100%;
  padding:14px 15px;
  border:1px solid #d8d1c4;
  border-radius:13px;
  font-size:16px;
  color:var(--ink);
  background:#fffefb;
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}

.form-row input:focus,
.form-grid input:focus,
.form-grid select:focus,
.inline-input:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 4px rgba(47,127,120,.10);
}

.form-row input{flex:1}

.form-row button,
button.event-open-btn,
.form-grid button,
button{
  background:linear-gradient(135deg,var(--forest),var(--teal));
  color:white;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(220px,1fr));
  gap:14px;
}

.form-grid fieldset{
  grid-column:1/-1;
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  background:#fffdf9;
}

.form-grid fieldset legend{
  font-weight:900;
  color:var(--forest-dark);
  padding:0 8px;
}

.form-grid fieldset label{
  display:inline-flex;
  gap:8px;
  margin:8px 16px 8px 0;
}

.ghost{
  background:var(--paper);
  color:var(--forest);
  border:1px solid #bcd3c9;
}

.muted{color:var(--muted)}
.hidden{display:none!important}

/* Messages */

.message{
  padding:14px 18px;
  border-radius:14px;
  margin-bottom:20px;
  background:var(--soft-green);
  border-left:5px solid var(--sage);
  font-weight:700;
}

.message.error{
  background:#faece8;
  border-left-color:var(--danger);
}

.message.pending{
  background:var(--soft-gold);
  border-left-color:var(--mustard);
}

/* Tables */

.table-wrap{
  overflow:auto;
  border-radius:16px;
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--paper);
}

th,td{
  padding:12px;
  border-bottom:1px solid #ebe5db;
  text-align:left;
  vertical-align:middle;
}

th{
  background:#f1eee6;
  color:var(--forest-dark);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.7px;
}

tbody tr:hover td{
  background:#fffaf0;
}

/* KPI / analytics */

.kpi-grid,.analytics-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(120px,1fr));
  gap:14px;
}

.kpi,.analytics-card{
  border-radius:18px;
  padding:17px;
  border:1px solid rgba(228,220,207,.9);
  box-shadow:0 5px 14px rgba(48,65,56,.04);
}

.kpi:nth-child(4n+1),.analytics-card:nth-child(4n+1){background:var(--soft-green)}
.kpi:nth-child(4n+2),.analytics-card:nth-child(4n+2){background:var(--soft-teal)}
.kpi:nth-child(4n+3),.analytics-card:nth-child(4n+3){background:var(--soft-gold)}
.kpi:nth-child(4n+4),.analytics-card:nth-child(4n+4){background:var(--soft-coral)}

.kpi span,.analytics-card span{
  display:block;
  color:var(--muted);
  font-weight:700;
}

.kpi strong,.analytics-card strong{
  font-size:28px;
  color:var(--forest-dark);
}

.count-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  background:var(--mustard);
  color:#503f19;
  border-radius:99px;
  padding:3px 8px;
  font-weight:900;
}

/* Activity tiles — preserves existing checkbox functionality */

.checkbox-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
}

.check-card{
  min-height:105px;
  border:2px solid transparent;
  border-radius:18px;
  padding:17px;
  display:flex;
  gap:12px;
  align-items:center;
  background:#fffdf8;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(48,65,56,.06);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
  position:relative;
  overflow:hidden;
}

.check-card:nth-child(6n+1){background:#edf5ed;border-color:#cfe0cd}
.check-card:nth-child(6n+2){background:#eaf4f4;border-color:#c8e0de}
.check-card:nth-child(6n+3){background:#fbf0d9;border-color:#ebd5a3}
.check-card:nth-child(6n+4){background:#fae9e2;border-color:#ebc6b8}
.check-card:nth-child(6n+5){background:#f2eaf1;border-color:#ddcadb}
.check-card:nth-child(6n+6){background:#eaf0f5;border-color:#ccdae6}

.check-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(48,65,56,.10);
}

.check-card:has(input:checked){
  border-color:var(--forest);
  box-shadow:0 0 0 3px rgba(31,91,75,.08),0 12px 24px rgba(48,65,56,.10);
}

.check-card input{
  width:22px;
  height:22px;
  accent-color:var(--forest);
  flex:0 0 22px;
}

.check-card span{
  display:block;
}

.check-card strong{
  display:block;
  color:var(--forest-dark);
  font-size:15px;
}

.check-card small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-weight:700;
}

.top-gap{margin-top:22px}

/* Debug / modal */

.debug-panel{
  border-left:6px solid var(--terracotta);
}

.debug-header,.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

#debugOutput{
  background:#1d2e2a;
  color:#e6f4ee;
  border-radius:14px;
  padding:16px;
  white-space:pre-wrap;
  min-height:140px;
}

.modal{
  position:fixed;
  inset:0;
  background:rgba(23,42,37,.68);
  display:grid;
  place-items:center;
  z-index:1000;
  backdrop-filter:blur(4px);
}

.modal-card{
  background:var(--paper);
  border-radius:22px;
  padding:20px;
  max-width:600px;
  width:90%;
  border:1px solid var(--line);
  box-shadow:0 28px 80px rgba(23,42,37,.24);
}

video{
  width:100%;
  border-radius:16px;
  background:#000;
}

/* Admin */

.event-detail-row td{
  background:#fffdf8;
  padding:0;
}

.inline-event-detail{
  border:2px solid #e1c678;
  border-radius:18px;
  padding:18px;
  margin:12px 0;
  background:#fffdf8;
}

.inline-detail-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:18px;
}

.admin-split{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:22px;
  align-items:start;
}

.admin-right{
  position:sticky;
  top:20px;
  background:#fffdf8;
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  box-shadow:var(--shadow-soft);
}

.link-grid.stacked{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.link-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px;
  background:#fffdf8;
}

.link-card h4{
  margin:0 0 6px;
  font-size:15px;
  color:var(--forest-dark);
}

.link-card img,.qr-img{
  width:82px;
  height:82px;
  object-fit:contain;
  display:block;
  margin:6px auto;
  background:white;
  border-radius:10px;
  padding:5px;
}

.link-card a{
  font-size:11px;
  line-height:1.25;
  word-break:break-all;
  display:block;
  margin-top:4px;
  color:var(--teal);
}

.link-card button{
  margin-top:6px;
  padding:6px 10px;
  font-size:11px;
  border-radius:12px;
}

.status-cell{white-space:nowrap}

.expiry-pill{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  max-width:max-content!important;
  width:auto!important;
  white-space:nowrap!important;
  font-size:13px!important;
  line-height:1!important;
  padding:5px 10px!important;
  border-radius:999px;
  font-weight:900;
  background:#e8f3ed;
  color:var(--forest);
  border:1px solid #c8ddcf;
}

.activity-tab{
  background:#eee9df;
  color:var(--forest-dark);
  margin:4px;
}

.activity-tab.active{
  background:var(--terracotta);
  color:white;
}

.admin-view{display:none}
.active-admin-view{display:block}

.small-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.small-actions button{
  padding:8px 12px;
  font-size:12px;
}

.table-wrap td .expiry-pill{
  vertical-align:middle;
}

/* Responsive */

@media(max-width:900px){
  .admin-split,
  .grid.two,
  .kpi-grid,
  .analytics-grid,
  .form-grid{
    grid-template-columns:1fr;
  }

  .admin-right{position:static}
  .inline-detail-head,.section-head,.debug-header{display:block}
  .hero-card{display:block}
  .miles-badge{margin-top:20px}
  .app-header{padding:20px}
  .app-header h1{font-size:30px}
  .hero-card h2{font-size:36px}
  .form-row{display:block}
  .form-row button{margin-top:10px;width:100%}
  .checkbox-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:560px){
  .shell{padding:0 12px;margin-top:18px}
  .hero-card,.card,.debug-panel{padding:20px;border-radius:18px}
  .checkbox-grid{grid-template-columns:1fr}
  .tabs{gap:8px}
  .tab,.ghost,button{padding:11px 15px}
  .app-header::after{display:none}
  .brand-mark{width:56px;height:56px;flex-basis:56px;font-size:25px}
}


/* =========================================================
   Tashjee v21002 — Umoor / Committee selector
   ========================================================= */

.umoor-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;
  margin-top:16px;
}

.umoor-card{
  min-height:92px;
  text-align:left;
  border:2px solid var(--line);
  border-radius:18px;
  padding:16px;
  color:var(--forest-dark);
  background:var(--paper);
  box-shadow:0 7px 16px rgba(48,65,56,.05);
}

.umoor-card:nth-child(6n+1){background:#edf5ed}
.umoor-card:nth-child(6n+2){background:#eaf4f4}
.umoor-card:nth-child(6n+3){background:#fbf0d9}
.umoor-card:nth-child(6n+4){background:#fae9e2}
.umoor-card:nth-child(6n+5){background:#f2eaf1}
.umoor-card:nth-child(6n+6){background:#eaf0f5}

.umoor-card.active{
  background:linear-gradient(135deg,var(--forest),var(--teal));
  color:white;
  border-color:var(--forest);
  box-shadow:0 10px 22px rgba(31,91,75,.18);
}

.umoor-title{
  display:block;
  font-size:15px;
  font-weight:900;
  line-height:1.25;
}

.umoor-card small{
  display:block;
  margin-top:8px;
  opacity:.82;
  font-weight:700;
}

.committee-selector{
  border:1px solid var(--line);
  border-radius:20px;
  background:#fffdf9;
  padding:18px;
}

.committee-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom:14px;
}

.committee-panel-head h4{
  margin:4px 0 0;
  color:var(--forest-dark);
  font-size:20px;
}

.selection-count{
  background:var(--soft-gold);
  color:#6b541d;
  border:1px solid #ead49c;
  border-radius:999px;
  padding:7px 11px;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

.committee-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;
}

.committee-card{
  min-height:92px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px;
  border:2px solid #e1dbd0;
  border-radius:16px;
  background:white;
  cursor:pointer;
  transition:.15s ease;
}

.committee-card:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(48,65,56,.08);
}

.committee-card.selected,
.committee-card:has(input:checked){
  border-color:var(--forest);
  background:var(--soft-green);
  box-shadow:0 0 0 3px rgba(31,91,75,.07);
}

.committee-card input{
  width:22px;
  height:22px;
  flex:0 0 22px;
  accent-color:var(--forest);
}

.committee-card strong{
  display:block;
  color:var(--forest-dark);
  line-height:1.3;
}

.committee-card small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-weight:700;
}

.approval-level{
  margin:14px 0;
  padding:12px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fffdf9;
}

.approval-label{
  display:block;
  margin-bottom:8px;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.main-category-tab{
  background:#eaf4f1;
  border:1px solid #c9ddd5;
}

@media(max-width:600px){
  .umoor-grid,.committee-grid{
    grid-template-columns:1fr;
  }
  .committee-panel-head{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* =========================================================
   TASHJEE v21003 — Event announcement + Super Admin Event Manager
   ========================================================= */

.announcement-bar{
  display:flex;
  align-items:stretch;
  margin:-8px 0 18px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid #e6cc84;
  background:#fff7dd;
  box-shadow:0 8px 18px rgba(93,74,29,.08);
}

.announcement-label{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  padding:11px 16px;
  color:#fff;
  background:linear-gradient(135deg,var(--terracotta),#b9573e);
  font-size:11px;
  font-weight:900;
  letter-spacing:1.4px;
  text-transform:uppercase;
  z-index:2;
}

.announcement-viewport{
  flex:1;
  min-width:0;
  overflow:hidden;
  display:flex;
  align-items:center;
}

.announcement-track{
  display:flex;
  align-items:center;
  width:max-content;
  min-width:max-content;
  animation:tashjeeAnnouncementScroll 24s linear infinite;
  will-change:transform;
}

.announcement-item{
  flex:0 0 auto;
  white-space:nowrap;
  padding:10px 46px;
  color:#5f4b1e;
  font-size:14px;
  font-weight:900;
}

.announcement-bar:hover .announcement-track{
  animation-play-state:paused;
}

@keyframes tashjeeAnnouncementScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.event-manager-layout{
  display:grid;
  grid-template-columns:minmax(250px,.8fr) minmax(420px,1.7fr);
  gap:22px;
  align-items:start;
  margin-top:16px;
}

.event-manager-list,
.event-manager-form{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fffdf9;
  padding:18px;
}

.field-label,
.event-manager-form label>span{
  display:block;
  margin-bottom:7px;
  color:var(--forest-dark);
  font-size:12px;
  font-weight:900;
}

.event-manager-form{
  display:grid;
  gap:14px;
}

.event-manager-form input,
.event-manager-form select,
.event-manager-form textarea{
  width:100%;
  border:1px solid #d8d1c4;
  border-radius:13px;
  padding:12px 13px;
  background:white;
  color:var(--ink);
  font:inherit;
  outline:none;
}

.event-manager-form textarea{
  resize:vertical;
  min-height:96px;
  line-height:1.5;
}

.event-manager-form input:focus,
.event-manager-form select:focus,
.event-manager-form textarea:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 4px rgba(47,127,120,.10);
}

.event-manager-form input[readonly]{
  background:#f0eee9;
  color:#6a746f;
  cursor:not-allowed;
}

.event-manager-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.event-manager-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.event-manager-summary{
  padding:14px;
  border-radius:14px;
  background:var(--soft-green);
  border:1px solid #d6e4d3;
}

.event-manager-summary strong{
  color:var(--forest-dark);
}

.managed-announcement-preview{
  margin:10px 0 0;
  padding:10px 12px;
  border-radius:11px;
  color:#6a531c;
  background:var(--soft-gold);
  border-left:4px solid var(--mustard);
  line-height:1.45;
}

.field-help{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}

.superadmin-only.hidden{
  display:none!important;
}

@media(max-width:900px){
  .event-manager-layout{
    grid-template-columns:1fr;
  }
}

@media(max-width:600px){
  .announcement-bar{
    border-radius:13px;
    margin-top:-4px;
  }

  .announcement-label{
    padding:10px 11px;
    font-size:9px;
  }

  .announcement-item{
    padding:9px 30px;
    font-size:12px;
  }

  .event-manager-grid{
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  .announcement-track{
    animation:none;
  }
}


/* =========================================================
   TASHJEE v21005 — SUPERADMIN Manage Admins
   ========================================================= */

.admin-manager-layout{
  display:grid;
  grid-template-columns:minmax(280px,.9fr) minmax(420px,1.6fr);
  gap:22px;
  align-items:start;
  margin-top:16px;
}

.admin-manager-list,
.admin-manager-form{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fffdf9;
  padding:18px;
}

.admin-manager-form{
  display:grid;
  gap:14px;
}

.admin-manager-form label>span{
  display:block;
  margin-bottom:7px;
  color:var(--forest-dark);
  font-size:12px;
  font-weight:900;
}

.admin-manager-form input,
.admin-manager-form select{
  width:100%;
  border:1px solid #d8d1c4;
  border-radius:13px;
  padding:12px 13px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  outline:none;
}

.admin-manager-form input:focus,
.admin-manager-form select:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 4px rgba(47,127,120,.10);
}

.admin-manager-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.admin-manager-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.admin-manager-summary{
  padding:14px;
  border-radius:14px;
  background:var(--soft-green);
  border:1px solid #d6e4d3;
}

.admin-manager-summary strong{
  color:var(--forest-dark);
}

.admin-access-guide{
  padding:14px;
  border:1px solid #e5dccf;
  border-radius:14px;
  background:var(--soft-gold);
}

.admin-access-guide h4{
  margin:0 0 10px;
  color:var(--forest-dark);
}

.admin-access-guide p{
  margin:7px 0;
  color:#5f664f;
  font-size:12px;
  line-height:1.45;
}

#managedAdminsTable td:nth-child(3){
  font-family:monospace;
  font-weight:800;
}

@media(max-width:900px){
  .admin-manager-layout{
    grid-template-columns:1fr;
  }
}

@media(max-width:600px){
  .admin-manager-grid{
    grid-template-columns:1fr;
  }
}


/* =====================================================================
   TASHJEE v21006 — LAAL RUMAAL VISUAL THEME
   Visual override only. No functional selectors/IDs are changed.
   ===================================================================== */

:root{
  --lr-red:#9f2926;
  --lr-red-dark:#761d1b;
  --lr-red-soft:#c95d58;
  --lr-pink:#f8dedb;
  --lr-pink-2:#fff0ed;
  --lr-cream:#fffaf4;
  --lr-paper:#fffdf9;
  --lr-ink:#342826;
  --lr-muted:#746a66;
  --lr-line:#ead9d2;
  --lr-green:#486a57;
  --lr-gold:#c99a45;

  /* map legacy theme tokens to the approved Laal Rumaal palette */
  --forest:#9f2926;
  --forest-dark:#761d1b;
  --teal:#b64843;
  --teal-dark:#8e2926;
  --gold:#c99a45;
  --coral:#c95d58;
  --cream:#fffaf4;
  --paper:#fffdf9;
  --ink:#342826;
  --muted:#746a66;
  --line:#ead9d2;
  --soft-green:#fff0ed;
  --soft-blue:#fff6f2;
  --soft-gold:#fff3df;
  --soft-coral:#f8dedb;
}

html{
  background:var(--lr-cream);
}

body{
  color:var(--lr-ink);
  background-color:var(--lr-cream);
  background-image:
    linear-gradient(rgba(159,41,38,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(159,41,38,.022) 1px,transparent 1px),
    radial-gradient(circle at 85% 12%,rgba(201,93,88,.07),transparent 22%),
    radial-gradient(circle at 12% 82%,rgba(201,154,69,.05),transparent 24%);
  background-size:18px 18px,18px 18px,auto,auto;
}

/* Fine woven/check texture used throughout without overwhelming content */
.app-header,
.hero,
.card,
.admin-view,
.admin-manager-list,
.admin-manager-form,
.event-announcement,
.table-wrap{
  position:relative;
}

.app-header{
  background:
    linear-gradient(rgba(255,255,255,.96),rgba(255,250,244,.96)),
    repeating-linear-gradient(0deg,rgba(159,41,38,.11) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(90deg,rgba(159,41,38,.11) 0 1px,transparent 1px 6px);
  color:var(--lr-red-dark);
  border-bottom:1px solid rgba(159,41,38,.22);
  box-shadow:0 8px 24px rgba(96,44,37,.07);
}

.app-header::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:10px;
  background:
    repeating-linear-gradient(0deg,rgba(159,41,38,.35) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(159,41,38,.42) 0 1px,transparent 1px 5px),
    #fff4f1;
  border-bottom:1px solid rgba(159,41,38,.18);
}

.app-header h1{
  color:var(--lr-red-dark);
  letter-spacing:.01em;
}

.app-header p{
  color:#75635e;
}

.brand-mark{
  color:var(--lr-red);
  background:var(--lr-pink-2);
  border:1px solid rgba(159,41,38,.34);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.72);
}

/* Textile-edge cards */
.hero,
.card,
.admin-view{
  background:rgba(255,253,249,.96);
  border-color:var(--lr-line);
  box-shadow:0 10px 28px rgba(89,49,43,.07);
}

.hero::before,
.card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:5px;
  border-radius:inherit;
  background:
    repeating-linear-gradient(90deg,
      rgba(159,41,38,.75) 0 2px,
      rgba(255,238,235,.9) 2px 5px,
      rgba(201,93,88,.5) 5px 6px,
      transparent 6px 9px);
  opacity:.8;
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  right:0; top:0; bottom:0;
  width:76px;
  border-radius:0 inherit inherit 0;
  background:
    repeating-linear-gradient(0deg,rgba(159,41,38,.08) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(159,41,38,.10) 0 1px,transparent 1px 5px);
  mask-image:linear-gradient(90deg,transparent,#000);
  pointer-events:none;
}

.hero .eyebrow,
.section-head .eyebrow,
.kicker{
  color:var(--lr-red-soft);
}

.hero h2,
.card h2,
.card h3,
.section-head h2,
.section-head h3,
.admin-view h2,
.admin-view h3{
  color:#59312d;
}

.hero-stat,
.stat-card{
  background:linear-gradient(145deg,var(--lr-red-dark),#a53a35);
  border-color:rgba(201,154,69,.75);
  color:white;
  box-shadow:0 10px 20px rgba(118,29,27,.13);
}

.hero-stat strong,
.hero-stat .big,
.stat-card strong{
  color:#ffe0a0;
}

/* Navigation */
nav button,
.tabs button,
.admin-subtab,
.ghost{
  background:rgba(255,253,249,.95);
  color:#63322e;
  border-color:#e6cfc8;
}

nav button:hover,
.tabs button:hover,
.admin-subtab:hover,
.ghost:hover{
  border-color:#c7837d;
  background:#fff5f2;
}

nav button.active,
.tabs button.active,
.admin-subtab.active,
button:not(.ghost):not(.icon-btn){
  background:linear-gradient(135deg,var(--lr-red-dark),var(--lr-red));
  color:#fff;
  border-color:var(--lr-red-dark);
  box-shadow:0 6px 14px rgba(118,29,27,.12);
}

button:not(.ghost):not(.icon-btn):hover{
  background:linear-gradient(135deg,#681916,#8f2522);
}

/* Announcement = strongest Laal Rumaal moment */
.event-announcement,
.announcement-banner{
  overflow:hidden;
  border:1px solid #e8c5bd;
  background:
    linear-gradient(90deg,rgba(255,250,244,.98) 0 72%,rgba(255,240,237,.94)),
    repeating-linear-gradient(0deg,rgba(159,41,38,.13) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(159,41,38,.13) 0 1px,transparent 1px 5px);
  color:#65312d;
}

.event-announcement::after,
.announcement-banner::after{
  content:"";
  position:absolute;
  right:0; top:0; bottom:0;
  width:88px;
  background:
    repeating-linear-gradient(0deg,rgba(159,41,38,.38) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(159,41,38,.42) 0 1px,transparent 1px 5px);
  opacity:.62;
  pointer-events:none;
}

/* Inputs */
input,
select,
textarea,
.inline-input{
  border-color:#dfcbc4 !important;
  background:#fffefa !important;
  color:var(--lr-ink) !important;
}

input:focus,
select:focus,
textarea:focus,
.inline-input:focus{
  border-color:var(--lr-red-soft) !important;
  box-shadow:0 0 0 4px rgba(159,41,38,.08) !important;
}

/* Umoor / committee tiles retain hierarchy but adopt cloth-inspired selection */
.category-card,
.umoor-card,
.committee-card,
.choice-card,
.tile{
  background:#fffdf9;
  border-color:#e7d7d0;
}

.category-card.selected,
.umoor-card.selected,
.committee-card.selected,
.choice-card.selected,
.tile.selected{
  background:
    linear-gradient(rgba(255,239,236,.94),rgba(255,247,243,.96)),
    repeating-linear-gradient(0deg,rgba(159,41,38,.07) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(90deg,rgba(159,41,38,.07) 0 1px,transparent 1px 7px);
  border-color:var(--lr-red);
  box-shadow:0 0 0 2px rgba(159,41,38,.08);
}

/* Tables */
table{
  background:#fffdf9;
}

thead{
  background:
    linear-gradient(rgba(255,235,231,.94),rgba(255,245,241,.94)),
    repeating-linear-gradient(0deg,rgba(159,41,38,.11) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(159,41,38,.11) 0 1px,transparent 1px 5px);
}

th{
  color:#74231f;
  border-color:#e7cfc8;
}

td{
  border-color:#eee1dc;
}

/* Status chips: matte, coordinated with textile palette */
.badge,
.pill,
.status,
.chip{
  border-color:#e3cbc4;
  background:#fff5f1;
  color:#7d332f;
}

/* Admin manager */
.admin-manager-list,
.admin-manager-form{
  background:rgba(255,253,249,.97);
  border-color:#e6d3cc;
}

.admin-manager-summary{
  background:#fff0ed;
  border-color:#ebccc5;
}

.admin-access-guide{
  background:#fff5e8;
  border-color:#ecd9b8;
}

/* Footer / diagnostics remain unobtrusive */
footer,
.debug-panel{
  color:#8a7771;
}

/* Mobile keeps pattern delicate */
@media(max-width:700px){
  body{
    background-size:14px 14px,14px 14px,auto,auto;
  }
  .hero::after{
    width:42px;
    opacity:.65;
  }
  .event-announcement::after,
  .announcement-banner::after{
    width:48px;
  }
}


/* =====================================================================
   TASHJEE v21008 — MOBILE ADMIN + STATISTICS
   ===================================================================== */

/* Admin tabs become a compact horizontal strip rather than a tall wrapped block. */
.admin-menu{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  gap:8px;
  padding:4px 2px 8px;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.admin-menu .admin-subtab{
  flex:0 0 auto;
  white-space:nowrap;
}

/* Statistics moved to its own view. */
.statistics-kpis{
  margin-top:14px;
}

.leader-filter-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,253,249,.98);
  padding:16px;
}

.leader-filter-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.leader-filter-head h4{margin:5px 0 0;color:var(--forest-dark)}
.leader-app-link{text-decoration:none;display:inline-flex;align-items:center}

.statistics-filter-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(180px,1fr));
  gap:12px;
}
.statistics-filter-grid label>span{
  display:block;
  margin-bottom:6px;
  font-size:11px;
  font-weight:900;
  color:var(--muted);
}
.statistics-filter-grid input,
.statistics-filter-grid select{
  width:100%;
  min-height:44px;
}
.stats-apply-btn{align-self:end;min-height:44px}

.period-leader-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(170px,1fr));
  gap:12px;
}
.period-leader-card{
  min-height:180px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--paper);
  box-shadow:0 7px 18px rgba(48,65,56,.05);
}
.period-leader-card h4{margin:6px 0 12px;color:var(--forest-dark)}
.period-label{font-size:11px;font-weight:800;color:var(--muted);margin-bottom:8px}
.leader-score{font-size:29px;font-weight:900;color:var(--forest-dark);margin-bottom:8px}
.leader-score small{font-size:11px;color:var(--muted)}
.leader-names{display:grid;gap:4px}
.leader-names strong{font-size:13px;color:var(--forest-dark)}
.leader-names span{font-size:11px;color:var(--muted)}
.leader-spin-link,.leader-clear{
  display:inline-block;
  margin-top:10px;
  font-size:11px;
  font-weight:900;
}
.leader-spin-link{color:var(--forest);text-decoration:none}
.leader-clear{color:var(--sage)}
.compact-stat-detail{padding:16px}

/* Editor forms get a clear scroll destination. */
#manageAdminForm,#manageEventForm{scroll-margin-top:14px}

/* =========================================================
   Mobile layouts
   ========================================================= */
@media(max-width:900px){
  .statistics-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .period-leader-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:600px){
  body{font-size:14px}

  .app-header{
    padding:13px 14px 12px;
    gap:10px;
  }
  .app-header .brand-mark{
    width:42px;height:42px;flex-basis:42px;border-radius:13px;font-size:20px;
  }
  .app-header h1{font-size:22px;line-height:1.05}
  .app-header p{font-size:10px;margin-top:3px}

  .shell{
    margin:12px auto;
    padding:0 9px 30px;
  }

  /* Keep event title + points on one horizontal banner. */
  .hero-card{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 68px;
    gap:9px;
    align-items:center;
    padding:12px 13px !important;
    margin-bottom:9px;
    border-radius:15px !important;
  }
  .hero-card>div:first-child{min-width:0}
  .hero-card .eyebrow{
    font-size:8px;
    letter-spacing:1.3px;
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .hero-card h2{
    margin:4px 0 3px !important;
    font-size:19px !important;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .hero-card p{
    margin:0;
    font-size:9px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .miles-badge{
    width:64px !important;
    min-width:64px !important;
    height:64px !important;
    margin:0 !important;
    border-radius:18px !important;
    border-width:3px !important;
  }
  .miles-badge span{font-size:22px !important}
  .miles-badge small{
    padding:0 4px !important;
    font-size:7px;
    line-height:1.1;
  }

  .announcement-bar{
    margin:0 0 9px !important;
    min-height:32px;
  }
  .announcement-label{
    padding:7px 8px !important;
    font-size:7px !important;
  }
  .announcement-item{
    padding:7px 22px !important;
    font-size:10px !important;
  }

  .tabs{
    flex-wrap:nowrap !important;
    overflow-x:auto;
    gap:6px;
    margin-bottom:10px;
    padding-bottom:3px;
  }
  .tab{
    flex:0 0 auto;
    padding:8px 11px !important;
    border-radius:11px !important;
    font-size:11px;
    white-space:nowrap;
  }

  .card,.debug-panel{
    padding:13px !important;
    margin-bottom:10px !important;
    border-radius:15px !important;
  }
  .card h3{font-size:17px;margin-bottom:7px}
  .muted{font-size:11px;line-height:1.35}

  /* Attendance and Khidmat: compact single-column content. */
  .grid.two{grid-template-columns:1fr !important;gap:9px !important}
  #attendance .result-card,#volunteer .result-card{
    min-height:auto;
    padding:11px !important;
  }

  .form-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px;
    align-items:stretch;
  }
  .form-row input{
    min-width:0;
    padding:10px 11px;
    font-size:14px;
  }
  .form-row button{
    width:auto !important;
    margin:0 !important;
    padding:9px 12px !important;
    font-size:11px;
  }
  .scan-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
    margin-top:7px;
  }
  .scan-actions button{
    min-width:0;
    padding:7px 4px !important;
    font-size:8px;
    line-height:1.15;
  }

  /* Umoor / committees remain visual but use less height. */
  .umoor-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    margin-top:8px !important;
  }
  .umoor-card{
    min-height:62px !important;
    padding:9px !important;
    border-radius:13px !important;
  }
  .umoor-title{font-size:11px !important}
  .umoor-card small{font-size:8px;margin-top:4px !important}

  .committee-selector{
    padding:10px !important;
    border-radius:14px !important;
  }
  .committee-panel-head{margin-bottom:8px !important}
  .committee-panel-head h4{font-size:15px !important}
  .selection-count{padding:5px 7px !important;font-size:9px !important}
  .committee-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }
  .committee-card{
    min-height:60px !important;
    padding:8px !important;
    gap:7px !important;
    border-radius:12px !important;
  }
  .committee-card input{width:17px;height:17px;flex-basis:17px}
  .committee-card strong{font-size:10px}
  .committee-card small{font-size:8px;margin-top:3px}

  /* Admin */
  #adminWorkspace{padding:12px !important}
  #adminWorkspace>.section-head{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
  }
  #adminWorkspace>.section-head h3{font-size:17px}
  #adminAccessInfo{font-size:9px;max-width:230px}

  .admin-menu{
    margin-top:8px !important;
    position:sticky;
    top:0;
    z-index:8;
    background:rgba(255,250,244,.97);
    padding:6px 2px;
  }
  .admin-menu .admin-subtab{
    padding:8px 10px !important;
    font-size:9px;
  }

  .analytics-grid,.kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }
  .analytics-card,.kpi{
    padding:10px !important;
    border-radius:12px !important;
  }
  .analytics-card span,.kpi span{font-size:8px}
  .analytics-card strong,.kpi strong{font-size:18px !important}

  .statistics-filter-grid{grid-template-columns:1fr 1fr;gap:7px}
  .statistics-filter-grid label>span{font-size:8px;margin-bottom:3px}
  .statistics-filter-grid input,
  .statistics-filter-grid select{
    min-height:38px;
    padding:7px 8px !important;
    font-size:10px !important;
  }
  .stats-apply-btn{
    min-height:38px;
    font-size:10px;
    grid-column:1/-1;
  }
  .leader-filter-card{padding:11px;border-radius:14px}
  .leader-filter-head{align-items:flex-start}
  .leader-app-link{font-size:9px;padding:7px 9px !important}

  .period-leader-grid{
    grid-template-columns:1fr 1fr;
    gap:7px;
  }
  .period-leader-card{
    min-height:132px;
    padding:10px;
    border-radius:13px;
  }
  .period-leader-card h4{font-size:12px;margin:4px 0 7px}
  .period-label{font-size:8px;margin-bottom:4px}
  .leader-score{font-size:21px;margin-bottom:5px}
  .leader-names strong{font-size:10px}
  .leader-names span,.leader-spin-link,.leader-clear{font-size:8px}

  /* Manager layouts: keep selector compact and form accessible. */
  .admin-manager-layout,.event-manager-layout{
    display:flex !important;
    flex-direction:column;
    gap:8px !important;
  }
  .admin-manager-list,.event-manager-list,
  .admin-manager-form,.event-manager-form{
    padding:11px !important;
    border-radius:14px !important;
  }
  .admin-access-guide{display:none}
  .admin-manager-summary,.event-manager-summary{
    padding:8px !important;
    font-size:10px;
  }
  .admin-manager-grid,.event-manager-grid{grid-template-columns:1fr 1fr !important;gap:7px}
  .admin-manager-form input,.admin-manager-form select,
  .event-manager-form input,.event-manager-form select,.event-manager-form textarea{
    padding:9px !important;
    font-size:12px !important;
  }

  /* Tables remain scrollable instead of forcing the page wider. */
  .table-wrap{
    width:100%;
    max-width:100%;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .table-wrap table{min-width:680px}
  th,td{padding:8px !important;font-size:9px}

  .section-head{gap:7px}
  .section-head button{padding:7px 9px !important;font-size:9px}
}

@media(max-width:390px){
  .hero-card{grid-template-columns:minmax(0,1fr) 60px}
  .miles-badge{width:58px!important;min-width:58px!important;height:58px!important}
  .hero-card h2{font-size:17px!important}
  .period-leader-grid{grid-template-columns:1fr 1fr}
  .committee-grid{grid-template-columns:1fr 1fr!important}
}


/* =====================================================================
   TASHJEE v21008.1 — PUBLIC / VOLUNTEER MOBILE FIT
   Scoped using body[data-role] so Admin mobile layout is unaffected.
   ===================================================================== */

@media(max-width:600px){

  body[data-role="public"],
  body[data-role="volunteer"]{
    overflow-x:hidden;
  }

  body[data-role="public"] .shell,
  body[data-role="volunteer"] .shell{
    width:100%;
    max-width:100%;
    margin:7px auto 24px;
    padding:0 7px;
    overflow-x:hidden;
  }

  /* Very compact application header on attendee / volunteer phone view */
  body[data-role="public"] .app-header,
  body[data-role="volunteer"] .app-header{
    padding:8px 10px 7px !important;
    min-height:52px;
    gap:7px;
  }

  body[data-role="public"] .app-header .brand-mark,
  body[data-role="volunteer"] .app-header .brand-mark{
    width:34px !important;
    height:34px !important;
    flex:0 0 34px !important;
    border-radius:10px !important;
    font-size:15px !important;
  }

  body[data-role="public"] .app-header h1,
  body[data-role="volunteer"] .app-header h1{
    margin:0 !important;
    font-size:18px !important;
    line-height:1 !important;
  }

  body[data-role="public"] .app-header p,
  body[data-role="volunteer"] .app-header p{
    margin:2px 0 0 !important;
    font-size:8px !important;
    line-height:1.05 !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:78vw;
  }

  /* Event banner becomes a single compact horizontal strip */
  body[data-role="public"] .hero-card,
  body[data-role="volunteer"] .hero-card{
    width:100%;
    max-width:100%;
    min-height:66px;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 54px !important;
    align-items:center !important;
    gap:6px !important;
    padding:8px 9px !important;
    margin:0 0 5px !important;
    border-radius:12px !important;
    overflow:hidden;
  }

  body[data-role="public"] .hero-card>div:first-child,
  body[data-role="volunteer"] .hero-card>div:first-child{
    min-width:0;
    width:100%;
    overflow:hidden;
  }

  body[data-role="public"] .hero-card .eyebrow,
  body[data-role="volunteer"] .hero-card .eyebrow{
    margin:0 0 2px !important;
    font-size:6.5px !important;
    letter-spacing:.9px !important;
    line-height:1 !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  body[data-role="public"] .hero-card h2,
  body[data-role="volunteer"] .hero-card h2{
    display:block;
    width:100%;
    max-width:100%;
    margin:1px 0 2px !important;
    padding:0 !important;
    font-size:15px !important;
    line-height:1.05 !important;
    font-weight:900 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body[data-role="public"] .hero-card p,
  body[data-role="volunteer"] .hero-card p{
    width:100%;
    max-width:100%;
    margin:0 !important;
    font-size:7px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body[data-role="public"] .miles-badge,
  body[data-role="volunteer"] .miles-badge{
    width:52px !important;
    min-width:52px !important;
    max-width:52px !important;
    height:52px !important;
    min-height:52px !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:14px !important;
    border-width:2px !important;
  }

  body[data-role="public"] .miles-badge span,
  body[data-role="volunteer"] .miles-badge span{
    font-size:18px !important;
    line-height:.9 !important;
  }

  body[data-role="public"] .miles-badge small,
  body[data-role="volunteer"] .miles-badge small{
    display:block;
    padding:0 2px !important;
    font-size:5.8px !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }

  /* Announcement becomes ticker-height only */
  body[data-role="public"] .announcement-bar,
  body[data-role="volunteer"] .announcement-bar{
    width:100%;
    min-height:25px !important;
    height:25px;
    margin:0 0 5px !important;
    border-radius:8px !important;
  }

  body[data-role="public"] .announcement-label,
  body[data-role="volunteer"] .announcement-label{
    padding:4px 6px !important;
    font-size:5.8px !important;
    letter-spacing:.5px !important;
  }

  body[data-role="public"] .announcement-item,
  body[data-role="volunteer"] .announcement-item{
    padding:4px 18px !important;
    font-size:8px !important;
    line-height:1 !important;
  }

  /* Main role tabs fit without wrapping */
  body[data-role="public"] .tabs,
  body[data-role="volunteer"] .tabs{
    width:100%;
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:4px !important;
    margin:0 0 6px !important;
    padding:0 0 2px !important;
    overflow-x:auto;
    scrollbar-width:none;
  }

  body[data-role="public"] .tabs::-webkit-scrollbar,
  body[data-role="volunteer"] .tabs::-webkit-scrollbar{
    display:none;
  }

  body[data-role="public"] .tab,
  body[data-role="volunteer"] .tab{
    flex:0 0 auto;
    min-width:auto !important;
    padding:6px 9px !important;
    border-radius:9px !important;
    font-size:8.5px !important;
    line-height:1 !important;
  }

  /* Attendance card */
  body[data-role="public"] #attendance,
  body[data-role="volunteer"] #volunteer{
    width:100%;
    max-width:100%;
  }

  body[data-role="public"] #attendance .grid.two,
  body[data-role="volunteer"] #volunteer .grid.two{
    width:100%;
    display:block !important;
  }

  body[data-role="public"] #attendance .card,
  body[data-role="volunteer"] #volunteer .card{
    width:100%;
    max-width:100%;
    padding:10px !important;
    margin:0 0 6px !important;
    border-radius:12px !important;
    overflow:hidden;
  }

  body[data-role="public"] #attendance .card h3,
  body[data-role="volunteer"] #volunteer .card h3{
    margin:0 0 4px !important;
    font-size:14px !important;
    line-height:1.1 !important;
  }

  body[data-role="public"] #attendance .muted,
  body[data-role="volunteer"] #volunteer .muted{
    margin:3px 0 6px !important;
    font-size:8.5px !important;
    line-height:1.25 !important;
  }

  /* ID + Submit remain one row */
  body[data-role="public"] #attendance .form-row,
  body[data-role="volunteer"] #volunteer .form-row{
    width:100%;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:5px !important;
    align-items:stretch !important;
    margin-top:5px !important;
  }

  body[data-role="public"] #attendance .form-row input,
  body[data-role="volunteer"] #volunteer .form-row input{
    width:100%;
    min-width:0;
    height:36px !important;
    padding:6px 8px !important;
    font-size:12px !important;
    border-radius:9px !important;
  }

  body[data-role="public"] #attendance .form-row button,
  body[data-role="volunteer"] #volunteer .form-row button{
    width:auto !important;
    min-width:74px !important;
    height:36px !important;
    margin:0 !important;
    padding:5px 8px !important;
    font-size:8px !important;
    line-height:1.05 !important;
    border-radius:9px !important;
  }

  /* scanner buttons all stay on one row */
  body[data-role="public"] #attendance .scan-actions,
  body[data-role="volunteer"] #volunteer .scan-actions{
    width:100%;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:4px !important;
    margin:5px 0 0 !important;
  }

  body[data-role="public"] #attendance .scan-actions button,
  body[data-role="volunteer"] #volunteer .scan-actions button{
    min-width:0 !important;
    width:100% !important;
    height:28px !important;
    padding:3px 2px !important;
    margin:0 !important;
    font-size:6.5px !important;
    line-height:1 !important;
    border-radius:7px !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Result card is reduced drastically */
  body[data-role="public"] #attendance .result-card,
  body[data-role="volunteer"] #volunteer .result-card{
    min-height:0 !important;
    padding:8px 10px !important;
  }

  body[data-role="public"] #attendance .result-card h3,
  body[data-role="volunteer"] #volunteer .result-card h3{
    font-size:11px !important;
  }

  body[data-role="public"] #attendance .result-card p,
  body[data-role="volunteer"] #volunteer .result-card p{
    font-size:8px !important;
  }

  /* Volunteer categories: compact 2-column tiles */
  body[data-role="volunteer"] .umoor-grid{
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:5px !important;
    margin:5px 0 !important;
  }

  body[data-role="volunteer"] .umoor-card{
    min-width:0;
    min-height:48px !important;
    padding:6px 7px !important;
    border-radius:9px !important;
    overflow:hidden;
  }

  body[data-role="volunteer"] .umoor-title{
    font-size:8.5px !important;
    line-height:1.1 !important;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  body[data-role="volunteer"] .umoor-card small{
    margin-top:3px !important;
    font-size:6px !important;
    line-height:1 !important;
  }

  body[data-role="volunteer"] .committee-selector{
    width:100%;
    padding:7px !important;
    margin-top:5px !important;
    border-radius:10px !important;
  }

  body[data-role="volunteer"] .committee-panel-head{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:5px !important;
    margin:0 0 5px !important;
  }

  body[data-role="volunteer"] .committee-panel-head .eyebrow{
    font-size:5px !important;
  }

  body[data-role="volunteer"] .committee-panel-head h4{
    margin:1px 0 0 !important;
    font-size:10px !important;
    line-height:1 !important;
  }

  body[data-role="volunteer"] .selection-count{
    padding:4px 5px !important;
    font-size:6.5px !important;
  }

  body[data-role="volunteer"] .committee-grid{
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:4px !important;
  }

  body[data-role="volunteer"] .committee-card{
    min-width:0;
    min-height:45px !important;
    padding:5px 6px !important;
    gap:5px !important;
    border-radius:8px !important;
    overflow:hidden;
  }

  body[data-role="volunteer"] .committee-card input{
    width:14px !important;
    height:14px !important;
    flex:0 0 14px !important;
  }

  body[data-role="volunteer"] .committee-card span{
    min-width:0;
    overflow:hidden;
  }

  body[data-role="volunteer"] .committee-card strong{
    display:block;
    font-size:7.5px !important;
    line-height:1.05 !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  body[data-role="volunteer"] .committee-card small{
    display:block;
    margin-top:2px !important;
    font-size:6px !important;
    line-height:1 !important;
  }
}

@media(max-width:380px){
  body[data-role="public"] .hero-card,
  body[data-role="volunteer"] .hero-card{
    grid-template-columns:minmax(0,1fr) 48px !important;
  }
  body[data-role="public"] .miles-badge,
  body[data-role="volunteer"] .miles-badge{
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
  }
  body[data-role="public"] .miles-badge span,
  body[data-role="volunteer"] .miles-badge span{
    font-size:16px !important;
  }
}


/* =====================================================================
   TASHJEE v21009 — MOBILE EVENT / ADMIN MANAGEMENT REFINEMENT
   ===================================================================== */

.admin-events-mobile,
.claims-mobile,
.admins-mobile{
  display:none;
}

.admin-access-sub{
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}

.admin-status-dot{
  display:inline-block;
  width:14px;
  height:14px;
  border-radius:50%;
  box-shadow:0 0 0 3px rgba(0,0,0,.04);
}
.admin-status-dot.active{background:#2f8b57}
.admin-status-dot.inactive{background:#bd4540}

@media(max-width:600px){

  /* Events list: no horizontal scrolling. */
  #adminEventsList{
    overflow:visible !important;
  }

  .admin-events-desktop{
    display:none !important;
  }

  .admin-events-mobile{
    display:grid !important;
    gap:7px;
  }

  .mobile-event-card{
    width:100%;
    border:1px solid var(--line);
    border-radius:13px;
    padding:9px;
    background:var(--paper);
    box-shadow:0 5px 14px rgba(60,38,34,.05);
  }

  .mobile-event-card.open{
    border-color:#c95d58;
    box-shadow:0 0 0 2px rgba(159,41,38,.06);
  }

  .mobile-event-card-head{
    display:flex;
    gap:7px;
    justify-content:space-between;
    align-items:flex-start;
  }

  .mobile-event-title-wrap{
    min-width:0;
    flex:1;
  }

  .mobile-event-title-wrap strong{
    display:block;
    font-size:11px;
    line-height:1.18;
    color:var(--forest-dark);
    white-space:normal;
  }

  .mobile-event-title-wrap small{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:7px;
  }

  .mobile-open-btn{
    flex:0 0 auto;
    padding:6px 9px !important;
    font-size:8px !important;
  }

  .mobile-event-status{
    margin:6px 0;
  }

  .mobile-event-status .expiry-pill{
    font-size:7px !important;
    padding:4px 6px !important;
  }

  .mobile-event-kpis{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
  }

  .mobile-event-kpis span{
    display:flex;
    min-width:0;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:6px 2px;
    border-radius:9px;
    background:#fff6f2;
    text-align:center;
  }

  .mobile-event-kpis b{
    font-size:13px;
    color:var(--forest-dark);
  }

  .mobile-event-kpis small{
    margin-top:2px;
    font-size:5.5px;
    color:var(--muted);
    line-height:1;
  }

  .inline-admin-mobile-detail{
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid var(--line);
  }

  .mobile-inline-head{
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-start !important;
  }

  .mobile-inline-head h3{
    font-size:12px !important;
    margin:0 0 3px !important;
  }

  .mobile-event-detail-kpis{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    margin:7px 0 !important;
  }

  .mobile-event-detail-kpis .kpi{
    padding:6px 2px !important;
  }

  .mobile-event-detail-kpis .kpi strong{
    font-size:14px !important;
  }

  .mobile-event-detail-kpis .kpi span{
    font-size:6px !important;
  }

  .mobile-admin-detail-sections{
    display:grid;
    gap:8px;
  }

  .mobile-admin-section{
    padding:8px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#fffdf9;
  }

  .mobile-admin-section h3{
    margin:0 0 6px !important;
    font-size:11px !important;
  }

  .approval-level{
    margin:6px 0 !important;
    padding:6px !important;
  }

  .approval-label{
    margin-bottom:4px !important;
    font-size:6px !important;
  }

  .activity-tabs{
    display:flex;
    overflow-x:auto;
    flex-wrap:nowrap !important;
    gap:4px;
    scrollbar-width:none;
  }

  .activity-tabs::-webkit-scrollbar{display:none}

  .activity-tab{
    flex:0 0 auto;
    padding:6px 8px !important;
    font-size:7px !important;
    white-space:nowrap;
  }

  .approve-current-btn{
    width:100%;
    margin:5px 0 0;
    padding:7px !important;
    font-size:7px !important;
  }

  /* Claims become cards. */
  .claims-desktop{display:none !important}
  .claims-mobile{
    display:grid !important;
    gap:5px;
  }

  .mobile-claim-card{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:6px;
    align-items:center;
    padding:7px;
    border:1px solid var(--line);
    border-radius:9px;
    background:#fffaf7;
  }

  .mobile-claim-card strong{
    display:block;
    font-size:9px;
  }

  .mobile-claim-card span{
    display:block;
    margin-top:2px;
    font-size:7px;
    color:var(--muted);
  }

  .mobile-claim-card>b{
    font-size:8px;
  }

  .mobile-claim-actions{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
  }

  .mobile-claim-actions button{
    padding:6px !important;
    font-size:7px !important;
  }

  /* QR/link cards become one compact column. */
  .link-grid.stacked{
    gap:5px !important;
  }

  .link-card{
    padding:7px !important;
  }

  .link-card h4{
    font-size:9px !important;
  }

  .link-card img,.qr-img{
    width:64px !important;
    height:64px !important;
  }

  .link-card a{
    font-size:6.5px !important;
  }

  /* Manage Events: selector first, form second; no sideways navigation. */
  #manageEventsAdminView,
  #manageAdminsAdminView{
    overflow-x:hidden;
  }

  #manageEventSelect,
  #manageAdminSelect{
    width:100%;
    max-width:100%;
    font-size:10px !important;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  /* Admin listing becomes compact cards. */
  .admins-desktop{
    display:none !important;
  }

  .admins-mobile{
    display:grid !important;
    gap:5px;
  }

  .mobile-admin-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    width:100%;
    padding:8px 9px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--paper);
  }

  .mobile-admin-card-main{
    min-width:0;
    flex:1;
  }

  .mobile-admin-card-main strong{
    display:block;
    font-size:9.5px;
    color:var(--forest-dark);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mobile-admin-card-main b{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:7px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mobile-admin-card-side{
    display:flex;
    align-items:center;
    gap:6px;
    flex:0 0 auto;
  }

  .mobile-admin-card-side .admin-status-dot{
    width:10px;
    height:10px;
  }

  .mobile-admin-card-side button{
    padding:5px 7px !important;
    font-size:7px !important;
  }
}


/* =====================================================================
   TASHJEE v21009.1 — ADMIN EVENT OPEN + RESPONSIVE BREAKPOINT FIX
   ===================================================================== */

/* Desktop default */
.admin-events-desktop{display:block}
.admin-events-mobile{display:none}

/* Tablet / smaller laptop:
   use the same card layout as mobile so no horizontal navigation is needed. */
@media(max-width:1099px){
  .admin-events-desktop{
    display:none !important;
  }

  .admin-events-mobile{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .mobile-event-card{
    min-width:0;
    width:100%;
    padding:11px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--paper);
    box-shadow:0 6px 16px rgba(60,38,34,.05);
  }

  .mobile-event-card.open{
    grid-column:1/-1;
  }

  .mobile-event-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
  }

  .mobile-event-title-wrap{
    min-width:0;
    flex:1;
  }

  .mobile-event-title-wrap strong{
    display:block;
    color:var(--forest-dark);
    font-size:13px;
    line-height:1.25;
  }

  .mobile-event-title-wrap small{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:9px;
  }

  .mobile-event-status{margin:7px 0}

  .mobile-event-kpis{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
  }

  .mobile-event-kpis span{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:7px 3px;
    border-radius:10px;
    background:#fff6f2;
  }

  .mobile-event-kpis b{
    font-size:16px;
    color:var(--forest-dark);
  }

  .mobile-event-kpis small{
    margin-top:2px;
    font-size:7px;
    color:var(--muted);
    text-align:center;
  }

  #inlineAdminEventDetailMobile{
    width:100%;
    max-width:100%;
    overflow:visible;
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid var(--line);
  }

  .mobile-admin-detail-sections{
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(250px,.6fr);
    gap:10px;
  }

  .mobile-admin-section{
    min-width:0;
    padding:10px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fffdf9;
  }

  .mobile-admin-section .table-wrap,
  .adminClaimsTable{
    max-width:100%;
    overflow-x:auto;
  }

  .activity-tabs{
    max-width:100%;
    overflow-x:auto;
    flex-wrap:nowrap !important;
    -webkit-overflow-scrolling:touch;
  }

  .link-grid.stacked{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
  }

  .link-card{
    min-width:0;
  }

  .link-card a{
    overflow-wrap:anywhere;
  }
}

/* Phone */
@media(max-width:700px){
  .admin-events-mobile{
    grid-template-columns:1fr !important;
    gap:7px !important;
  }

  .mobile-event-card.open{
    grid-column:auto !important;
  }

  .mobile-admin-detail-sections{
    grid-template-columns:1fr !important;
    gap:7px !important;
  }

  .link-grid.stacked{
    grid-template-columns:1fr !important;
  }
}

/* Wide desktop:
   details can use full width without fixed table assumptions. */
@media(min-width:1100px){
  #inlineAdminEventDetailDesktop{
    width:100%;
    max-width:100%;
  }

  #inlineAdminEventDetailDesktop .mobile-admin-detail-sections{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);
    gap:18px;
    align-items:start;
  }

  #inlineAdminEventDetailDesktop .link-grid.stacked{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }

  #inlineAdminEventDetailDesktop .link-card{
    min-width:0;
  }
}

/* Larger desktop / widescreen */
@media(min-width:1500px){
  .shell{
    max-width:1440px;
  }

  #inlineAdminEventDetailDesktop .mobile-admin-detail-sections{
    grid-template-columns:minmax(0,1.65fr) minmax(340px,.35fr);
  }
}

.app-header::before{height:100px!important;opacity:.20;pointer-events:none}.app-header{padding-top:108px}
@media(max-width:700px){.app-header::before{height:44px!important}.app-header{padding-top:50px!important}}
.khidmat-submit-result-zone{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:12px;align-items:stretch;padding-top:12px;border-top:1px solid var(--line)}
.khidmat-inline-result{margin:0!important;min-height:100%;padding:14px!important}
@media(max-width:760px){.khidmat-submit-result-zone{grid-template-columns:1fr;gap:7px}.khidmat-inline-result{min-height:0;padding:9px!important}}
.event-group{margin:10px 0;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--paper)}
.event-group-header{width:100%;display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:8px;align-items:center;text-align:left;padding:12px 14px;color:var(--forest-dark)!important;background:#fff7f3!important;border:0!important;box-shadow:none!important}
.event-group.open .event-group-header{background:#fff0ed!important}.event-group-symbol{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;background:var(--forest);font-size:18px;font-weight:900}.event-group-count{min-width:28px;height:24px;padding:0 8px;border-radius:999px;display:grid;place-items:center;color:#6d351f;background:#f4c75f;font-size:11px;font-weight:900}.event-group-body{padding:8px}.event-group-empty{padding:8px;margin:0}
.approval-scope-switch{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}.approve-scope-btn{width:100%;margin:8px 0 0;padding:10px 12px!important}.claim-committee{margin-top:3px;color:var(--muted);font-size:10px;font-weight:700}
.spin-admin-layout{display:grid;grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr);gap:18px;align-items:start}.spin-settings-form,.winner-history-panel{border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:16px}.spin-settings-form{display:grid;gap:11px}.spin-settings-form h4{margin:4px 0;color:var(--forest-dark)}.spin-settings-form label>span{display:block;margin-bottom:5px;font-size:10px;font-weight:900;color:var(--muted)}.spin-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.winner-history-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border-bottom:1px solid var(--line)}.winner-history-item strong{display:block;font-size:11px;color:var(--forest-dark)}.winner-history-item span{display:block;margin-top:3px;font-size:8px;color:var(--muted)}.winner-history-meta{text-align:right;flex:0 0 auto}.winner-history-meta b{display:block;font-size:11px}.winner-history-meta small{font-size:7px;color:var(--muted)}
@media(max-width:900px){.spin-admin-layout{grid-template-columns:1fr}}@media(max-width:600px){.spin-settings-grid{grid-template-columns:1fr 1fr}}