/* Level config table inputs – inherit theme colors (light/dark) */
#levelConfig input[type="number"],
#levelConfig select,
#levelConfig textarea {
  width: 100%;
  /* Let theme.css/admin.css define colors and borders */
  padding: 10px 12px;
  border-radius: 10px;
}

/* Use default button styles from theme; no color overrides here */

/* Optional: consistent focus state */
#levelConfig input[type="number"]:focus,
#levelConfig select:focus,
#levelConfig textarea:focus {
  outline: 2px solid rgba(16,185,129,0.35); /* mint-green glow */
  outline-offset: 2px;
}

/* =============================
   Collapsible cards (moved from settings.html <style>)
   ============================= */
.card.collapsible { position: relative; }
.card .card-header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.card.collapsible .card-header { cursor:pointer; }
.card .card-title { margin:0; display:flex; align-items:center; gap:8px; }
.card.collapsible .card-title { 
  cursor:pointer;
  

}
.card .card-body { display:block; }
.card[data-collapsed="true"] .card-body { display:none; }

/* =============================
   Utility classes (spacing, layout)
   ============================= */
.m-0 { margin:0 !important; }
.mt-8 { margin-top:8px !important; }
.mt-6 { margin-top:6px !important; }
.mt-10 { margin-top:10px !important; }
.mt-12 { margin-top:12px !important; }
.mt-0 { margin-top:0 !important; }
.mt-16 { margin-top:16px !important; }
.mb-8 { margin-bottom:8px !important; }
.mb-6 { margin-bottom:6px !important; }
.my-8 { margin:8px 0 !important; }
.my-8-12 { margin:8px 0 12px !important; }
.my-6 { margin:6px 0 !important; }
.ml-auto { margin-left:auto !important; }
.mr-6 { margin-right:6px !important; }

.gap-8 { gap:8px !important; }
.gap-6 { gap:6px !important; }
.gap-12 { gap:12px !important; }

.ai-center { align-items:center !important; }
.ai-end { align-items:flex-end !important; }
.jc-between { justify-content:space-between !important; }
.jc-end { justify-content:flex-end !important; }
.ta-right { text-align:right !important; }
.flex-1 { flex:1 1 0% !important; }
.w-120 { width:120px !important; }
.minw-220 { min-width:220px !important; }
.overflow-auto { overflow:auto !important; }
.hidden { display:none !important; }
.block { display:block !important; }

/* =============================
   Settings: Active tasks table (built via JS)
   ============================= */
#activeTasks .table-basic { width:100%; border-collapse:collapse; }
#activeTasks .table-basic th,
#activeTasks .table-basic td { padding:6px 8px; border-bottom:1px solid var(--b); }
#activeTasks .table-basic thead tr { color:#9ca3af; font-size:13px; }

/* =============================
   Level config table
   ============================= */
#tblLevelCfg { min-width:420px; }
#tblLevelCfg thead th:nth-child(1) { width:120px; text-align:left; }
#tblLevelCfg thead th:nth-child(2) { width:160px; text-align:left; }
#tblLevelCfg thead th:nth-child(3) { text-align:right; }

/* =============================
   Chips variants used in dynamic content
   ============================= */
.chip-disabled { background:#374151; color:#9ca3af; }
.chip-levelup { background:#065f46; color:#ecfdf5; }

/* =============================
   Template icon preview image
   ============================= */
.icon-preview { width:28px; height:28px; margin-left:8px; }

/* =============================
   Rewards (Premier) section – larger, easier inputs
   ============================= */
#rewards .card-title {
  font-size: 22px;
}
#rewards .field label {
  font-size: 1rem; /* ~16px */
}
#rewards .field input,
#rewards .field select,
#rewards .field textarea {
  font-size: 1.05rem; /* ~16.8px */
  padding: 12px 14px;
  border-radius: 12px;
}
#rewards .btn {
  /* Match templates list row button sizing */
  font-size: 0.95rem;
  padding: 6px 10px;
}
#rewards .muted {
  font-size: 14px;
}

/* =============================
   Settings global sizing (apply to all cards in settings.html)
   Scoped to .wrap to avoid affecting other pages using admin.css
   ============================= */
.wrap .card-title {
  font-size: 22px;
}
.wrap .field label {
  font-size: 1rem;
}
.wrap .field input,
.wrap .field select,
.wrap .field textarea {
  font-size: 1.05rem;
  padding: 12px 14px;
  border-radius: 12px;
}
.wrap .btn {
  font-size: inherit; /* match navbar/non-active buttons in Light theme */
  padding: 10px 14px;
}
.wrap .muted {
  font-size: 14px;
}

/* =============================
   Templates list: smaller row buttons and mobile-friendly stacking
   ============================= */
/* Smaller buttons specifically in the templates list rows */
#templates #setTplList .item .btn {
  font-size: 0.95rem;
  padding: 6px 10px;
}
/* Mobile: stack row vertically for better fit */
@media (max-width: 560px) {
  #templates #setTplList .item {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  #templates #setTplList .item .row {
    justify-content: flex-end;
  }
}

/* Title above, points below for templates list */
#templates #setTplList .tpl-main {
  display: flex;
  flex-direction: column;
}
#templates #setTplList .tpl-title {
  font-size: 1.2rem;
}
#templates #setTplList .tpl-points {
  margin-top: 4px;
}

/* Members list: full-width swipe content with points to the right */
#members .swipe-content.members-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
#members .swipe-content .mc-left { flex: 1 1 auto; min-width: 0; }
#members .swipe-content .mc-right { flex: 0 0 auto; }
#members .points-chip { font-weight: 700; }

/* Ensure swipe actions slide in from the right for members list */
#members .swipe-actions {
  right: -200px; /* hidden off-screen to the right */
  width: 200px;  /* total reveal width */
}
#members .swipe-wrap.open .swipe-actions { right: 0; }
#members .swipe-wrap.open .swipe-content { transform: translateX(-200px); }

/* Make swipe-content cover the full row and keep card look */
#members .item.swipe-cell { padding: 0; background: transparent; border: none; }
#members .swipe-wrap { width: 100%; }
#members .swipe-content {
  background: var(--card);
  border: 1px solid var(--b);
  border-radius: 8px;
  margin-right: 30px;
  /* Ensure full border visibility and spacing below each row */
  box-sizing: border-box;
  margin-bottom: 8px;
}
#members .swipe-wrap { padding-bottom: 1px; }