/* ===========================================================
 * 07-settings.css — APPEND to your style.css
 * New settings sub-views: Tabs editor + Units editor (P7)
 * =========================================================== */

/* Page header for sub-views */
.set-page-h {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.set-back-btn {
  background: var(--surface, #fff); border: 1px solid var(--border, #E7E9E3);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 13px; font-weight: 600;
  color: var(--text-2, #374151);
  cursor: pointer;
}
.set-page-h h2 {
  font-size: 18px; font-weight: 700; margin: 0;
  letter-spacing: -0.01em;
}

/* New card style */
.set-card-new {
  background: var(--surface, #fff);
  border: 1px solid var(--border-soft, #EEF0EA);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 10px;
}
.set-card-head-new {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.set-card-icon-new {
  width: 32px; height: 32px; border-radius: 10px;
  background: #F1F2EE; color: var(--text-2, #374151);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.set-card-icon-new.is-emerald { background: #DCFCE7; color: #0F7A35; }
.set-card-icon-new.is-amber   { background: #FEF3C7; color: #92400E; }
.set-card-icon-new.is-violet  { background: #EDE9FE; color: #6D28D9; }
.set-card-head-new h3 { font-size: 14px; font-weight: 700; margin: 0; letter-spacing: -0.005em; }
.set-card-head-new p { font-size: 11px; color: var(--muted, #6B7280); margin: 1px 0 0; line-height: 1.4; }

/* Tab editor */
.set-tab-list-new {
  display: flex; flex-direction: column; gap: 8px;
}
.set-tab-row-new {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: #FAFAF8;
  border: 1px solid var(--border-soft, #EEF0EA);
  border-radius: 11px;
}
.set-tab-moves { display: flex; flex-direction: column; gap: 2px; }
.set-tab-move {
  width: 20px; height: 16px;
  background: transparent; border: 0;
  color: var(--muted, #6B7280);
  font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.set-tab-move:hover:not(:disabled) { background: #fff; color: var(--text, #111827); }
.set-tab-move:disabled { opacity: 0.3; cursor: not-allowed; }
.set-tab-icon-btn {
  width: 32px; height: 32px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #E7E9E3);
  border-radius: 9px;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.set-tab-icon-btn:hover { background: #ECFDF5; border-color: var(--primary, #16A34A); }
.set-tab-name-in {
  flex: 1; min-width: 0;
  height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 8px;
  font-size: 13.5px; font-weight: 600;
  color: var(--text, #111827);
  outline: none;
}
.set-tab-name-in:hover { background: #fff; border-color: var(--border, #E7E9E3); }
.set-tab-name-in:focus { background: #fff; border-color: var(--primary, #16A34A); }
.set-tab-del {
  width: 30px; height: 30px;
  background: transparent; border: 0;
  color: #EF4444;
  font-size: 14px; cursor: pointer;
  border-radius: 7px;
}
.set-tab-del:hover { background: #FEE2E2; }
.set-tab-add-new {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1.5px dashed var(--border, #D1D5DB);
  border-radius: 11px;
  color: var(--primary, #16A34A);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}

/* Subchips block */
.set-subchips-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-soft, #EEF0EA);
}
.set-subchips-h {
  font-size: 12px; font-weight: 700;
  color: var(--muted, #6B7280);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.set-subchips-tab {
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-soft, #F1F2EE);
}
.set-subchips-tab:last-child { border-bottom: 0; }
.set-subchips-tabname {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px;
  color: var(--text, #111827);
  margin-bottom: 6px;
}
.set-subchips-emoji { font-size: 14px; }
.set-subchips-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.set-subchips-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 4px 4px 10px;
  background: #DCFCE7;
  border-radius: 999px;
  font-size: 11.5px;
  color: #14532D;
}
.set-subchips-chip button {
  width: 18px; height: 18px;
  background: rgba(15,86,32,0.18); color: #0F7A35;
  border: 0; border-radius: 50%;
  font-size: 11px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.set-subchips-add {
  padding: 4px 10px;
  background: transparent;
  border: 1.5px dashed var(--border, #D1D5DB);
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  color: var(--muted, #6B7280);
  cursor: pointer;
}

/* Units editor */
.set-unit-group-new {
  margin-top: 12px;
}
.set-unit-h-new {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700;
  color: var(--text-2, #374151);
  margin-bottom: 6px;
}
.set-unit-dot-new { width: 6px; height: 6px; border-radius: 50%; }
.set-unit-grid-new {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.set-unit-tile-new {
  position: relative;
  padding: 8px 14px;
  background: #FAFAF8;
  border: 1px solid var(--border-soft, #EEF0EA);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 1px;
  min-width: 60px;
}
.set-unit-tile-new.is-base {
  background: #ECFDF5;
  border-color: #BBF7D0;
}
.set-unit-name-new {
  font-size: 13px; font-weight: 700;
  color: var(--text, #111827);
}
.set-unit-meta-new {
  font-size: 9.5px; color: var(--faint, #9CA3AF);
  font-weight: 600; letter-spacing: 0.04em;
}
.set-unit-tile-new.is-base .set-unit-meta-new { color: #0F7A35; }
.set-unit-x-new {
  position: absolute; top: -5px; right: -5px;
  width: 18px; height: 18px;
  background: #EF4444; color: #fff;
  border: 2px solid #fff; border-radius: 50%;
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  display: none;
  align-items: center; justify-content: center;
  padding: 0;
}
.set-unit-tile-new:hover .set-unit-x-new { display: inline-flex; }
.set-unit-add-new {
  padding: 8px 12px;
  background: transparent;
  border: 1.5px dashed var(--border, #D1D5DB);
  border-radius: 10px;
  color: var(--muted, #6B7280);
  font-size: 11.5px; font-weight: 600;
  cursor: pointer;
}

/* Row in home settings list (for our added items) */
.settings-row-button .settings-row-icon { font-size: 16px; }
.settings-row-button .settings-row-body { flex: 1; min-width: 0; }
.settings-row-button .settings-row-title {
  font-size: 14px; font-weight: 700;
  color: var(--text, #111827);
}
.settings-row-button .settings-row-desc {
  font-size: 11.5px; color: var(--muted, #6B7280);
  margin-top: 1px;
}
.settings-row-button .settings-row-chev {
  font-size: 18px; color: var(--faint, #9CA3AF);
}
.settings-row-icon.is-emerald { background: #DCFCE7; color: #0F7A35; }
.settings-row-icon.is-amber   { background: #FEF3C7; color: #92400E; }