fronted/src/assets/admin-theme.css

/* ─── Admin theme (theme-aware) ─── */
.admin-page {
  --admin-accent: var(--spotify-green-dark);
  --admin-accent-soft: var(--green-bg);
  --admin-accent-border: var(--border);
}

.admin-hero {
  border-color: var(--admin-accent-border);
  background: var(--bg-surface);
  color: var(--ink);
}

/* Dark theme: nền phẳng, không gradient / glow */
[data-theme="dark"] .admin-hero {
  background: var(--bg-surface);
  border-color: var(--border);
  --admin-accent-soft: color-mix(in srgb, var(--admin-accent) 16%, var(--bg-interactive));
  --admin-accent-border: color-mix(in srgb, var(--admin-accent) 30%, var(--border));
}

[data-theme="dark"] .admin-hero-glow {
  display: none;
}

/* Light theme: tint nhẹ theo module (không đổ sang tím/đen) */
[data-theme="light"] .admin-hero {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--admin-accent) 8%, var(--bg-surface)) 0%,
    var(--bg-surface) 100%
  );
}

.admin-hero h1,
.admin-hero h2,
.admin-hero p,
.admin-hero .text-\[var\(--ink\)\],
.admin-hero .text-\[var\(--ink2\)\],
.admin-hero .text-\[var\(--ink3\)\] {
  color: inherit;
}

.admin-hero-glow {
  background: color-mix(in srgb, var(--admin-accent) 18%, transparent);
}

.admin-panel-accent {
  border-top: 3px solid var(--admin-accent);
}

.admin-crud-bar {
  border-color: var(--admin-accent-border);
  background: var(--bg-surface);
  color: var(--ink);
}

.admin-crud-bar .admin-crud-tag {
  color: var(--admin-accent);
  background: var(--admin-accent-soft);
}

.admin-list-active {
  background: var(--green-bg) !important;
  border-left: 3px solid var(--admin-accent);
  color: var(--ink) !important;
}

.admin-list-active .text-\[var\(--ink\)\],
.admin-list-active .text-\[var\(--ink2\)\],
.admin-list-active .text-\[var\(--ink3\)\],
.admin-list-active .text-slate-500,
.admin-list-active .text-slate-600,
.admin-list-active .text-slate-700 {
  color: var(--ink) !important;
}

.admin-json-live {
  border-color: var(--admin-accent-border);
}

.admin-json-live.is-syncing {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--admin-accent) 25%, transparent);
}

.admin-json-badge {
  background: var(--admin-accent-soft);
  color: var(--admin-accent);
  border: 1px solid var(--admin-accent-border);
}

.admin-json-badge.pulse {
  animation: admin-json-pulse 1.2s ease-in-out infinite;
}

@keyframes admin-json-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.admin-quick-link:hover {
  border-color: var(--link-accent, var(--admin-accent-border)) !important;
  background: color-mix(in srgb, var(--link-accent, var(--admin-accent)) 8%, var(--bg-surface)) !important;
}

.admin-quick-link:hover .admin-quick-icon {
  color: var(--link-accent, var(--admin-accent));
  background: color-mix(in srgb, var(--link-accent, var(--admin-accent)) 12%, var(--bg-interactive));
}

/* Admin accent buttons — readable text on colored background */
.admin-page .ct-btn-accent,
.admin-crud-bar .admin-save-btn {
  background: var(--admin-accent) !important;
  border-color: var(--admin-accent) !important;
  color: #ffffff !important;
}
.admin-page .ct-btn-accent:hover,
.admin-crud-bar .admin-save-btn:hover {
  filter: brightness(1.08);
  color: #ffffff !important;
}

/* Emerald selection chips in admin editors */
[data-theme="dark"] .bg-emerald-50,
[data-theme="dark"] .hover\:bg-emerald-50:hover {
  background-color: var(--green-bg) !important;
}
[data-theme="dark"] .border-emerald-300 {
  border-color: var(--spotify-green-dark) !important;
}

/* Admin textareas — rectangular, left-aligned, auto-grow height (incl. HTML / JSON mono fields) */
.admin-page textarea.ct-input {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  border-radius: var(--radius-comfortable, 8px);
  text-align: left;
  padding: 14px 18px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  resize: none;
  overflow: hidden;
  box-sizing: border-box;
  field-sizing: content;
}

/* Wide table inputs (e.g. Audio URL) */
.admin-page table input.ct-input.w-full {
  border-radius: var(--radius-comfortable, 8px);
}

/* Raw JSON panel */
.admin-page .admin-json-live textarea.ct-input {
  border-radius: 0;
  padding: 14px 18px;
  text-align: left;
}