/* =========================================================================
   SIKA — Mode Malam
   -------------------------------------------------------------------------
   Berkas ini memuat tiga hal:

     1. Tombol sakelar tema (dipakai pada kedua mode).
     2. Transisi halus saat tema berpindah.
     3. Penyesuaian yang tidak bisa diselesaikan lewat token saja
        (ornamen latar, ikon SVG yang warnanya tertanam, dsb).

   Seluruh palet mode malam sendiri berada di `tokens.css`, pada blok
   `:root[data-tema='gelap']`.
   ====================================================================== */

/* =========================================================================
   1. Tombol sakelar tema
   -------------------------------------------------------------------------
   Ikon yang tampil adalah tujuan perpindahan, bukan keadaan sekarang: saat
   terang muncul bulan ("nyalakan mode malam"), saat gelap muncul matahari.
   Keduanya ditumpuk lalu disilangkan dengan putaran kecil.
   ====================================================================== */

.s-tema-tbl {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.s-tema-tbl .s-tema-ikon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--sedang) var(--ease-keluar),
	            transform var(--lambat) var(--ease-pegas);
}

/* Keadaan terang: bulan tampil, matahari menunggu di luar. */
.s-tema-ikon--malam { opacity: 1; transform: rotate(0deg) scale(1); }
.s-tema-ikon--siang { opacity: 0; transform: rotate(-80deg) scale(0.45); }

/* Keadaan gelap: kebalikannya. */
:root[data-tema='gelap'] .s-tema-ikon--malam { opacity: 0; transform: rotate(80deg) scale(0.45); }
:root[data-tema='gelap'] .s-tema-ikon--siang { opacity: 1; transform: rotate(0deg) scale(1); }

/* Rona sambutan saat ditunjuk: biru malam di mode terang, hangat di gelap. */
.s-tema-tbl:hover { color: var(--biru-600); background: var(--biru-50); }

:root[data-tema='gelap'] .s-tema-tbl:hover {
	color: var(--peringatan-600);
	background: var(--peringatan-50);
}

/* Cahaya lembut di belakang ikon saat mode malam aktif. */
.s-tema-tbl::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(circle at 50% 50%, rgba(255, 197, 94, 0.20) 0%, transparent 70%);
	opacity: 0;
	transition: opacity var(--sedang) var(--ease-keluar);
	pointer-events: none;
	z-index: -1;
}

:root[data-tema='gelap'] .s-tema-tbl::before { opacity: 1; }

/* Varian mengambang — dipakai di halaman masuk yang tidak punya topbar. */
.s-tema-tbl--apung {
	position: fixed;
	top: var(--s-4);
	right: var(--s-4);
	z-index: var(--z-topbar);
	background: var(--permukaan);
	border: 1px solid var(--garis);
	box-shadow: var(--bayang-md);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

@media (max-width: 960px) {
	.s-tema-tbl--apung { top: var(--s-3); right: var(--s-3); }
}

/* =========================================================================
   2. Transisi perpindahan tema
   ====================================================================== */

/* Peramban modern: silang-pudar seluruh halaman. */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 320ms;
	animation-timing-function: var(--ease-halus);
}

/* Cadangan untuk peramban tanpa View Transitions: warna dianimasikan sesaat,
   lalu kelasnya dilepas kembali oleh JS agar tidak membebani halaman besar. */
:root.s-tema-beralih body,
:root.s-tema-beralih .s-kartu,
:root.s-tema-beralih .s-sidebar,
:root.s-tema-beralih .s-topbar,
:root.s-tema-beralih .s-utama,
:root.s-tema-beralih .s-input,
:root.s-tema-beralih .s-pilih,
:root.s-tema-beralih .s-area,
:root.s-tema-beralih .s-tabel thead th,
:root.s-tema-beralih .s-tabel tbody td {
	transition: background-color 300ms var(--ease-halus),
	            border-color 300ms var(--ease-halus),
	            color 220ms var(--ease-halus) !important;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) { animation: none; }
}

/* =========================================================================
   3. Penyesuaian khusus mode malam
   ====================================================================== */

/* Ornamen cahaya di sudut kanan atas — diredam agar tidak berkabut. */
:root[data-tema='gelap'] .s-aplikasi::before {
	background: radial-gradient(circle, rgba(59, 167, 247, 0.12) 0%, rgba(59, 167, 247, 0) 68%);
}

/* Tooltip: tangga --abu- ikut terbalik, jadi latarnya ditetapkan ulang. */
:root[data-tema='gelap'] [data-tip]::after {
	background: var(--permukaan-3);
	color: var(--teks);
	border: 1px solid var(--garis-tebal);
}

/* Panah <select> memakai warna yang tertanam di dalam data-URI SVG. */
:root[data-tema='gelap'] .s-pilih {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2390A2BA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

/* Sedikit cahaya di tepi atas panel memberi kesan permukaan yang terangkat. */
:root[data-tema='gelap'] .s-kartu,
:root[data-tema='gelap'] .s-dropdown-panel,
:root[data-tema='gelap'] .s-notif-panel,
:root[data-tema='gelap'] .s-modal {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 120px);
}

/* Isian bergradien terasa terlalu menyala di atas latar gelap. */
:root[data-tema='gelap'] .s-tbl--utama:hover:not(:disabled) {
	filter: saturate(1.02) brightness(1.06);
}

/* Tirai lebih pekat agar panel di atasnya menonjol. */
:root[data-tema='gelap'] .s-tirai,
:root[data-tema='gelap'] .s-tirai-sidebar {
	background: rgba(4, 8, 16, 0.68);
}

/* Panel presentasi halaman masuk sudah gelap; cukup diredam sedikit. */
:root[data-tema='gelap'] .s-masuk-panel { filter: saturate(0.96) brightness(0.94); }

:root[data-tema='gelap'] .s-avatar--foto {
	background: var(--abu-800);
	border-color: var(--garis);
}

:root[data-tema='gelap'] .s-profil-avatar-tbl {
	border-color: var(--permukaan);
}

:root[data-tema='gelap'] .s-foto-preview-lingkaran {
	background: var(--permukaan-2);
}

/* =========================================================================
   4. Cetak — selalu kembali ke warna terang
   -------------------------------------------------------------------------
   Tanpa ini, halaman yang dicetak saat mode malam aktif menghasilkan teks
   terang di atas kertas putih. Nilai di bawah adalah salinan token mode
   siang, khusus untuk berkas cetak.
   ====================================================================== */

@media print {
	:root[data-tema='gelap'] {
		color-scheme: light;

		--biru-50:  #EFF8FF;
		--biru-100: #DAEEFF;
		--biru-200: #BDE2FF;
		--biru-300: #8FD0FF;
		--biru-400: #5AB6FC;
		--biru-500: #2E9BF0;
		--biru-600: #1780DA;
		--biru-700: #1467B0;
		--biru-800: #15568D;
		--biru-900: #164974;

		--abu-50:  #F7FAFC;
		--abu-100: #EFF3F8;
		--abu-200: #E2E9F1;
		--abu-300: #CBD6E3;
		--abu-400: #94A5BC;
		--abu-600: #4E627E;
		--abu-800: #26364A;

		--sukses-50:  #ECFDF5;
		--sukses-100: #D3F9E5;
		--sukses-500: #10B981;
		--sukses-600: #059669;
		--sukses-700: #047857;

		--peringatan-50:  #FFFAEB;
		--peringatan-100: #FEF0C7;
		--peringatan-500: #F5A524;
		--peringatan-600: #DC8B0C;
		--peringatan-700: #B26B04;

		--bahaya-50:  #FEF2F3;
		--bahaya-100: #FEE2E4;
		--bahaya-500: #F0525F;
		--bahaya-600: #DC2F3E;
		--bahaya-700: #B91C2C;

		--info-50:  #EEF4FF;
		--info-100: #DEE8FF;
		--info-500: #5B7CFA;
		--info-600: #4258E0;

		--ungu-50:  #F5F3FF;
		--ungu-100: #EDE9FE;
		--ungu-500: #8B5CF6;
		--ungu-600: #7C3AED;

		--teal-50:  #EFFCF9;
		--teal-100: #D3F6EF;
		--teal-500: #14B8A6;
		--teal-600: #0D9488;

		--kanvas:       #FFFFFF;
		--permukaan:    #FFFFFF;
		--permukaan-2:  #F8FBFE;
		--permukaan-3:  #EFF5FB;
		--garis:        #E4EBF3;
		--garis-lembut: #EEF3F9;
		--garis-tebal:  #D3DEEA;

		--teks:   #1B2A3D;
		--teks-2: #4A5C74;
		--teks-3: #74869E;
		--teks-4: #9BAAC0;

		--gradien-lembut: linear-gradient(135deg, #EFF8FF 0%, #F5FEFF 100%);
		--gradien-kaca:   linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);

		--panel-dalam: #15568D;
		--panel-aksen: #15568D;
	}

	:root[data-tema='gelap'] .s-kartu,
	:root[data-tema='gelap'] .s-dropdown-panel,
	:root[data-tema='gelap'] .s-notif-panel,
	:root[data-tema='gelap'] .s-modal {
		background-image: none;
	}

	.s-tema-tbl { display: none !important; }
}