/* TagManagement (TM-04 / v1.3) — admin tag management surface. */
.tagmgmt-status {
  color: var(--color-text-muted);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tagmgmt-error {
  color: var(--color-danger, #ef4444);
}

.tagmgmt-search {
  margin-bottom: var(--space-sm, 8px);
  max-width: 240px;
}

.tagmgmt-empty-row {
  text-align: center !important;
  color: var(--color-text-muted);
  font-size: 13px;
  padding: 12px;
}

.tagmgmt-table {
  width: 100%;
  border-collapse: collapse;
}

.tagmgmt-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}

.tagmgmt-table td {
  padding: 6px 12px;
  font-size: 14px;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}

.tagmgmt-table code {
  font-size: 13px;
  color: var(--color-accent, #8b5cf6);
  background: var(--color-bg-elevated);
  padding: 1px 6px;
  border-radius: 4px;
}

.tagmgmt-count-col {
  width: 70px;
  text-align: center !important;
}

.tagmgmt-actions-col {
  width: 100px;
  text-align: right !important;
}

.tagmgmt-actions-col button {
  padding: 2px 6px;
}

/* Dialog internals */
.tagmgmt-dialog-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tagmgmt-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.tagmgmt-field .input,
.tagmgmt-field select {
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  padding: 0 10px;
  font-size: 14px;
  font-family: var(--font-family-ui, system-ui, sans-serif);
}

.tagmgmt-field .input:focus,
.tagmgmt-field select:focus {
  outline: none;
  border-color: var(--color-accent-border);
}

.tagmgmt-preview {
  max-height: 240px;
  overflow-y: auto;
  font-size: 13px;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
  padding: 8px;
}

.tagmgmt-preview-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.tagmgmt-preview-list li {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 12px;
}

.tagmgmt-preview-list li:last-child {
  border-bottom: none;
}

.tagmgmt-tag-change {
  color: var(--color-text-muted);
  font-size: 11px;
}

.tagmgmt-body-note {
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: 11px;
  font-style: italic;
}

.tagmgmt-body-badge {
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 3px;
  background: var(--color-accent-subtle, var(--color-border-subtle));
  color: var(--color-text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Bulk button + BulkTagDialog (Phase 31 / TF-01) */
.tagmgmt-bulk-btn {
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Undo button + note (Phase 35 / TF-05) */
.tagmgmt-undo-btn {
  margin-bottom: 8px;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tagmgmt-undo-note {
  margin: 0 0 8px;
  font-size: 0.85em;
  color: var(--text-muted, #666);
}
.tagmgmt-undo-note.tagmgmt-error {
  color: var(--danger, #c0392b);
}

.tagmgmt-bulk-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tagmgmt-bulk-section {
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 0;
}

.tagmgmt-bulk-section legend {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 0 4px;
}

.tagmgmt-bulk-hint {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--color-text-muted);
}

.tagmgmt-bulk-pagelist {
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}

.tagmgmt-bulk-pagecheck {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 0;
}

.tagmgmt-bulk-pagecheck code {
  font-size: 11px;
}

.tagmgmt-bulk-ops {
  display: flex;
  gap: 10px;
}

.tagmgmt-bulk-ops .tagmgmt-field {
  flex: 1;
}

/* Color swatch + TagMetaDialog (Phase 32 / TF-02) */
.tagmgmt-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid var(--color-border-subtle, #ddd);
}

.tagmgmt-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tagmgmt-color-picker {
  width: 36px;
  height: 36px;
  padding: 0;
 border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  cursor: pointer;
}

.tagmgmt-color-palette {
  flex: 1;
  height: 36px;
}

/* Grouped hierarchy rendering (Phase 33 / TF-03) */
.tagmgmt-child-row {
  background: var(--color-bg-subtle, rgba(0, 0, 0, 0.02));
}

.tagmgmt-tree-marker {
  color: var(--color-text-muted);
  margin-right: 4px;
  font-size: 12px;
}

.tagmgmt-parent-note {
  color: var(--color-text-muted);
  font-size: 11px;
}

/* Analytics tab + panel (Phase 34 / TF-04) */
.tagmgmt-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-sm, 8px);
  border-bottom: 1px solid var(--color-border);
}

.tagmgmt-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  padding: 6px 12px;
  border-radius: 4px 4px 0 0;
  font-size: 13px;
  cursor: pointer;
}

.tagmgmt-tab:hover {
  color: var(--color-text);
  background: var(--color-bg-subtle, rgba(0, 0, 0, 0.03));
}

.tagmgmt-tab-active {
  color: var(--color-accent, #8b5cf6);
  border-bottom: 2px solid var(--color-accent, #8b5cf6);
  font-weight: 600;
}

.tagmgmt-analytics {
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 16px);
}

.tagmgmt-analytics-cards {
  display: flex;
  gap: var(--space-sm, 8px);
  flex-wrap: wrap;
}

.tagmgmt-analytics-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 20px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-elevated);
  min-width: 100px;
}

.tagmgmt-analytics-card-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
}

.tagmgmt-analytics-card-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.tagmgmt-analytics-sections {
  display: flex;
  gap: var(--space-md, 16px);
  flex-wrap: wrap;
}

.tagmgmt-analytics-section {
  flex: 1;
  min-width: 180px;
}

.tagmgmt-analytics-heading {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0 0 8px 0;
}

.tagmgmt-analytics-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tagmgmt-analytics-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--color-bg-subtle, rgba(0, 0, 0, 0.02));
}

.tagmgmt-analytics-count {
  font-weight: 600;
  color: var(--color-text-muted);
  min-width: 24px;
  text-align: right;
}

.tagmgmt-analytics-empty {
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
  padding: 8px;
  justify-content: center !important;
}

.tagmgmt-analytics-table {
  margin-top: var(--space-sm, 8px);
}

.tagmgmt-analytics-sort {
  cursor: pointer;
  user-select: none;
}

.tagmgmt-analytics-sort:hover {
  color: var(--color-text);
}

.tagmgmt-analytics-scope {
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
}
