/*
 * Tema SATU SIMRS untuk Informasi Online (disalin dari pendaftaran_online;
 * hanya bagian topbar yang berbeda karena info_online punya menu publik).
 *
 * Token dan aturan visual mengikuti DESIGN.md SATU SIMRS APP V2 ("The Clinical
 * Ledger"): topbar hijau tua, desk mint-abu, kartu putih berborder hairline,
 * Inter, warna status bermakna tetap. File ini hanya meng-override tampilan
 * Bootstrap 3 (Bootswatch Yeti) dan plugin yang dipakai; markup, id, class,
 * dan API JS (modal, bootbox, bootstrap-select, select2, datetimepicker)
 * tidak berubah.
 *
 * Penyesuaian untuk portal pasien (publik, banyak dibuka dari ponsel):
 * kerapatan "comfortable", kontrol 40px, dan font input 16px di bawah 768px
 * supaya iOS tidak zoom saat field difokus. Dark mode belum diterapkan karena
 * banyak teks legacy memakai warna inline (#000).
 */

@font-face {
	font-family: "Inter Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/inter/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/inter/inter-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	color-scheme: light;

	--background: #f7faf9;
	--foreground: #1e3430;
	--card: #ffffff;
	--primary: #00a99d;
	--primary-hover: #00877e;
	--primary-foreground: #ffffff;
	--deep-green: #06403b;
	--secondary: #e3f6f4;
	--secondary-foreground: #06403b;
	--muted: #f0f4f2;
	--muted-foreground: #4a5d58;
	--placeholder: #748680;
	--border: #dce5e1;
	--input: #cbd8d3;
	--control-editable: #ffffff;
	--accent-lime: #c4d82e;
	--info: #1677a8;
	--success: #27864b;
	--warning: #e1ad16;
	--warning-foreground: #332500;
	--destructive: #e7000b; /* oklch(0.577 0.245 27.325) */
	--button-disabled: #ced3d1;
	--button-disabled-foreground: #46514d;
	--button-disabled-border: #7f8985;

	--ring: rgb(0 169 157 / 50%);
	--ring-destructive: rgb(231 0 11 / 25%);
	--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 10px;
	--radius-xl: 14px;

	--control-height: 40px;
	--topbar-height: 56px;
	--font-sans: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Dasar ---------- */

html body {
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.43;
	color: var(--foreground);
	background-color: var(--background);
	padding-top: calc(var(--topbar-height) + 8px);
	padding-bottom: 72px;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.tooltip, .popover, .btn, .form-control,
input, select, textarea, button {
	font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--foreground);
	letter-spacing: -0.005em;
}

a {
	color: var(--info);
}
a:hover,
a:focus {
	color: #105a80;
}

b, strong {
	font-weight: 600;
}

hr {
	border-top-color: var(--border);
}

.text-danger {
	color: var(--destructive);
}
.text-muted,
.help-block {
	color: var(--muted-foreground);
	font-size: 12px;
}

::selection {
	background: rgb(0 169 157 / 20%);
}

/* ---------- Topbar ----------
 * info_online memakai .navbar-default dengan menu publik. Topbar hijau tua,
 * brand dengan penanda lime, tautan aktif ditandai garis lime di bawah.
 */

html .navbar-default {
	min-height: var(--topbar-height);
	margin: 0;
	background-color: var(--deep-green);
	border: 0;
	border-bottom: 1px solid rgb(255 255 255 / 12%);
}
.navbar-default .navbar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--topbar-height);
}
.navbar-default .navbar-header::before,
.navbar-default .navbar-header::after {
	display: none;
}
html .navbar-default .navbar-brand,
html .navbar-default .navbar-brand:hover,
html .navbar-default .navbar-brand:focus {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: var(--topbar-height);
	padding: 0 15px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: #ffffff;
	background: transparent;
}
.navbar-default .navbar-brand::before {
	content: "";
	flex: none;
	width: 8px;
	height: 22px;
	border-radius: 9999px;
	background: var(--accent-lime);
}
.navbar-default .navbar-brand > span {
	color: rgb(255 255 255 / 72%);
	font-weight: 500;
}
.navbar-default .navbar-brand:focus-visible {
	outline: 3px solid var(--accent-lime);
	outline-offset: -3px;
}
html .navbar-default .navbar-nav > li > a {
	position: relative;
	display: flex;
	align-items: center;
	height: var(--topbar-height);
	padding: 0 12px;
	font-size: 13px;
	font-weight: 500;
	color: rgb(255 255 255 / 78%);
	background: transparent;
	transition: color 150ms ease-out, background-color 150ms ease-out;
}
html .navbar-default .navbar-nav > li > a:hover,
html .navbar-default .navbar-nav > li > a:focus {
	color: #ffffff;
	background-color: rgb(255 255 255 / 8%);
}
html .navbar-default .navbar-nav > li > a:focus-visible {
	outline: 3px solid var(--accent-lime);
	outline-offset: -3px;
}
html .navbar-default .navbar-nav > .active > a,
html .navbar-default .navbar-nav > .active > a:hover,
html .navbar-default .navbar-nav > .active > a:focus {
	color: #ffffff;
	font-weight: 600;
	background-color: transparent;
}
.navbar-default .navbar-nav > .active > a::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--accent-lime);
}
html .navbar-default .navbar-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	margin: 0 15px 0 0;
	padding: 0 12px;
	font-size: 13px;
	font-weight: 500;
	color: #ffffff;
	background: rgb(255 255 255 / 8%);
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: var(--radius-md);
}
html .navbar-default .navbar-toggle:hover,
html .navbar-default .navbar-toggle:focus {
	background: rgb(255 255 255 / 14%);
}
html .navbar-default .navbar-collapse {
	border-color: rgb(255 255 255 / 12%);
	box-shadow: none;
}

/* Menu publik ada lima tautan: collapse dipindah ke <992px supaya tidak
 * patah dua baris di tablet. Aturan ini menimpa breakpoint 768px Bootstrap 3. */
@media (min-width: 992px) {
	html .navbar-default .navbar-toggle {
		display: none;
	}
	html .navbar-default .navbar-header {
		float: left;
	}
	html .navbar-default .navbar-nav {
		float: right;
	}
}
@media (max-width: 991px) {
	html .navbar-default .navbar-header {
		float: none;
	}
	html .navbar-default .navbar-collapse {
		max-height: none;
		margin: 0 -15px;
		padding: 4px 15px 12px;
		border-top: 1px solid rgb(255 255 255 / 12%);
	}
	html .navbar-default .navbar-collapse.collapse {
		display: none !important;
	}
	html .navbar-default .navbar-collapse.collapse.in {
		display: block !important;
	}
	html .navbar-default .navbar-nav {
		float: none !important;
		margin: 0;
	}
	html .navbar-default .navbar-nav > li {
		float: none;
	}
	html .navbar-default .navbar-nav > li > a {
		height: 44px;
		padding: 0 12px;
		border-radius: var(--radius-md);
	}
	.navbar-default .navbar-nav > .active > a::after {
		top: 12px;
		bottom: 12px;
		left: 0;
		right: auto;
		width: 3px;
		height: auto;
		border-radius: 0 3px 3px 0;
	}
	html .navbar-default .navbar-nav > .active > a {
		background-color: rgb(255 255 255 / 8%);
	}
}

/* ---------- Footer ---------- */

footer.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	margin: 0;
	padding: 10px 0;
	text-align: center;
	background-color: var(--background);
	border-top: 1px solid var(--border);
	z-index: 10;
}
footer.footer .small,
footer.footer small {
	font-size: 11px;
	color: var(--muted-foreground);
	letter-spacing: 0.01em;
}

/* ---------- Tombol ----------
 * Kebijakan warna (DESIGN.md): primary = aksi utama/tambah, success = simpan,
 * destructive = batal (wash merah), info = cari/cek, lainnya outline.
 */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	box-shadow: none;
	text-shadow: none;
	transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out;
}
.btn:active,
.btn.active {
	box-shadow: none;
	transform: translateY(1px);
}
.btn:focus,
.btn:active:focus,
.btn.focus {
	outline: 0;
	box-shadow: 0 0 0 3px var(--ring);
}
.btn-lg {
	min-height: 44px;
	padding: 10px 16px;
	font-size: 15px;
	font-weight: 600;
	border-radius: var(--radius-md);
}
.btn-sm,
.btn-xs {
	min-height: 32px;
	padding: 4px 10px;
	font-size: 13px;
	border-radius: var(--radius-md);
}
.btn-block {
	display: flex;
	width: 100%;
}
.btn .glyphicon {
	top: 0;
	font-size: 14px;
}

.btn-primary,
.btn-primary:focus {
	background-color: var(--primary);
	border-color: var(--primary);
	color: var(--primary-foreground);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:hover,
.btn-primary:active:focus,
.open > .dropdown-toggle.btn-primary {
	background-color: var(--primary-hover);
	border-color: var(--primary-hover);
	color: var(--primary-foreground);
}

.btn-success,
.btn-success:focus {
	background-color: var(--success);
	border-color: var(--success);
	color: #ffffff;
}
.btn-success:hover,
.btn-success:active,
.btn-success:active:hover,
.btn-success:active:focus {
	background-color: rgb(39 134 75 / 85%);
	border-color: transparent;
	color: #ffffff;
}

.btn-info,
.btn-info:focus {
	background-color: var(--info);
	border-color: var(--info);
	color: #ffffff;
}
.btn-info:hover,
.btn-info:active,
.btn-info:active:hover,
.btn-info:active:focus {
	background-color: rgb(22 119 168 / 85%);
	border-color: transparent;
	color: #ffffff;
}

.btn-danger,
.btn-danger:focus {
	background-color: rgb(231 0 11 / 10%);
	border-color: rgb(231 0 11 / 10%);
	color: var(--destructive);
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger:active:hover,
.btn-danger:active:focus {
	background-color: rgb(231 0 11 / 18%);
	border-color: rgb(231 0 11 / 18%);
	color: #c10007;
}
.btn-danger:focus {
	box-shadow: 0 0 0 3px var(--ring-destructive);
}

.btn-default,
.btn-warning,
.btn-inverse,
.btn-default:focus,
.btn-warning:focus,
.btn-inverse:focus {
	background-color: var(--card);
	border-color: var(--input);
	color: var(--foreground);
	box-shadow: var(--shadow-xs);
}
.btn-default:hover,
.btn-warning:hover,
.btn-inverse:hover,
.btn-default:active,
.btn-warning:active,
.btn-inverse:active,
.btn-default:active:hover,
.btn-warning:active:hover,
.btn-inverse:active:hover,
.open > .dropdown-toggle.btn-default {
	background-color: var(--muted);
	border-color: var(--input);
	color: var(--foreground);
}
.btn-inverse .icon-white,
.btn-inverse .glyphicon {
	color: var(--foreground);
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn,
.btn.disabled:hover,
.btn[disabled]:hover {
	background-color: var(--button-disabled);
	border-color: var(--button-disabled-border);
	color: var(--button-disabled-foreground);
	opacity: 0.3;
	box-shadow: none;
	cursor: not-allowed;
}

/* ---------- Field ---------- */

.form-control,
html .form-control {
	height: var(--control-height);
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.43;
	color: var(--foreground);
	background-color: var(--control-editable);
	border: 1px solid var(--input);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xs);
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
textarea.form-control {
	height: auto;
	min-height: 80px;
}
.form-control::placeholder {
	color: var(--placeholder);
	opacity: 1;
}
.form-control:focus {
	border-color: var(--primary);
	outline: 0;
	box-shadow: 0 0 0 3px var(--ring);
}
.form-control[readonly],
.form-control[disabled],
fieldset[disabled] .form-control {
	background-color: var(--muted);
	border-color: var(--border);
	color: var(--foreground);
	box-shadow: none;
	opacity: 1;
}
select.form-control {
	padding-right: 32px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a5d58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px;
}
select.form-control::-ms-expand {
	display: none;
}
.has-error .form-control {
	border-color: var(--destructive);
	box-shadow: 0 0 0 3px var(--ring-destructive);
}

label,
.control-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--foreground);
}

input[type="radio"],
input[type="checkbox"] {
	accent-color: var(--primary);
}

/* ---------- Alert & label status ---------- */

.alert {
	padding: 10px 14px;
	font-size: 13px;
	border-width: 1px;
	border-style: solid;
	border-radius: var(--radius-md);
	color: var(--foreground);
	text-align: left;
}
.alert h4 {
	font-size: 14px;
	font-weight: 600;
	color: inherit;
}
.alert .close {
	opacity: 0.6;
	text-shadow: none;
}
.alert-danger {
	background-color: rgb(231 0 11 / 6%);
	border-color: rgb(231 0 11 / 30%);
	color: #a3000a;
}
.alert-info {
	background-color: rgb(22 119 168 / 6%);
	border-color: rgb(22 119 168 / 30%);
	color: var(--foreground);
}
.alert-success {
	background-color: rgb(39 134 75 / 8%);
	border-color: rgb(39 134 75 / 40%);
	color: var(--foreground);
}
.alert-warning {
	background-color: rgb(225 173 22 / 12%);
	border-color: rgb(225 173 22 / 60%);
	color: var(--foreground);
}

.label,
.label-success,
.label-warning,
.label-default,
.label-info,
.label-danger,
.label-primary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	border: 1px solid transparent;
	border-radius: 9999px;
	white-space: normal;
}
.label-success::before,
.label-warning::before,
.label-default::before,
.label-info::before,
.label-danger::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background: currentColor;
}
.label-success {
	background-color: rgb(39 134 75 / 12%);
	border-color: rgb(39 134 75 / 45%);
}
.label-success::before { background: var(--success); }
.label-warning {
	background-color: rgb(225 173 22 / 15%);
	border-color: rgb(225 173 22 / 60%);
}
.label-warning::before { background: var(--warning); }
.label-default {
	background-color: var(--muted);
	border-color: var(--border);
	color: var(--foreground);
}
.label-default::before { background: var(--muted-foreground); }
.label-info {
	background-color: rgb(22 119 168 / 10%);
	border-color: rgb(22 119 168 / 40%);
	color: var(--foreground);
}
.label-info::before { background: var(--info); }
.label-danger {
	background-color: rgb(231 0 11 / 10%);
	border-color: rgb(231 0 11 / 40%);
	color: var(--foreground);
}
.label-danger::before { background: var(--destructive); }

/* ---------- Tabel ---------- */

.table {
	font-size: 13px;
	color: var(--foreground);
	font-variant-numeric: tabular-nums;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > thead > tr > td,
.table > tr > td {
	padding: 8px 10px;
	border-top: 1px solid var(--border);
	vertical-align: top;
}
.table > thead > tr > th {
	background-color: var(--muted);
	border-bottom: 1px solid var(--border);
	font-size: 12px;
	font-weight: 600;
	color: var(--foreground);
}

/* ---------- Panel / kartu ---------- */

.panel {
	background-color: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-xs);
	overflow: hidden;
}
.panel-default > .panel-heading {
	background-color: var(--card);
	border-bottom: 1px solid var(--border);
	font-weight: 700;
}
.panel-footer {
	background-color: var(--background);
	border-top: 1px solid var(--border);
}

/* ---------- Modal & bootbox ---------- */

.modal-backdrop.in {
	opacity: 1;
	background-color: rgb(0 0 0 / 20%);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.modal-backdrop {
	background-color: rgb(0 0 0 / 20%);
}
html .modal.fade.in {
	top: 0;
}
.modal-dialog {
	margin: 6vh auto 24px;
}
.modal-content {
	border: 0;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-xl), 0 0 0 1px rgb(30 52 48 / 10%);
	overflow: hidden;
	background-color: var(--card);
}
.modal-header {
	padding: 16px 24px;
	border-bottom: 1px solid var(--border);
	background-color: var(--card);
}
.modal-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--foreground);
}
.modal-header .close,
.bootbox-close-button.close {
	width: 32px;
	height: 32px;
	margin: -4px -8px 0 0;
	border-radius: var(--radius-md);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	color: var(--muted-foreground);
	opacity: 1;
	text-shadow: none;
}
.modal-header .close:hover,
.bootbox-close-button.close:hover {
	background-color: var(--muted);
	color: var(--foreground);
}
.modal-body {
	padding: 20px 24px;
	font-size: 14px;
	color: var(--foreground);
}
html .modal-body p {
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}
.modal-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	padding: 12px 24px;
	border-top: 1px solid var(--border);
	background-color: var(--background);
}
.modal-footer::before,
.modal-footer::after {
	display: none;
}
.modal-footer .btn + .btn {
	margin-left: 0;
}
.modal-footer .pull-left {
	margin-right: auto;
}
.modal-footer .pull-right {
	float: none !important;
}
.bootbox .modal-body .form-control {
	margin-top: 8px;
}

/* ---------- Dropdown & popover ---------- */

.dropdown-menu {
	padding: 4px;
	font-size: 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.dropdown-menu > li > a {
	padding: 7px 10px;
	border-radius: var(--radius-sm);
	color: var(--foreground);
	white-space: normal;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background-color: rgb(0 169 157 / 10%);
	color: var(--foreground);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
	background-color: var(--secondary);
	color: var(--secondary-foreground);
	font-weight: 600;
}

/* ---------- bootstrap-select ---------- */

.bootstrap-select.btn-group .dropdown-toggle,
.bootstrap-select > .dropdown-toggle.btn-default {
	width: 100%;
	min-height: var(--control-height);
	padding: 6px 32px 6px 12px;
	background-color: var(--control-editable);
	border: 1px solid var(--input);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xs);
	font-size: 14px;
	font-weight: 400;
	color: var(--foreground);
	text-align: left;
	justify-content: flex-start;
}
.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
	color: var(--placeholder);
}
.bootstrap-select.open > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--ring);
	outline: 0 !important;
}
.bootstrap-select .dropdown-toggle .filter-option {
	white-space: normal;
}
.bootstrap-select .dropdown-toggle .caret {
	right: 12px;
	border-top-color: var(--muted-foreground);
}
.bootstrap-select .dropdown-menu li a span.text {
	white-space: normal;
}
.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li.active a {
	background-color: var(--secondary);
	color: var(--secondary-foreground);
}
.bootstrap-select .dropdown-menu li.disabled a {
	color: var(--placeholder);
}
.bootstrap-select .bs-searchbox .form-control {
	height: 36px;
}

/* ---------- select2 ---------- */

html .select2-container--default .select2-selection--single,
html .select2-container--default .select2-selection--multiple {
	min-height: var(--control-height);
	background-color: var(--control-editable);
	border: 1px solid var(--input);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xs);
}
html .select2-container--default .select2-selection--single .select2-selection__rendered,
html span#select2-selectJenisCaraBayar-container {
	min-height: 0;
	padding: 8px 32px 8px 12px;
	font-size: 14px;
	line-height: 1.43;
	color: var(--foreground);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--placeholder);
}
html .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 8px;
	height: 26px;
	transform: translateY(-50%);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--ring);
}
.select2-dropdown {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
	overflow: hidden;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
	height: 36px;
	padding: 6px 10px;
	border: 1px solid var(--input);
	border-radius: var(--radius-md);
}
.select2-container--default .select2-results__option {
	padding: 8px 10px;
	font-size: 14px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--primary);
	color: var(--primary-foreground);
}
.select2-container--default .select2-results__option[aria-selected="true"] {
	background-color: var(--secondary);
	color: var(--secondary-foreground);
}

/* ---------- Datetimepicker (Eonasdan) ---------- */

.bootstrap-datetimepicker-widget.dropdown-menu {
	padding: 8px;
	border-radius: var(--radius-lg);
	font-variant-numeric: tabular-nums;
}
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th {
	height: 36px;
	width: 36px;
	border-radius: var(--radius-md);
	font-size: 13px;
}
.bootstrap-datetimepicker-widget table th {
	font-weight: 600;
	color: var(--muted-foreground);
}
.bootstrap-datetimepicker-widget table th.picker-switch {
	color: var(--foreground);
	font-size: 14px;
}
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td span:hover,
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
	background-color: var(--muted);
}
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active {
	background-color: var(--primary);
	color: var(--primary-foreground);
	text-shadow: none;
}
.bootstrap-datetimepicker-widget table td.today::before {
	border-bottom-color: var(--primary);
}
.bootstrap-datetimepicker-widget table td.active.today::before {
	border-bottom-color: #ffffff;
}
.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
	color: var(--placeholder);
}
.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover {
	color: #b3c0bb;
	background: none;
}

/* ---------- toastr ---------- */

#toast-container > div {
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xl);
	opacity: 1;
	font-size: 14px;
}
#toast-container > .toast-error {
	background-color: #c10007;
}
#toast-container > .toast-success {
	background-color: var(--success);
}
#toast-container > .toast-info {
	background-color: var(--info);
}
#toast-container > .toast-warning {
	background-color: #8a6500;
}

/* ---------- Loader global (#loading di footer) ---------- */

#loading > .spinner,
html #loading > .spinner {
	width: 44px;
	height: 44px;
	margin: 30vh auto 12px;
	background: none;
	border: 4px solid rgb(0 169 157 / 20%);
	border-top-color: var(--primary);
	border-radius: 9999px;
	animation: sx-spin 0.8s linear infinite;
}
#loading .div-notif .label {
	background-color: var(--card);
	border: 1px solid var(--border);
	color: var(--foreground);
	font-size: 13px;
	padding: 6px 14px;
	box-shadow: var(--shadow-xs);
}
#loading .div-notif .label::before {
	display: none;
}

@keyframes sx-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
	}
	#loading > .spinner,
	html #loading > .spinner {
		animation-duration: 2.4s;
	}
}

/* ---------- Ponsel ---------- */

@media (max-width: 767px) {
	html body {
		padding-bottom: 88px;
	}
	/* 16px mencegah zoom otomatis iOS saat field difokus. */
	.form-control,
	html .form-control,
	html .select2-container--default .select2-selection--single .select2-selection__rendered,
	.bootstrap-select > .dropdown-toggle.btn-default {
		font-size: 16px;
	}
	.modal-dialog {
		margin: 16px 12px;
	}
	.modal-header,
	.modal-body,
	.modal-footer {
		padding-left: 16px;
		padding-right: 16px;
	}
	.navbar-default .navbar-brand {
		font-size: 13px;
	}
}

/* ---------- Ikon (Lucide, ISC License, sama dengan APP V2) ----------
 * Ikon dipasang lewat class pada tombol, bukan elemen anak, karena JS legacy
 * mengganti isi tombol dengan .html('Mohon tunggu...') / .html('Lanjut').
 *   sx-i sx-i-<nama>      ikon di depan label
 *   sx-i-end sx-i-<nama>  ikon di belakang label (mis. Lanjut →)
 *   sx-ext                penanda tautan yang membuka tab/layanan lain
 */

:root {
	--sx-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
}

.sx-i::before,
.sx-i-end::after,
.sx-ext::after {
	content: "";
	flex: none;
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: -3px;
	background-color: currentColor;
	-webkit-mask: var(--sx-icon) center / contain no-repeat;
	mask: var(--sx-icon) center / contain no-repeat;
}
.sx-ext::after {
	width: 14px;
	height: 14px;
	opacity: 0.7;
	-webkit-mask-image: var(--sx-icon-external);
	mask-image: var(--sx-icon-external);
}
.sx-i-arrow-left { --sx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E"); }
.sx-i-arrow-right { --sx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); }
.sx-i-save { --sx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7'/%3E%3Cpath d='M7 3v4a1 1 0 0 0 1 1h7'/%3E%3C/svg%3E"); }
.sx-i-printer { --sx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1'/%3E%3C/svg%3E"); }
.sx-i-pencil { --sx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E"); }
.sx-i-refresh-cw { --sx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E"); }
.sx-i-search { --sx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E"); }
.sx-i-user-plus { --sx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' x2='19' y1='8' y2='14'/%3E%3Cline x1='22' x2='16' y1='11' y2='11'/%3E%3C/svg%3E"); }
.sx-i-calendar-check { --sx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v3'/%3E%3Cpath d='M16 2v3'/%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='m9 15 2 2 4-4'/%3E%3C/svg%3E"); }
.sx-i-log-in { --sx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10 17 5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3C/svg%3E"); }
.sx-i-calendar-days { --sx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v3'/%3E%3Cpath d='M16 2v3'/%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M8 13h.01'/%3E%3Cpath d='M12 13h.01'/%3E%3Cpath d='M16 13h.01'/%3E%3Cpath d='M8 17h.01'/%3E%3Cpath d='M12 17h.01'/%3E%3Cpath d='M16 17h.01'/%3E%3C/svg%3E"); }
.sx-i-external-link { --sx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E"); }
.sx-i-paperclip { --sx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551'/%3E%3C/svg%3E"); }
.sx-i-camera { --sx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E"); }
.sx-i-x { --sx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); }
.sx-i-rotate-ccw { --sx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E"); }
.sx-i-chevron-right { --sx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
.sx-i-bed { --sx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4v16'/%3E%3Cpath d='M2 8h18a2 2 0 0 1 2 2v10'/%3E%3Cpath d='M2 17h20'/%3E%3Cpath d='M6 8v9'/%3E%3C/svg%3E"); }
.sx-i-clock { --sx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.sx-i-siren { --sx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18v-6a5 5 0 1 1 10 0v6'/%3E%3Cpath d='M5 21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-1a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2z'/%3E%3Cpath d='M21 12h1'/%3E%3Cpath d='M18.5 4.5 18 5'/%3E%3Cpath d='M2 12h1'/%3E%3Cpath d='M12 2v1'/%3E%3Cpath d='m4.929 4.929.707.707'/%3E%3Cpath d='M12 12v6'/%3E%3C/svg%3E"); }
.sx-i-users { --sx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }

/* ---------- Permukaan browser ----------
 * Caret, scrollbar, dan underline ikut palet, bukan bawaan browser.
 */

html {
	scrollbar-color: #b9c9c3 transparent;
}
html body {
	caret-color: var(--primary);
	accent-color: var(--primary);
}
a {
	text-underline-offset: 2px;
}