/* presensi-acara/src/style.css */

/* LIBERATION SERIF (Default Body) */
@font-face {
	font-family: 'LibSerif';
	src: url('/fonts/LiberationSerif-Regular.ttf') format('truetype');
	font-weight: normal;
}
@font-face {
	font-family: 'LibSerif';
	src: url('/fonts/LiberationSerif-Bold.ttf') format('truetype');
	font-weight: bold;
}

/* LIBERATION SANS (Untuk UI/Buttons) */
@font-face {
	font-family: 'LibSans';
	src: url('/fonts/LiberationSans-Regular.ttf') format('truetype');
	font-weight: normal;
}
@font-face {
	font-family: 'LibSans';
	src: url('/fonts/LiberationSans-Bold.ttf') format('truetype');
	font-weight: bold;
}

/* LIBERATION MONO (Untuk Nomor/ID/Data Teknis) */
@font-face {
	font-family: 'LibMono';
	src: url('/fonts/LiberationMono-Regular.ttf') format('truetype');
	font-weight: normal;
}

/* --- 2. PENYETELAN GLOBAL --- */
:root {
	--font-utama: 'LibSerif', serif;
	--font-ui: 'LibSans', sans-serif;
	--font-data: 'LibMono', monospace;
}

html, body {
	height: 100%;
	margin: 0;
}

body {
	transition: opacity 0.3s ease-in;
	/* Gunakan Serif sebagai default teks bacaan */
	font-family: var(--font-utama);
	-webkit-font-smoothing: antialiased;
	color: #333;
	line-height: 1.5;
}

/* Samakan semua elemen input agar tidak memakai font bawaan browser */
button, input, select, textarea, .choices {
	font-family: var(--font-utama) !important;
}

/* Gunakan Serif */
#header, #judulHalaman, #namaAcara, .btn, .btn-full, .label, label, .modal-title {
	font-family: var(--font-utama);
}

/* Gunakan MONO untuk angka koordinat, ID Acara, dan Nomor HP */
.col-latitude, .col-longitude, .col-id-acara, .col-no-hp, .progressText {
	font-family: var(--font-data);
	letter-spacing: -0.5px;
}

.logo {
	height: 50px;
}

#wrapperProgress {
	display: none;
}

#wrapperChart {
	display: none;
	justify-content: center;
	align-items: center;
	padding: 20px;
	gap: 10px;
	box-sizing: border-box;
	flex-direction: column;
}

#wrapperChartCard {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: center;
}

.chartCard {
	width: 200px;
	text-align: center;
}

#emptyChart {
	display: none;
}

.wrapperProgress {
	margin: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    padding: 10px;
    border-radius: 6px;
}

.close {
	align-self: flex-end; /* Posisikan tombol close di pojok kanan atas */
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	color: #1C6EA4;
	background-color: #fff;
	border-radius: 50%;
	font-size: 18px;
	width: 18px !important;
	height: 18px;
	z-index: 1;
}

#wrapper-all {
	padding-top: 55px;
	box-sizing: border-box;
}

#wrapper {
	display: none; /* to flex */
	flex: 1;
	flex-direction: column;
	padding: 0px 10px 10px;
	box-sizing: border-box;
	align-items: center;
	gap: 10px;
}

#wrapperOrganisasi {
	display: none; /* to flex */
	flex: 1;
	padding: 8px;
	box-sizing: border-box;
	gap: 8px;
	flex-direction: column;
}

.cardOrganisasi {
	border: 1px solid #ddd;
	flex: 1;
	border-radius: 8px;
	padding: 10px;
}

.wrapperFloat {
	display: none; /* to flex */
	position: fixed;
	top: 0;
	left: 0;
	text-align: center;
	font-size: 16px;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 1001;
	flex-direction: column;
}

.float-msg {
	margin-bottom: 20px;
}

.inputForm.noSwasta {
	display: none;
}

.modal-title {
	font-weight: bold;
	font-style: italic;
	font-size: 18px;
}

.modal-content-title {
	font-weight: bold;
	font-size: 18px;
}

.modal-content {
	/* Batasi lebar maksimal card agar tidak terlalu lebar di desktop */
	max-width: 768px;
	width: 80%; 
	
	/* Batasi tinggi maksimal card agar tidak memenuhi seluruh layar */
	max-height: 90vh; /* 90% dari tinggi viewport (vh) */
	
	/* Tentukan bahwa konten di dalamnya bisa di-scroll jika melebihi max-height */
	overflow-y: auto; 
		
	/* Styling tampilan card */
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
	position: relative; /* Penting untuk posisi tombol close */
}

.settings-container {
	display: flex; 
	flex-direction: column; 
	gap: 15px;
}

.setting-item {
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	padding: 10px;
	border: 1px solid #ddd; 
	border-radius: 8px;
}

.setting-label label {
	font-weight: bold; 
	font-size: 1.1em;
	text-align: left;
	padding: 0;
}

.setting-label .notes {
	font-size: 0.85em; 
	color: #666;
}

.flexShow {
	display: flex !important;
}

.modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	text-align: center;
	font-size: 16px;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 10000;
}

.stop-scrolling {
	height: 100%;
	overflow: hidden !important;
	touch-action: none;
}

.wrapperTandaTangan {
	position: relative;
	width: 100%;
	height: 200px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background-color: #fff;
	/* Kunci area di level CSS */
	touch-action: none; 
	user-select: none;
}

#canvasTandaTangan {
	width: 100%;
	height: 100%;
}

#successPresensi {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.ttd-img {
	max-height: 80px; /* Ukuran mungil untuk di tabel */
	max-width: 150px;
	cursor: pointer;
	transition: transform 0.2s;
}

.ttd-img:hover {
	transform: scale(3); /* Zoom saat di-hover */
	position: relative;
	z-index: 100;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.statusText {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-bottom: 15px;
	font-size: 16px;
}

.loading, .warning, .success, .info {
	position: relative;
	padding: 20px;
	width: 90%;
	max-width: 500px;
	min-height: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
	text-align: center;
	background-color: #fff;
}

.statusIcon {
	font-size: 48px;
	margin: 20px;
}

.iconWarning {
	color: #ff6b6b;
}

.iconSuccess {
	color: #74c476;
}

.iconInfo {
	color: #FF5A00;
}

.iconLoading {
	border: 8px solid #FFAA33;
	border-top: 8px solid #1C6EA4;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	animation: spin 1s linear infinite;
	display: inline-block;
	vertical-align: middle;
	margin-right: 0;
    margin-bottom: 10px;
}

.required {
	color: red;
}

.aksiWrapper {
	display: flex;
	flex-wrap: wrap;
	text-align: left;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.iconAksi {
	display: flex;
	flex-direction:column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 15px;
	border: 1px solid #ddd;
	border-radius: 8px;
	color: #1c6ea4;
	max-width: 80px;
	text-decoration: none;
	gap: 5px;
}

.label-icon-aksi {
	font-size: 14px;
	text-align: center;
}

.iconAksi:active, .iconAksi.active {
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
}

.aksiToggle {
	font-size: 32px;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

#header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	padding: 0 10px;
	position: fixed;
	width: 100%;
	background-color: #ffffff;
	z-index: 1000;
	box-sizing: border-box;
	gap: 10px;
}

#wrapperMenu, #wrapperAccount {
	display: none;
	flex-direction: column;
	position: fixed;
	top: 55px;
	right: 10px;
	background-color: #ffffff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 10px;
	gap: 8px
}

.menuItem:visited {
	color: #005fcc;
}

.menuItem:active {
	transform: translateY(1px);
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
	background-color: #f0f0f0;
}

#judulHalaman {
	flex: 1;
	font-weight: bold;
	font-size: 18px;
	text-align: right;
	margin-right: 10px;
	font-style: italic;
	color: #444;
}

#namaAcara {
	display: none;
	font-weight: bold;
	text-align: center;
	font-size: 24px;
	position: relative;
	color: #444;
	margin-top: 32px;
	margin-bottom: 32px;
	padding: 0px 20px;
}

/* Garis dibawah namaAcara */
#namaAcara::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px; /* jarak dari teks */
  transform: translateX(-50%);
  width: 80%; /* panjang garis */
  height: 4px;
  background: linear-gradient(to right, transparent, #1C6EA4, transparent);
}

#detailWrapper {
	display: none; /* to grid */
	grid-template-columns: max-content 1fr; /* kolom kiri otomatis mengikuti label terpanjang */
	width: calc(100% - 16px); /* Sama dengan padding wrapper 8px */
	margin: 10px;
}

.detailAcara {
	display: contents; /* agar anak-anaknya (label dan value) masuk ke grid yang sama */
}

#divJmlPesertaPresensi {
	display: flex;
}

#divJmlPesertaPresensi .value {
	border: none;
}

#statsWrapper {
	display: none; /* to flex */
	flex-direction: column;
	margin: 10px;
}

#statsFlex {
	display: flex;
	gap: 10px;
}

.statsCard {
	border-radius: 6px;
	border: 1px solid #ddd;
}

.statsAcara {
	display: flex;
}

#buktiPresensi {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	word-wrap: break-word;
}

.msgTitle {
	text-align: center;
	font-weight: bold;
	padding: 4px;
	font-size: 18px;
	border-bottom: 1px solid #ddd;
	margin-bottom: 15px;
}

.gridWrapper {
	display: grid;
	grid-template-columns: max-content 1fr;
}

.gridContent {
	display: contents;
}

.value {
	border: 1px solid #000;
	padding: 4px;
}

.detailAcara .value, 
.statsAcara .value,
.gridContent .value {
	border: none;
}

.statsAcara .value {
	flex: 1;
	text-align: right;
}

.map {
	border: 1px solid #dddddd;
	border-radius: 6px;
	width: 100%;
	height: 350px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	z-index: 0;
}

#mapMessage {
	text-align: center;
}

.userPin {
	color: red;
	font-size: 32px;
}

.leaflet-control-geocoder-alternatives {
	max-height: 250px;
	overflow-y: scroll;
	text-align: left;
}

.leaflet-control-geocoder-alternatives:empty {
	display: none !important;
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	overflow: hidden !important;
}

.leaflet-control-zoom {
	display: flex;
	flex-direction: column;
	gap: 5px !important;
	padding: 0 !important;
}

.leaflet-control-geocoder-form {
	width: 100%;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
	box-sizing: border-box;
	padding: 8px;
	border-radius: 4px;
	position: relative;
}

.geocoder-clear-btn {
	position: absolute;
	top: 0;
	right: 5px;
	cursor: pointer;
	color: #999;
	font-size: 18px;
	font-weight: bold;
	z-index: 1001;
	padding: 5px;
	transition: color 0.2s;
	user-select: none;
	display: none;
}

.geocoder-clear-btn:hover {
	color: #333;
}

.leaflet-control-geocoder-form input {
	text-align: center;
	box-sizing: border-box;
	width: 100%;
	padding-right: 35px;
}

.leaflet-control-geocoder-expanded {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.leaflet-touch .leaflet-bar {
	border: none;
	background-clip: unset;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	width: 100%;
}

.leaflet-control-geocoder-options-open {
	display: flex;
	flex-direction: column;
}

.leaflet-control-geocoder-icon {
	display: none !important;
}

@media (max-width: 480px) {
	.leaflet-control-geocoder.leaflet-bar {
		width: 90% !important;
		max-width: none !important;
	}
}

#formLogin {
	box-sizing: border-box;
}

#formPresensi {
	display: none; /* harus none by default */
}

.form {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	max-width: 500px;
	box-sizing: border-box;
	margin-top: 16px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}

.inputForm {
	display: flex;
	flex-direction: column;
	border: 1px solid #dddddd;
	font-size: 16px;
	margin: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    padding: 10px;
    border-radius: 6px;
	box-sizing: border-box;
	width: inherit;
	align-items: center;
	gap: 16px;
}

#inputFormLainnya {
	display: none; /* to flex */
}

label {
	font-weight: bold;
	padding: 4px;
	display: block;
}

.label {
	font-weight: bold;
	padding: 4px;
}

.input-note {
	font-size: 1em; 
	color: #777; 
	margin-top: -6px; 
	margin-bottom: 8px;
	display: block; 
	font-style: italic; 
}

.judulCard {
	font-weight: bold;
	font-size: 18px;
	text-align: center;
	margin-bottom: 10px;
}

.judulProgress {
	font-weight: bold;
}

.progress {
	position: relative;
	width: 100%;
	background-color: #ccc;
	overflow: hidden;
	height: 24px;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
	border-radius: 4px;
}

.progressBar {
	border-radius: 4px;
	background: linear-gradient(to bottom, #4caf50, #2e7d32);
	box-shadow:
		inset 0 2px 4px rgba(255, 255, 255, 0.3), /* efek cahaya di dalam */
		0 4px 6px rgba(0, 0, 0, 0.3); /* bayangan luar */
	height: 24px;
	width: 0%;
	transition: width 0.5s ease;
}

.progressText {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	text-align: center;
	line-height: 24px;
	font-weight: bold;
	color: #fff;
}

#diperbarui {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	padding: 8px;
}

.boxInput {
	padding: 12px;
	border: none;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
	box-sizing: border-box;
	width: 100%;
	text-align: center;
}

#cameraGuide #reader {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* === Choices.js === */
/* Container Choices.js (Mengganti tampilan .dropdownBtn) */
.choices {
	margin-bottom: 0; /* Menghilangkan margin default Choices.js */
	box-sizing: border-box;
	width: 100%; /* Penting untuk mengambil lebar penuh .inputForm */
}

/* Tampilan input/tombol Choices.js saat tidak fokus */
.choices__inner {
	padding: 12px 12px 12px 12px; /* Sesuaikan padding agar sama dengan .dropdownBtn */
	border: none !important; /* Hapus border default Choices.js */
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15); /* Shadow yang sama */
	border-radius: 4px;
	background-color: #ffffff; /* Latar belakang putih */
	min-height: auto; /* Agar Choices.js tidak memaksakan tinggi */
	display: flex; /* Untuk meratakan konten */
	align-items: center;
	box-sizing: border-box;
}

/* Teks placeholder */
.choices__placeholder {
	opacity: 1;
	color: #000000;
}

.choices__list {
	box-sizing: border-box;
}

/* Container dropdown saat terbuka (Mengganti .dropdownContent) */
.choices__list--dropdown {
	border: 1px solid #ddd; /* Border yang sama */
	background-color: #f6f6f6; /* Latar belakang yang sama */
	z-index: 10;
	margin-top: 4px; /* Sedikit jarak dari input utama */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Tambahkan shadow agar lebih menonjol */
	border-radius: 4px;
}

/* Input Pencarian (Mengganti #inputSubGroup) */
.choices__list--dropdown .choices__input {
	box-sizing: border-box;
	width: 100%;
	padding: 8px;
	border: none;
	border-bottom: 1px solid #ddd;
	background-color: #fff;
	font-size: 16px;
	margin: 0;
}

/* Item Pilihan dalam dropdown (Mengganti .dropdownItem) */
.choices__list--dropdown .choices__item {
	padding: 10px;
	cursor: pointer;
	font-size: 16px;
	transition: background-color 0.15s ease;
}

/* Hover effect (Mengganti .dropdownItem:hover) */
.choices__list--dropdown .choices__item--selectable:hover {
	background-color: #e6e6e6; /* Hover yang sama */
}

/* Hilangkan style item yang dipilih/di-*highlight* */
.choices__list--dropdown .choices__item--highlighted {
	background-color: #e6e6e6; /* Gunakan warna hover yang sama */
}
/* === End of Choices.js === */

.btn {
	display: flex;
	gap: 8px;
	padding: 12px;
	border-radius: 6px;
	border: none;
	color: #fff;
	cursor: pointer;
	background: linear-gradient(to bottom, #5aa9ff, #007bff);
	box-shadow: 0 4px 0 #005fcc, 0 3px 8px rgba(0, 0, 0, 0.3);
	transition: all 0.15s ease;
	font-weight: bold;
	width: fit-content;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.btn-full {
	width: 100%;
	display: flex;
	gap: 5px;
	align-items: center;
	justify-content: center;
	background-color: #1c6ea4;
	color: #fff;
	padding: 10px;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	box-sizing: border-box;
	text-decoration: none;
}

.wrapper-btn-full {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	max-width: 500px;
}

.disabled-link {
	pointer-events: none; /* Mencegah klik */
	opacity: 0.6; 
	cursor: default;
	background-color: #f0f0f0 !important; /* Warna abu-abu terang */
	color: #888 !important;
}

.btn:active {
	transform: translateY(2px);
	background: linear-gradient(to bottom, #3f8efc, #0069d9);
	box-shadow:
    0 1px 0 #004da8 inset,       /* shadow ke dalam */
    0 2px 4px rgba(0, 0, 0, 0.3) inset;
}

.btnWrapper {
	display: flex;
	gap: 8px;
	margin: 16px;
	align-items: center;
	justify-content: center;
}

#subGroupBlmHadir, #subGroupSudahHadir {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.groupWrapper {
	display: flex;
	flex-direction: column;
	padding: 10px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	max-width: 300px;
	box-sizing: border-box;
}

.groupList {
	counter-reset: num;
	list-style: none;
	padding: 0;
}

.groupHeader {
	font-weight: bold;
	background-color: #1C6EA4;
	color: #fff;
	border-radius: 4px;
	padding: 4px;
	text-align: center;
}

.groupList li {
	padding: 4px;
}

.groupList li:nth-child(odd) {
	background-color: #fff;
}

.groupList li:nth-child(even) {
	background-color: #eee;
}

.groupList li {
	counter-increment: num;
	padding-left: 1.8em;
	position: relative;
}

.groupList li::before {
	content: counter(num) ".";
	position: absolute;
	left: 0;
	background-color: #fff;
}

.groupList li:nth-child(even)::before {
	background-color: #eee;
}

.kedip,
.kedip .flex-cell,
.kedip::before,
.kedip .flex-cell::before {
	animation: kedip 0.6s ease-in-out;
	background: yellow;
	color: #000;
}

@keyframes kedip {
	0%   { background: yellow; }
	50%  { background: transparent; }
	100% { background: yellow; }
}

.flexTable {
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
	gap: 15px;
}

.col-latitude, .col-longitude {
	word-break: break-all;
}

.flex-row {
	display: flex;
	flex-direction: column;
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 12px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.flex-row:nth-child(odd) {
	background-color: #ffffff;
}

.flex-row:nth-child(even) {
	background-color: #f9f9f9;
}

.flex-row.tableHeader {
	background-color: #1c6ea4 !important;
}

.flex-row:not(.tableHeader):hover {
	background-color: #f9f9f9;
}

.tableHeader {
	display: none;
	font-weight: bold;
	border-bottom: 2px solid #ddd;
	color: #fff;
}

.tableHeader .flex-cell {
	justify-content: center;
	align-items: center;
	text-align: center;
}

.flex-cell {
	display: flex;
	align-items: flex-start;
	padding: 8px 0;
	border-bottom: 1px solid #f0f0f0;
	width: 100%;
}

.flex-cell:last-child {
	border-bottom: none;
}

.mobile-label {
	flex: 0 0 150px;
	font-weight: bold;
	color: #1c6ea4;
	text-align: right;
	margin-right: 12px;
	user-select: text;
}

#tabelDataPenyimpananSppd .mobile-label {
	flex: 0 0 200px;
}

.cell-value {
	min-width: 0;
	word-wrap: break-word;
	user-select: text;
}

.flex-cell:not(:last-child) {
	border-right: none;
}

.cell-center {
	flex-direction: column;
	align-items: center; 
	text-align: center;
	gap: 10px;
}

.cell-center .mobile-label {
	flex: 1;
}

.coordinateInput {
	display: flex;
	gap: 10px;
	margin: 10px auto;
}

.readonlyStyle {
	background-color: #f0f0f0 !important;
	color: #555555 !important;
	box-shadow: none !important;
	border-color: #cccccc !important;
	cursor: not-allowed !important;
}

.readonlyStyle:focus {
	outline: none !important;
	border-color: #cccccc !important;
}

.inputForm label span {
	font-size: 16px;
}

.radioGroup {
	display: flex;
	gap: 20px;
	padding: 5px 0;
}

.important {
	color: red;
	padding: 10px;
	font-size: 16px;
	text-align: center;
}

.qr-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

#wrapperSettings {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.on-off {
	display: flex;
	align-items: center;
	gap: 10px;
}

.streaming-list {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.streaming-row {
	display: flex;
	gap: 10px;
	align-items: center;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 10px;
}

.wrapper-streaming-input {
	flex: 1; /* Mengambil semua sisa ruang yang tersedia */
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/* Garis Pemandu di Preview Sertifikat */
.guide-line {
	position: absolute;
	pointer-events: none; /* Supaya tidak menghalangi klik pada gambar */
	display: none; /* Muncul saat gambar terisi */
}

.guide-line.vertical {
	width: 1px;
	height: 100%;
	background-color: rgba(52, 152, 219, 0.4);
	top: 0;
}

.guide-line.horizontal {
	height: 1px;
	width: 100%;
	background-color: rgba(52, 152, 219, 0.4);
	left: 0;
}

/* Penanda khusus untuk garis tengah */
.guide-line.center-line {
	background-color: rgba(231, 76, 60, 0.8) !important;
}

#markerNama, #markerNo {
	position: absolute;
	width: 20px; /* Ukuran sedikit diperbesar agar mudah ditarik */
	height: 20px;
	border: 3px solid white;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	cursor: grab; /* Kursor tangan terbuka */
	pointer-events: auto !important; /* Mengaktifkan klik/drag pada marker */
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	z-index: 100;
}

#markerNama:active, #markerNo:active {
	cursor: grabbing; /* Kursor tangan mengepal saat ditarik */
	transform: translate(-50%, -50%) scale(1.2); /* Efek membesar sedikit */
}

#imgPreviewTemplate {
	user-select: none; /* Mencegah gambar terpilih saat dragging */
	-webkit-user-drag: none;
}

#footer {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	padding: 20px;
	flex-wrap: wrap;
}

.footer-item {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	font-size: 16px;
	text-decoration: none;
	color: #005fcc;
	border-radius: 4px;
	padding: 5px 10px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	white-space: nowrap;
}

.footer-item:active {
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
}

.range-no-sertifikat-row {
	display: grid;
	grid-template-columns: 9fr 1fr; 
	gap: 10px;
}

.wrapper-range-no-sertifikat {
	flex-direction: row;
}

.icon-lock {
	cursor: not-allowed;
	color: #bbb;
}

.icon-lock:active, .icon-lock.active {
	box-shadow: none;
}

#wrapperInputSertifikat {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
}

.card {
	width: 100%;
	border: 1px solid #ddd;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	padding: 10px;
	box-sizing: border-box;
}

.instruction-box-title {
	font-weight: bold;
	text-align: center;
	position: relative;
	margin-bottom: 16px;
}

.instruction-box-title::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -6px;
	transform: translateX(-50%);
	width: 80%;
	height: 2px;
	background: linear-gradient(to right, transparent, #ff2626, transparent);
}

.instruction-box {
	text-align: left; 
	font-size: 0.9rem; 
	background: #f8f9fa; 
	padding: 15px; 
	border-radius: 8px; 
	margin-bottom: 20px; 
	overflow-y: auto;
	max-width: 768px;
	width: 80%;
}

#instruction-android {
	margin-bottom: 15px; 
	border-bottom: 1px solid #dee2e6; 
	padding-bottom: 15px;
}

.instruction-title {
	font-weight: bold;
}

#instruction-android .instruction-title {
	color: #28a745;
}

#instruction-iphone .instruction-title {
	color: #007bff;
}

/* --- TAMPILAN DESKTOP (Layar > 768px) --- */
@media (min-width: 769px) {
	.card {
		max-width: 768px;
	}
	
	#wrapperMenu, #wrapperAccount {
		top: 45px;
	}

	#wrapperOrganisasi {
		flex-direction: row;
	}

	.flexTable {
		display: grid;
		gap: 0;
		overflow: visible;
	}
	
	/* Tampilkan kembali Header */
	.tableHeader {
		display: contents; /* Menghilangkan pembungkus agar elemen <div> di dalamnya ikut grid induk */
	}
	
	/* "Hilangkan" pembungkus baris agar sel di dalamnya bisa masuk ke kolom grid induk */
	.flex-row {
		display: contents; 
	}
	
	/* Reset gaya sel agar terlihat seperti sel tabel asli */
	.flexTable .flex-cell {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12px 8px;
		border-bottom: 1px solid #eee;
		border-right: 1px solid #eee; /* Beri garis antar kolom */
		background: transparent; /* Reset background card */
		font-size: 16px;
		text-align: center;
		width: auto; /* Reset lebar mobile */
	}
	
	.flexTable .flex-cell:last-child {
		border-right: none;
	}
	
	/* Sembunyikan label mobile */
	.mobile-label {
		display: none;
	}
	
	.cell-value {
		width: 100%;
		text-align: center;
	}
	
	/* Rata kiri untuk kolom teks panjang */
	.col-nama-acara .cell-value, 
	.col-lokasi .cell-value {
		text-align: left;
	}
	
	/* Header Desktop */
	.tableHeader .flex-cell {
		background-color: #1c6ea4;
		color: #fff;
		font-weight: bold;
		border-bottom: 2px solid #145077;
		position: sticky;
		top: 54px;
		z-index: 100;
	}
	
	/* Hover Effect (Trik khusus karena pakai display: contents) */
	.flex-row:hover .flex-cell {
		background-color: #f4f8fb;
	}
	
	/* Warna Selang-Seling (Zebra) */
	.flex-row:nth-child(even) .flex-cell {
		background-color: #f9f9f9;
	}
	
	.iconAksi {
		padding: 5px;
		margin: 5px;
	}
	
	#tabelDataAcara {
		grid-template-columns: 
			45px   /* No. */
			80px   /* ID Acara */
			1.5fr  /* Nama Acara */
			95px  /* Tanggal */
			55px   /* Jam */
			1.2fr  /* Lokasi */
			110px  /* Latitude */
			110px  /* Longitude */
			60px   /* Radius */
			80px   /* Jml. Peserta */
			200px   /* Links */
			400px; /* Aksi */
	}
	
	#tabelDataPresensi {
		grid-template-columns: 
			45px   /* No. */
			150px  /* Waktu (YYYY-MM-DD HH:MM) */
			1.5fr  /* Nama */
			1.2fr  /* Organisasi */
			1.2fr  /* Jabatan */
			110px  /* Jenis Kepegawaian */
			90px   /* Gender */
			120px  /* No. HP */
			1.2fr  /* Email */
			90px   /* Latitude */
			90px   /* Longitude */
			90px   /* ID Device */
			110px  /* IP Address */
			160px;  /* Status SPPD */
	}
	
	#tabelDataUndangan {
		grid-template-columns: 
			45px  /* No. */
			1.2fr /* Organisasi */
			1.2fr /* Kelompok */
			45px; /* Aksi */
	}
	
	#tabelDataPenyimpananSppd {
		grid-template-columns: 
			45px  /* No. */
			1.2fr /* Nama Penyimpanan SPPD */
			1.2fr /* Keterangan */
			45px; /* Aksi */
	}
	
	#tabelDataSertifikatNext {
		grid-template-columns: 
			45px  /* No. */
			1.5fr /* Nama */
			100px /* No. Urut Sertifikat */
			150px; /* Download */
		max-width: 768px;
	}
	
	/* Rata kiri untuk kolom teks yang biasanya panjang */
	.cell-left {
		justify-content: flex-start;
		text-align: left;
		padding-left: 10px;
	}
	
	#wrapperInputSertifikat {
		display: grid;
		grid-template-columns: 
			400px /* Nama */
			200px; /* No. Urut Sertifikat */
		gap: 10px;
		justify-content: center;
	}
}