/* ============================================================
   MerpatiID — dark theme
   Override di atas themes/WebSC/css/styles.css (Bulma ter-compile).
   Aktif lewat atribut data-theme="dark" pada <html>.
   Semua warna memakai variabel supaya rebrand nanti cuma sentuh sini.
   ============================================================ */

html[data-theme='dark'] {
  color-scheme: dark;

  --dm-bg: #0f1419;
  --dm-bg-elev: #161d26;
  --dm-bg-elev-2: #1d2530;
  --dm-bg-hover: #232c39;
  --dm-border: #2a3441;
  --dm-border-soft: #202832;
  --dm-text: #e4e8ee;
  --dm-text-muted: #98a3b3;
  --dm-text-strong: #ffffff;
  --dm-link: #7cb2ff;
  --dm-link-hover: #a8caff;
  --dm-brand: #ff5a55;
  --dm-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  --dm-shadow-lg: 0 8px 24px rgba(0, 0, 0, .55);
}

/* ---------- dasar halaman ---------- */
html[data-theme='dark'],
html[data-theme='dark'] body {
  background: var(--dm-bg);
  color: var(--dm-text);
}

html[data-theme='dark'] body {
  color: var(--dm-text);
}

html[data-theme='dark'] a {
  color: var(--dm-link);
}

html[data-theme='dark'] a:hover {
  color: var(--dm-link-hover);
}

html[data-theme='dark'] hr,
html[data-theme='dark'] .hr {
  background-color: var(--dm-border);
}

/* ---------- navbar ---------- */
html[data-theme='dark'] .navbar,
html[data-theme='dark'] .navbar.is-white,
html[data-theme='dark'] .navbar.is-light,
html[data-theme='dark'] .navbar.is-fixed-top {
  background-color: var(--dm-bg-elev);
  color: var(--dm-text);
}

html[data-theme='dark'] .navbar.is-white .navbar-brand .navbar-link,
html[data-theme='dark'] .navbar.is-white .navbar-brand > .navbar-item,
html[data-theme='dark'] .navbar.is-white .navbar-item,
html[data-theme='dark'] .navbar.is-white .navbar-link,
html[data-theme='dark'] .navbar-item,
html[data-theme='dark'] .navbar-link {
  color: var(--dm-text);
}

html[data-theme='dark'] .navbar-item:hover,
html[data-theme='dark'] .navbar-link:hover,
html[data-theme='dark'] .navbar-item.is-active,
html[data-theme='dark'] .is-hover-merpati:hover {
  background-color: var(--dm-bg-hover);
  color: var(--dm-text-strong);
}

html[data-theme='dark'] .navbar-dropdown,
html[data-theme='dark'] .navbar-dropdown .navbar-item {
  background-color: var(--dm-bg-elev-2);
  color: var(--dm-text);
  border-color: var(--dm-border);
}

html[data-theme='dark'] .navbar-menu,
html[data-theme='dark'] #nav-menu,
html[data-theme='dark'] #nav-notif {
  background-color: var(--dm-bg-elev);
  color: var(--dm-text);
}

html[data-theme='dark'] .navbar-menu .navbar-item,
html[data-theme='dark'] .navbar-menu .navbar-link {
  color: var(--dm-text);
}

html[data-theme='dark'] .navbar-menu .navbar-item:hover {
  background-color: var(--dm-bg-hover);
  color: var(--dm-text-strong);
}

html[data-theme='dark'] .navbar-divider,
html[data-theme='dark'] .navbar-divide {
  background-color: var(--dm-border);
  border-color: var(--dm-border);
}

html[data-theme='dark'] .navbar-burger {
  color: var(--dm-text) !important;
}

html[data-theme='dark'] .navbar-burger span,
html[data-theme='dark'] .navbar-burger span[style] {
  background-color: currentColor !important;
}

/* ---------- bar horizontal: tanpa border kiri/kanan di mode gelap ---------- */
/* catatan: #nav-menu2 (dropdown "Lainnya") sengaja TIDAK ikut — tetap punya border samping */
html[data-theme='dark'] .navbar,
html[data-theme='dark'] .navbar.is-white,
html[data-theme='dark'] nav.breadcrumb.menu,
html[data-theme='dark'] nav.breadcrumb.has-bullet-separator {
  border-left: 0 !important;
  border-right: 0 !important;
}

/* ---------- kartu, box, notification ---------- */
html[data-theme='dark'] .card,
html[data-theme='dark'] .box,
html[data-theme='dark'] .panel,
html[data-theme='dark'] .modal-card-body {
  background-color: var(--dm-bg-elev);
  color: var(--dm-text);
  box-shadow: var(--dm-shadow);
}

html[data-theme='dark'] .card-header,
html[data-theme='dark'] .card-footer,
html[data-theme='dark'] .modal-card-head,
html[data-theme='dark'] .modal-card-foot,
html[data-theme='dark'] .panel-heading {
  background-color: var(--dm-bg-elev-2);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

html[data-theme='dark'] .card-footer-item,
html[data-theme='dark'] .panel-block,
html[data-theme='dark'] .panel-tabs a {
  border-color: var(--dm-border);
  color: var(--dm-text);
}

html[data-theme='dark'] .panel-block:hover {
  background-color: var(--dm-bg-hover);
}

html[data-theme='dark'] .notification {
  background-color: var(--dm-bg-elev-2);
  color: var(--dm-text);
}

html[data-theme='dark'] .notification.is-white,
html[data-theme='dark'] .notification.is-light {
  background-color: var(--dm-bg-elev-2);
  color: var(--dm-text);
}

html[data-theme='dark'] .message .message-body {
  background-color: var(--dm-bg-elev-2);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

/* ---------- tabel ---------- */
html[data-theme='dark'] .table {
  background-color: transparent;
  color: var(--dm-text);
}

html[data-theme='dark'] .table th {
  color: var(--dm-text-strong);
}

html[data-theme='dark'] .table td,
html[data-theme='dark'] .table th {
  border-color: var(--dm-border);
}

html[data-theme='dark'] .table.is-striped tbody tr:not(.is-selected):nth-child(even) {
  background-color: var(--dm-bg-elev-2);
}

html[data-theme='dark'] .table.is-hoverable tbody tr:not(.is-selected):hover {
  background-color: var(--dm-bg-hover);
}

html[data-theme='dark'] .table thead th {
  border-bottom-color: var(--dm-border);
}

/* ---------- form ---------- */
html[data-theme='dark'] .input,
html[data-theme='dark'] .textarea,
html[data-theme='dark'] .select select,
html[data-theme='dark'] .taginput-container,
html[data-theme='dark'] input,
html[data-theme='dark'] textarea,
html[data-theme='dark'] select {
  background-color: var(--dm-bg-elev-2);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

html[data-theme='dark'] .input::placeholder,
html[data-theme='dark'] .textarea::placeholder,
html[data-theme='dark'] input::placeholder,
html[data-theme='dark'] textarea::placeholder {
  color: var(--dm-text-muted);
}

html[data-theme='dark'] .input:focus,
html[data-theme='dark'] .textarea:focus,
html[data-theme='dark'] .select select:focus {
  border-color: var(--dm-link);
  box-shadow: 0 0 0 .125em rgba(124, 178, 255, .25);
}

html[data-theme='dark'] .select:not(.is-multiple):not(.is-loading)::after {
  border-color: var(--dm-link);
}

html[data-theme='dark'] select option {
  background-color: var(--dm-bg-elev-2);
  color: var(--dm-text);
}

html[data-theme='dark'] .label {
  color: var(--dm-text-strong);
}

html[data-theme='dark'] .help {
  color: var(--dm-text-muted);
}

/* ---------- tombol ---------- */
/* tombol netral */
html[data-theme='dark'] .button {
  background-color: var(--dm-bg-elev-2);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

html[data-theme='dark'] .button:hover,
html[data-theme='dark'] .button.is-hovered {
  border-color: var(--dm-text-muted);
  color: var(--dm-text-strong);
}

/* tombol berwarna: tetap berwarna, tapi versi lebih gelap supaya teks putih terbaca */
html[data-theme='dark'] .button.is-danger {
  background-color: #b3273f;
  border-color: #b3273f;
  color: #fff;
}

html[data-theme='dark'] .button.is-primary {
  background-color: #0b7f6d;
  border-color: #0b7f6d;
  color: #fff;
}

html[data-theme='dark'] .button.is-info {
  background-color: #276ea8;
  border-color: #276ea8;
  color: #fff;
}

html[data-theme='dark'] .button.is-success {
  background-color: #2b8a4f;
  border-color: #2b8a4f;
  color: #fff;
}

html[data-theme='dark'] .button.is-facebook {
  background-color: #3b5998;
  border-color: #3b5998;
  color: #fff;
}

html[data-theme='dark'] .button.is-twitter {
  background-color: #1d9bf0;
  border-color: #1d9bf0;
  color: #06263a;
}

html[data-theme='dark'] .button.is-whatsapp {
  background-color: #128c7e;
  border-color: #128c7e;
  color: #fff;
}

html[data-theme='dark'] .button.is-white,
html[data-theme='dark'] .button.is-light {
  background-color: var(--dm-bg-elev-2);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

html[data-theme='dark'] .button.is-white:hover,
html[data-theme='dark'] .button.is-light:hover {
  background-color: var(--dm-bg-hover);
  color: var(--dm-text-strong);
}

html[data-theme='dark'] .button[disabled] {
  background-color: var(--dm-bg-elev);
  border-color: var(--dm-border-soft);
  color: var(--dm-text-muted);
}

/* ---------- tag, badge ---------- */
html[data-theme='dark'] .tag:not(body) {
  background-color: var(--dm-bg-elev-2);
  color: var(--dm-text);
}

html[data-theme='dark'] .tag.is-light,
html[data-theme='dark'] .tag.is-white {
  background-color: var(--dm-bg-elev-2);
  color: var(--dm-text);
}

/* ---------- tipografi ---------- */
html[data-theme='dark'] .title,
html[data-theme='dark'] .content h1,
html[data-theme='dark'] .content h2,
html[data-theme='dark'] .content h3,
html[data-theme='dark'] .content h4,
html[data-theme='dark'] .content h5,
html[data-theme='dark'] .content h6 {
  color: var(--dm-text-strong);
}

html[data-theme='dark'] .subtitle,
html[data-theme='dark'] .content,
html[data-theme='dark'] .content p,
html[data-theme='dark'] .content li {
  color: var(--dm-text);
}

html[data-theme='dark'] .content blockquote {
  background-color: var(--dm-bg-elev-2);
  border-left-color: var(--dm-border);
  color: var(--dm-text-muted);
}

html[data-theme='dark'] .content pre,
html[data-theme='dark'] .content code,
html[data-theme='dark'] pre,
html[data-theme='dark'] code {
  background-color: var(--dm-bg-elev-2);
  color: var(--dm-text);
}

/* Bulma memberi warna gelap khusus untuk strong/em/link di dalam .content */
html[data-theme='dark'] .content strong,
html[data-theme='dark'] .content b,
html[data-theme='dark'] .content em,
html[data-theme='dark'] .content i,
html[data-theme='dark'] .content li,
html[data-theme='dark'] .content td,
html[data-theme='dark'] .content th,
html[data-theme='dark'] .content dt,
html[data-theme='dark'] .content dd,
html[data-theme='dark'] .content figcaption {
  color: var(--dm-text);
}

html[data-theme='dark'] .content a {
  color: var(--dm-link);
}

html[data-theme='dark'] .content a:hover {
  color: var(--dm-link-hover);
}

/* ---------- dropdown, menu, tabs, pagination ---------- */
html[data-theme='dark'] .dropdown-content {
  background-color: var(--dm-bg-elev-2);
  box-shadow: var(--dm-shadow-lg);
}

html[data-theme='dark'] .dropdown-item {
  color: var(--dm-text);
}

html[data-theme='dark'] .dropdown-item:hover {
  background-color: var(--dm-bg-hover);
  color: var(--dm-text-strong);
}

html[data-theme='dark'] .menu-list a:hover {
  background-color: var(--dm-bg-hover);
}

html[data-theme='dark'] .tabs a {
  color: var(--dm-text-muted);
  border-bottom-color: var(--dm-border);
}

html[data-theme='dark'] .tabs a:hover {
  color: var(--dm-text);
  border-bottom-color: var(--dm-text-muted);
}

html[data-theme='dark'] .tabs li.is-active a {
  color: var(--dm-link);
  border-bottom-color: var(--dm-link);
}

html[data-theme='dark'] .pagination-link,
html[data-theme='dark'] .pagination-next,
html[data-theme='dark'] .pagination-previous {
  background-color: var(--dm-bg-elev-2);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

html[data-theme='dark'] .pagination-link.is-current {
  background-color: var(--dm-brand);
  border-color: var(--dm-brand);
  color: #fff;
}

/* ---------- footer, hero ---------- */
html[data-theme='dark'] .footer,
html[data-theme='dark'] .hero.is-light {
  background-color: var(--dm-bg-elev);
  color: var(--dm-text);
}

html[data-theme='dark'] .hero.is-light .title,
html[data-theme='dark'] .hero.is-light .subtitle {
  color: var(--dm-text);
}

/* ---------- utilitas warna Bulma yang dipakai view ---------- */
html[data-theme='dark'] .has-text-black,
html[data-theme='dark'] .has-text-dark,
html[data-theme='dark'] .has-text-grey-darker,
html[data-theme='dark'] .has-text-grey-dark {
  color: var(--dm-text-strong) !important;
}

html[data-theme='dark'] .has-text-grey {
  color: var(--dm-text-muted) !important;
}

html[data-theme='dark'] .has-background-white,
html[data-theme='dark'] .has-background-white-bis,
html[data-theme='dark'] .has-background-light,
html[data-theme='dark'] .has-background-grey-lighter {
  background-color: var(--dm-bg-elev) !important;
}

/* ---------- inline style yang ditulis langsung di blade ---------- */
html[data-theme='dark'] [style*='background:#fff'],
html[data-theme='dark'] [style*='background: #fff'],
html[data-theme='dark'] [style*='background:#ffffff'],
html[data-theme='dark'] [style*='background-color:#fff'],
html[data-theme='dark'] [style*='background: white'],
html[data-theme='dark'] [style*='background:white'],
html[data-theme='dark'] [style*='background-color: white'],
html[data-theme='dark'] [style*='background-color:white'],
html[data-theme='dark'] [style*='background:#efefef'],
html[data-theme='dark'] [style*='background: #efefef'],
html[data-theme='dark'] [style*='background:#f8fafc'],
html[data-theme='dark'] [style*='background:#f5f5f5'],
html[data-theme='dark'] [style*='background:#fafafa'],
html[data-theme='dark'] [style*='background-color: #fff'] {
  background: var(--dm-bg-elev) !important;
}

html[data-theme='dark'] [style*='border:1px solid #e9e9e9'],
html[data-theme='dark'] [style*='border: 1px solid #e9e9e9'],
html[data-theme='dark'] [style*='border:1px solid #dbdbdb'],
html[data-theme='dark'] [style*='border-bottom:1px solid #dbdbdb'],
html[data-theme='dark'] [style*='border:1px solid #ccc'],
html[data-theme='dark'] [style*='border: 1px solid #ccc'],
html[data-theme='dark'] [style*='border-top:1px solid #ccc'],
html[data-theme='dark'] [style*='border-top: 1px solid #ccc'],
html[data-theme='dark'] [style*='border-bottom:1px solid #ccc'] {
  border-color: var(--dm-border) !important;
}

/* ---------- peta Leaflet tetap terang, hanya frame-nya yang gelap ---------- */
html[data-theme='dark'] .leaflet-container {
  background: var(--dm-bg-elev-2);
}

/* ---------- scrollbar ---------- */
html[data-theme='dark'] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html[data-theme='dark'] ::-webkit-scrollbar-track {
  background: var(--dm-bg);
}

html[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background: var(--dm-border);
  border-radius: 6px;
}

html[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
  background: var(--dm-bg-hover);
}

/* ---------- ribbon (label di kartu galeri/lomba) ---------- */
html[data-theme='dark'] .ribbon {
  background-color: var(--dm-bg-elev-2);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

/* pita berwarna: versi lebih gelap supaya teks putihnya terbaca */
html[data-theme='dark'] .ribbon.is-primary:not(.is-outlined) {
  background-color: #0b7f6d;
  color: #fff !important;
}

html[data-theme='dark'] .ribbon.is-info:not(.is-outlined) {
  background-color: #276ea8;
  color: #fff !important;
}

html[data-theme='dark'] .ribbon.is-success:not(.is-outlined) {
  background-color: #2b8a4f;
  color: #fff !important;
}

html[data-theme='dark'] .ribbon.is-danger:not(.is-outlined) {
  background-color: #b3273f;
  color: #fff !important;
}

/* ---------- input file (tombol Foto/Video) ---------- */
html[data-theme='dark'] .file-cta {
  background-color: var(--dm-bg-elev-2);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

html[data-theme='dark'] .file:hover .file-cta {
  background-color: var(--dm-bg-hover);
  color: var(--dm-text-strong);
}

html[data-theme='dark'] .file-name {
  border-color: var(--dm-border);
  color: var(--dm-text-muted);
}

/* ---------- divider bertulisan (halaman login) ---------- */
html[data-theme='dark'] .is-divider,
html[data-theme='dark'] .is-divider-vertical {
  border-top-color: var(--dm-border);
}

html[data-theme='dark'] .is-divider[data-content]::after,
html[data-theme='dark'] .is-divider-vertical[data-content]::after {
  background: var(--dm-bg-elev);
  color: var(--dm-text-muted);
}

/* ---------- hasil audit kontras ---------- */
html[data-theme='dark'] .copyright {
  background: var(--dm-bg-elev);
  border-color: var(--dm-border);
  color: var(--dm-text-muted);
}

html[data-theme='dark'] .has-text-merpati,
html[data-theme='dark'] .is-merpati,
html[data-theme='dark'] .is-hover-merpati:hover,
html[data-theme='dark'] .nav.has-text-merpati {
  color: var(--dm-brand) !important;
}

html[data-theme='dark'] .has-text-merpati {
  border-bottom-color: var(--dm-brand) !important;
}

html[data-theme='dark'] .button.is-merpati,
html[data-theme='dark'] .button.is-hover-border-merpati {
  background-color: transparent;
  border-color: var(--dm-brand);
  color: var(--dm-brand);
}

html[data-theme='dark'] .button.is-merpati:hover {
  background-color: var(--dm-brand);
  color: #10151b;
}

/* placeholder gambar bawaan (latar putih) ikut digelapkan */
html[data-theme='dark'] img[src*='no-image'],
html[data-theme='dark'] img[src*='no_image'] {
  filter: invert(.92) hue-rotate(180deg);
  opacity: .85;
}

/* ---------- tombol toggle di navbar ---------- */
.theme-toggle {
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .75rem;
  color: inherit;
  font-size: .9rem;
  line-height: 1;
}

.theme-toggle:hover {
  color: inherit;
}

.theme-toggle .theme-toggle-icon {
  font-size: 1rem;
}

.theme-toggle .theme-toggle-label {
  display: none;
}

@media screen and (min-width: 1024px) {
  .theme-toggle .theme-toggle-label {
    display: inline;
  }
}

/* tanpa JS: jangan tampilkan tombol */
html:not(.js-theme-ready) .theme-toggle {
  display: none;
}