@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/*
 * sita-ui.css — lapisan tampilan modern di atas AdminLTE 2.4.2
 *
 * Berkas ini HANYA menimpa gaya. Tidak ada markup, view, atau berkas AdminLTE
 * asli yang diubah. Dimuat paling akhir di <head> supaya menang atas
 * AdminLTE.min.css dan _all-skins.min.css tanpa perlu !important di mana-mana.
 *
 * Salinan identik ada di: /css, /dosen/css, /admin/css
 */

/* ============================================================
   1. Token warna dan ukuran
   ============================================================ */
:root {
	/* Warna utama menyatu dengan halaman login: navy akademik + aksen emas. */
	--sita-primary:        #12325c;
	--sita-primary-dark:   #0d2545;
	--sita-primary-soft:   #1d4d8c;
	--sita-primary-light:  #eef3fa;
	--sita-primary-border: #ccdcf0;

	--sita-accent:         #c9a227;
	--sita-accent-dark:    #8a6d12;
	--sita-accent-light:   #fbf5e3;

	--sita-success: #1f7a54;
	--sita-info:    #1d6fa5;
	--sita-warning: #b8860b;
	--sita-danger:  #b3261e;

	--sita-sidebar-bg:        #0c1c33;
	--sita-sidebar-hover:     #16304f;
	--sita-sidebar-text:      #9fb0c9;
	--sita-sidebar-text-soft: #6c809d;

	--sita-bg:      #eef2f8;
	--sita-surface: #ffffff;
	--sita-border:  #e1e7f0;
	--sita-text:    #17223a;
	--sita-muted:   #6b7690;

	--sita-radius:    14px;
	--sita-radius-sm: 10px;

	/* Elevasi bertingkat ala Material: makin tinggi, makin "terangkat". */
	--sita-shadow:    0 1px 2px rgba(16, 28, 54, .06), 0 1px 3px rgba(16, 28, 54, .08);
	--sita-shadow-md: 0 2px 6px rgba(16, 28, 54, .07), 0 6px 16px -6px rgba(16, 28, 54, .16);
	--sita-shadow-lg: 0 4px 10px rgba(16, 28, 54, .08), 0 16px 32px -12px rgba(16, 28, 54, .22);

	/* Kurva gerak "emphasized" Material 3, dipakai untuk semua transisi. */
	--sita-ease: cubic-bezier(.2, 0, 0, 1);
}

/* ============================================================
   2. Dasar
   ============================================================ */
body,
.wrapper,
body.skin-blue {
	font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 14px;
	color: var(--sita-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.content-wrapper,
.right-side,
.main-footer {
	background-color: var(--sita-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: inherit;
	font-weight: 600;
	color: var(--sita-text);
	letter-spacing: -.01em;
}

a {
	color: var(--sita-primary);
}

a:hover,
a:focus {
	color: var(--sita-primary-dark);
	text-decoration: none;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 10px;
	border: 2px solid transparent;
	background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
	background-clip: content-box;
}

/* ============================================================
   3. Header: logo + navbar
   ============================================================ */
.main-header .logo,
.skin-blue .main-header .logo {
	background: var(--sita-sidebar-bg);
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -.02em;
	border-bottom: 0;
	transition: none;
}

.skin-blue .main-header .logo:hover {
	background: var(--sita-sidebar-bg);
}

.main-header .logo .logo-lg {
	position: relative;
	padding-left: 26px;
}

/* titik aksen kecil di sebelah kiri nama aplikasi */
.main-header .logo .logo-lg:before {
	content: '';
	position: absolute;
	left: 4px;
	top: 50%;
	margin-top: -8px;
	width: 16px;
	height: 16px;
	border-radius: 5px;
	background: linear-gradient(135deg, var(--sita-primary) 0%, var(--sita-accent) 100%);
}

.skin-blue .main-header .navbar,
.main-header .navbar {
	background: var(--sita-surface);
	border-bottom: 1px solid var(--sita-border);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
	min-height: 56px;
}

.skin-blue .main-header .navbar .sidebar-toggle,
.skin-blue .main-header .navbar .nav > li > a {
	color: var(--sita-muted);
}

.skin-blue .main-header .navbar .sidebar-toggle:hover,
.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > .active > a,
.skin-blue .main-header .navbar .nav .open > a,
.skin-blue .main-header .navbar .nav .open > a:hover,
.skin-blue .main-header .navbar .nav .open > a:focus {
	background: var(--sita-bg);
	color: var(--sita-text);
}

/* tautan di pojok kanan navbar (akun, lonceng) setinggi navbar (56px) dan
   isinya di tengah, jadi foto dan nama sejajar dan sorotannya penuh */
.main-header .navbar-custom-menu > .navbar-nav > li > a {
	display: flex;
	align-items: center;
	height: 56px;
	padding-top: 0;
	padding-bottom: 0;
}

.navbar-nav > .user-menu > .dropdown-toggle {
	gap: 10px;
	padding-left: 16px;
	padding-right: 20px;
}

.navbar-nav > .user-menu .user-image {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--sita-border);
}

.navbar-nav > .user-menu > .dropdown-toggle > .user-image {
	float: none;
	flex-shrink: 0;
	margin: 0;
}

.navbar-nav > .user-menu > a > span {
	font-weight: 500;
}

.skin-blue .main-header .navbar .navbar-nav > .user-menu > .dropdown-menu > .user-header {
	background: var(--sita-sidebar-bg);
	height: auto;
	padding: 20px 15px;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-header img {
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid rgba(255, 255, 255, .15);
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
	background: var(--sita-surface);
	border-top: 1px solid var(--sita-border);
}

.navbar-nav > .user-menu > .dropdown-menu {
	border: 1px solid var(--sita-border);
	border-radius: var(--sita-radius);
	box-shadow: var(--sita-shadow-lg);
	overflow: hidden;
	padding: 0;
}

/* lonceng / amplop notifikasi */
.navbar-custom-menu .navbar-nav > li > a > .label {
	top: 13px;
	padding: 3px 6px;
	font-size: 10px;
	font-weight: 600;
	border-radius: 10px;
}

/* ============================================================
   4. Sidebar
   ============================================================ */
.skin-blue .main-sidebar,
.skin-blue .left-side,
.main-sidebar {
	background: var(--sita-sidebar-bg);
}

.sidebar {
	padding-bottom: 24px;
}

.skin-blue .user-panel > .info,
.skin-blue .user-panel > .info > a {
	color: #e2e8f0;
}

.user-panel {
	padding: 16px 12px;
	margin-bottom: 4px;
	border-bottom: 1px solid rgba(148, 163, 184, .12);
}

.user-panel > .image > img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(148, 163, 184, .25);
}

.user-panel > .info {
	padding: 3px 5px 5px 12px;
	font-weight: 500;
	font-size: 13px;
}

.skin-blue .sidebar-menu > li.header {
	background: transparent;
	color: var(--sita-sidebar-text-soft);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 18px 20px 8px;
}

.sidebar-menu > li {
	padding: 0 10px;
}

.skin-blue .sidebar-menu > li > a,
.sidebar-menu > li > a {
	color: var(--sita-sidebar-text);
	border-left: 0;
	border-radius: var(--sita-radius-sm);
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 500;
	transition: background-color .15s ease, color .15s ease;
}

.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a {
	color: #fff;
	background: var(--sita-sidebar-hover);
	border-left: 0;
}

.skin-blue .sidebar-menu > li.active > a {
	background: linear-gradient(135deg, var(--sita-primary) 0%, var(--sita-primary-soft) 100%);
	box-shadow: 0 2px 10px rgba(18, 50, 92, .45);
}

.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .glyphicon,
.sidebar-menu > li > a > .ion {
	width: 20px;
	font-size: 15px;
	opacity: .9;
}

.sidebar-menu > li > a > .pull-right-container {
	right: 12px;
}

.sidebar-menu li > a > .fa-angle-left {
	font-size: 13px;
	opacity: .6;
}

/* submenu (masih dipakai kalau ada treeview tersisa) */
.skin-blue .sidebar-menu > li > .treeview-menu,
.skin-blue .treeview-menu {
	background: transparent;
	padding-left: 12px;
	margin: 2px 0 6px;
	border-left: 1px solid rgba(148, 163, 184, .18);
}

.skin-blue .treeview-menu > li > a {
	color: var(--sita-sidebar-text);
	padding: 7px 12px;
	border-radius: 6px;
	font-size: 13px;
}

.skin-blue .treeview-menu > li.active > a,
.skin-blue .treeview-menu > li > a:hover {
	color: #fff;
	background: var(--sita-sidebar-hover);
}

.treeview-menu > li > a > .fa {
	width: 16px;
	font-size: 8px;
}

/* badge di item sidebar (mis. Mailbox) */
.sidebar-menu > li > a > .pull-right-container > .label,
.sidebar-menu .label {
	border-radius: 10px;
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 600;
}

/* mode sidebar-mini: jaga agar label mengambang tetap rapi */
.sidebar-mini.sidebar-collapse .sidebar-menu > li {
	padding: 0 8px;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
	padding: 12px 5px;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
	border-radius: var(--sita-radius-sm);
	background: var(--sita-primary);
	padding-top: 12px;
	padding-bottom: 12px;
}

/* ============================================================
   5. Content header + breadcrumb
   ============================================================ */
.content-header {
	padding: 22px 20px 6px;
	background: transparent;
}

.content-header > h1,
.content-header > h4 {
	font-size: 22px;
	font-weight: 600;
	margin: 0;
}

.content-header > .breadcrumb,
.content-header > ol.breadcrumb {
	position: static;
	float: none;
	display: block;
	background: transparent;
	padding: 0;
	margin: 0 0 4px;
	font-size: 13px;
	border-radius: 0;
}

.content-header > ol.breadcrumb > h4 {
	display: inline-block;
	margin: 0;
	font-size: 20px;
	font-weight: 600;
}

.breadcrumb > li > a {
	color: var(--sita-muted);
	font-weight: 500;
}

.breadcrumb > li + li:before {
	content: '\203A';
	color: #cbd5e1;
	padding: 0 8px;
}

.breadcrumb > .active {
	color: var(--sita-text);
	font-weight: 600;
}

.content {
	padding: 12px 20px 24px;
}

/* ============================================================
   6. Box / kartu
   ============================================================ */
.box {
	background: var(--sita-surface);
	border: 1px solid var(--sita-border);
	border-top: 1px solid var(--sita-border);
	border-radius: var(--sita-radius);
	box-shadow: var(--sita-shadow);
	margin-bottom: 20px;
}

/* AdminLTE menandai jenis box dengan garis atas tebal; diganti aksen tipis */
.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-warning,
.box.box-danger,
.box.box-default {
	border-top-width: 1px;
	border-top-color: var(--sita-border);
}

.box-header {
	padding: 16px 20px;
	border-bottom: 1px solid var(--sita-border);
}

.box-header.with-border {
	border-bottom: 1px solid var(--sita-border);
}

.box-header > .box-title {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
}

.box-header > .box-tools {
	right: 14px;
	top: 12px;
}

.box-body {
	padding: 20px;
	border-radius: 0 0 var(--sita-radius) var(--sita-radius);
}

.box-footer {
	background: #f8fafc;
	border-top: 1px solid var(--sita-border);
	border-radius: 0 0 var(--sita-radius) var(--sita-radius);
	padding: 14px 20px;
}

.box.box-solid > .box-header {
	border-radius: var(--sita-radius) var(--sita-radius) 0 0;
}

.box.box-solid.box-primary > .box-header {
	background: var(--sita-primary);
}

.box.box-solid.box-primary {
	border-color: var(--sita-primary);
}

/* ============================================================
   7. small-box / info-box (kartu angka)
   ============================================================ */
.small-box {
	border-radius: var(--sita-radius);
	box-shadow: var(--sita-shadow);
	margin-bottom: 20px;
	overflow: hidden;
}

.small-box > .inner {
	padding: 20px;
}

.small-box h3 {
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -.03em;
	margin: 0 0 6px;
	color: inherit;
}

.small-box p {
	font-size: 13px;
	font-weight: 500;
	opacity: .92;
	margin: 0;
}

.small-box > .icon {
	top: 12px;
	right: 14px;
	font-size: 64px;
	opacity: .18;
	transition: none;
}

.small-box:hover {
	box-shadow: var(--sita-shadow-md);
	text-decoration: none;
}

.small-box:hover > .icon {
	font-size: 64px;
	opacity: .24;
}

.small-box > .small-box-footer {
	background: rgba(0, 0, 0, .12);
	font-size: 12px;
	font-weight: 500;
	padding: 8px 0;
}

/* Baris kartu ringkasan di dashboard.

   Tanpa ini tinggi tiap kartu mengikuti panjang isinya sendiri: kartu yang
   isinya angka jadi lebih pendek daripada kartu yang isinya kalimat seperti
   "Menunggu Keputusan Prodi", sehingga barisnya terlihat bergerigi. Barisnya
   dijadikan flex supaya semua kartu ikut tinggi kartu yang tertinggi. */
.sita-ringkas {
	display: flex;
	flex-wrap: wrap;
}

.sita-ringkas > [class*="col-"] {
	display: flex;
}

.sita-ringkas .small-box {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 118px;
}

.sita-ringkas .small-box > .inner {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* sisakan ruang untuk ikon besar di pojok kanan */
	padding-right: 74px;
}

/* Isi kartu bisa berupa angka, bisa juga kata seperti "Belum" atau
   "Menunggu Keputusan Prodi". Ukurannya disamakan dan teks panjang
   dibiarkan turun baris, bukan memaksa kartunya melar. */
.sita-ringkas .small-box h3 {
	font-size: 26px;
	line-height: 1.25;
	white-space: normal;
}

/* Di layar kecil AdminLTE menyembunyikan ikon dan menengahkan isi kartu,
   jadi ruang untuk ikon tidak lagi diperlukan - kalau dibiarkan, teks yang
   seharusnya di tengah malah terdorong ke kiri. */
@media (max-width: 767px) {
	.sita-ringkas .small-box h3 {
		font-size: 22px;
	}

	.sita-ringkas .small-box > .inner {
		padding-right: 20px;
	}
}

.info-box {
	border-radius: var(--sita-radius);
	box-shadow: var(--sita-shadow);
	min-height: 84px;
}

.info-box-icon {
	border-radius: var(--sita-radius) 0 0 var(--sita-radius);
	width: 84px;
	height: 84px;
	line-height: 84px;
}

.info-box-number {
	font-size: 22px;
	font-weight: 700;
}

/* warna blok dibuat lebih kalem dari bawaan AdminLTE */
.bg-aqua, .callout.callout-info, .alert-info, .label-info, .modal-info .modal-body { background-color: var(--sita-info) !important; }
.bg-blue, .label-primary  { background-color: var(--sita-primary) !important; }
.bg-green, .callout.callout-success, .alert-success, .label-success { background-color: var(--sita-success) !important; }
.bg-yellow, .callout.callout-warning, .alert-warning, .label-warning { background-color: var(--sita-warning) !important; }
.bg-red, .callout.callout-danger, .alert-danger, .label-danger { background-color: var(--sita-danger) !important; }
.bg-purple { background-color: #7c3aed !important; }
.bg-teal   { background-color: #0d9488 !important; }
.bg-gray   { background-color: #64748b !important; color: #fff !important; }

.text-blue   { color: var(--sita-primary) !important; }
.text-aqua   { color: var(--sita-info) !important; }
.text-green  { color: var(--sita-success) !important; }
.text-yellow { color: var(--sita-warning) !important; }
.text-red    { color: var(--sita-danger) !important; }
.text-muted  { color: var(--sita-muted) !important; }

/* ============================================================
   8. Tombol
   ============================================================ */
.btn {
	border-radius: var(--sita-radius-sm);
	font-weight: 500;
	font-size: 14px;
	padding: 8px 16px;
	border: 1px solid transparent;
	box-shadow: none;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn:focus,
.btn:active:focus {
	outline: 0;
	box-shadow: 0 0 0 3px rgba(29, 77, 140, .25);
}

.btn-lg  { padding: 12px 22px; font-size: 16px; border-radius: 10px; }
.btn-sm  { padding: 6px 12px;  font-size: 13px; border-radius: 6px; }
.btn-xs  { padding: 4px 10px;  font-size: 12px; border-radius: 6px; }

.btn-default {
	background: var(--sita-surface);
	border-color: #cbd5e1;
	color: var(--sita-text);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
	background: #f8fafc;
	border-color: #94a3b8;
	color: var(--sita-text);
}

.btn-primary {
	background: var(--sita-primary);
	border-color: var(--sita-primary);
	color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
	background: var(--sita-primary-dark);
	border-color: var(--sita-primary-dark);
	color: #fff;
}

.btn-success { background: var(--sita-success); border-color: var(--sita-success); }
.btn-success:hover, .btn-success:focus, .btn-success:active { background: #047857; border-color: #047857; }

.btn-info    { background: var(--sita-info); border-color: var(--sita-info); }
.btn-info:hover, .btn-info:focus, .btn-info:active { background: #0369a1; border-color: #0369a1; }

.btn-warning { background: var(--sita-warning); border-color: var(--sita-warning); color: #fff; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active { background: #b45309; border-color: #b45309; color: #fff; }

.btn-danger  { background: var(--sita-danger); border-color: var(--sita-danger); }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { background: #b91c1c; border-color: #b91c1c; }

.btn-flat {
	border-radius: var(--sita-radius-sm);
}

.btn.disabled,
.btn[disabled] {
	opacity: .5;
	box-shadow: none;
}

.btn-group > .btn:first-child:not(:last-child) { border-radius: var(--sita-radius-sm) 0 0 var(--sita-radius-sm); }
.btn-group > .btn:last-child:not(:first-child) { border-radius: 0 var(--sita-radius-sm) var(--sita-radius-sm) 0; }

/* ============================================================
   9. Form
   ============================================================ */
.form-control,
.input-group .form-control {
	height: 40px;
	border: 1px solid #cbd5e1;
	border-radius: var(--sita-radius-sm);
	box-shadow: none;
	padding: 8px 12px;
	font-size: 14px;
	color: var(--sita-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}

textarea.form-control {
	height: auto;
	min-height: 90px;
}

.form-control:focus {
	border-color: var(--sita-primary);
	box-shadow: 0 0 0 3px rgba(29, 77, 140, .15);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
	background: #f1f5f9;
	color: var(--sita-muted);
	cursor: not-allowed;
}

.form-group > label,
label {
	font-weight: 500;
	font-size: 13px;
	color: #334155;
	margin-bottom: 6px;
}

.input-group-addon {
	border: 1px solid #cbd5e1;
	background: #f8fafc;
	border-radius: var(--sita-radius-sm);
	color: var(--sita-muted);
}

/* ---------- Lebar isian ----------

   Kelas .form-control selalu selebar 100% pembungkusnya, jadi kotak tanggal
   lahir sama panjangnya dengan kotak nama. Kelas di bawah dipasang pada
   pembungkus <div class="row"> milik isian, lalu isiannya ikut menyempit --
   panjang kotak jadi sepadan dengan isi yang memang diketik di situ.

   Hanya batas atas: di layar sempit isiannya tetap menyusut sendiri. */
.sita-field-xs { max-width: 150px; }
.sita-field-sm { max-width: 210px; }
.sita-field-md { max-width: 290px; }
.sita-field-lg { max-width: 430px; }

/* select2 menuliskan lebar tetap dalam piksel langsung di elemennya waktu
   dipasang, jadi harus dipaksa mengikuti pembungkusnya */
.sita-field-xs > .select2-container,
.sita-field-sm > .select2-container,
.sita-field-md > .select2-container,
.sita-field-lg > .select2-container {
	width: 100% !important;
	max-width: 100%;
}

/* Tanggal lahir punya tombol kalender di sebelah kotaknya. Keduanya
   disejajarkan supaya ikonnya tidak menggantung di bawah kotak. Lebar
   pembungkusnya dihitung dari kotak tanggal ditambah ikonnya. */
.sita-field-tanggal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	max-width: 210px;
}

.sita-field-tanggal > label,
.sita-field-tanggal > .errorMessage {
	flex: 0 0 100%;
}

.sita-field-tanggal > .form-control {
	flex: 0 0 150px;
	min-width: 0;
}

.sita-field-tanggal > img {
	flex: 0 0 auto;
	cursor: pointer;
}

/* Isian berkas tidak boleh diberi .form-control (Bootstrap 3 tidak
   mendukungnya), jadi kotaknya dibuat sendiri supaya tidak terlihat polos
   di antara isian lain. */
.sita-file {
	display: block;
	width: 100%;
	padding: 8px 12px;
	border: 1px dashed #cbd5e1;
	border-radius: var(--sita-radius-sm);
	background: #f8fafc;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sita-muted);
}

.has-error .form-control {
	border-color: var(--sita-danger);
}

.has-error .form-control:focus {
	box-shadow: 0 0 0 3px rgba(220, 38, 38, .15);
}

/* pesan validasi Yii */
.errorMessage,
.errorSummary {
	color: var(--sita-danger);
	font-size: 12.5px;
	font-weight: 500;
	margin-top: 5px;
}

.errorSummary {
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--sita-radius-sm);
	padding: 12px 16px;
	margin-bottom: 16px;
}

.errorSummary p {
	margin: 0 0 4px;
	font-weight: 600;
}

.errorSummary ul {
	margin: 0;
	padding-left: 18px;
}

div.form .row {
	margin-bottom: 14px;
}

/* Hanya tanda bintangnya yang merah.
   Yii 1 (CHtml::activeLabelEx) juga menempelkan kelas "required" pada elemen
   <label>, jadi pemilihnya harus dipersempit ke <span> — kalau tidak, seluruh
   tulisan labelnya ikut merah dan terlihat seperti pesan kesalahan. */
span.required {
	color: var(--sita-danger);
}

.hint {
	color: var(--sita-muted);
	font-size: 12px;
}

/* Select2 v4 diselaraskan dengan .form-control */
.select2-container--default .select2-selection--single {
	height: 40px;
	border: 1px solid #cbd5e1;
	border-radius: var(--sita-radius-sm);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 38px;
	padding-left: 12px;
	color: var(--sita-text);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 38px;
}

.select2-container--default .select2-selection--multiple {
	border: 1px solid #cbd5e1;
	border-radius: var(--sita-radius-sm);
	min-height: 40px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--sita-primary);
}

.select2-dropdown {
	border-color: #cbd5e1;
	border-radius: var(--sita-radius-sm);
	box-shadow: var(--sita-shadow-lg);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--sita-primary);
}

/* ============================================================
   10. Tabel, CGridView, pager
   ============================================================ */
.table {
	margin-bottom: 0;
}

.table > thead > tr > th {
	background: #f8fafc;
	border-bottom: 1px solid var(--sita-border);
	border-top: 0;
	color: #475569;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: 12px 14px;
	vertical-align: middle;
}

.table > tbody > tr > td {
	padding: 12px 14px;
	border-top: 1px solid #f1f5f9;
	vertical-align: middle;
	font-size: 13.5px;
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td {
	border-color: var(--sita-border);
}

.table-hover > tbody > tr:hover {
	background: var(--sita-primary-light);
}

.table-striped > tbody > tr:nth-of-type(odd) {
	background: #fafbfc;
}

.table > tbody > tr > td > .btn {
	margin: 2px;
}

/* CGridView */
.grid-view {
	background: transparent;
	padding: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.grid-view table.items {
	width: 100%;
	background: var(--sita-surface);
	border: 1px solid var(--sita-border);
	border-radius: var(--sita-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.grid-view table.items > thead > tr > th {
	background: #f8fafc;
	border: 0;
	border-bottom: 1px solid var(--sita-border);
	color: #475569;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: 12px 14px;
	white-space: nowrap;
}

.grid-view table.items > thead > tr > th a {
	color: #475569;
}

.grid-view table.items > thead > tr > th a:hover {
	color: var(--sita-primary);
}

.grid-view table.items > tbody > tr > td {
	border: 0;
	border-bottom: 1px solid #f1f5f9;
	padding: 12px 14px;
	font-size: 13.5px;
	vertical-align: middle;
}

.grid-view table.items > tbody > tr:last-child > td {
	border-bottom: 0;
}

.grid-view table.items > tbody > tr.odd {
	background: var(--sita-surface);
}

.grid-view table.items > tbody > tr.even {
	background: #fafbfc;
}

.grid-view table.items > tbody > tr.hover,
.grid-view table.items > tbody > tr:hover,
.grid-view table.items > tbody > tr.selected {
	background: var(--sita-primary-light);
}

.grid-view .filters input,
.grid-view .filters select,
.grid-view tr.filters input,
.grid-view tr.filters select {
	height: 34px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 13px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	width: 100%;
}

.grid-view .summary {
	color: var(--sita-muted);
	font-size: 12.5px;
	margin: 0 0 10px;
	text-align: left;
}

.grid-view .empty {
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: var(--sita-radius-sm);
	color: #92400e;
	font-style: normal;
	padding: 14px;
	text-align: center;
}

.grid-view .keys { display: none; }

/* pager Yii (CLinkPager) dan pagination Bootstrap */
.pager ul.yiiPager,
ul.yiiPager {
	margin: 16px 0 0;
	padding: 0;
	font-size: 13px;
}

ul.yiiPager li {
	display: inline-block;
	margin: 0 3px 0 0;
}

ul.yiiPager a,
ul.yiiPager span,
.pagination > li > a,
.pagination > li > span {
	display: inline-block;
	min-width: 34px;
	height: 34px;
	line-height: 22px;
	padding: 6px 10px;
	text-align: center;
	border: 1px solid var(--sita-border);
	border-radius: var(--sita-radius-sm);
	background: var(--sita-surface);
	color: #475569;
	font-weight: 500;
	float: none;
	margin-left: 0;
}

ul.yiiPager a:hover,
.pagination > li > a:hover {
	background: var(--sita-primary-light);
	border-color: var(--sita-primary-border);
	color: var(--sita-primary-dark);
}

ul.yiiPager .selected a,
ul.yiiPager .selected span,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
	background: var(--sita-primary);
	border-color: var(--sita-primary);
	color: #fff;
}

ul.yiiPager .hidden a,
ul.yiiPager .hidden span,
.pagination > .disabled > a,
.pagination > .disabled > span {
	color: #cbd5e1;
	background: #f8fafc;
	border-color: var(--sita-border);
}

/* menetralkan gaya tabel lawas dari table.css */
div#list table,
table[border="1"] {
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--sita-radius);
	border: 1px solid var(--sita-border);
	overflow: hidden;
	width: 100%;
}

div#list table tr:hover,
table[border="1"] tr:hover {
	background: var(--sita-primary-light);
	color: inherit;
}

div#list table td,
div#list table th,
table[border="1"] td,
table[border="1"] th {
	border: 0;
	border-bottom: 1px solid #f1f5f9;
	padding: 10px 12px;
}

/* ============================================================
   11. Label, badge, alert, callout
   ============================================================ */
.label {
	border-radius: 20px;
	font-size: 11.5px;
	font-weight: 600;
	padding: 4px 10px;
	letter-spacing: .01em;
	display: inline-block;
}

.badge {
	border-radius: 20px;
	font-size: 11.5px;
	font-weight: 600;
	padding: 3px 9px;
}

.alert {
	border: 1px solid transparent;
	border-radius: var(--sita-radius);
	padding: 14px 18px;
	box-shadow: none;
	font-size: 13.5px;
}

.alert-success { background: #ecfdf5 !important; border-color: #a7f3d0; color: #065f46 !important; }
.alert-info    { background: #eff6ff !important; border-color: #bfdbfe; color: #1e40af !important; }
.alert-warning { background: #fffbeb !important; border-color: #fde68a; color: #92400e !important; }
.alert-danger,
.alert-error   { background: #fef2f2 !important; border-color: #fecaca; color: #991b1b !important; }

.alert .close {
	opacity: .4;
	text-shadow: none;
}

.callout {
	border-radius: var(--sita-radius);
	box-shadow: none;
}

/* Tombol di dalam callout berwarna.
   Aturan bawaan AdminLTE membuat semua tautan di dalam callout jadi putih
   dan bergaris bawah, sehingga tombol di sana nyaris tidak kelihatan -
   yang berwarna senada latar, yang putih kehilangan teksnya. Di sini
   tombol utama dibuat putih solid dengan teks mengikuti warna callout,
   dan tombol pendamping dibuat bergaris putih. */
.callout .btn {
	text-decoration: none !important;
	font-weight: 600;
	box-shadow: none;
}

.callout .btn-default,
.callout .btn-default:focus {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, .75) !important;
	color: #fff !important;
}

.callout .btn-default:hover {
	background: rgba(255, 255, 255, .18) !important;
	border-color: #fff !important;
	color: #fff !important;
}

.callout .btn-primary,
.callout .btn-success,
.callout .btn-warning,
.callout .btn-danger,
.callout .btn-info {
	background: #fff !important;
	border: 1px solid #fff !important;
}

.callout .btn-primary:hover,
.callout .btn-success:hover,
.callout .btn-warning:hover,
.callout .btn-danger:hover,
.callout .btn-info:hover {
	background: rgba(255, 255, 255, .88) !important;
}

/* Warna tulisan tiap tombol, dipakai kalau warnanya tidak senada dengan
   callout-nya -- misalnya tombol merah di dalam callout hijau. Tanpa ini
   tulisannya tetap putih di atas latar putih, sehingga tombolnya terbaca
   sebagai kotak kosong. */
.callout .btn-primary { color: var(--sita-primary) !important; }
.callout .btn-success { color: var(--sita-success) !important; }
.callout .btn-info    { color: var(--sita-info) !important; }
.callout .btn-warning { color: var(--sita-warning) !important; }
.callout .btn-danger  { color: var(--sita-danger) !important; }

/* Tombol utama mengikuti warna callout tempatnya berada. */
.callout-danger .btn-primary,
.callout-danger .btn-danger  { color: var(--sita-danger) !important; }
.callout-success .btn-primary,
.callout-success .btn-success { color: var(--sita-success) !important; }
.callout-warning .btn-primary,
.callout-warning .btn-warning { color: var(--sita-warning) !important; }
.callout-info .btn-primary,
.callout-info .btn-info       { color: var(--sita-info) !important; }

/* ============================================================
   12. Nav tabs / pills
   ============================================================ */
.nav-tabs {
	border-bottom: 1px solid var(--sita-border);
}

.nav-tabs > li > a {
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: var(--sita-muted);
	font-weight: 500;
	padding: 10px 16px;
	margin-right: 4px;
}

.nav-tabs > li > a:hover {
	background: transparent;
	border-color: transparent transparent #cbd5e1;
	color: var(--sita-text);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	background: transparent;
	border: 0;
	border-bottom: 2px solid var(--sita-primary);
	color: var(--sita-primary);
	font-weight: 600;
}

.nav-tabs > li > a > .badge,
.nav-tabs > li > a > .label {
	margin-left: 6px;
	background: var(--sita-bg);
	color: var(--sita-muted);
}

.nav-tabs > li.active > a > .badge,
.nav-tabs > li.active > a > .label {
	background: var(--sita-primary-light);
	color: var(--sita-primary-dark);
}

.nav-tabs-custom {
	border-radius: var(--sita-radius);
	box-shadow: var(--sita-shadow);
	border: 1px solid var(--sita-border);
}

.nav-tabs-custom > .nav-tabs > li.active {
	border-top-color: var(--sita-primary);
}

.nav-pills > li > a {
	border-radius: var(--sita-radius-sm);
	font-weight: 500;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
	background: var(--sita-primary);
}

/* ============================================================
   13. Dropdown, modal, panel
   ============================================================ */
.dropdown-menu {
	border: 1px solid var(--sita-border);
	border-radius: var(--sita-radius);
	box-shadow: var(--sita-shadow-lg);
	padding: 6px;
}

.dropdown-menu > li > a {
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 13.5px;
	font-weight: 500;
	color: #334155;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background: var(--sita-primary-light);
	color: var(--sita-primary-dark);
}

.modal-content {
	border: 0;
	border-radius: var(--sita-radius);
	box-shadow: var(--sita-shadow-lg);
}

.modal-header,
.modal-footer {
	border-color: var(--sita-border);
	padding: 16px 20px;
}

.modal-body {
	padding: 20px;
}

.panel {
	border-radius: var(--sita-radius);
	border-color: var(--sita-border);
	box-shadow: var(--sita-shadow);
}

.panel-heading {
	border-radius: var(--sita-radius) var(--sita-radius) 0 0;
	border-color: var(--sita-border);
	padding: 14px 18px;
	font-weight: 600;
}

.progress {
	border-radius: 20px;
	box-shadow: none;
	background: var(--sita-border);
	height: 8px;
}

.progress-bar {
	box-shadow: none;
	background-color: var(--sita-primary);
}

/* ============================================================
   14. Footer
   ============================================================ */
.main-footer {
	background: var(--sita-surface);
	border-top: 1px solid var(--sita-border);
	color: var(--sita-muted);
	font-size: 12.5px;
	padding: 16px 20px;
}

/* bar teks berjalan dari form.css */
#running-text {
	background: var(--sita-sidebar-bg);
	color: #e2e8f0;
	font-size: 13px;
}

/* ============================================================
   15. Halaman login
   Nuansa akademik dengan sentuhan Material Design: permukaan
   bertingkat, sudut membulat, gerak yang halus, dan latar
   gradasi yang mengalir pelan.
   ============================================================ */
.login-page-wide {
	--login-bg: #eef2f8;
	--login-ink: #12325c;
	--login-ink-2: #1d4d8c;
	--login-gold: #c9a227;
	--login-green: #1f7a54;
	--login-line: #e1e7f0;
	--login-text: #17223a;
	--login-muted: #6b7690;

	/* elevation ala Material */
	--el-1: 0 1px 2px rgba(16, 28, 54, .06), 0 1px 3px rgba(16, 28, 54, .08);
	--el-2: 0 2px 6px rgba(16, 28, 54, .07), 0 6px 16px -6px rgba(16, 28, 54, .16);
	--el-3: 0 4px 10px rgba(16, 28, 54, .08), 0 16px 32px -12px rgba(16, 28, 54, .22);

	/* kurva gerak "emphasized" Material 3 */
	--ease: cubic-bezier(.2, 0, 0, 1);

	background: var(--login-bg);
	color: var(--login-text);
	font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* ---------- latar: gradasi yang mengalir ---------- */
.sita-bg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.sita-bg span {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(70px);
	opacity: .5;
	will-change: transform;
}

.sita-bg .b1 {
	width: 44vw;
	height: 44vw;
	min-width: 360px;
	min-height: 360px;
	top: -14vw;
	left: -10vw;
	background: radial-gradient(circle at 35% 35%, rgba(29, 77, 140, .55), rgba(29, 77, 140, 0) 70%);
	animation: sitaDrift1 26s var(--ease) infinite alternate;
}

.sita-bg .b2 {
	width: 38vw;
	height: 38vw;
	min-width: 320px;
	min-height: 320px;
	bottom: -16vw;
	right: -8vw;
	background: radial-gradient(circle at 60% 40%, rgba(201, 162, 39, .45), rgba(201, 162, 39, 0) 70%);
	animation: sitaDrift2 32s var(--ease) infinite alternate;
}

.sita-bg .b3 {
	width: 30vw;
	height: 30vw;
	min-width: 260px;
	min-height: 260px;
	top: 34%;
	left: 46%;
	background: radial-gradient(circle at 50% 50%, rgba(31, 122, 84, .30), rgba(31, 122, 84, 0) 70%);
	animation: sitaDrift3 38s var(--ease) infinite alternate;
}

@keyframes sitaDrift1 {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(9vw, 7vh, 0) scale(1.14); }
}

@keyframes sitaDrift2 {
	from { transform: translate3d(0, 0, 0) scale(1.1); }
	to   { transform: translate3d(-11vw, -8vh, 0) scale(1); }
}

@keyframes sitaDrift3 {
	from { transform: translate3d(0, 0, 0) scale(.9); }
	to   { transform: translate3d(-7vw, 9vh, 0) scale(1.2); }
}

.sita-login-wrap {
	position: relative;
	z-index: 1;
	padding: 22px 10px 10px;
}

/* ---------- kartu ---------- */
.login-panel {
	position: relative;
	background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 20px;
	box-shadow: var(--el-2);
	padding: 22px 24px;
	margin-bottom: 14px;
	transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}

.login-panel:hover {
	box-shadow: var(--el-3);
}

/* muncul perlahan dari bawah, berurutan */
.sita-rise {
	opacity: 0;
	animation: sitaRise .7s var(--ease) forwards;
}

.sita-rise-1 { animation-delay: .05s; }
.sita-rise-2 { animation-delay: .15s; }
.sita-rise-3 { animation-delay: .25s; }
.sita-rise-4 { animation-delay: .35s; }
.sita-rise-5 { animation-delay: .45s; }

@keyframes sitaRise {
	from { opacity: 0; transform: translate3d(0, 22px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---------- identitas ---------- */
.login-brand {
	display: flex;
	align-items: center;
	text-align: left;
	padding-bottom: 13px;
	margin-bottom: 15px;
	position: relative;
}

.login-brand::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 46px;
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--login-ink), var(--login-gold));
}

.login-brand img {
	height: 50px;
	width: auto;
	flex: 0 0 auto;
	margin: 0 13px 0 0;
	animation: sitaFloat 7s ease-in-out infinite;
}

.login-brand .brand-text {
	min-width: 0;
}

.login-brand .brand-title-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 3px;
}

@keyframes sitaFloat {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-7px); }
}

.login-brand .brand-name {
	font-size: 25px;
	font-weight: 800;
	letter-spacing: .14em;
	line-height: 1;
	margin: 0 9px 0 0;
	background: linear-gradient(100deg, var(--login-ink) 0%, var(--login-ink-2) 55%, var(--login-gold) 130%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--login-ink);
}

.login-brand .brand-sub {
	font-size: 12px;
	font-weight: 600;
	color: var(--login-text);
	margin: 0 0 2px;
}

.login-brand .brand-unit {
	font-size: 10.5px;
	color: var(--login-muted);
	line-height: 1.4;
	margin: 0;
}

.login-role {
	display: inline-block;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 0;
	background: #e7eefa;
	color: var(--login-ink);
	box-shadow: inset 0 0 0 1px rgba(18, 50, 92, .12);
}

.login-role.dosen {
	background: #e6f5ee;
	color: var(--login-green);
	box-shadow: inset 0 0 0 1px rgba(31, 122, 84, .16);
}

.login-role.admin {
	background: #fbf2dc;
	color: #8a6d12;
	box-shadow: inset 0 0 0 1px rgba(138, 109, 18, .18);
}

/* ---------- isian ala Material (outlined text field) ---------- */
.login-panel .form-group {
	margin-bottom: 12px;
}

.login-panel label {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--login-muted);
	margin-bottom: 4px;
}

.md-field {
	position: relative;
}

.md-field .md-icon {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 15px;
	color: #9aa5bd;
	pointer-events: none;
	transition: color .25s var(--ease);
	z-index: 2;
}

.md-field .form-control {
	height: 45px;
	padding-left: 42px;
	background: #f6f8fc;
	border: 1.5px solid var(--login-line);
	border-radius: 14px;
	box-shadow: none;
	font-size: 14px;
	color: var(--login-text);
	transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}

.md-field .form-control::-moz-placeholder { color: #a6b0c4; }
.md-field .form-control:-ms-input-placeholder { color: #a6b0c4; }
.md-field .form-control::-webkit-input-placeholder { color: #a6b0c4; }

.md-field .form-control:focus {
	background: #fff;
	border-color: var(--login-ink-2);
	box-shadow: 0 0 0 4px rgba(29, 77, 140, .12);
}

.md-field .form-control:focus ~ .md-icon,
.md-field.terisi .md-icon {
	color: var(--login-ink-2);
}

.login-panel .errorMessage {
	color: #b3261e;
	font-size: 11.5px;
	margin-top: 6px;
	animation: sitaShake .4s var(--ease);
}

@keyframes sitaShake {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-4px); }
	75%      { transform: translateX(4px); }
}

.md-field .form-control.error,
.login-panel .error .md-field .form-control {
	border-color: #b3261e;
	background: #fdf4f3;
}

/* ---------- captcha ---------- */
.md-captcha {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.md-captcha img {
	height: 62px;
	border-radius: 12px;
	border: 1.5px solid var(--login-line);
	background: #fff;
	padding: 2px 6px;
}

.md-captcha-refresh {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 50%;
	background: #eef2f8;
	color: var(--login-ink);
	font-size: 15px;
	text-decoration: none;
	transition: background .25s var(--ease), transform .45s var(--ease), color .25s var(--ease);
}

.md-captcha-refresh:hover,
.md-captcha-refresh:focus {
	background: var(--login-ink);
	color: #fff;
	text-decoration: none;
	transform: rotate(180deg);
}

.login-panel .captcha-hint {
	display: block;
	font-size: 11px;
	color: var(--login-muted);
	margin-top: 2px;
}

/* ---------- checkbox ala Material ---------- */
.md-check {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 500;
	color: var(--login-muted);
	cursor: pointer;
	margin: 0;
	padding: 2px 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.md-check input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 19px;
	height: 19px;
	flex: 0 0 19px;
	margin: 0;
	border: 2px solid #b4bece;
	border-radius: 6px;
	background: #fff;
	position: relative;
	cursor: pointer;
	transition: background .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}

.md-check input[type="checkbox"]::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .22s var(--ease);
}

.md-check input[type="checkbox"]:checked {
	background: var(--login-ink);
	border-color: var(--login-ink);
}

.md-check input[type="checkbox"]:checked::after {
	transform: rotate(45deg) scale(1);
}

.md-check input[type="checkbox"]:focus {
	box-shadow: 0 0 0 4px rgba(29, 77, 140, .14);
	outline: none;
}

.md-check label {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--login-muted);
	cursor: pointer;
	letter-spacing: 0;
}

/* ---------- tombol ala Material (pill + ripple) ---------- */
.login-panel .btn-login {
	position: relative;
	overflow: hidden;
	display: block;
	width: 100%;
	height: 46px;
	margin-top: 2px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(120deg, var(--login-ink) 0%, var(--login-ink-2) 100%);
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: .04em;
	box-shadow: var(--el-2);
	transition: box-shadow .3s var(--ease), transform .3s var(--ease), filter .3s var(--ease);
}

.login-panel .btn-login:hover,
.login-panel .btn-login:focus {
	color: #fff;
	box-shadow: var(--el-3);
	transform: translateY(-2px);
	filter: saturate(115%);
}

.login-panel .btn-login:active {
	transform: translateY(0);
	box-shadow: var(--el-1);
}

.sita-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	transform: scale(0);
	animation: sitaRipple .6s linear;
	pointer-events: none;
}

@keyframes sitaRipple {
	to { transform: scale(2.6); opacity: 0; }
}

/* ---------- kartu statistik dan panduan ---------- */
.card-title-sita {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--login-ink);
	letter-spacing: .02em;
	margin: 0 0 4px;
}

.card-title-sita i {
	margin-right: 6px;
	color: var(--login-gold);
}

.card-sub-sita {
	font-size: 11px;
	color: var(--login-muted);
	margin: 0 0 14px;
}

.stat-table {
	width: 100%;
	font-size: 12.5px;
	border-collapse: collapse;
}

.stat-table td {
	padding: 6px 0;
	color: var(--login-text);
}

.stat-table td.angka {
	text-align: right;
	font-weight: 700;
	color: var(--login-ink);
}

.stat-table td .satuan {
	color: var(--login-muted);
	font-weight: 400;
}

.stat-table tr.total td {
	border-top: 1px solid var(--login-line);
	padding-top: 9px;
	font-weight: 700;
}

.stat-table tr.total td.angka {
	color: var(--login-green);
}

.panduan-item {
	position: relative;
	display: block;
	overflow: hidden;
	padding: 12px 14px;
	background: #f6f8fc;
	border: 1px solid transparent;
	border-radius: 14px;
	margin-bottom: 9px;
	color: var(--login-text);
	text-decoration: none;
	transition: background .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
}

.panduan-item:last-child {
	margin-bottom: 0;
}

.panduan-item:hover,
.panduan-item:focus {
	background: #fff;
	border-color: #d7e0ee;
	box-shadow: var(--el-2);
	transform: translateX(4px);
	color: var(--login-ink);
	text-decoration: none;
}

.panduan-item .panduan-ikon {
	float: left;
	font-size: 21px;
	color: #c43e33;
	margin-right: 12px;
	line-height: 1.55;
	transition: transform .28s var(--ease);
}

.panduan-item:hover .panduan-ikon {
	transform: scale(1.12);
}

.panduan-item .panduan-judul {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	overflow: hidden;
}

.panduan-item .panduan-meta {
	display: block;
	font-size: 11px;
	color: var(--login-muted);
	overflow: hidden;
}

.panduan-item .panduan-unduh {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%) translateX(6px);
	color: var(--login-ink);
	opacity: 0;
	transition: opacity .28s var(--ease), transform .28s var(--ease);
}

.panduan-item:hover .panduan-unduh {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

/* ---------- judul kolom jadwal ---------- */
.page-title-block {
	position: relative;
	color: var(--login-text);
	padding: 4px 2px 18px;
}

.page-title-block h3 {
	font-size: 22px;
	font-weight: 700;
	color: var(--login-ink);
	margin: 0 0 5px;
	letter-spacing: -.01em;
}

.page-title-block p {
	font-size: 12.5px;
	color: var(--login-muted);
	margin: 0;
}

.sita-live-clock {
	position: absolute;
	right: 2px;
	top: 2px;
	background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 700;
	color: var(--login-ink);
	box-shadow: var(--el-1);
	font-variant-numeric: tabular-nums;
}

.sita-live-clock::before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #2fbf71;
	margin-right: 8px;
	vertical-align: middle;
	animation: sitaPulse 2s var(--ease) infinite;
}

@keyframes sitaPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(47, 191, 113, .55); }
	70%      { box-shadow: 0 0 0 7px rgba(47, 191, 113, 0); }
}

/* ---------- kartu tabel jadwal ---------- */
.login-page-wide .sidang-box {
	background: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 20px;
	box-shadow: var(--el-2);
	margin-bottom: 20px;
	overflow: hidden;
	transition: box-shadow .35s var(--ease);
}

.login-page-wide .sidang-box:hover {
	box-shadow: var(--el-3);
}

.login-page-wide .sidang-box-header {
	padding: 15px 20px;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .01em;
	color: #fff;
	background: linear-gradient(115deg, var(--login-ink) 0%, var(--login-ink-2) 100%);
}

.login-page-wide .sidang-box-header i {
	margin-right: 8px;
	opacity: .92;
}

.login-page-wide .sidang-box-header.ta {
	background: linear-gradient(115deg, #12325c 0%, #1d4d8c 100%);
}

.login-page-wide .sidang-box-header.pkl {
	background: linear-gradient(115deg, #17603f 0%, #2a9068 100%);
}

.login-page-wide .sidang-box-header.sempro {
	background: linear-gradient(115deg, #7a5f0f 0%, #b08a1c 100%);
}

.login-page-wide .sidang-box-header .badge-count {
	float: right;
	background: rgba(255, 255, 255, .2);
	border-radius: 999px;
	padding: 3px 12px;
	font-size: 11.5px;
	font-weight: 600;
}

.login-page-wide .sidang-table-wrap {
	overflow-x: auto;
}

.login-page-wide .sidang-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
}

.login-page-wide .sidang-table thead th {
	background: #f4f7fc;
	color: var(--login-ink);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 11px 14px;
	border-bottom: 1px solid var(--login-line);
	white-space: nowrap;
}

.login-page-wide .sidang-table tbody td {
	padding: 12px 14px;
	border-bottom: 1px solid #eef2f8;
	vertical-align: top;
	color: var(--login-text);
	transition: background .22s var(--ease);
}

.login-page-wide .sidang-table tbody tr {
	position: relative;
}

.login-page-wide .sidang-table tbody tr:nth-child(even) td {
	background: #fafbfe;
}

.login-page-wide .sidang-table tbody tr:hover td {
	background: #eef4fd;
}

.login-page-wide .sidang-table tbody tr td:first-child {
	box-shadow: inset 0 0 0 0 var(--login-gold);
	transition: box-shadow .25s var(--ease);
}

.login-page-wide .sidang-table tbody tr:hover td:first-child {
	box-shadow: inset 3px 0 0 0 var(--login-gold);
}

.login-page-wide .sidang-table tbody tr:last-child td {
	border-bottom: 0;
}

.login-page-wide .sidang-table td.td-nomor {
	color: #9aa5bd;
}

.login-page-wide .td-nama {
	font-weight: 600;
	color: var(--login-ink);
}

.login-page-wide .td-nobp {
	font-size: 11.5px;
	color: var(--login-muted);
}

.login-page-wide .td-dosen {
	color: #4a566e;
}

.login-page-wide .td-jadwal {
	white-space: nowrap;
}

.login-page-wide .td-jadwal .jam {
	color: var(--login-muted);
	font-size: 11.5px;
}

.login-page-wide .td-ruang {
	display: inline-block;
	font-size: 11px;
	color: var(--login-green);
	background: #eaf6f0;
	border-radius: 999px;
	padding: 2px 9px;
	margin-top: 5px;
}

/* ---------- tidak ada jadwal sama sekali ---------- */
.jadwal-kosong {
	background: rgba(255, 255, 255, .78);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1.5px dashed #ccd6e6;
	border-radius: 20px;
	padding: 58px 24px;
	text-align: center;
	color: var(--login-muted);
}

.jadwal-kosong i {
	font-size: 38px;
	color: #b9c4d6;
	display: block;
	margin-bottom: 14px;
	animation: sitaFloat 7s ease-in-out infinite;
}

.jadwal-kosong strong {
	display: block;
	font-size: 15px;
	color: var(--login-ink);
	margin-bottom: 6px;
}

.jadwal-kosong span {
	font-size: 12.5px;
}

/* ---------- catatan kaki ---------- */
.sita-login-footer {
	text-align: center;
	font-size: 11.5px;
	color: #8d99b0;
	padding: 8px 10px 26px;
}

@media (max-width: 991px) {
	.sita-login-wrap {
		padding-top: 22px;
	}

	.sita-live-clock {
		position: static;
		display: inline-block;
		margin-bottom: 12px;
	}
}

/* Hormati pengaturan "kurangi gerak" di sistem pengguna. */
@media (prefers-reduced-motion: reduce) {

	.sita-bg span,
	.login-brand img,
	.jadwal-kosong i,
	.sita-live-clock::before {
		animation: none;
	}

	.sita-rise {
		opacity: 1;
		animation: none;
	}

	.login-panel,
	.sidang-box,
	.panduan-item,
	.login-panel .btn-login,
	.md-captcha-refresh {
		transition: none;
	}
}


/* lebar kolom mengikuti isi; kalau melebihi layar, wadahnya yang digeser.
   max-content mencegah kolom panjang seperti Judul dipaksa jadi sesempit
   mungkin, dan max-width menjaga kolom itu tidak melebar tanpa batas. */
.grid-view table.items {
	width: -moz-max-content;
	width: max-content;
	min-width: 100%;
	table-layout: auto;
}

.grid-view table.items > tbody > tr > td,
.grid-view table.items > thead > tr > th {
	max-width: 340px;
}

.grid-view table.items > tbody > tr > td {
	min-width: 60px;
}

/* Penjajaran isi kolom: teks rata kiri supaya mudah dibaca dari atas ke bawah,
   sedangkan kolom tombol dan label status rata tengah. Kolom yang view-nya
   sudah menyetel text-align sendiri tetap menang karena ditulis inline. */
.grid-view table.items > thead > tr > th,
.grid-view table.items > tbody > tr > td {
	text-align: left;
}

.grid-view table.items > thead > tr > th.button-column,
.grid-view table.items > tbody > tr > td.button-column {
	text-align: center;
}

/* sel yang isinya memang hanya tombol atau label status */
.grid-view table.items > tbody > tr > td:has(> .btn),
.grid-view table.items > tbody > tr > td:has(> .label),
.grid-view table.items > tbody > tr > td:has(> a > .btn),
.grid-view table.items > tbody > tr > td:has(> input[type="checkbox"]) {
	text-align: center;
}

/* pager Yii dibungkus <div class="pager"> yang juga kelas Bootstrap */
.grid-view .pager,
.box-body .pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin: 16px 0 0;
	padding: 0;
	text-align: left;
	font-size: 12.5px;
	color: var(--sita-muted);
}

.grid-view .pager ul.yiiPager,
.box-body .pager ul.yiiPager {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.grid-view .pager li,
.box-body .pager li {
	display: inline-block;
	margin: 0;
}

/* ringkasan jumlah data ditaruh sebaris dengan tabel, bukan menempel */
.grid-view .summary {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--sita-bg);
	color: var(--sita-muted);
	font-size: 12px;
	font-weight: 500;
}

/* ============================================================
   16. Batang pencarian / filter di atas tabel
   ============================================================ */

/* Bootstrap 3 tidak mengenal .m-1 dan .m-2 (itu kelas Bootstrap 4),
   padahal beberapa form pencarian memakainya untuk memberi jarak. */
.m-1 { margin: 4px !important; }
.m-2 { margin: 8px !important; }

/* pembungkus: kotak abu tipis di atas tabel */
.search-form,
.wide.form {
	background: #f8fafc;
	border: 1px solid var(--sita-border);
	border-radius: var(--sita-radius-sm);
	padding: 16px;
	margin-bottom: 18px;
	/* menimpa style="width:430px" yang ditulis langsung di view */
	width: auto !important;
}

/* kalau keduanya bertumpuk, yang di dalam tidak perlu kotak lagi */
.search-form .wide.form,
.search-form .form,
.search-form .container-fluid {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	width: auto;
}

/* isi form disusun mendatar dan rata bawah */
.search-form form,
.wide.form form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px 14px;
	margin: 0;
}

/* Sebagian form pencarian yang lebih baru memakai grid Bootstrap: <div
   class="row"> yang isinya <div class="col-sm-4">. Itu bukan pasangan
   label+isian gaya Yii lama, jadi tidak boleh ikut ditumpuk ke bawah --
   kalau ikut, kolomnya menciut jadi sepertiga dari 190px. Barisnya
   dikembalikan ke perilaku grid Bootstrap biasa dan dibiarkan selebar form.
   Penanda .sita-row-grid dipakai supaya tetap benar di peramban yang belum
   mengenal :has(). */
.search-form form > .row.sita-row-grid,
.wide.form form > .row.sita-row-grid,
.search-form form > .row:has(> [class*="col-"]),
.wide.form form > .row:has(> [class*="col-"]) {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
	margin-left: -15px;
	margin-right: -15px;
}

/* label di dalam grid Bootstrap tetap di atas isiannya, tapi tidak perlu
   aturan flex dari baris gaya Yii */
.search-form form > .row.sita-row-grid label,
.search-form form > .row:has(> [class*="col-"]) label {
	display: block;
	margin-bottom: 5px;
}

/* pasangan label + isian gaya Yii lama: <div class="row">label + input</div> */
/* gap sengaja 0: di antara label dan isian ada simpul teks kosong dari view
   lama, dan gap akan menambah jarak untuk simpul itu juga sehingga tinggi
   baris tidak lagi sama dengan tinggi isinya. Jaraknya dipasang lewat
   margin label saja. */
.search-form form > .row,
.wide.form form > .row {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	min-width: 190px;
	flex: 0 1 auto;
}

.search-form form > .row > label,
.wide.form form > .row > label {
	margin-bottom: 5px;
}

/* css/form.css lama membuat label di dalam div.wide.form mengambang ke kiri
   selebar 100px dengan teks rata kanan, dan menggeser baris tombol sejauh
   110px. Di tata letak baru semua itu dinetralkan. */
.search-form .wide.form label,
.wide.form form > .row > label {
	float: none;
	position: static;
	width: auto;
	margin-right: 0;
	text-align: left;
}

.search-form .wide.form .buttons,
.search-form .wide.form .hint,
.search-form .wide.form .errorMessage,
.wide.form form > .row.buttons {
	clear: none;
	padding-left: 0;
}

.search-form form > .row.buttons,
.wide.form form > .row.buttons {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

/* pasangan label + isian di batang filter mendatar. Tanpa pembungkus ini,
   label dan isiannya adalah dua saudara di dalam flex container, sehingga saat
   barisnya melipat label bisa tertinggal di ujung baris sementara isiannya
   turun ke baris berikutnya. */
.search-form form .sita-filter,
.wide.form form .sita-filter {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 190px;
	/* lebar dasar yang sama untuk semua isian: tanpa ini tiap pembungkus
	   selebar isinya sendiri, sehingga kotak No BP sempit sementara Prodi
	   melebar mengikuti nama prodi terpanjang. */
	flex: 1 1 190px;
	max-width: 240px;
}

/* !important karena view memberi kelas .m-2 (margin: 8px !important) ke label,
   yang kalau dibiarkan merenggangkan jarak label ke kotak isian. */
.search-form form .sita-filter > label,
.search-form form.form-inline .sita-filter > label {
	display: block;
	align-self: flex-start;
	margin: 0 !important;
}

/* form.form-inline diratakan tengah di bawah, karena form lama menaruh label
   di samping isian. Tapi di dalam .sita-filter label ada di ATAS isian,
   sehingga rata tengah membuat tombol melayang sekitar 19px di atas dasar
   kotak isian. Yang dirapatkan ke dasar baris hanya pembungkus filter dan
   tombol yang berdiri sesudahnya, jadi form lama di /dosen dan mahasiswa
   tidak ikut berubah. Pemilih saudara ~ dipakai supaya tidak perlu :has(). */
.search-form form.form-inline .sita-filter,
.search-form form.form-inline .sita-filter ~ .btn {
	align-self: flex-end;
}

/* isian di dalam pembungkus mengisi lebarnya, bukan lebar bawaan Bootstrap */
.search-form form .sita-filter .form-control,
.search-form form.form-inline .sita-filter .form-control,
.search-form form .sita-filter select,
.search-form form .sita-filter .select2-container {
	width: 100%;
	min-width: 0;
}

/* label seragam: kecil, huruf besar, warna redup */
.search-form form label,
.wide.form form label {
	margin: 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sita-muted);
	white-space: nowrap;
}

/* gaya Yii lama: label di atas isiannya */
.search-form form > .row label,
.wide.form form > .row label {
	display: block;
}

/* form-inline memang menaruh label sejajar isian, jadi dibiarkan sebaris */
.search-form form.form-inline {
	align-items: center;
}

.search-form form.form-inline label {
	display: inline-block;
	align-self: center;
	margin: 0;
}

.search-form form.form-inline .form-group {
	margin: 0;
}

/* isian di form-inline diberi lebar minimum supaya tidak terlalu sempit */
.search-form form.form-inline .form-control {
	width: auto;
	min-width: 190px;
	display: inline-block;
}

/* isian yang tidak diberi kelas form-control oleh view lama */
.search-form form input[type="text"]:not(.form-control),
.search-form form input[type="number"]:not(.form-control),
.search-form form input[type="search"]:not(.form-control),
.search-form form input[type="date"]:not(.form-control),
.search-form form select:not(.form-control),
.search-form form textarea:not(.form-control),
.wide.form form input[type="text"]:not(.form-control),
.wide.form form input[type="number"]:not(.form-control),
.wide.form form select:not(.form-control),
.wide.form form textarea:not(.form-control) {
	width: 100%;
	min-width: 170px;
	height: 40px;
	padding: 8px 12px;
	border: 1px solid #cbd5e1;
	border-radius: var(--sita-radius-sm);
	background: var(--sita-surface);
	box-shadow: none;
	font-size: 14px;
	color: var(--sita-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.search-form form textarea,
.wide.form form textarea {
	height: auto;
	min-height: 80px;
}

.search-form form input:focus,
.search-form form select:focus,
.search-form form textarea:focus,
.wide.form form input:focus,
.wide.form form select:focus {
	outline: 0;
	border-color: var(--sita-primary);
	box-shadow: 0 0 0 3px rgba(29, 77, 140, .15);
}

/* !important karena sebagian tombol diberi kelas .m-2 atau .margin, yang
   keduanya memasang margin dengan !important dan membuat tombol tidak lagi
   sejajar dengan kotak isian. */
.search-form form .btn,
.wide.form form .btn {
	height: 40px;
	margin: 0 !important;
	white-space: nowrap;
}

/* css/form.css memberi margin bawah 0.5em ke setiap isian di dalam div.form.
   Di batang filter margin itu membuat tombol turun dan tidak sejajar dengan
   kotak isian, jadi dinolkan di sini. */
.search-form form input,
.search-form form select,
.search-form form textarea,
.wide.form form input,
.wide.form form select,
.wide.form form textarea {
	margin: 0;
}

/* baris tombol tidak punya label, jadi ia dirapatkan ke dasar baris lain
   supaya tombol sejajar dengan kotak isian di sebelahnya */
.search-form form > .row.buttons,
.wide.form form > .row.buttons {
	align-self: flex-end;
}

/* select2 di dalam batang filter ikut setinggi isian lain */
.search-form .select2-container {
	min-width: 170px;
}

.search-form .select2-container--default .select2-selection--single {
	height: 40px;
}

/* Sebagian dropdown dipercantik select2, sebagian lagi dropdown bawaan
   peramban. Tingginya memang sudah sama, tapi panah dan jarak dalamnya
   berbeda sehingga terlihat tidak serupa dalam satu batang filter. Panah
   bawaan disembunyikan dan diganti segitiga yang sama dengan select2.
   Hanya berlaku di dalam batang filter. */
.search-form form select.form-control,
.wide.form form select.form-control {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 26px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cpath fill='%23888888' d='M0 0h10L5 5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 9px center;
	background-size: 10px 5px;
}

.search-form form select.form-control::-ms-expand,
.wide.form form select.form-control::-ms-expand {
	display: none;
}

/* tombol "Advanced search" bawaan Yii */
.search-button {
	margin-bottom: 12px;
}

/* ---------- Layar kecil ---------- */
@media (max-width: 767px) {
	.search-form,
	.wide.form {
		padding: 14px;
	}

	.search-form form,
	.wide.form form {
		gap: 10px;
	}

	.search-form form > .row,
	.wide.form form > .row,
	.search-form form .sita-filter,
	.wide.form form .sita-filter,
	.search-form form.form-inline .form-group,
	.search-form form .form-control,
	.search-form form select,
	.search-form form input[type="text"]:not(.form-control),
	.search-form .select2-container {
		width: 100%;
		min-width: 0;
		max-width: none;
		flex-basis: 100%;
	}

	.search-form form > .row.buttons .btn,
	.wide.form form > .row.buttons .btn {
		flex: 1 1 auto;
	}
}

/* ============================================================
   17. Responsif
   ============================================================ */
@media (max-width: 991px) {
	.content-header { padding: 16px 14px 4px; }
	.content        { padding: 10px 14px 20px; }
	.box-body       { padding: 16px; }
	.small-box h3   { font-size: 28px; }
}

@media (max-width: 767px) {
	.content-header > h1,
	.content-header > ol.breadcrumb > h4 { font-size: 18px; }

	.box-header  { padding: 14px 16px; }
	.box-body    { padding: 14px; }
	.content     { padding: 8px 12px 20px; }

	.table > thead > tr > th,
	.table > tbody > tr > td,
	.grid-view table.items > thead > tr > th,
	.grid-view table.items > tbody > tr > td {
		padding: 10px;
		font-size: 13px;
	}

	.skin-blue .main-header .navbar .dropdown-menu li a { color: #334155; }

	.navbar-nav > .user-menu > .dropdown-menu { position: absolute; }
}

/* ============================================================
   18. Cetak
   ============================================================ */
@media print {
	.main-sidebar,
	.main-header,
	.main-footer,
	.content-header,
	.nav-tabs,
	.btn {
		display: none !important;
	}

	.content-wrapper {
		margin-left: 0 !important;
		background: #fff !important;
	}

	.box {
		border: 0;
		box-shadow: none;
	}
}

/* ============================================================
   19. Sel tabel daftar dosen

   Halaman daftar di aplikasi dosen dulu memakai satu kolom untuk tiap potong
   informasi, sampai 17 kolom di halaman Sidang. Sekarang beberapa potong
   digabung ke dalam satu sel, dan gaya sel gabungan itu ada di bawah ini.
   Markup-nya dirakit di dosen/protected/components/GridDosen.php.
   ============================================================ */

/* Identitas mahasiswa: nama di atas, no bp dan prodi di bawahnya */
.sita-mhs {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 150px;
}

.sita-mhs-nama {
	font-weight: 600;
	color: var(--sita-text);
	line-height: 1.35;
}

.sita-mhs-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--sita-muted);
	line-height: 1.35;
}

/* nomor BP dibuat seperti keping angka supaya tidak tertukar dengan prodi */
.sita-mhs-bp {
	background: #f1f5f9;
	border: 1px solid var(--sita-border);
	border-radius: 4px;
	padding: 0 5px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	letter-spacing: .02em;
	color: var(--sita-text);
}

.sita-mhs-prodi {
	color: var(--sita-muted);
}

/* Judul dipotong beberapa baris; teks penuh muncul sebagai tooltip */
.sita-judul {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 320px;
	line-height: 1.45;
}

.sita-revisi {
	display: block;
	font-size: 13px;
	line-height: 1.45;
}

/* Keterangan untuk data yang memang belum ada isinya */
.sita-kosong {
	color: var(--sita-muted);
	font-style: italic;
	font-size: 13px;
}

/* Jadwal: tanggal di atas, jam dan tempat di bawahnya */
.sita-jadwal {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 130px;
}

.sita-jadwal-tgl {
	font-weight: 600;
	line-height: 1.35;
}

.sita-jadwal-meta {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 240px;
	font-size: 12px;
	color: var(--sita-muted);
	line-height: 1.35;
}

/* Daftar peran dalam satu sel: peran, nama dosen, lalu nilainya.
   Menggantikan kolom Pembimbing 1/2, Ketua, Sekretaris, Penguji 1/2. */
.sita-tim {
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 240px;
}

.sita-tim > li {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px 4px 8px;
	border-left: 3px solid transparent;
	font-size: 13px;
	line-height: 1.35;
}

.sita-tim > li + li {
	border-top: 1px solid var(--sita-border);
}

.sita-tim-peran {
	flex: 0 0 84px;
	color: var(--sita-muted);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.sita-tim-nama {
	flex: 1 1 auto;
	min-width: 0;
}

.sita-tim-nilai {
	flex: 0 0 auto;
	margin-left: auto;
}

/* varian daftar untuk keterangan biasa (pangkat, kontak, dan sejenisnya):
   tidak perlu ruang untuk garis penanda "Anda", dan labelnya lebih panjang */
.sita-rincian > li {
	padding-left: 0;
	border-left: 0;
}

.sita-rincian .sita-tim-peran {
	flex-basis: 104px;
	white-space: normal;
}

.sita-rincian .sita-tim-nama {
	word-break: break-word;
}

/* Varian rapat: dipakai tepat di bawah nama orang, untuk keterangan seperti
   NIDN, NIP, dan jenis kelamin. Dulu semuanya dijejer mendatar di bawah nama,
   dan begitu keterangannya lebih dari dua barisnya jadi panjang sekali
   sehingga kolomnya ikut melebar. Ditumpuk ke bawah, lebar kolom hanya
   ditentukan keterangan terpanjang.

   Supaya tidak berpindah masalah -- dari terlalu lebar jadi terlalu tinggi --
   tulisannya dikecilkan, garis pemisah antarbaris dilepas, dan jarak
   atas-bawahnya dirapatkan. */
/* Disusun sebagai grid dua kolom, bukan deretan baris flex, supaya lebar
   kolom label ditentukan label terpanjang di sel itu saja: sel mahasiswa yang
   hanya punya "No BP" dan "Prodi" tidak ikut selebar sel dosen yang punya
   "Jenis Kelamin". */
.sita-rincian-rapat {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 10px;
	row-gap: 2px;
	min-width: 0;
	margin-top: 3px;
}

/* label dan isinya naik jadi anak langsung grid. Di peramban yang belum
   mengenal display:contents, tiap <li> tetap tampil sebagai pasangan
   label + isi berjajar -- hanya perataan antarbarisnya yang tidak seragam. */
.sita-rincian-rapat > li {
	display: contents;
}

.sita-rincian-rapat .sita-tim-peran {
	flex: none;
	font-size: 10px;
	line-height: 1.5;
	white-space: nowrap;
}

/* NIDN dan NIP lebih enak dibandingkan dari atas ke bawah kalau lebar
   angkanya sama */
.sita-rincian-rapat .sita-tim-nama {
	font-size: 12px;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

/* Baris milik dosen yang sedang login */
.sita-tim > li.is-saya {
	background: var(--sita-primary-light);
	border-left-color: var(--sita-primary);
	border-radius: 0 var(--sita-radius-sm) var(--sita-radius-sm) 0;
}

.sita-tim-saya {
	flex: 0 0 auto;
	background: #fff;
	color: var(--sita-primary-dark);
	border: 1px solid var(--sita-primary-border);
	border-radius: 999px;
	padding: 1px 7px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}

/* Semua tombol satu baris berkumpul di sini, dulu tersebar di 4 kolom */
.sita-aksi {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	min-width: 150px;
}

.sita-aksi > .btn,
.sita-aksi > a.btn {
	margin: 0;
	white-space: nowrap;
}

.sita-aksi > .btn.disabled {
	cursor: not-allowed;
}

/* sebagian tombol dirakit oleh model (misalnya tombol pendaftaran sidang dan
   unduh laporan PKL) dan memakai ukuran tombol biasa. Di dalam sel aksi
   semuanya disamakan dengan btn-sm supaya tingginya seragam. */
.sita-aksi .btn:not(.btn-lg) {
	padding: 6px 12px;
	font-size: 13px;
	line-height: 1.5;
	border-radius: 6px;
	margin: 0;
}

/* Kolom Ubah / Hapus yang dirakit SitaButtonColumn. Tombolnya hanya ikon,
   jadi dibuat persegi dengan lebar tetap supaya tombol di tiap baris berdiri
   di tempat yang sama dari atas ke bawah. Keterangan fungsinya ada di
   tooltip (atribut title). */
.sita-aksi.sita-aksi-ikon {
	flex-wrap: nowrap;
	gap: 6px;
	min-width: 0;
}

.sita-aksi.sita-aksi-ikon > .btn:not(.btn-lg) {
	width: 34px;
	padding: 0;
	line-height: 32px;
	font-size: 14px;
	text-align: center;
}

.sita-aksi.sita-aksi-ikon > .btn > .fa {
	line-height: inherit;
}

/* Hapus tidak diberi latar merah penuh, supaya tiap baris tabel tidak
   dipenuhi warna. Yang merah ikonnya saja, dan latarnya baru terisi waktu
   tombolnya disorot -- jadi maksudnya tetap terbaca sebelum diklik. */
.sita-aksi.sita-aksi-ikon > .sita-hapus {
	color: var(--sita-danger);
}

.sita-aksi.sita-aksi-ikon > .sita-hapus:hover,
.sita-aksi.sita-aksi-ikon > .sita-hapus:focus {
	background: var(--sita-danger);
	border-color: var(--sita-danger);
	color: #fff;
}

@media (max-width: 767px) {
	.sita-judul {
		max-width: 220px;
	}

	.sita-tim {
		min-width: 200px;
	}

	.sita-tim-peran {
		flex-basis: 68px;
		font-size: 10px;
	}

	.sita-aksi {
		justify-content: flex-start;
	}

}

/* ============================================================
   20. Sentuhan Material Design
   Lapisan terakhir untuk halaman di dalam (setelah login), supaya
   nuansanya menyambung dengan halaman login: permukaan bertingkat,
   sudut membulat, lapisan keadaan (state layer) saat disentuh, dan
   gerak yang halus. Tidak ada markup yang diubah — semuanya CSS.
   ============================================================ */

/* ---------- 20.1 Gerak dasar ---------- */
.box,
.small-box,
.info-box,
.nav-tabs > li > a,
.panel,
.callout,
.alert,
.pagination > li > a,
.table > tbody > tr,
.grid-view table.items > tbody > tr {
	transition: background-color .25s var(--sita-ease),
		box-shadow .3s var(--sita-ease),
		transform .3s var(--sita-ease),
		border-color .25s var(--sita-ease);
}

/* ---------- 20.2 Tombol: lapisan keadaan ala Material ----------
   Material 3 tidak lagi memakai riak di mana-mana; yang dipakai adalah
   "state layer" — lapisan tipis warna teks di atas tombol saat disentuh
   atau ditekan. Dibuat dengan ::after supaya tidak menyentuh markup. */
.btn {
	position: relative;
	overflow: hidden;
	transition: background-color .25s var(--sita-ease),
		border-color .25s var(--sita-ease),
		box-shadow .3s var(--sita-ease),
		transform .18s var(--sita-ease);
}

.btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: currentColor;
	opacity: 0;
	transition: opacity .25s var(--sita-ease);
	pointer-events: none;
}

.btn:hover::after {
	opacity: .08;
}

.btn:active::after {
	opacity: .14;
}

/* Tombol berwarna sedikit terangkat, seperti "filled button" Material. */
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
	box-shadow: var(--sita-shadow);
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover {
	box-shadow: var(--sita-shadow-md);
	transform: translateY(-1px);
}

.btn-primary:active,
.btn-success:active,
.btn-info:active,
.btn-warning:active,
.btn-danger:active {
	transform: translateY(0);
	box-shadow: var(--sita-shadow);
}

.btn.disabled::after,
.btn[disabled]::after {
	display: none;
}

/* Tombol pemilih berkas menyembunyikan <input type="file"> raksasa di dalamnya;
   jangan dipotong dan jangan diberi lapisan keadaan supaya kliknya tetap jalan. */
.btn-file {
	overflow: visible;
}

.btn-file::after {
	display: none;
}

/* ---------- 20.3 Kartu: elevasi bertingkat ---------- */
.box:hover,
.panel:hover {
	box-shadow: var(--sita-shadow-md);
}

.box-header {
	position: relative;
}

/* garis aksen tipis di kiri judul kartu */
.box-header.with-border > .box-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 16px;
	margin-top: -8px;
	border-radius: 999px;
	background: var(--sita-accent);
}

.box-header.with-border > .box-title {
	position: relative;
	padding-left: 12px;
}

.box.box-solid.box-primary > .box-header {
	background: linear-gradient(115deg, var(--sita-primary) 0%, var(--sita-primary-soft) 100%);
}

/* ---------- 20.4 Kartu angka di dashboard ---------- */
.small-box:hover {
	box-shadow: var(--sita-shadow-lg);
	transform: translateY(-3px);
}

.small-box > .icon {
	transition: opacity .3s var(--sita-ease), transform .4s var(--sita-ease);
}

.small-box:hover > .icon {
	transform: scale(1.08) rotate(-4deg);
}

.info-box:hover {
	box-shadow: var(--sita-shadow-md);
	transform: translateY(-2px);
}

.info-box-icon {
	transition: transform .4s var(--sita-ease);
}

.info-box:hover .info-box-icon {
	transform: scale(1.04);
}

/* ---------- 20.5 Sidebar ---------- */
.skin-blue .sidebar-menu > li > a,
.sidebar-menu > li > a {
	position: relative;
	overflow: hidden;
	transition: background-color .25s var(--sita-ease), color .25s var(--sita-ease);
}

/* penanda emas di tepi kiri item yang sedang dibuka */
.skin-blue .sidebar-menu > li > a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 0;
	margin-top: 0;
	border-radius: 0 999px 999px 0;
	background: var(--sita-accent);
	transform: translateY(-50%);
	transition: height .3s var(--sita-ease);
}

.skin-blue .sidebar-menu > li.active > a::before {
	height: 22px;
}

.skin-blue .sidebar-menu > li.active > a {
	box-shadow: 0 2px 10px rgba(18, 50, 92, .45);
}

.skin-blue .sidebar-menu > li > a > .fa,
.skin-blue .sidebar-menu > li > a > .glyphicon,
.skin-blue .sidebar-menu > li > a > .ion {
	transition: transform .3s var(--sita-ease);
}

.skin-blue .sidebar-menu > li:hover > a > .fa,
.skin-blue .sidebar-menu > li.active > a > .fa {
	transform: translateX(2px);
}

/* Angka merah di menu tidak boleh menimpa tulisan menu. AdminLTE menaruh
   .pull-right-container mengambang (absolute) di kanan, jadi menu bernama
   panjang ("Penetapan Pembimbing", "Pilihan Tempat Mahasiswa") tertutup
   angkanya. Selama sidebar terbuka penuh, isi tautan dijajarkan dengan flex:
   angka mendapat tempat sendiri di kanan dan tulisan tetap satu baris.
   Supaya menu terpanjang ("Pilihan Tempat Mahasiswa" + angka dua digit) masih
   muat, jarak tepi, huruf, dan angkanya sedikit dirapatkan; kalau tetap tidak
   muat, ujung tulisan dipotong dengan "...". Sidebar yang diciutkan
   (sidebar-mini) tidak disentuh karena AdminLTE mengatur posisi tulisan dan
   angkanya sendiri di sana. */
body:not(.sidebar-collapse) .sidebar-menu > li {
	padding: 0 5px;
}

body:not(.sidebar-collapse) .sidebar-menu > li > a {
	display: flex;
	align-items: center;
	padding: 10px 6px 10px 10px;
	font-size: 13px;
	letter-spacing: -.15px;
}

body:not(.sidebar-collapse) .sidebar-menu > li > a > .fa,
body:not(.sidebar-collapse) .sidebar-menu > li > a > .glyphicon,
body:not(.sidebar-collapse) .sidebar-menu > li > a > .ion {
	flex: 0 0 20px;
	margin-right: 6px;
}

body:not(.sidebar-collapse) .sidebar-menu > li > a > span:not(.pull-right-container) {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body:not(.sidebar-collapse) .sidebar-menu > li > a > .pull-right-container {
	position: static;
	flex: 0 0 auto;
	margin: 0 0 0 auto;
	padding-left: 4px;
	height: auto;
	top: auto;
	right: auto;
}

body:not(.sidebar-collapse) .sidebar-menu > li > a > .pull-right-container > .label,
body:not(.sidebar-collapse) .sidebar-menu > li > a > .pull-right-container > .fa {
	float: none !important;
	display: inline-block;
	margin: 0;
}

body:not(.sidebar-collapse) .sidebar-menu > li > a > .pull-right-container > .label {
	min-width: 16px;
	padding: 2px 4px;
	font-size: 10px;
	line-height: 1.2;
	letter-spacing: 0;
}

/* Sidebar diciutkan: lebarnya hanya 50px, sedangkan foto 40px plus jarak tepi
   12px, jadi foto terdorong ke kanan dan terpotong. Foto diperkecil dan
   diletakkan di tengah. Media query sama dengan aturan sidebar-mini AdminLTE. */
@media (min-width: 768px) {
	.sidebar-mini.sidebar-collapse .user-panel {
		padding: 12px 0;
	}

	.sidebar-mini.sidebar-collapse .user-panel > .image {
		float: none !important;
		text-align: center;
	}

	.sidebar-mini.sidebar-collapse .user-panel > .image > .user-block > img {
		float: none;
		display: inline-block;
		width: 34px;
		height: 34px;
	}

	/* nama menu muncul di samping ikon saat kursor diarahkan, di luar lebar
	   50px; tautannya tidak boleh memotong (bagian 20.5 memberi overflow
	   hidden untuk sidebar yang terbuka penuh) (temuan 194) */
	.sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
		overflow: visible;
	}

	/* menu yang punya angka merah: label dilebarkan dan angkanya di ujung
	   kanan label, supaya tidak menimpa nama menu yang panjang (bawaan
	   AdminLTE: label 180px, angka di posisi tetap). Browser tanpa :has()
	   tetap memakai susunan bawaan. */
	.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a:has(> .pull-right-container > .label) > span:not(.pull-right-container) {
		width: 240px;
		padding-right: 44px;
	}

	.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a:has(> .pull-right-container > .label) > .pull-right-container {
		display: flex !important;
		align-items: center;
		justify-content: flex-end;
		position: absolute !important;
		left: 50px !important;
		top: 0 !important;
		bottom: 0;
		width: 240px !important;
		margin-left: -3px;
		padding: 0 12px 0 0;
		background: transparent;
	}
}

/* Sidebar dan isi halaman di-scroll sendiri-sendiri (desktop). Header (logo,
   tombol menu, akun) tetap di atas; sidebar yang terbuka penuh punya scroll
   sendiri, jadi membuka menu di bawah tidak menggeser isi halaman dan
   sebaliknya. Class "fixed" AdminLTE sengaja tidak dipakai karena memicu
   slimScroll yang memotong label melayang saat sidebar diciutkan. Sidebar yang
   diciutkan dibiarkan ikut ter-scroll bersama halaman: labelnya melayang di
   luar lebar 50px dan akan terpotong kalau sidebar diberi scroll sendiri.
   Tampilan HP dan cetak tidak berubah. Pasangannya skrip kecil di akhir
   layout yang menggeser sidebar ke menu yang sedang dibuka. */
@media screen and (min-width: 768px) {
	/* tinggi header 56px (navbar); logo hanya 50px, jadi celah di bawahnya
	   diberi warna sidebar supaya isi halaman tidak terlihat lewat celah itu */
	.main-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: var(--sita-sidebar-bg);
	}

	.content-wrapper {
		padding-top: 56px;
	}

	html {
		scroll-padding-top: 66px;
	}

	body:not(.sidebar-collapse) .main-sidebar {
		position: fixed;
		height: 100vh;
		min-height: 0;
	}

	body:not(.sidebar-collapse) .main-sidebar > .sidebar {
		/* !important: adminlte.min.js (Layout.fixSidebar) memasang style="height: auto"
		   di elemen ini saat halaman dimuat/di-resize, yang membuat scroll-nya hilang */
		height: 100% !important;
		overflow-y: auto;
		overflow-x: hidden;
		/* scroll yang sudah mentok di ujung sidebar tidak menular ke halaman */
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: rgba(148, 163, 184, .35) transparent;
	}

	.main-sidebar > .sidebar::-webkit-scrollbar {
		width: 6px;
	}

	.main-sidebar > .sidebar::-webkit-scrollbar-track {
		background: transparent;
	}

	.main-sidebar > .sidebar::-webkit-scrollbar-thumb {
		background: rgba(148, 163, 184, .35);
		border: 0;
		border-radius: 999px;
	}

	.main-sidebar > .sidebar::-webkit-scrollbar-thumb:hover {
		background: rgba(148, 163, 184, .6);
	}
}

.main-header .logo .logo-lg:before {
	box-shadow: 0 2px 8px rgba(201, 162, 39, .4);
}

/* ---------- 20.6 Judul halaman ---------- */
/* Judul halaman (breadcrumb) di kiri, tanggal dan jam kecil di pojok kanan.
   Urutan di HTML adalah h1 lalu breadcrumb, jadi dipakai row-reverse. */
.content-header {
	display: flex;
	flex-direction: row-reverse;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 16px;
}

.content-header > h1 {
	margin: 0;
	padding-left: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--sita-muted);
	white-space: nowrap;
}

.content-header > h1 > big {
	font-size: 13px;
	font-weight: 600;
	color: var(--sita-text);
}

.content-header > h1 > small,
.content-header > h1 #tampiljam {
	display: inline;
	font-size: 12px;
	color: var(--sita-muted);
}

.content-header > ol.breadcrumb {
	margin-bottom: 0;
}

.content-header > ol.breadcrumb > h4 {
	position: relative;
	padding-left: 14px;
}

.content-header > ol.breadcrumb > h4::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 4px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--sita-primary) 0%, var(--sita-accent) 100%);
}

.breadcrumb > .active {
	font-weight: 600;
	color: var(--sita-primary);
}

/* ---------- 20.7 Isian form ala Material ---------- */
.form-control,
.input-group .form-control {
	background: #f7f9fc;
	border-color: #dbe2ec;
	border-width: 1.5px;
	transition: background-color .25s var(--sita-ease),
		border-color .25s var(--sita-ease),
		box-shadow .25s var(--sita-ease);
}

.form-control:hover:not([disabled]):not([readonly]) {
	border-color: #b9c6da;
}

.form-control:focus {
	background: #fff;
	border-color: var(--sita-primary-soft);
	box-shadow: 0 0 0 4px rgba(29, 77, 140, .12);
}

.form-group > label,
label {
	letter-spacing: .01em;
}

/* isian yang salah: warna dan getaran kecil, seperti di halaman login */
.form-control.error,
.has-error .form-control {
	border-color: var(--sita-danger);
	background: #fdf4f3;
}

.errorMessage,
.help-block-error {
	color: var(--sita-danger);
	font-size: 12px;
	animation: sitaShakeIn .4s var(--sita-ease);
}

@keyframes sitaShakeIn {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-4px); }
	75%      { transform: translateX(4px); }
}

/* kotak centang dan radio ala Material */
.checkbox input[type="checkbox"],
.radio input[type="radio"],
input[type="checkbox"].sita-check {
	accent-color: var(--sita-primary);
}

/* ---------- 20.8 Tabel ---------- */
.table > thead > tr > th,
.grid-view table.items > thead > tr > th {
	background: var(--sita-primary-light);
	color: var(--sita-primary);
}

.table > tbody > tr > td,
.grid-view table.items > tbody > tr > td {
	transition: background-color .22s var(--sita-ease);
}

.table-hover > tbody > tr:hover,
.grid-view table.items > tbody > tr:hover {
	background: var(--sita-primary-light);
}

/* garis emas tipis di tepi kiri baris yang sedang disentuh */
.table-hover > tbody > tr > td:first-child,
.grid-view table.items > tbody > tr > td:first-child {
	box-shadow: inset 0 0 0 0 var(--sita-accent);
	transition: box-shadow .22s var(--sita-ease);
}

.table-hover > tbody > tr:hover > td:first-child,
.grid-view table.items > tbody > tr:hover > td:first-child {
	box-shadow: inset 3px 0 0 0 var(--sita-accent);
}

.grid-view table.items {
	box-shadow: var(--sita-shadow);
}

/* ---------- 20.9 Nav tabs: penanda yang meluncur ---------- */
.nav-tabs > li > a {
	position: relative;
	border: 0;
	border-radius: var(--sita-radius-sm) var(--sita-radius-sm) 0 0;
}

.nav-tabs > li > a::after {
	content: '';
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 0;
	height: 3px;
	border-radius: 999px 999px 0 0;
	background: var(--sita-primary);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .3s var(--sita-ease);
}

.nav-tabs > li > a:hover::after {
	transform: scaleX(.55);
}

.nav-tabs > li.active > a::after,
.nav-tabs > li.active > a:hover::after,
.nav-tabs > li.active > a:focus::after {
	transform: scaleX(1);
}

/* Penanda tab aktif cukup satu garis, yaitu ::after di atas. Border bawah
   bawaan bagian 12 dimatikan supaya tidak tampak dua garis bertumpuk. */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	border-bottom-color: transparent;
}

.nav-pills > li > a {
	border-radius: 999px;
	transition: background-color .25s var(--sita-ease), color .25s var(--sita-ease);
}

/* ---------- 20.10 Dropdown, modal, panel: gerak masuk ---------- */
.dropdown-menu {
	border-radius: var(--sita-radius);
	box-shadow: var(--sita-shadow-lg);
	border-color: var(--sita-border);
	transform-origin: top;
	animation: sitaMenuIn .22s var(--sita-ease);
}

@keyframes sitaMenuIn {
	from { opacity: 0; transform: translateY(-6px) scale(.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dropdown-menu > li > a {
	padding: 9px 18px;
	transition: background-color .2s var(--sita-ease), color .2s var(--sita-ease);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background: var(--sita-primary-light);
	color: var(--sita-primary);
}

.modal-content {
	border: 0;
	border-radius: var(--sita-radius);
	box-shadow: var(--sita-shadow-lg);
	overflow: hidden;
}

.modal.in .modal-dialog {
	animation: sitaModalIn .3s var(--sita-ease);
}

@keyframes sitaModalIn {
	from { opacity: 0; transform: translateY(24px) scale(.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
	border-bottom: 1px solid var(--sita-border);
	padding: 16px 20px;
}

.modal-footer {
	border-top: 1px solid var(--sita-border);
	background: #f8fafc;
	padding: 14px 20px;
}

/* ---------- 20.11 Pesan: wadah tonal ala Material ---------- */
.alert {
	border: 0;
	border-radius: var(--sita-radius);
	padding: 14px 18px;
	box-shadow: var(--sita-shadow);
	animation: sitaRiseIn .4s var(--sita-ease);
}

@keyframes sitaRiseIn {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.callout {
	border-radius: var(--sita-radius);
	box-shadow: var(--sita-shadow);
}

.label,
.badge {
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: .01em;
	padding: 4px 10px;
}

/* ---------- 20.12 Pager ---------- */
.pagination > li > a,
.pagination > li > span {
	border-radius: var(--sita-radius-sm) !important;
	margin: 0 2px;
	border-color: var(--sita-border);
	color: var(--sita-text);
}

.pagination > li > a:hover {
	background: var(--sita-primary-light);
	border-color: var(--sita-primary-border);
	color: var(--sita-primary);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
	background: var(--sita-primary);
	border-color: var(--sita-primary);
	color: #fff;
	box-shadow: var(--sita-shadow);
}

/* ---------- 20.14 Select2 dan kawan-kawan ikut gaya isian baru ---------- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
	background: #f7f9fc;
	border: 1.5px solid #dbe2ec;
	border-radius: var(--sita-radius-sm);
	transition: background-color .25s var(--sita-ease),
		border-color .25s var(--sita-ease),
		box-shadow .25s var(--sita-ease);
}

.select2-container--default .select2-selection--single:hover {
	border-color: #b9c6da;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
	background: #fff;
	border-color: var(--sita-primary-soft);
	box-shadow: 0 0 0 4px rgba(29, 77, 140, .12);
}

.select2-dropdown {
	border-color: var(--sita-border);
	border-radius: var(--sita-radius);
	box-shadow: var(--sita-shadow-lg);
	overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--sita-primary);
}

.select2-container--default .select2-results__option[aria-selected=true] {
	background: var(--sita-primary-light);
	color: var(--sita-primary);
}

/* ---------- 20.13 Hormati "kurangi gerak" ---------- */
@media (prefers-reduced-motion: reduce) {

	.box,
	.small-box,
	.info-box,
	.btn,
	.panel,
	.nav-tabs > li > a,
	.nav-tabs > li > a::after,
	.dropdown-menu,
	.table > tbody > tr,
	.grid-view table.items > tbody > tr,
	.sidebar-menu > li > a,
	.sidebar-menu > li > a::before {
		transition: none;
		animation: none;
	}

	.small-box:hover,
	.info-box:hover,
	.btn-primary:hover,
	.btn-success:hover,
	.btn-info:hover,
	.btn-warning:hover,
	.btn-danger:hover {
		transform: none;
	}

	.modal.in .modal-dialog,
	.alert,
	.errorMessage,
	.help-block-error {
		animation: none;
	}
}


/* ============================================================
   21. Halaman bimbingan Tugas Akhir

   Kartu pembimbing di halaman Bimbingan & Sidang TA dan di halaman isian
   bimbingan. Kartunya sengaja tanpa foto: yang dicari mahasiswa adalah nama,
   NIP, sudah berapa kali bimbingan divalidasi, dan tombol untuk mengisi
   bimbingan berikutnya. Dipakai juga di aplikasi dosen untuk menampilkan
   progres sembilan kali bimbingan.
   ============================================================ */

.sita-pembimbing-nama {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--sita-text);
}

.sita-pembimbing-nip {
	margin-top: 2px;
	font-size: 12px;
	letter-spacing: .02em;
	color: var(--sita-muted);
}

.sita-pembimbing-progres {
	margin-top: 14px;
	font-size: 13px;
}

.sita-pembimbing-progres .progress {
	margin: 6px 0 6px;
}

.sita-pembimbing-terakhir {
	margin: 14px 0 16px;
	padding-top: 12px;
	border-top: 1px solid rgba(0, 0, 0, .07);
	font-size: 13px;
	line-height: 1.55;
}

/* Sel pembahasan di tabel riwayat bimbingan. Isinya sudah diubah menjadi
   teks biasa oleh MhsTugasakhirBimbingan::teksPembahasan(), jadi di sini
   tinggal mengatur keterbacaannya. */
.sita-pembahasan {
	font-size: 13px;
	line-height: 1.55;
	word-break: break-word;
}

/* Tabel daftar biasanya dibiarkan selebar isinya (lihat bagian 10), tapi di
   halaman bimbingan kolom paling kanan berisi tombol Validasi dan Hapus.
   Kalau tabelnya melebihi kotak, tombol itu terpotong dan tidak bisa diklik
   sama sekali -- kotaknya tidak ikut bergeser ke samping di layar lebar.
   Khusus tabel ini lebarnya dikunci ke kotak, dan kolom pembahasan yang
   mengalah dengan membungkus teksnya ke bawah. */
.sita-tabel-bimbingan .grid-view table.items {
	width: 100%;
	min-width: 0;
	table-layout: auto;
}

.sita-tabel-bimbingan .grid-view table.items > tbody > tr > td,
.sita-tabel-bimbingan .grid-view table.items > thead > tr > th {
	max-width: none;
}


/* ============================================================
   22. Penilaian tempat PKL

   Mahasiswa menilai tempat PKL-nya dengan bintang 1 sampai 5 di halaman
   Daftar Sidang PKL, lalu prodi membaca rata-ratanya sebagai bahan evaluasi.

   Bintangnya adalah radio button biasa yang disembunyikan, dengan <label>
   sebagai bintang yang terlihat. Urutannya di HTML sengaja dibalik (5 ke 1)
   dan dibalik lagi oleh row-reverse, supaya bintang yang dipilih beserta
   semua bintang di kirinya bisa diwarnai lewat pemilih saudara (~) saja --
   tanpa sebaris pun JavaScript. Kalau JavaScript mati, atau kalau dibuka
   pembaca layar, isiannya tetap berupa pilihan radio yang wajar.
   ============================================================ */

.sita-rating {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 4px;
	margin: 2px 0 6px;
}

/* radio-nya tetap ada di halaman (bukan display:none) supaya masih bisa
   dicapai lewat tombol Tab dan tetap terbaca pembaca layar */
.sita-rating input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.sita-rating .sita-rating-item {
	margin: 0;
	padding: 0 2px;
	font-size: 28px;
	line-height: 1;
	color: var(--sita-border);
	cursor: pointer;
	transition: color .12s ease;
}

/* bintang yang dipilih dan semua bintang di kirinya */
.sita-rating input[type="radio"]:checked ~ .sita-rating-item,
.sita-rating .sita-rating-item:hover,
.sita-rating .sita-rating-item:hover ~ .sita-rating-item {
	color: var(--sita-accent);
}

/* penanda fokus untuk yang berpindah pakai tombol Tab */
.sita-rating input[type="radio"]:focus + .sita-rating-item {
	outline: 2px solid var(--sita-primary-soft);
	outline-offset: 2px;
	border-radius: 3px;
}

/* di layar sempit bintangnya dikecilkan sedikit supaya lima-limanya tetap
   muat dalam satu baris */
@media (max-width: 480px) {
	.sita-rating .sita-rating-item {
		font-size: 24px;
	}
}

.sita-rating-arti {
	margin-top: 0;
	font-size: 12px;
}

/* Bintang versi baca-saja, dipakai di ringkasan dan di halaman evaluasi. */
.sita-bintang {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--sita-accent);
	white-space: nowrap;
}

.sita-bintang-angka {
	margin-left: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--sita-muted);
}

.sita-bintang-catatan {
	margin-left: 6px;
	font-size: 12px;
	color: var(--sita-muted);
}

/* Keterangan berkas yang sudah tersimpan, di bawah tombol pilih file. */
.sita-berkas-terupload {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	word-break: break-word;
}

/* Isian yang datanya diambil otomatis dan tidak diketik mahasiswa, misalnya
   tempat PKL. Dibuat berbeda dari kotak isian supaya tidak disangka rusak
   karena tidak bisa diklik. */
.sita-isian-tetap {
	margin: 2px 0 4px;
	padding: 8px 12px;
	font-weight: 600;
	background: rgba(0, 0, 0, .025);
	border-left: 3px solid var(--sita-success);
	border-radius: 3px;
}

/* ============================================================
   Pas foto di kartu profil (.profile-user-img) — tampil sesuai aspek
   rasio aslinya, tidak dipaksa bulat/oval oleh .img-circle. Foto kecil
   di navbar (.user-menu) dan panel sidebar tetap bulat.
   ============================================================ */
.profile-user-img,
.profile-user-img.img-circle {
	width: auto;
	height: auto;
	max-width: 150px;
	max-height: 200px;
	border-radius: 6px;
	padding: 3px;
}

/* ============================================================
   23. Perapian layar HP
   Hanya berlaku di bawah 768px; tampilan desktop tidak berubah.
   Ditaruh paling akhir supaya menimpa bagian 20.6 (judul halaman)
   dan bagian 12/20.9 (tab).
   ============================================================ */
@media (max-width: 767px) {

	/* Bilah "Tugas Akhir" di HP tampil sebagai baris sendiri di atas
	   navbar, jadi terlihat dobel. Disembunyikan, dan jarak atas menu
	   samping disesuaikan dengan tinggi navbar saja. */
	.main-header .logo {
		display: none;
	}

	.main-sidebar,
	.left-side {
		padding-top: 60px;
	}

	/* Judul halaman di atas, rata kiri; tanggal, jam, dan tahun ajaran
	   dirangkum jadi satu chip kecil di bawahnya. */
	.content-header {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 8px;
		padding: 14px 12px 4px;
	}

	.content-header > ol.breadcrumb > h4 {
		white-space: normal;
		line-height: 1.3;
	}

	.content-header > h1 {
		display: flex;
		align-self: stretch;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 2px 12px;
		white-space: normal;
		background: var(--sita-surface);
		border: 1px solid var(--sita-border);
		border-radius: var(--sita-radius-sm);
		padding: 5px 12px;
		font-size: 11.5px;
		line-height: 1.5;
	}

	/* jam berjalan tidak ditampilkan di HP: tanggal di kiri,
	   tahun ajaran di kanan */
	.content-header > h1 #tampiljam {
		display: none;
	}

	.content-header > h1 > big,
	.content-header > h1 > small,
	.content-header > h1 > small > div {
		display: inline;
		font-size: 11.5px;
		white-space: nowrap;
	}

	.content-header > h1 > small {
		margin-left: auto;
		text-align: right;
	}

	/* Tab tetap satu baris; kalau tidak muat, digeser ke samping. */
	.nav-tabs {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.nav-tabs::-webkit-scrollbar {
		display: none;
	}

	.nav-tabs::before,
	.nav-tabs::after {
		display: none;
	}

	.nav-tabs > li {
		float: none;
		flex: 0 0 auto;
		margin-bottom: 0;
	}

	.nav-tabs > li > a {
		white-space: nowrap;
		padding: 10px 12px;
		margin-right: 0;
	}

}

/* ============================================================
   24. Nama aplikasi di atas sidebar
   "S I T A" berjarak di tengah, dengan garis tipis navy-emas di
   bawahnya seperti di halaman login. Kotak kecil di kiri tulisan
   (bagian 3 dan 20.5) dimatikan.
   ============================================================ */
.main-header .logo .logo-lg {
	position: relative;
	/* naik sedikit supaya tulisan + garis di bawahnya tepat di tengah bilah */
	top: -4px;
	display: inline-block;
	/* jarak huruf juga ditambahkan sesudah huruf terakhir, jadi diberi
	   jarak yang sama di kiri supaya tulisannya tetap pas di tengah */
	padding-left: .38em;
	letter-spacing: .38em;
	font-size: 17px;
	font-weight: 800;
	line-height: 1;
	vertical-align: middle;
}

.main-header .logo .logo-lg:before {
	display: none;
}

.main-header .logo .logo-lg:after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -8px;
	width: 26px;
	height: 3px;
	margin-left: -13px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--sita-primary-soft), var(--sita-accent));
}

/* ============================================================
   16. Landing page mahasiswa (halaman depan /, site/login)
   Memakai variabel --login-* dari bagian 15. Semua kelas
   berawalan .lp- supaya tidak mengenai halaman lain.
   ============================================================ */
.lp-page {
	--lp-serif: Georgia, 'Times New Roman', serif;
}

html.lp-js {
	scroll-behavior: smooth;
}

.lp-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 16px;
}

.lp-wrap {
	padding: 0;
}

.lp-page section[id],
.lp-page header[id],
.lp-page #masuk {
	scroll-margin-top: 76px;
}

/* ---------- navbar ---------- */
.lp-nav {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(255, 255, 255, .78);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid rgba(225, 231, 240, .8);
	transition: box-shadow .3s var(--ease), background .3s var(--ease);
}

.lp-nav.tergulir {
	background: rgba(255, 255, 255, .94);
	box-shadow: var(--el-2);
}

.lp-nav-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 62px;
}

.lp-nav-brand {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--login-ink);
}

.lp-nav-brand:hover,
.lp-nav-brand:focus {
	text-decoration: none;
	color: var(--login-ink);
}

.lp-nav-brand img {
	height: 36px;
	width: auto;
	margin-right: 10px;
}

.lp-nav-brand strong {
	display: block;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: .14em;
	line-height: 1.1;
}

.lp-nav-brand small {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--login-gold);
}

.lp-nav-links {
	display: flex;
	align-items: center;
}

.lp-nav-links a {
	font-size: 13px;
	font-weight: 600;
	color: var(--login-muted);
	padding: 8px 12px;
	border-radius: 999px;
	text-decoration: none;
	transition: color .2s var(--ease), background .2s var(--ease);
}

.lp-nav-links a:hover,
.lp-nav-links a:focus {
	color: var(--login-ink);
	background: #eef2f8;
	text-decoration: none;
}

.lp-nav-links a.lp-nav-masuk {
	margin-left: 8px;
	padding: 9px 18px;
	color: #fff;
	background: linear-gradient(120deg, var(--login-ink) 0%, var(--login-ink-2) 100%);
	box-shadow: var(--el-1);
}

.lp-nav-links a.lp-nav-masuk:hover,
.lp-nav-links a.lp-nav-masuk:focus {
	color: #fff;
	box-shadow: var(--el-2);
}

.lp-nav-masuk-hp {
	display: none;
	align-items: center;
	gap: 6px;
	margin: 0 8px 0 auto;
	padding: 9px 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(120deg, var(--login-ink) 0%, var(--login-ink-2) 100%);
	box-shadow: var(--el-1);
	text-decoration: none;
}

.lp-nav-masuk-hp:hover,
.lp-nav-masuk-hp:focus {
	color: #fff;
	text-decoration: none;
}

.lp-nav-toggle {
	display: none;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 12px;
	background: #eef2f8;
	color: var(--login-ink);
	font-size: 17px;
}

/* ---------- hero ---------- */
.lp-hero {
	padding: 54px 0 40px;
}

.lp-hero-text {
	padding: 18px 24px 0 0;
}

.lp-eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--login-ink-2);
	background: rgba(231, 238, 250, .9);
	border-radius: 999px;
	padding: 6px 14px;
	box-shadow: inset 0 0 0 1px rgba(18, 50, 92, .1);
	margin-bottom: 20px;
}

.lp-hero-text h1 {
	font-family: var(--lp-serif);
	font-size: 46px;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.01em;
	color: var(--login-ink);
	margin: 0 0 18px;
}

.lp-hero-text h1 span {
	color: var(--login-gold);
	font-style: italic;
}

.lp-lead {
	font-size: 16px;
	line-height: 1.7;
	color: #46526b;
	max-width: 560px;
	margin: 0 0 26px;
}

.lp-hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 34px;
}

.lp-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 700;
	padding: 11px 20px;
	border-radius: 999px;
	text-decoration: none;
	transition: box-shadow .3s var(--ease), transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.lp-btn:hover,
.lp-btn:focus {
	text-decoration: none;
	transform: translateY(-2px);
}

.lp-btn-utama {
	color: #fff;
	background: linear-gradient(120deg, var(--login-ink) 0%, var(--login-ink-2) 100%);
	box-shadow: var(--el-2);
}

.lp-btn-utama:hover,
.lp-btn-utama:focus {
	color: #fff;
	box-shadow: var(--el-3);
}

.lp-btn-garis {
	color: var(--login-ink);
	background: rgba(255, 255, 255, .85);
	box-shadow: inset 0 0 0 1.5px #c9d4e6;
}

.lp-btn-garis:hover,
.lp-btn-garis:focus {
	color: var(--login-ink);
	background: #fff;
	box-shadow: inset 0 0 0 1.5px var(--login-ink-2);
}

.lp-btn-teks {
	color: var(--login-ink-2);
	padding-left: 8px;
	padding-right: 8px;
}

.lp-btn-teks:hover,
.lp-btn-teks:focus {
	color: var(--login-ink);
}

.lp-btn-terang {
	color: var(--login-ink);
	background: #fff;
	box-shadow: var(--el-2);
}

.lp-btn-terang:hover,
.lp-btn-terang:focus {
	color: var(--login-ink);
	box-shadow: var(--el-3);
}

.lp-hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.lp-stat {
	flex: 1 1 120px;
	max-width: 170px;
	background: rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 16px;
	padding: 14px 16px;
	box-shadow: var(--el-1);
}

.lp-stat strong {
	display: block;
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
	color: var(--login-ink);
	margin-bottom: 6px;
	font-variant-numeric: tabular-nums;
}

.lp-stat span {
	display: block;
	font-size: 11px;
	line-height: 1.4;
	color: var(--login-muted);
}

.lp-stat-emas strong {
	color: var(--login-gold);
}

.lp-login-card {
	padding: 26px 28px 22px;
	margin-bottom: 0;
	border-top: 4px solid var(--login-gold);
}

/* animasi sorot menggantikan sita-rise, jadi kartu harus tetap terlihat */
.lp-login-card.lp-sorot {
	opacity: 1;
	animation: lpSorot 1.2s var(--ease);
}

@keyframes lpSorot {
	0%   { box-shadow: var(--el-2), 0 0 0 0 rgba(201, 162, 39, .55); }
	40%  { box-shadow: var(--el-3), 0 0 0 10px rgba(201, 162, 39, .18); }
	100% { box-shadow: var(--el-2), 0 0 0 0 rgba(201, 162, 39, 0); }
}

.lp-login-help {
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--login-muted);
	text-align: center;
	margin: 14px 0 0;
}

.lp-login-help i {
	color: var(--login-gold);
	margin-right: 3px;
}

/* ---------- bagian ---------- */
.lp-section {
	padding: 64px 0;
	position: relative;
}

.lp-section-alt {
	background: rgba(255, 255, 255, .55);
	border-top: 1px solid rgba(225, 231, 240, .9);
	border-bottom: 1px solid rgba(225, 231, 240, .9);
}

.lp-section-head {
	max-width: 680px;
	margin: 0 auto 36px;
	text-align: center;
}

.lp-kicker {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--login-gold);
	margin-bottom: 8px;
}

.lp-kicker.hijau {
	color: var(--login-green);
}

.lp-section-head h2 {
	font-family: var(--lp-serif);
	font-size: 32px;
	font-weight: 700;
	color: var(--login-ink);
	margin: 0 0 12px;
	letter-spacing: -.01em;
}

.lp-section-head p {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--login-muted);
	margin: 0;
}

/* ---------- kartu fitur ---------- */
.lp-fitur-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.lp-fitur {
	background: rgba(255, 255, 255, .9);
	border: 1px solid rgba(225, 231, 240, .9);
	border-radius: 20px;
	padding: 24px;
	box-shadow: var(--el-1);
	transition: box-shadow .35s var(--ease), transform .35s var(--ease), opacity .7s var(--ease);
}

.lp-fitur:hover {
	box-shadow: var(--el-3);
	transform: translateY(-4px);
}

.lp-fitur-ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	font-size: 21px;
	margin-bottom: 16px;
}

.lp-fitur-ikon.biru  { background: #e7eefa; color: var(--login-ink-2); }
.lp-fitur-ikon.hijau { background: #e6f5ee; color: var(--login-green); }
.lp-fitur-ikon.emas  { background: #fbf2dc; color: #a07f15; }

.lp-fitur h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--login-ink);
	margin: 0 0 8px;
}

.lp-fitur p {
	font-size: 13px;
	line-height: 1.65;
	color: var(--login-muted);
	margin: 0;
}

/* ---------- infografis alur ---------- */
.lp-alur {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 34px 18px;
}

.lp-alur-pkl {
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 34px 12px;
}

.lp-langkah {
	position: relative;
	text-align: center;
	padding: 0 4px;
}

/* garis putus-putus penghubung ke langkah berikutnya dalam satu baris */
.lp-langkah::before {
	content: '';
	position: absolute;
	top: 30px;
	left: calc(50% + 36px);
	width: calc(100% - 72px + 18px);
	height: 2px;
	background: repeating-linear-gradient(90deg, #c9d4e6 0 6px, transparent 6px 11px);
}

.lp-alur-pkl .lp-langkah::before {
	width: calc(100% - 72px + 12px);
}

.lp-alur-ta .lp-langkah:nth-child(5n)::before,
.lp-langkah:last-child::before {
	display: none;
}

.lp-langkah-ikon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #fff;
	color: var(--login-ink-2);
	font-size: 23px;
	box-shadow: var(--el-2), inset 0 0 0 2px #dce5f2;
	margin-bottom: 14px;
	transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}

.lp-alur-pkl .lp-langkah-ikon {
	color: var(--login-green);
}

.lp-langkah:hover .lp-langkah-ikon {
	transform: translateY(-4px) scale(1.05);
	background: var(--login-ink);
	color: #fff;
}

.lp-alur-pkl .lp-langkah:hover .lp-langkah-ikon {
	background: var(--login-green);
}

.lp-langkah:last-child .lp-langkah-ikon {
	background: linear-gradient(135deg, var(--login-gold), #e0bd4a);
	color: #fff;
	box-shadow: var(--el-2);
}

.lp-langkah-no {
	position: absolute;
	z-index: 2;
	top: -4px;
	left: calc(50% + 14px);
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	line-height: 22px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	color: #fff;
	background: var(--login-gold);
	box-shadow: 0 0 0 3px #fff;
}

.lp-alur-pkl .lp-langkah-no {
	background: var(--login-green);
}

.lp-langkah h3 {
	font-size: 14px;
	font-weight: 700;
	color: var(--login-ink);
	margin: 0 0 6px;
	line-height: 1.3;
}

.lp-oleh {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--login-ink-2);
	background: #e7eefa;
	border-radius: 999px;
	padding: 3px 9px;
	margin-bottom: 8px;
}

.lp-alur-pkl .lp-oleh {
	color: var(--login-green);
	background: #e6f5ee;
}

.lp-langkah p {
	font-size: 12px;
	line-height: 1.55;
	color: var(--login-muted);
	margin: 0;
}

/* ---------- angka penting ---------- */
.lp-angka {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 52px;
	border-radius: 22px;
	overflow: hidden;
	background: linear-gradient(120deg, var(--login-ink) 0%, var(--login-ink-2) 100%);
	box-shadow: var(--el-3);
	color: #fff;
}

.lp-angka-item {
	padding: 26px 24px;
	border-right: 1px solid rgba(255, 255, 255, .14);
}

.lp-angka-item:last-child {
	border-right: 0;
}

.lp-angka-item strong {
	display: block;
	font-family: var(--lp-serif);
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: #f1d276;
	margin-bottom: 10px;
}

.lp-angka-item strong small {
	font-size: 18px;
	color: #f1d276;
}

.lp-angka-item span {
	display: block;
	font-size: 12.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .86);
}

/* ---------- pertama kali masuk ---------- */
.lp-mulai-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.lp-mulai {
	position: relative;
	background: #fff;
	border: 1px solid rgba(225, 231, 240, .9);
	border-radius: 20px;
	padding: 24px 22px;
	box-shadow: var(--el-1);
	overflow: hidden;
}

.lp-mulai-no {
	position: absolute;
	right: 16px;
	top: 6px;
	font-family: var(--lp-serif);
	font-size: 46px;
	font-weight: 700;
	color: #eef2f8;
	line-height: 1;
}

.lp-mulai > i {
	position: relative;
	display: block;
	font-size: 24px;
	color: var(--login-gold);
	margin-bottom: 14px;
}

.lp-mulai h3 {
	position: relative;
	font-size: 15px;
	font-weight: 700;
	color: var(--login-ink);
	margin: 0 0 8px;
}

.lp-mulai p {
	position: relative;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--login-muted);
	margin: 0;
}

.lp-mulai-cta {
	text-align: center;
	margin-top: 30px;
}

/* ---------- jadwal ---------- */
.lp-page #jadwal .page-title-block .lp-kicker {
	margin-bottom: 4px;
}

.lp-saring {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: -4px 0 18px;
}

.lp-saring button {
	border: 0;
	font-size: 12.5px;
	font-weight: 600;
	padding: 7px 15px;
	border-radius: 999px;
	color: var(--login-muted);
	background: rgba(255, 255, 255, .85);
	box-shadow: inset 0 0 0 1px #d7e0ee;
	transition: background .2s var(--ease), color .2s var(--ease);
}

.lp-saring button:hover {
	color: var(--login-ink);
}

.lp-saring button.aktif {
	color: #fff;
	background: var(--login-ink);
	box-shadow: none;
}

/* ---------- panduan ---------- */
.lp-page .panduan-item {
	padding-right: 36px;
}

.lp-page .panduan-item .panduan-ikon.lp-ikon-word {
	color: #2b5797;
}

.lp-dok-ket {
	display: block;
	overflow: hidden;
	font-size: 11.5px;
	line-height: 1.5;
	color: #4a566e;
	margin-top: 4px;
}

/* ---------- FAQ ---------- */
.lp-faq-wrap {
	max-width: 820px;
}

.lp-faq details {
	background: #fff;
	border: 1px solid rgba(225, 231, 240, .9);
	border-radius: 16px;
	margin-bottom: 10px;
	box-shadow: var(--el-1);
	transition: box-shadow .3s var(--ease);
}

.lp-faq details[open] {
	box-shadow: var(--el-2);
}

.lp-faq summary {
	position: relative;
	display: block;
	list-style: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: var(--login-ink);
	padding: 16px 48px 16px 20px;
}

.lp-faq summary::-webkit-details-marker {
	display: none;
}

.lp-faq summary::after {
	content: '+';
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	font-weight: 400;
	color: var(--login-gold);
	transition: transform .25s var(--ease);
}

.lp-faq details[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
}

.lp-faq details p {
	font-size: 13px;
	line-height: 1.7;
	color: var(--login-muted);
	padding: 0 20px 18px;
	margin: 0;
}

/* ---------- penutup ---------- */
.lp-penutup {
	max-width: 1148px;
	margin: 10px auto 30px;
	border-radius: 26px;
	padding: 46px 16px;
	text-align: center;
	color: #fff;
	background:
		radial-gradient(circle at 85% 20%, rgba(201, 162, 39, .35), rgba(201, 162, 39, 0) 45%),
		linear-gradient(120deg, var(--login-ink) 0%, var(--login-ink-2) 100%);
	box-shadow: var(--el-3);
}

.lp-penutup h2 {
	font-family: var(--lp-serif);
	font-size: 28px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 8px;
}

.lp-penutup p {
	font-size: 14px;
	color: rgba(255, 255, 255, .82);
	margin: 0 0 22px;
}

/* ---------- muncul saat digulir ---------- */
.lp-js .lp-reveal {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .35s var(--ease);
}

.lp-js .lp-reveal.lp-tampil {
	opacity: 1;
	transform: none;
}

.lp-js .lp-fitur.lp-reveal.lp-tampil:hover {
	transform: translateY(-4px);
}

/* ---------- layar sedang dan kecil ---------- */
@media (max-width: 1199px) {
	.lp-nav-links a {
		padding: 8px 9px;
	}

	.lp-alur-pkl {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.lp-alur-pkl .lp-langkah:nth-child(4n)::before {
		display: none;
	}
}

@media (max-width: 1199px) and (min-width: 992px) {
	.lp-hero-text h1 {
		font-size: 40px;
	}
}

@media (max-width: 991px) {
	.lp-nav-masuk-hp {
		display: inline-flex;
	}

	.lp-nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.lp-nav-links {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		padding: 8px 16px 16px;
		background: rgba(255, 255, 255, .98);
		box-shadow: var(--el-2);
		border-radius: 0 0 18px 18px;
	}

	.lp-nav-links.buka {
		display: flex;
	}

	.lp-nav-links a {
		padding: 11px 14px;
	}

	.lp-nav-links a.lp-nav-masuk {
		margin: 8px 0 0;
		text-align: center;
	}

	.lp-hero {
		padding: 28px 0 24px;
	}

	.lp-hero-text {
		padding: 20px 0 0;
		text-align: center;
	}

	.lp-hero-cta {
		margin-bottom: 24px;
	}

	.lp-hero-stats {
		margin-bottom: 28px;
	}

	.lp-hero-text h1 {
		font-size: 36px;
	}

	.lp-lead {
		margin-left: auto;
		margin-right: auto;
	}

	.lp-hero-cta,
	.lp-hero-stats {
		justify-content: center;
	}

	.lp-login-card {
		max-width: 460px;
		margin: 0 auto;
	}

	.lp-fitur-grid,
	.lp-mulai-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lp-angka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lp-angka-item:nth-child(2) {
		border-right: 0;
	}

	.lp-angka-item:nth-child(-n+2) {
		border-bottom: 1px solid rgba(255, 255, 255, .14);
	}

	/* alur menjadi garis waktu vertikal */
	.lp-alur,
	.lp-alur-pkl {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		max-width: 560px;
		margin: 0 auto;
	}

	.lp-langkah {
		text-align: left;
		padding: 0 0 26px 78px;
		min-height: 86px;
	}

	.lp-langkah::before,
	.lp-alur-pkl .lp-langkah::before,
	.lp-alur-ta .lp-langkah:nth-child(5n)::before,
	.lp-alur-pkl .lp-langkah:nth-child(4n)::before {
		display: block;
		top: 62px;
		left: 29px;
		width: 2px;
		height: calc(100% - 62px);
		background: repeating-linear-gradient(180deg, #c9d4e6 0 6px, transparent 6px 11px);
	}

	.lp-alur .lp-langkah:last-child::before {
		display: none;
	}

	.lp-langkah-ikon {
		position: absolute;
		left: 0;
		top: 0;
		margin: 0;
	}

	.lp-langkah-no {
		left: 44px;
		top: -4px;
	}

	.lp-langkah h3 {
		padding-top: 6px;
	}
}

@media (max-width: 767px) {
	.lp-section {
		padding: 46px 0;
	}

	.lp-hero-text h1 {
		font-size: 30px;
	}

	.lp-lead {
		font-size: 14.5px;
	}

	.lp-section-head h2 {
		font-size: 25px;
	}

	.lp-fitur-grid,
	.lp-mulai-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.lp-stat {
		max-width: none;
		flex: 1 1 28%;
		padding: 12px 10px;
	}

	.lp-stat strong {
		font-size: 22px;
	}

	.lp-angka-item {
		padding: 20px 18px;
	}

	.lp-angka-item strong {
		font-size: 32px;
	}

	.lp-penutup {
		margin-left: 16px;
		margin-right: 16px;
		padding: 36px 16px;
	}

	.lp-penutup h2 {
		font-size: 22px;
	}
}

/* ---------- tombol kembali ke atas ---------- */
.lp-ke-atas {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 30;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #fff;
	font-size: 18px;
	line-height: 46px;
	text-align: center;
	cursor: pointer;
	background: linear-gradient(120deg, var(--login-ink) 0%, var(--login-ink-2) 100%);
	box-shadow: var(--el-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s, box-shadow .2s var(--ease);
}

.lp-ke-atas.tampil {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.lp-ke-atas:hover,
.lp-ke-atas:focus {
	color: #fff;
	box-shadow: var(--el-3);
	outline: none;
}

.lp-ke-atas:focus-visible {
	outline: 3px solid var(--login-gold);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.lp-ke-atas {
		right: 16px;
		bottom: 16px;
		width: 42px;
		height: 42px;
		line-height: 42px;
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.lp-js {
		scroll-behavior: auto;
	}

	.lp-js .lp-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.lp-fitur,
	.lp-btn,
	.lp-langkah-ikon {
		transition: none;
	}

	.lp-login-card.lp-sorot {
		animation: none;
	}

	.lp-ke-atas {
		transition: none;
	}
}

/* ------------------------------------------------------------------
   Log book PKL: isi kegiatan seminggu bisa sangat panjang. Di tabel
   ditampilkan ringkas (sekitar 6 baris, memudar di bawah) dengan tautan
   Selengkapnya / Ringkas -- lihat MhsPklLogBook::kegiatanRingkas().
   ------------------------------------------------------------------ */
.sita-kegiatan {
	font-size: 13px;
	line-height: 1.55;
	word-break: break-word;
}

.sita-kegiatan-ringkas {
	position: relative;
	max-height: 9.3em; /* 6 baris x line-height 1.55 */
	overflow: hidden;
}

/* memudar lewat mask, jadi cocok di baris tabel berwarna apa pun */
.sita-kegiatan-ringkas:not(.terbuka) {
	-webkit-mask-image: linear-gradient(#000 65%, transparent);
	mask-image: linear-gradient(#000 65%, transparent);
}

.sita-kegiatan-ringkas.terbuka {
	max-height: none;
}

.sita-kegiatan-toggle {
	display: inline-block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
}

.sita-logbook-tanggal {
	white-space: nowrap;
	font-size: 13px;
}