:root {
  --erp-bg:#eef3f8;
  --erp-surface:#ffffff;
  --erp-ink:#162033;
  --erp-muted:#64748b;
  --erp-line:#e2e8f0;
  --erp-navy:#102b4c;
  --erp-navy-2:#173b62;
  --erp-primary:#2563eb;
  --erp-accent:#16a394;
  --erp-success:#1f9d57;
  --erp-warning:#d98a17;
  --erp-danger:#c83b4f;
  --erp-info:#3b6fd1;
  --erp-shadow:0 1px 2px rgba(16,32,64,.06),0 12px 32px rgba(16,32,64,.08);
}

* { box-sizing:border-box; }
body.erp-body {
  min-height:100vh;
  background:
    radial-gradient(circle at 8% 5%, rgba(37,99,235,.08), transparent 25%),
    radial-gradient(circle at 90% 0%, rgba(22,163,148,.10), transparent 28%),
    var(--erp-bg);
  color:var(--erp-ink);
}

.auth-bg {
  min-height:100vh;
  background: radial-gradient(circle at top left, #dbeafe, transparent 30%), linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
}

.glass-card {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(18px);
  border-radius: 24px;
}

.brand-icon {
  width:64px;
  height:64px;
  border-radius:18px;
  background:#0d6efd;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:24px;
}

.erp-shell { display:flex; min-height:100vh; }
.erp-sidebar {
  width:270px;
  flex-shrink:0;
  position:sticky;
  top:0;
  height:100vh;
  background:linear-gradient(180deg,#102b4c 0%,#0d223c 100%);
  color:#dbe8f7;
  display:flex;
  flex-direction:column;
  box-shadow:8px 0 30px rgba(15,23,42,.12);
  z-index:50;
}

.erp-brand {
  padding:22px 20px 18px;
  display:flex;
  align-items:center;
  gap:13px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.erp-logo {
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#16a394,#2563eb);
  color:#fff;
  font-weight:900;
  letter-spacing:-.04em;
}

.erp-brand-title { color:#fff; font-weight:800; line-height:1.1; }
.erp-brand-sub { color:#92a8c2; font-size:12px; margin-top:3px; }

.erp-nav { flex:1; overflow-y:auto; padding:16px 12px; }
.erp-nav-label {
  color:#6f86a3;
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  padding:0 12px;
  margin:10px 0 8px;
}

.erp-nav-link {
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  margin-bottom:4px;
  color:#cbd8e7;
  text-decoration:none;
  border-radius:12px;
  border-left:3px solid transparent;
  transition:.16s ease;
  font-weight:600;
}

.erp-nav-link:hover {
  background:rgba(255,255,255,.07);
  color:#fff;
  text-decoration:none;
  transform:translateX(2px);
}

.erp-nav-link.active {
  background:rgba(22,163,148,.16);
  color:#fff;
  border-left-color:var(--erp-accent);
}

.erp-nav-icon { width:22px; text-align:center; }
.erp-sidebar-footer {
  border-top:1px solid rgba(255,255,255,.08);
  padding:16px 20px;
  color:#a8bad0;
  font-size:12px;
}

.erp-main {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.erp-topbar {
  height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 26px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(226,232,240,.84);
  position:sticky;
  top:0;
  z-index:30;
}

.erp-page-title { font-weight:800; font-size:18px; color:var(--erp-ink); }
.erp-page-subtitle { color:var(--erp-muted); font-size:12.5px; margin-top:1px; }
.erp-user { display:flex; align-items:center; gap:12px; }
.erp-avatar {
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#173b62,#2563eb);
  color:#fff;
  font-weight:800;
}

.erp-menu-btn {
  border:1px solid var(--erp-line);
  background:#fff;
  color:var(--erp-ink);
  border-radius:10px;
}

.erp-content {
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:24px;
}

.erp-backdrop { display:none; }

.card {
  border-radius:18px;
  overflow:hidden;
}

.card-header {
  padding:16px 18px;
}

.table > :not(caption) > * > * { vertical-align: middle; }

.toast-like { border-radius: 14px; }

/* Hero dashboard */
.hero-panel {
  background:linear-gradient(135deg,#173b62 0%,#24548d 55%,#16a394 140%);
  color:#fff;
  border-radius:22px;
  padding:26px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  box-shadow:0 20px 42px rgba(12,33,64,.18);
  position:relative;
  overflow:hidden;
}

.hero-panel::after {
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-90px;
  top:-95px;
  background:rgba(255,255,255,.10);
  border-radius:50%;
}

.hero-panel > * { position:relative; z-index:1; }
.hero-panel h1 { font-size:32px; font-weight:900; margin:8px 0 8px; letter-spacing:-.03em; }
.hero-panel p { max-width:760px; color:rgba(255,255,255,.82); margin:0; }

.hero-badge {
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.14);
  color:#fff;
  padding:6px 11px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
  font-weight:800;
}

.hero-meta { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.hero-meta span {
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-size:12.5px;
}

.hero-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* Stat card */
.modern-stat-card {
  background:rgba(255,255,255,.92);
  border:1px solid rgba(226,232,240,.90);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--erp-shadow);
  height:100%;
  transition:.16s ease;
}

.modern-stat-card:hover { transform:translateY(-3px); }
.stat-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:13px; }
.stat-icon {
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#f2f6fb;
  font-size:21px;
}
.stat-value { font-size:34px; font-weight:900; letter-spacing:-.05em; line-height:1; margin-top:6px; }
.stat-chip {
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
}
.chip-primary { background:#e8efff; color:#1d4ed8; }
.chip-success { background:#e4f6ec; color:#1f7a47; }
.chip-info { background:#e6eefb; color:#2a55a5; }
.chip-secondary { background:#eef2f7; color:#475569; }
.chip-warning { background:#fff3dc; color:#a9690d; }
.chip-danger { background:#fbe4e8; color:#a52a3c; }

/* Trend chart */
.trend-chart {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:14px;
  align-items:end;
  height:250px;
  padding-top:12px;
}

.trend-item { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; }
.trend-stack {
  width:100%;
  max-width:58px;
  border-radius:16px 16px 9px 9px;
  background:linear-gradient(180deg,#f3f7fc 0%,#eaf0f6 100%);
  overflow:hidden;
  display:flex;
  flex-direction:column-reverse;
  box-shadow:inset 0 0 0 1px rgba(100,116,139,.08);
}
.trend-stack .seg { width:100%; display:block; }
.trend-stack .seg.present { background:linear-gradient(180deg,#31c173 0%,#1f9d57 100%); }
.trend-stack .seg.permit { background:linear-gradient(180deg,#7ea6ff 0%,#3b6fd1 100%); }
.trend-stack .seg.alpha { background:linear-gradient(180deg,#f17b8d 0%,#c83b4f 100%); }
.trend-value { font-size:12px; font-weight:800; color:#334155; }
.trend-label { font-size:12px; color:var(--erp-muted); }

.chart-legend { display:flex; gap:16px; flex-wrap:wrap; margin-top:16px; font-size:12.5px; color:var(--erp-muted); }
.legend-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.legend-dot.present { background:var(--erp-success); }
.legend-dot.permit { background:var(--erp-info); }
.legend-dot.alpha { background:var(--erp-danger); }

/* Score */
.score-circle {
  --score:0%;
  width:148px;
  height:148px;
  margin:2px auto 20px;
  border-radius:50%;
  background:conic-gradient(var(--erp-accent) 0 var(--score), #eaf0f6 var(--score) 100%);
  display:grid;
  place-items:center;
  position:relative;
}

.score-circle::before {
  content:"";
  position:absolute;
  inset:13px;
  background:#fff;
  border-radius:50%;
}

.score-inner { position:relative; z-index:1; text-align:center; }
.score-value { font-size:30px; font-weight:900; color:#173b62; line-height:1; }
.score-label { color:var(--erp-muted); font-size:12px; margin-top:5px; }

.progress-list { display:flex; flex-direction:column; gap:13px; }
.erp-progress { height:10px; border-radius:999px; background:#edf2f8; overflow:hidden; }
.bar-present { background:linear-gradient(90deg,#31c173,#1f9d57); }
.bar-late { background:linear-gradient(90deg,#f4bf59,#d98a17); }
.bar-permit { background:linear-gradient(90deg,#86aefd,#3b6fd1); }
.bar-alpha { background:linear-gradient(90deg,#ef8594,#c83b4f); }

/* Activity */
.activity-item {
  padding:12px 0;
  border-bottom:1px solid #eef1f6;
}
.activity-item:last-child { border-bottom:0; }

.enhanced-activity {
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.activity-dot {
  width:12px;
  height:12px;
  margin-top:5px;
  border-radius:50%;
  background:#16a394;
  box-shadow:0 0 0 6px rgba(22,163,148,.11);
  flex-shrink:0;
}

.empty-state {
  padding:28px 18px;
  text-align:center;
  color:var(--erp-muted);
  background:#f8fafc;
  border:1px dashed #cbd5e1;
  border-radius:14px;
}

/* Room monitor */
.room-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;
}

.room-card {
  position:relative;
  padding:16px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--erp-line);
  box-shadow:0 1px 2px rgba(16,32,64,.04);
}

.room-card.room-open { border-color:rgba(31,157,87,.28); background:linear-gradient(180deg,#ffffff,#f2fbf6); }
.room-card.room-waiting { border-color:rgba(217,138,23,.28); background:linear-gradient(180deg,#ffffff,#fff8eb); }
.room-card.room-idle { border-color:#e2e8f0; background:#fbfdff; }

.room-status-dot {
  position:absolute;
  right:14px;
  top:14px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#94a3b8;
}
.room-open .room-status-dot { background:#22c55e; box-shadow:0 0 0 5px rgba(34,197,94,.12); }
.room-waiting .room-status-dot { background:#f59e0b; box-shadow:0 0 0 5px rgba(245,158,11,.12); }

.room-time {
  display:inline-block;
  margin-top:10px;
  padding:5px 9px;
  border-radius:999px;
  background:#eef4fb;
  font-size:12px;
  color:#334155;
  font-weight:700;
}

/* Quick links */
.quick-links { display:flex; flex-direction:column; gap:10px; }
.quick-links a {
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border-radius:14px;
  border:1px solid var(--erp-line);
  color:var(--erp-ink);
  text-decoration:none;
  background:#fff;
  transition:.16s ease;
}
.quick-links a:hover { transform:translateY(-2px); box-shadow:var(--erp-shadow); background:#fbfdff; }
.quick-links a span {
  width:40px;
  height:40px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:#f2f6fb;
  font-size:18px;
  flex-shrink:0;
}
.quick-links a strong { display:block; color:#173b62; }
.quick-links a small { display:block; color:var(--erp-muted); font-size:12px; }

/* Generic table/card polish */
.dataTables_wrapper .form-control,
.dataTables_wrapper .form-select,
.form-control,
.form-select {
  border-radius:11px;
  border-color:#cbd5e1;
}

.btn { border-radius:11px; font-weight:700; }
.badge { font-weight:700; }
.table thead th { color:#64748b; font-size:12px; text-transform:uppercase; letter-spacing:.03em; }

@media (max-width: 991.98px) {
  .erp-sidebar {
    position:fixed;
    left:-290px;
    transition:.2s ease;
  }

  .erp-sidebar.open { left:0; }

  .erp-backdrop.show {
    display:block;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.46);
    z-index:40;
  }

  .erp-topbar { padding:0 16px; }
  .erp-content { padding:18px; }
}

@media (max-width: 720px) {
  .hero-panel { padding:20px; }
  .hero-panel h1 { font-size:26px; }
  .hero-actions { width:100%; }
  .hero-actions .btn { flex:1; }
  .trend-chart { gap:9px; height:220px; }
  .trend-stack { max-width:44px; }
}

@media (prefers-color-scheme: dark) {
  body.erp-body {
    background:#0f172a;
    color:#e5e7eb;
  }
  .erp-topbar,
  .card,
  .card-header,
  .modal-content,
  .modern-stat-card,
  .room-card,
  .quick-links a {
    background:#111827 !important;
    color:#e5e7eb;
    border-color:#1f2937 !important;
  }
  .text-muted { color:#9ca3af !important; }
  .table { --bs-table-bg: transparent; --bs-table-color:#e5e7eb; --bs-table-border-color:#1f2937; }
  .score-circle::before { background:#111827; }
  .empty-state { background:#0f172a; border-color:#334155; }
  .stat-icon,
  .quick-links a span { background:#1f2937; }
}

/* Fix kontras DataTables dan tabel saat browser memakai dark mode */
@media (prefers-color-scheme: dark) {
  .table > tbody > tr > *,
  .table > thead > tr > *,
  .table-striped > tbody > tr:nth-of-type(odd) > * {
    color:#e5e7eb !important;
    background-color:transparent !important;
    box-shadow:none !important;
  }
  .dataTables_wrapper,
  .dt-container,
  .dt-info,
  .dt-length label,
  .dt-search label {
    color:#e5e7eb !important;
  }
  .dt-input,
  .dataTables_filter input,
  .dataTables_length select {
    background:#ffffff !important;
    color:#111827 !important;
    border-color:#cbd5e1 !important;
  }
}


/* Settings page */
.erp-logo img,
.brand-icon-logo img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  background:#fff;
}
.settings-hero {
  background:linear-gradient(135deg,#173b62 0%,#24548d 55%,#16a394 140%);
  color:#fff;
  border-radius:22px;
  padding:24px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  box-shadow:0 20px 42px rgba(12,33,64,.18);
}
.settings-hero h1 {font-size:30px;font-weight:900;margin:8px 0;letter-spacing:-.03em;}
.settings-hero p {max-width:820px;color:rgba(255,255,255,.82);margin:0;}
.logo-preview {
  width:160px;
  height:160px;
  border-radius:22px;
  border:1px solid var(--erp-line);
  background:#fff;
  display:grid;
  place-items:center;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(15,23,42,.08);
}
.logo-preview img {width:100%;height:100%;object-fit:contain;padding:14px;}
.logo-preview-empty {
  width:100%;height:100%;display:grid;place-items:center;
  background:linear-gradient(135deg,#16a394,#2563eb);
  color:#fff;font-weight:900;font-size:34px;
}
.sidebar-preview {
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,#102b4c,#0d223c);
  padding:16px;border-radius:16px;color:#fff;
}
.preview-logo {
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,#16a394,#2563eb);font-weight:900;overflow:hidden;flex-shrink:0;
}
.preview-logo img {width:100%;height:100%;object-fit:cover;background:#fff;}
.preview-title {font-weight:800;line-height:1.15;}
.preview-subtitle {font-size:12px;color:#a8bad0;margin-top:3px;}
@media(max-width:720px){.settings-hero{flex-direction:column}.settings-hero .btn{width:100%;}}


.role-info-list {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.role-info-list > div {
  padding:10px 12px;
  border:1px solid var(--erp-line);
  border-radius:12px;
  background:#fbfdff;
}
.role-info-list .badge {
  margin-right:8px;
}


/* =========================================================
   FORCE LIGHT THEME - mengikuti gaya absensi_sekolah:
   sidebar biru gelap, area konten terang, teks jelas.
   ========================================================= */
html, body.erp-body {
  background:#eef1f6 !important;
  color:#1e293b !important;
}

.erp-main,
.erp-content {
  background:#eef1f6 !important;
  color:#1e293b !important;
}

.erp-topbar {
  background:#ffffff !important;
  color:#1e293b !important;
  border-bottom:1px solid #e3e8ef !important;
  box-shadow:0 1px 2px rgba(16,32,64,.04);
}

.erp-page-title,
.card,
.card-body,
.card-header,
.modern-stat-card,
.room-card,
.quick-links a,
.role-info-list > div {
  background:#ffffff !important;
  color:#1e293b !important;
}

.card,
.modern-stat-card,
.room-card,
.quick-links a {
  border:1px solid #e3e8ef !important;
  box-shadow:0 1px 2px rgba(16,32,64,.06), 0 4px 16px rgba(16,32,64,.05) !important;
}

.text-muted,
.erp-page-subtitle,
.form-text,
small.text-muted {
  color:#64748b !important;
}

.table {
  --bs-table-bg:#ffffff !important;
  --bs-table-color:#1e293b !important;
  --bs-table-border-color:#e3e8ef !important;
  color:#1e293b !important;
}

.table > :not(caption) > * > * {
  background:#ffffff !important;
  color:#1e293b !important;
  border-color:#e3e8ef !important;
}

.table thead th {
  background:#f7f9fc !important;
  color:#64748b !important;
  font-weight:700 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background:#fbfdff !important;
}

.table-hover tbody tr:hover > * {
  background:#f8fafc !important;
}

.form-control,
.form-select,
.dt-input,
.dataTables_wrapper input,
.dataTables_wrapper select {
  background:#ffffff !important;
  color:#1e293b !important;
  border:1px solid #cbd5e1 !important;
}

.form-control:focus,
.form-select:focus {
  border-color:#17a398 !important;
  box-shadow:0 0 0 .2rem rgba(23,163,152,.15) !important;
}

.dataTables_wrapper,
.dt-container,
.dt-container label,
.dt-info,
.dt-length,
.dt-search {
  color:#1e293b !important;
}

.dt-paging-button,
.page-link {
  color:#1e293b !important;
}

.btn-primary {
  background:#1d4ed8 !important;
  border-color:#1d4ed8 !important;
}

.btn-success {
  background:#17a398 !important;
  border-color:#17a398 !important;
}

.hero-panel {
  background:linear-gradient(135deg,#16314f 0%,#1d3d63 55%,#17a398 150%) !important;
  color:#ffffff !important;
}

.hero-panel p,
.hero-meta span,
.hero-badge {
  color:#ffffff !important;
}

.stat-icon,
.quick-links a span {
  background:#f2f6fb !important;
}

.score-circle::before {
  background:#ffffff !important;
}

.empty-state {
  background:#f8fafc !important;
  color:#64748b !important;
  border:1px dashed #cbd5e1 !important;
}

/* Matikan efek dark mode otomatis browser. */
@media (prefers-color-scheme: dark) {
  html, body.erp-body,
  .erp-main,
  .erp-content {
    background:#eef1f6 !important;
    color:#1e293b !important;
  }

  .erp-topbar,
  .card,
  .card-header,
  .modal-content,
  .modern-stat-card,
  .room-card,
  .quick-links a,
  .role-info-list > div {
    background:#ffffff !important;
    color:#1e293b !important;
    border-color:#e3e8ef !important;
  }

  .table {
    --bs-table-bg:#ffffff !important;
    --bs-table-color:#1e293b !important;
    --bs-table-border-color:#e3e8ef !important;
  }

  .text-muted,
  .erp-page-subtitle,
  .form-text,
  small.text-muted {
    color:#64748b !important;
  }
}


/* =========================================================
   FIX V3 - Teks konten dibuat hitam dan lebih jelas.
   Khusus sidebar tetap terang/putih agar kontras di background biru.
   ========================================================= */
.erp-main,
.erp-content,
.erp-topbar,
.card,
.card-body,
.card-header,
.modal-content,
.modern-stat-card,
.room-card,
.role-info-list > div,
.quick-links a {
  color:#000000 !important;
}

.erp-main h1,
.erp-main h2,
.erp-main h3,
.erp-main h4,
.erp-main h5,
.erp-main h6,
.erp-main p,
.erp-main label,
.erp-main .form-label,
.erp-main .fw-bold,
.erp-main .fw-semibold,
.erp-main strong,
.erp-main b,
.erp-main div,
.erp-main span:not(.badge):not(.erp-avatar):not(.erp-nav-icon):not(.seg):not(.legend-dot):not(.room-status-dot),
.erp-main small:not(.text-white-50),
.erp-page-title,
.erp-page-subtitle {
  color:#000000 !important;
}

.erp-main .text-muted,
.erp-main .form-text,
.erp-main small.text-muted,
.erp-main .card-subtitle,
.erp-main .dt-info,
.erp-main .dt-length,
.erp-main .dt-search,
.erp-main .dt-container label,
.erp-main .dataTables_info,
.erp-main .dataTables_length,
.erp-main .dataTables_filter {
  color:#000000 !important;
  opacity:1 !important;
}

.erp-main table,
.erp-main table th,
.erp-main table td,
.erp-main .table,
.erp-main .table thead th,
.erp-main .table tbody td,
.erp-main table.dataTable tbody tr,
.erp-main table.dataTable tbody th,
.erp-main table.dataTable tbody td,
.erp-main table.dataTable thead th,
.erp-main .data-table tbody td,
.erp-main .data-table thead th {
  color:#000000 !important;
  opacity:1 !important;
}

.erp-main .table > :not(caption) > * > * {
  color:#000000 !important;
  opacity:1 !important;
}

.erp-main .form-control,
.erp-main .form-select,
.erp-main input,
.erp-main select,
.erp-main textarea,
.erp-main option {
  color:#000000 !important;
  background:#ffffff !important;
  opacity:1 !important;
}

.erp-main .badge.text-bg-light {
  color:#000000 !important;
  background:#f1f5f9 !important;
}

.erp-main .badge.text-bg-success {
  color:#ffffff !important;
}

.erp-main .badge.text-bg-danger,
.erp-main .badge.text-bg-primary,
.erp-main .badge.text-bg-info,
.erp-main .badge.text-bg-warning,
.erp-main .badge.text-bg-secondary {
  color:#ffffff !important;
}

.erp-main .btn-primary,
.erp-main .btn-success,
.erp-main .btn-danger {
  color:#ffffff !important;
}

.erp-main .btn-outline-primary,
.erp-main .btn-outline-secondary,
.erp-main .btn-outline-danger,
.erp-main .btn-outline-success {
  color:inherit !important;
}

.hero-panel,
.hero-panel *,
.hero-panel .btn-outline-light,
.hero-panel .btn-light {
  color:#ffffff !important;
}

.hero-panel .btn-light {
  color:#000000 !important;
}

.erp-sidebar,
.erp-sidebar *,
.erp-brand,
.erp-brand *,
.erp-nav,
.erp-nav *,
.erp-sidebar-footer,
.erp-sidebar-footer * {
  color:#dbe8f7 !important;
}

.erp-sidebar .erp-brand-title,
.erp-sidebar .erp-nav-link.active,
.erp-sidebar .erp-nav-link.active *,
.erp-sidebar .erp-nav-link:hover,
.erp-sidebar .erp-nav-link:hover * {
  color:#ffffff !important;
}

@media (prefers-color-scheme: dark) {
  .erp-main,
  .erp-content,
  .erp-topbar,
  .card,
  .card-body,
  .card-header,
  .modal-content,
  .modern-stat-card,
  .room-card,
  .quick-links a,
  .role-info-list > div {
    color:#000000 !important;
    background:#ffffff !important;
  }

  .erp-main table,
  .erp-main table th,
  .erp-main table td,
  .erp-main .table > :not(caption) > * > * {
    color:#000000 !important;
    background:#ffffff !important;
    opacity:1 !important;
  }
}


/* =========================================================
   FIX V4 - Paksa semua teks area konten menjadi hitam jelas.
   Mengatasi text table/DataTables yang terlihat samar karena style bawaan.
   ========================================================= */
html body.erp-body .erp-main,
html body.erp-body .erp-main *,
html body.erp-body .erp-content,
html body.erp-body .erp-content *,
html body.erp-body .card,
html body.erp-body .card *,
html body.erp-body table,
html body.erp-body table *,
html body.erp-body .table,
html body.erp-body .table *,
html body.erp-body .dataTables_wrapper,
html body.erp-body .dataTables_wrapper *,
html body.erp-body .dt-container,
html body.erp-body .dt-container *,
html body.erp-body .data-table,
html body.erp-body .data-table *,
html body.erp-body label,
html body.erp-body p,
html body.erp-body small,
html body.erp-body span:not(.badge):not(.erp-nav-icon):not(.erp-avatar):not(.seg):not(.legend-dot):not(.room-status-dot),
html body.erp-body div:not(.erp-sidebar):not(.erp-sidebar *):not(.hero-panel):not(.hero-panel *) {
  color:#000000 !important;
  opacity:1 !important;
  text-shadow:none !important;
}

html body.erp-body .erp-main table.dataTable tbody tr,
html body.erp-body .erp-main table.dataTable tbody td,
html body.erp-body .erp-main table.dataTable tbody th,
html body.erp-body .erp-main table.dataTable thead th,
html body.erp-body .erp-main table.dataTable.stripe > tbody > tr.odd > *,
html body.erp-body .erp-main table.dataTable.display > tbody > tr.odd > *,
html body.erp-body .erp-main table.dataTable.hover > tbody > tr:hover > *,
html body.erp-body .erp-main table.dataTable.display > tbody > tr:hover > *,
html body.erp-body .erp-main .table-striped > tbody > tr:nth-of-type(odd) > *,
html body.erp-body .erp-main .table-hover > tbody > tr:hover > * {
  color:#000000 !important;
  background-color:#ffffff !important;
  box-shadow:none !important;
  opacity:1 !important;
}

html body.erp-body .erp-main .text-muted,
html body.erp-body .erp-main .form-text,
html body.erp-body .erp-main small.text-muted {
  color:#334155 !important;
}

html body.erp-body .erp-main .card-header,
html body.erp-body .erp-main .card-body,
html body.erp-body .erp-main .table,
html body.erp-body .erp-main .table > :not(caption) > * > *,
html body.erp-body .erp-main .form-control,
html body.erp-body .erp-main .form-select,
html body.erp-body .erp-main option {
  background-color:#ffffff !important;
  color:#000000 !important;
}

html body.erp-body .badge.text-bg-success,
html body.erp-body .badge.text-bg-danger,
html body.erp-body .badge.text-bg-primary,
html body.erp-body .badge.text-bg-info,
html body.erp-body .badge.text-bg-secondary {
  color:#ffffff !important;
}

html body.erp-body .badge.text-bg-warning,
html body.erp-body .badge.text-bg-light {
  color:#000000 !important;
}

html body.erp-body .btn-primary,
html body.erp-body .btn-success,
html body.erp-body .btn-danger {
  color:#ffffff !important;
}

html body.erp-body .erp-sidebar,
html body.erp-body .erp-sidebar *,
html body.erp-body .erp-nav-link,
html body.erp-body .erp-nav-link *,
html body.erp-body .erp-brand,
html body.erp-body .erp-brand *,
html body.erp-body .erp-sidebar-footer,
html body.erp-body .erp-sidebar-footer * {
  color:#dbe8f7 !important;
}

html body.erp-body .erp-sidebar .erp-nav-link.active,
html body.erp-body .erp-sidebar .erp-nav-link.active *,
html body.erp-body .erp-sidebar .erp-nav-link:hover,
html body.erp-body .erp-sidebar .erp-nav-link:hover *,
html body.erp-body .erp-sidebar .erp-brand-title {
  color:#ffffff !important;
}


/* =========================================================
   FIX V5 - Sidebar text putih agar jelas di background biru.
   Rule ini diletakkan paling akhir untuk mengalahkan override teks hitam.
   ========================================================= */
html body.erp-body aside.erp-sidebar,
html body.erp-body aside.erp-sidebar *,
html body.erp-body aside.erp-sidebar a,
html body.erp-body aside.erp-sidebar a *,
html body.erp-body aside.erp-sidebar .erp-brand,
html body.erp-body aside.erp-sidebar .erp-brand *,
html body.erp-body aside.erp-sidebar .erp-brand-title,
html body.erp-body aside.erp-sidebar .erp-brand-sub,
html body.erp-body aside.erp-sidebar .erp-nav,
html body.erp-body aside.erp-sidebar .erp-nav *,
html body.erp-body aside.erp-sidebar .erp-nav-label,
html body.erp-body aside.erp-sidebar .erp-nav-link,
html body.erp-body aside.erp-sidebar .erp-nav-link *,
html body.erp-body aside.erp-sidebar .erp-sidebar-footer,
html body.erp-body aside.erp-sidebar .erp-sidebar-footer * {
  color:#eaf2ff !important;
  opacity:1 !important;
}

html body.erp-body aside.erp-sidebar .erp-nav-label,
html body.erp-body aside.erp-sidebar .erp-brand-sub,
html body.erp-body aside.erp-sidebar .erp-sidebar-footer .small,
html body.erp-body aside.erp-sidebar .text-white-50 {
  color:#aebfd4 !important;
  opacity:1 !important;
}

html body.erp-body aside.erp-sidebar .erp-nav-link.active,
html body.erp-body aside.erp-sidebar .erp-nav-link.active *,
html body.erp-body aside.erp-sidebar .erp-nav-link:hover,
html body.erp-body aside.erp-sidebar .erp-nav-link:hover *,
html body.erp-body aside.erp-sidebar .erp-brand-title {
  color:#ffffff !important;
  opacity:1 !important;
}

html body.erp-body aside.erp-sidebar .erp-nav-icon {
  color:#ffffff !important;
  opacity:1 !important;
}

html body.erp-body aside.erp-sidebar .erp-logo,
html body.erp-body aside.erp-sidebar .erp-logo * {
  color:#ffffff !important;
}


/* =========================================================
   FIX V6 - Ultra specific sidebar white text.
   ========================================================= */
body.erp-body aside#erpSidebar.erp-sidebar,
body.erp-body aside#erpSidebar.erp-sidebar *,
body.erp-body aside#erpSidebar.erp-sidebar a,
body.erp-body aside#erpSidebar.erp-sidebar a *,
body.erp-body aside#erpSidebar.erp-sidebar .erp-nav-link,
body.erp-body aside#erpSidebar.erp-sidebar .erp-nav-link *,
body.erp-body aside#erpSidebar.erp-sidebar .erp-nav-icon,
body.erp-body aside#erpSidebar.erp-sidebar .erp-brand-title {
  color:#ffffff !important;
  opacity:1 !important;
}

body.erp-body aside#erpSidebar.erp-sidebar .erp-brand-sub,
body.erp-body aside#erpSidebar.erp-sidebar .erp-nav-label,
body.erp-body aside#erpSidebar.erp-sidebar .erp-sidebar-footer,
body.erp-body aside#erpSidebar.erp-sidebar .erp-sidebar-footer * {
  color:#c9d7e8 !important;
  opacity:1 !important;
}

body.erp-body aside#erpSidebar.erp-sidebar .erp-nav-link.active,
body.erp-body aside#erpSidebar.erp-sidebar .erp-nav-link.active *,
body.erp-body aside#erpSidebar.erp-sidebar .erp-nav-link:hover,
body.erp-body aside#erpSidebar.erp-sidebar .erp-nav-link:hover * {
  color:#ffffff !important;
}