/* ============================================================
   Category Master styles (Sep 8 2026 — category-unification build)
   Reuses the .rm-* component classes from rawmaterial.css (those
   rules are global, not scoped) — this file just re-declares the
   --rm-* custom properties under #categorymaster-root, matching the
   exact pattern designmaster.css uses under #designmaster-root.
   ============================================================ */

#categorymaster-root {
  --rm-plum: #3A2436;
  --rm-gold: #CFC0A2;
  --rm-gold-soft: #F1EAD9;
  --rm-ink: #121014;
  --rm-ink-soft: #6B6570;
  --rm-line: #EAE6E9;
  --rm-panel: #FBFAFB;
  --rm-danger: #B5453A;
  font-family: 'Work Sans', sans-serif;
  color: var(--rm-ink);
  background: var(--rm-panel);
  padding: 24px 20px 40px;
}
#categorymaster-root * { box-sizing: border-box; }
#categorymaster-root h1, #categorymaster-root h2, #categorymaster-root h3 { font-family: 'Space Grotesk', sans-serif; margin: 0; }

/* Overwrite-bug safeguard (same pattern as Design Master, Aug 30 2026):
   makes it unmistakable which existing row Save will overwrite while a
   form is in Edit mode — pairs with the dynamic "Update" button label
   and the "X updated." vs "X added." message text in categorymaster.js. */
#categorymaster-root .rm-row-editing td { background: var(--rm-gold-soft); }
#categorymaster-root .rm-row-editing td:first-child { box-shadow: inset 3px 0 0 var(--rm-plum); }
#categorymaster-root .rm-btn-updating { background: var(--rm-gold); color: var(--rm-plum); }

/* ---- Gender badges (Categories tab) ---- */
#categorymaster-root .cm-badge-ladies { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; background: #F1E4EC; color: #8A3B63; font-size: 11px; font-weight: 600; }
#categorymaster-root .cm-badge-gents { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; background: #E4EAF1; color: #2F5A8A; font-size: 11px; font-weight: 600; }
#categorymaster-root .cm-badge-unisex { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; background: var(--rm-gold-soft); color: var(--rm-plum); font-size: 11px; font-weight: 600; }
#categorymaster-root .cm-group-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; background: #fff; border: 1px solid var(--rm-line); font-size: 11px; color: var(--rm-ink-soft); }

/* ---- Collapsible group sections (Categories by Group, Sub Categories by
   Category — Sep 10 2026) — native <details>/<summary>, no JS needed for
   open/close state. ---- */
#categorymaster-root .rm-group-details { border: 1px solid var(--rm-line); border-radius: 10px; background: #fff; margin-bottom: 10px; overflow: hidden; }
#categorymaster-root .rm-group-details .rm-table-wrap { margin: 0; border: none; border-radius: 0; border-top: 1px solid var(--rm-line); }
#categorymaster-root .rm-group-summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; cursor: pointer; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 13.5px; }
#categorymaster-root .rm-group-summary::-webkit-details-marker { display: none; }
#categorymaster-root .rm-group-summary::before { content: '▸'; display: inline-block; margin-right: 8px; color: var(--rm-ink-soft); transition: transform .15s ease; }
#categorymaster-root details[open] > .rm-group-summary::before { transform: rotate(90deg); }
#categorymaster-root .rm-group-count { font-family: 'Work Sans', sans-serif; font-weight: 400; font-size: 11.5px; color: var(--rm-ink-soft); margin-left: auto; }
#categorymaster-root .rm-empty-block { padding: 20px; text-align: center; color: var(--rm-ink-soft); font-size: 12.5px; }

/* ---- Variation Types tab + per-Category attribute checklist (Sep 13
   2026 — Variation Attribute Type system) ---- */
#categorymaster-root .cm-attr-checklist { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 12px; border: 1px solid var(--rm-line); border-radius: 8px; background: #fff; }
#categorymaster-root .cm-attr-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--rm-ink); cursor: pointer; }
#categorymaster-root .cm-attr-check input { accent-color: var(--rm-plum); }

#categorymaster-root .cm-attrtype-card { border: 1px solid var(--rm-line); border-radius: 10px; background: #fff; margin-bottom: 10px; overflow: hidden; }
#categorymaster-root .cm-attrtype-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
#categorymaster-root .cm-attrtype-options { padding: 4px 16px 16px; border-top: 1px solid var(--rm-line); }
#categorymaster-root .cm-attr-options-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
#categorymaster-root .cm-attr-option-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--rm-panel); border-radius: 6px; }
#categorymaster-root .cm-attr-opt-value { flex: 1; font-size: 12.5px; font-weight: 600; }
#categorymaster-root .cm-attr-opt-move { border: 1px solid var(--rm-line); background: #fff; border-radius: 5px; width: 24px; height: 24px; cursor: pointer; color: var(--rm-ink-soft); font-size: 12px; }
#categorymaster-root .cm-attr-opt-move:disabled { opacity: .35; cursor: default; }
#categorymaster-root .cm-attr-opt-move:hover:not(:disabled) { color: var(--rm-plum); border-color: var(--rm-plum); }
#categorymaster-root .cm-attr-option-add { display: flex; gap: 8px; align-items: center; }