/* ==========================================================================
   MyRDM — Tema panel & daftar-rdm
   Aktif melalui <html data-theme="default|rdm|emisgtk">
   ========================================================================== */

/* ---------------------------------------------------------------- Default */
html[data-theme="default"] {
  --background: #0b0f17;
  --foreground: #f8fafc;
  --card: #111827;
  --border: #1f2937;
  --input: #273449;
  --muted-foreground: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #45556c;
  --slate-200: #e2e8f0;
  --sidebar: #0d1523;
  --sidebar-foreground: #cbd5e1;
  --primary: #0284c7;
  --ring: #38bdf8;
  --theme-header: #0d1523;
  --theme-header-text: #e2e8f0;
}

/* ------------------------------------------------------- RDM Original */
html[data-theme="rdm"] {
  --background: #eef1f5;
  --foreground: #1f2937;
  --card: #ffffff;
  --border: #d6dde7;
  --input: #ffffff;
  --muted-foreground: #5b6675;
  --slate-500: #6b7686;
  --slate-600: #55606f;
  --slate-200: #1f2937;
  --sidebar: #37424f;
  --sidebar-foreground: #e5e9ef;
  --primary: #5a7d1e;
  --ring: #7aa62b;
  --theme-header: #5a7d1e;
  --theme-header-text: #ffffff;
}

/* ------------------------------------------------------------- EMISGTK */
html[data-theme="emisgtk"] {
  --background: #f4f7f8;
  --foreground: #16323a;
  --card: #ffffff;
  --border: #d9e3e6;
  --input: #ffffff;
  --muted-foreground: #55707a;
  --slate-500: #5f7a83;
  --slate-600: #4d656d;
  --slate-200: #16323a;
  --sidebar: #0f7f68;
  --sidebar-foreground: #e9f7f2;
  --primary: #0f8b6c;
  --ring: #12a17d;
  --theme-header: #0f7f68;
  --theme-header-text: #ffffff;
}

/* ------------------------------------------- Permukaan tema terang (panel) */
html[data-theme="rdm"] body,
html[data-theme="emisgtk"] body {
  background: var(--background);
  color: var(--foreground);
}

html[data-theme="rdm"] .sidebar,
html[data-theme="emisgtk"] .sidebar {
  background: var(--sidebar);
  color: var(--sidebar-foreground);
  border-right-color: rgba(0, 0, 0, 0.18);
}

html[data-theme="rdm"] .topbar,
html[data-theme="emisgtk"] .topbar {
  background: var(--theme-header);
  color: var(--theme-header-text);
  border-bottom-color: rgba(0, 0, 0, 0.18);
}

html[data-theme="rdm"] .topbar h1,
html[data-theme="rdm"] .topbar a,
html[data-theme="rdm"] .topbar span,
html[data-theme="emisgtk"] .topbar h1,
html[data-theme="emisgtk"] .topbar a,
html[data-theme="emisgtk"] .topbar span {
  color: var(--theme-header-text);
}

html[data-theme="rdm"] .card,
html[data-theme="emisgtk"] .card {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html[data-theme="rdm"] .ui-input,
html[data-theme="rdm"] .ui-select,
html[data-theme="rdm"] textarea,
html[data-theme="emisgtk"] .ui-input,
html[data-theme="emisgtk"] .ui-select,
html[data-theme="emisgtk"] textarea {
  background: var(--input);
  border-color: var(--border);
  color: var(--foreground);
}

html[data-theme="rdm"] table th,
html[data-theme="emisgtk"] table th {
  color: var(--slate-600);
  background: rgba(15, 23, 42, 0.03);
}

html[data-theme="rdm"] table td,
html[data-theme="emisgtk"] table td {
  color: var(--foreground);
  border-color: var(--border);
}

html[data-theme="rdm"] .text-faint,
html[data-theme="rdm"] .cell-sub,
html[data-theme="rdm"] .page-head__desc,
html[data-theme="emisgtk"] .text-faint,
html[data-theme="emisgtk"] .cell-sub,
html[data-theme="emisgtk"] .page-head__desc {
  color: var(--muted-foreground);
}

html[data-theme="rdm"] .nav__link.is-active {
  background: #5a7d1e;
  color: #ffffff;
}

html[data-theme="emisgtk"] .nav__link.is-active {
  background: #ffffff;
  color: #0f7f68;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* --------------------------------------- Permukaan tema terang (daftar-rdm) */
html[data-theme="rdm"] .page,
html[data-theme="emisgtk"] .page {
  background: var(--background);
  color: var(--foreground);
}

html[data-theme="rdm"] .card,
html[data-theme="emisgtk"] .card {
  background: var(--card);
  color: var(--foreground);
}

html[data-theme="rdm"] .brand-title,
html[data-theme="emisgtk"] .brand-title {
  color: var(--foreground);
}

html[data-theme="rdm"] .server-card,
html[data-theme="emisgtk"] .server-card {
  background: var(--card);
  border-color: var(--border);
  color: var(--foreground);
}

html[data-theme="rdm"] .server-card.is-active,
html[data-theme="emisgtk"] .server-card.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(90, 125, 30, 0.25);
}

html[data-theme="emisgtk"] .server-card.is-active {
  box-shadow: 0 0 0 2px rgba(15, 139, 108, 0.25);
}

html[data-theme="rdm"] .server-name,
html[data-theme="emisgtk"] .server-name {
  color: var(--foreground);
}

html[data-theme="rdm"] .ui-input,
html[data-theme="rdm"] .ui-select,
html[data-theme="rdm"] textarea,
html[data-theme="emisgtk"] .ui-input,
html[data-theme="emisgtk"] .ui-select,
html[data-theme="emisgtk"] textarea {
  background: var(--input);
  border-color: var(--border);
  color: var(--foreground);
}

/* ------------------------------------------------- Pemilih tema (settings) */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.theme-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--foreground);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.theme-card:hover {
  border-color: var(--primary);
}

.theme-card.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25);
}

.theme-card__swatch {
  height: 26px;
  border-radius: 6px;
}

.theme-card__name {
  font-size: 12.5px;
  font-weight: 700;
}

.theme-card__desc {
  font-size: 11px;
  color: var(--muted-foreground);
  line-height: 1.4;
}

/* -------------------------------------------- Toast / notifikasi ikut tema */
html[data-theme="rdm"] { --success: #5a7d1e; }
html[data-theme="emisgtk"] { --success: #0f8b6c; }

html[data-theme="rdm"] .toast,
html[data-theme="emisgtk"] .toast {
  background: var(--card);
  border-color: var(--border);
  color: var(--foreground);
  box-shadow: 0 18px 45px -12px rgba(15, 23, 42, 0.25);
}

html[data-theme="rdm"] .toast__title,
html[data-theme="emisgtk"] .toast__title {
  color: var(--foreground);
}

html[data-theme="rdm"] .toast__desc,
html[data-theme="emisgtk"] .toast__desc {
  color: var(--muted-foreground);
}

html[data-theme="rdm"] .toast__icon,
html[data-theme="emisgtk"] .toast__icon {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
}

html[data-theme="rdm"] .toast--error .toast__icon,
html[data-theme="emisgtk"] .toast--error .toast__icon {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

html[data-theme="rdm"] .toast--info .toast__icon,
html[data-theme="emisgtk"] .toast--info .toast__icon {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
}

/* ============================ daftar-rdm: palet ========================== */
html[data-theme="rdm"] {
  --bg: #eef1f5;
  --bg-soft: #ffffff;
  --panel: #ffffff;
  --panel-2: #f6f8fa;
  --border: #d6dde7;
  --border-strong: #c2ccda;
  --text: #1f2937;
  --muted: #5b6675;
  --emerald: #5a7d1e;
  --emerald-soft: rgba(90, 125, 30, 0.12);
  --sky: #5a7d1e;
}

html[data-theme="emisgtk"] {
  --bg: #f4f7f8;
  --bg-soft: #ffffff;
  --panel: #ffffff;
  --panel-2: #f6fbf9;
  --border: #d9e3e6;
  --border-strong: #c3d5d9;
  --text: #16323a;
  --muted: #55707a;
  --emerald: #0f8b6c;
  --emerald-soft: rgba(15, 139, 108, 0.12);
  --sky: #0f8b6c;
}

html[data-theme="rdm"] body,
html[data-theme="emisgtk"] body {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="rdm"] .card,
html[data-theme="rdm"] .panel,
html[data-theme="emisgtk"] .card,
html[data-theme="emisgtk"] .panel {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
}

html[data-theme="rdm"] input,
html[data-theme="rdm"] select,
html[data-theme="rdm"] textarea,
html[data-theme="emisgtk"] input,
html[data-theme="emisgtk"] select,
html[data-theme="emisgtk"] textarea {
  background: var(--bg-soft);
  color: var(--text);
  border-color: var(--border-strong);
}

html[data-theme="rdm"] .muted,
html[data-theme="rdm"] .hint,
html[data-theme="rdm"] .server-loc,
html[data-theme="rdm"] .server-cap,
html[data-theme="emisgtk"] .muted,
html[data-theme="emisgtk"] .hint,
html[data-theme="emisgtk"] .server-loc,
html[data-theme="emisgtk"] .server-cap {
  color: var(--muted);
}

html[data-theme="rdm"] .server-card,
html[data-theme="emisgtk"] .server-card {
  background: var(--panel-2);
  border-color: var(--border);
  color: var(--text);
}

html[data-theme="rdm"] .server-card.is-disabled,
html[data-theme="emisgtk"] .server-card.is-disabled {
  background: #eceff3;
  opacity: 0.65;
}

html[data-theme="emisgtk"] .server-card.is-disabled {
  background: #eef4f4;
}

html[data-theme="rdm"] .btn,
html[data-theme="emisgtk"] .btn {
  color: #ffffff;
}

/* =================== Panel: tombol, tabel, modal, menu, alert ============ */
html[data-theme="rdm"] .ui-btn--outline,
html[data-theme="emisgtk"] .ui-btn--outline {
  background: #ffffff;
  border-color: var(--border);
  color: var(--foreground);
}

html[data-theme="rdm"] .ui-btn--ghost,
html[data-theme="emisgtk"] .ui-btn--ghost {
  color: var(--foreground);
}

html[data-theme="rdm"] table,
html[data-theme="emisgtk"] table {
  color: var(--foreground);
}

html[data-theme="rdm"] thead th,
html[data-theme="emisgtk"] thead th {
  background: #f6f8fa;
  color: var(--slate-600);
}

html[data-theme="rdm"] tbody tr:hover,
html[data-theme="emisgtk"] tbody tr:hover {
  background: #f6f8fa;
}

html[data-theme="rdm"] .modal__panel,
html[data-theme="rdm"] .modal__card,
html[data-theme="emisgtk"] .modal__panel,
html[data-theme="emisgtk"] .modal__card {
  background: var(--card);
  color: var(--foreground);
}

html[data-theme="rdm"] .menu,
html[data-theme="rdm"] .dropdown,
html[data-theme="rdm"] .row-menu,
html[data-theme="emisgtk"] .menu,
html[data-theme="emisgtk"] .dropdown,
html[data-theme="emisgtk"] .row-menu {
  background: var(--card);
  border-color: var(--border);
  color: var(--foreground);
}

html[data-theme="rdm"] .alert,
html[data-theme="emisgtk"] .alert {
  background: #ffffff;
  border-color: var(--border);
  color: var(--foreground);
}

html[data-theme="rdm"] .page-head__title,
html[data-theme="rdm"] .card__title,
html[data-theme="emisgtk"] .page-head__title,
html[data-theme="emisgtk"] .card__title {
  color: var(--foreground);
}

html[data-theme="rdm"] .ui-label,
html[data-theme="emisgtk"] .ui-label {
  color: var(--slate-600);
}

/* ================== daftar-rdm: pembeda kuat antar tema ================== */
/* RDM Original — hijau tua, sudut tegas */
html[data-theme="rdm"] .brand-mark,
html[data-theme="rdm"] .brand {
  color: #2f4a0e;
}

html[data-theme="rdm"] .btn,
html[data-theme="rdm"] .chip.domain-chip.is-active,
html[data-theme="rdm"] .server-card.is-active {
  background: #5a7d1e;
  border-color: #5a7d1e;
  color: #ffffff;
  border-radius: 8px;
}

html[data-theme="rdm"] .server-bar span {
  background: linear-gradient(90deg, #7aa62b, #5a7d1e);
}

html[data-theme="rdm"] .server-card {
  border-radius: 8px;
}

/* EMISGTK — teal, sudut membulat */
html[data-theme="emisgtk"] .brand-mark,
html[data-theme="emisgtk"] .brand {
  color: #0f7f68;
}

html[data-theme="emisgtk"] .btn,
html[data-theme="emisgtk"] .chip.domain-chip.is-active,
html[data-theme="emisgtk"] .server-card.is-active {
  background: #0f8b6c;
  border-color: #0f8b6c;
  color: #ffffff;
  border-radius: 18px;
}

html[data-theme="emisgtk"] .server-bar span {
  background: linear-gradient(90deg, #12a17d, #0f7f68);
}

html[data-theme="emisgtk"] .server-card {
  border-radius: 18px;
}

html[data-theme="emisgtk"] .card {
  border-radius: 18px;
}

/* kartu "full" merah tetap konsisten */
html[data-theme="rdm"] .server-bar.is-full span,
html[data-theme="emisgtk"] .server-bar.is-full span {
  background: linear-gradient(90deg, #f87171, #ef4444);
}

/* ============ Panel: kartu metrik berwarna (khas RDM Original) =========== */
html[data-theme="rdm"] .stats-grid > *:nth-child(1) { background: #e8a33d; border-color: #e8a33d; }
html[data-theme="rdm"] .stats-grid > *:nth-child(2) { background: #d9534f; border-color: #d9534f; }
html[data-theme="rdm"] .stats-grid > *:nth-child(3) { background: #3f51b5; border-color: #3f51b5; }
html[data-theme="rdm"] .stats-grid > *:nth-child(4) { background: #3aa76d; border-color: #3aa76d; }

html[data-theme="rdm"] .stats-grid > *,
html[data-theme="rdm"] .stats-grid > * * {
  color: #ffffff !important;
}

html[data-theme="rdm"] .stats-grid > * .text-faint,
html[data-theme="rdm"] .stats-grid > * .cell-sub,
html[data-theme="rdm"] .stats-grid > * .metric-card__sub {
  color: rgba(255, 255, 255, 0.82) !important;
}

html[data-theme="rdm"] .stats-grid > * svg {
  stroke: #ffffff;
  opacity: 0.9;
}

/* EMISGTK: kartu putih lembut dengan aksen pastel */
html[data-theme="emisgtk"] .stats-grid > * {
  background: #ffffff;
  border-color: #e2ecee;
  box-shadow: 0 2px 10px rgba(16, 60, 55, 0.06);
}

/* ============== Panel: kartu uang + status sidebar + kartu VPS =========== */
html[data-theme="rdm"] .money-grid > *:nth-child(1) { background: #2f7d5e; border-color: #2f7d5e; }
html[data-theme="rdm"] .money-grid > *:nth-child(2) { background: #c56a2c; border-color: #c56a2c; }

html[data-theme="rdm"] .money-grid > *:nth-child(1),
html[data-theme="rdm"] .money-grid > *:nth-child(1) *,
html[data-theme="rdm"] .money-grid > *:nth-child(2),
html[data-theme="rdm"] .money-grid > *:nth-child(2) * {
  color: #ffffff !important;
}

html[data-theme="rdm"] .money-grid > *:nth-child(1) .text-faint,
html[data-theme="rdm"] .money-grid > *:nth-child(2) .text-faint,
html[data-theme="rdm"] .money-grid > *:nth-child(1) .cell-sub,
html[data-theme="rdm"] .money-grid > *:nth-child(2) .cell-sub {
  color: rgba(255, 255, 255, 0.82) !important;
}

html[data-theme="emisgtk"] .money-grid > *:not(.chart-card) {
  background: #ffffff;
  border-color: #e2ecee;
}

html[data-theme="rdm"] .sidebar__status,
html[data-theme="emisgtk"] .sidebar__status {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="rdm"] .sidebar__status *,
html[data-theme="emisgtk"] .sidebar__status * {
  color: #ffffff;
}

html[data-theme="rdm"] .vps-card,
html[data-theme="rdm"] .armada-card,
html[data-theme="emisgtk"] .vps-card,
html[data-theme="emisgtk"] .armada-card {
  background: var(--card);
  border-color: var(--border);
  color: var(--foreground);
}

/* =============== Panel: tombol utama, link kartu, chip, tab ============== */
html[data-theme="rdm"] .ui-btn--primary,
html[data-theme="emisgtk"] .ui-btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

html[data-theme="rdm"] .ui-btn--primary:hover,
html[data-theme="emisgtk"] .ui-btn--primary:hover {
  filter: brightness(0.94);
}

html[data-theme="rdm"] .card__link,
html[data-theme="rdm"] .ui-btn--link,
html[data-theme="emisgtk"] .card__link,
html[data-theme="emisgtk"] .ui-btn--link {
  color: var(--primary);
}

html[data-theme="rdm"] .chip,
html[data-theme="emisgtk"] .chip {
  background: var(--panel-2, #f6f8fa);
  border-color: var(--border);
  color: var(--foreground);
}

html[data-theme="rdm"] .chip.is-active,
html[data-theme="emisgtk"] .chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

html[data-theme="rdm"] .tabs__btn.is-active,
html[data-theme="emisgtk"] .tabs__btn.is-active {
  color: var(--primary);
  border-color: var(--primary);
}

html[data-theme="rdm"] .ui-hint,
html[data-theme="emisgtk"] .ui-hint {
  color: var(--muted-foreground);
}

html[data-theme="rdm"] .list-row,
html[data-theme="emisgtk"] .list-row {
  border-color: var(--border);
}

html[data-theme="rdm"] .list-row:hover,
html[data-theme="emisgtk"] .list-row:hover {
  background: var(--panel-2, #f6f8fa);
}

/* ------------- Gauge VPS (CPU/RAM/DISK) ikut tema ------------- */
html[data-theme="rdm"] .gauge__num,
html[data-theme="emisgtk"] .gauge__num {
  color: var(--foreground);
  font-weight: 700;
}

html[data-theme="rdm"] .gauge__label,
html[data-theme="emisgtk"] .gauge__label {
  color: var(--slate-600);
}

html[data-theme="rdm"] .gauge__sub,
html[data-theme="emisgtk"] .gauge__sub {
  color: var(--muted-foreground);
}

html[data-theme="rdm"] .gauge__ring .gauge__track,
html[data-theme="emisgtk"] .gauge__ring .gauge__track {
  stroke: #e3e8ef;
}

html[data-theme="rdm"] .gauge__num--empty,
html[data-theme="emisgtk"] .gauge__num--empty {
  color: var(--muted-foreground);
  font-weight: 500;
}