/* 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; }
/* Some cards use .card-content instead of .card-body; support both */
.card .card-content { display:block; }
.card[data-collapsed="true"] .card-body { display:none; }
.card[data-collapsed="true"] .card-content { 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; }

/* =============================
   Shopping List Settings - Professional Layout
   ============================= */
.shopping-setting-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.shopping-setting-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
}

.shopping-setting-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 0;
  flex: 1;
  user-select: none;
}

.shopping-setting-label input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.shopping-setting-label span {
  line-height: 1.5;
  font-size: 15px;
  color: var(--text, #1f2937);
}

.shopping-help-icon {
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  font-size: 18px;
  color: #0b73f7;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-left: -4px;
}

.shopping-help-icon:hover {
  background: rgba(11, 115, 247, 0.1);
  transform: scale(1.1);
}

.shopping-help-icon:active {
  transform: scale(0.95);
}

.shopping-setting-description {
  font-size: 13px;
  color: var(--muted, #6b7280);
  line-height: 1.6;
  margin-left: 28px;
  padding-right: 8px;
}

/* Modal styling */
.shopping-help-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

.shopping-help-modal.open {
  display: flex;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.shopping-help-modal-content {
  background: var(--card-bg, white);
  padding: 0;
  border-radius: 12px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.shopping-help-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--card-bg, white);
  border-radius: 12px 12px 0 0;
}

.shopping-help-modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text, #1f2937);
}

.shopping-help-modal-close {
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
  color: var(--muted, #9ca3af);
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.shopping-help-modal-close:hover {
  background: var(--hover-bg, #f3f4f6);
  color: var(--text, #1f2937);
}

.shopping-help-modal-body {
  padding: 0;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .shopping-setting-description {
    margin-left: 28px;
    font-size: 12px;
  }
  
  .shopping-help-modal-content {
    max-width: 100%;
    margin: 0;
  }
}

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