/* =====================================================================
   Tracer Study & Portal Alumni — gaya aplikasi
   Warna utama diambil dari settings melalui --app-primary / --app-secondary
   (didefinisikan di templates/_head.php).
   ===================================================================== */

:root {
	--app-primary-dark: color-mix(in srgb, var(--app-primary) 82%, #000);
	--app-primary-soft: color-mix(in srgb, var(--app-primary) 12%, #fff);
	--app-bg: #f4f7f9;
	--app-radius: 12px;
	--bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--bs-body-color: #1f2937;
	--bs-link-color-rgb: 15, 110, 122;
	--bs-border-radius: 8px;
	--bs-border-radius-lg: var(--app-radius);
}

body {
	background: var(--app-bg);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

a { color: var(--app-primary); }
a:hover { color: var(--app-primary-dark); }

/* ---------- Tema Bootstrap mengikuti warna settings ---------- */
.btn-primary {
	--bs-btn-bg: var(--app-primary);
	--bs-btn-border-color: var(--app-primary);
	--bs-btn-hover-bg: var(--app-primary-dark);
	--bs-btn-hover-border-color: var(--app-primary-dark);
	--bs-btn-active-bg: var(--app-primary-dark);
	--bs-btn-active-border-color: var(--app-primary-dark);
	--bs-btn-disabled-bg: var(--app-primary);
	--bs-btn-disabled-border-color: var(--app-primary);
}
.btn-outline-primary {
	--bs-btn-color: var(--app-primary);
	--bs-btn-border-color: var(--app-primary);
	--bs-btn-hover-bg: var(--app-primary);
	--bs-btn-hover-border-color: var(--app-primary);
	--bs-btn-active-bg: var(--app-primary);
	--bs-btn-active-border-color: var(--app-primary);
	--bs-btn-disabled-color: var(--app-primary);
	--bs-btn-disabled-border-color: var(--app-primary);
}
.text-primary { color: var(--app-primary) !important; }
.bg-primary { background-color: var(--app-primary) !important; }
.bg-primary-subtle { background-color: var(--app-primary-soft) !important; }
.text-primary-emphasis { color: var(--app-primary-dark) !important; }
.progress-bar { background-color: var(--app-primary); }
.nav-pills .nav-link.active { background-color: var(--app-primary); }
.page-link { color: var(--app-primary); }
.active > .page-link, .page-link.active { background-color: var(--app-primary); border-color: var(--app-primary); }
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
	border-color: color-mix(in srgb, var(--app-primary) 50%, #fff);
	box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--app-primary) 20%, transparent);
}
.card { border-radius: var(--app-radius); }
.badge-soft { background: var(--app-primary-soft); color: var(--app-primary-dark); }

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--app-secondary); }
.brand-logo { height: 40px; width: auto; }
.brand-icon {
	width: 40px; height: 40px; border-radius: 10px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--app-primary); color: #fff; font-size: 1.25rem;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 700; font-size: 1rem; }
.brand-sub { font-size: .75rem; opacity: .7; }
.brand-light { color: #fff; }

/* ---------- Umum ---------- */
.avatar {
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--app-primary-soft); color: var(--app-primary-dark);
	font-weight: 600; flex-shrink: 0; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 34px; height: 34px; font-size: .85rem; }
.avatar-md { width: 48px; height: 48px; }
.avatar-md { font-size: 1.1rem; }
.avatar-lg { width: 96px; height: 96px; font-size: 2rem; }
.avatar-xl { width: 128px; height: 128px; font-size: 2.75rem; box-shadow: 0 0 0 4px #fff, 0 0 0 5px #e5e7eb; }

/* ---------- Posting & CMS ---------- */
.page-header { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 2rem 0; }
.post-detail-wrap { max-width: 820px; margin: 0 auto; }
.post-detail-img { max-height: 420px; object-fit: cover; }
.post-content { font-size: 1.02rem; line-height: 1.75; overflow-wrap: anywhere; }
.post-content h2 { font-size: 1.35rem; margin-top: 1.5rem; }
.post-content h3 { font-size: 1.15rem; margin-top: 1.25rem; }
.post-content blockquote { border-left: 4px solid var(--app-primary); padding-left: 1rem; color: #4b5563; }
.post-content .ql-align-center { text-align: center; }
.post-content .ql-align-right { text-align: right; }
.post-content .ql-align-justify { text-align: justify; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.media-item { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #f3f4f6; }
.media-item img { width: 100%; height: 100%; object-fit: cover; }
.media-remove { position: absolute; top: .35rem; right: .35rem; padding: .1rem .35rem; }
.tag-chip {
	display: inline-flex; align-items: center; gap: .25rem;
	background: #f3f4f6; border-radius: 999px; padding: .2rem .7rem; font-size: .85rem; color: #374151;
}
a.tag-chip:hover { background: var(--app-primary-soft); color: var(--app-primary-dark); }
.table-thumb { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.table-thumb-empty { display: inline-flex; align-items: center; justify-content: center; background: #f3f4f6; color: #9ca3af; }
.editor { min-height: 320px; background: #fff; font-size: 1rem; }
.editor-wrap .ql-toolbar { border-radius: 8px 8px 0 0; background: #f9fafb; }
.editor-wrap .ql-container { border-radius: 0 0 8px 8px; }
.editor-wrap.is-invalid .ql-toolbar, .editor-wrap.is-invalid .ql-container { border-color: var(--bs-danger); }
.my-post-thumb { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; }
.comment { display: flex; gap: .75rem; padding: .75rem 0; }
.comment + .comment { border-top: 1px solid #f1f3f5; }
.comment-reply { margin-left: 2.75rem; border-top: 0 !important; padding-top: .25rem; }
.comment-body { min-width: 0; flex: 1; }
.comment-text { white-space: normal; overflow-wrap: anywhere; margin: .15rem 0 .25rem; }
.comment-reply-form { margin: 0 0 .75rem 2.75rem; }
.wall-cta { background: linear-gradient(135deg, var(--app-primary), var(--app-secondary)); color: #fff; }

/* ---------- Tracer Study: pengisian ---------- */
.tracer-wrap { max-width: 860px; margin: 0 auto; }
.identity-box { background: #f8fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: .75rem 1rem; }
.tracer-steps { list-style: none; padding: 0; margin: 0 0 .75rem; display: flex; gap: .5rem; overflow-x: auto; }
.tracer-steps li { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: #6b7280; white-space: nowrap; }
.tracer-steps .step-no {
	width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	background: #e5e7eb; font-weight: 600; font-size: .75rem;
}
.tracer-steps li.done .step-no { background: var(--app-primary-soft); color: var(--app-primary-dark); }
.tracer-steps li.current { color: var(--app-primary-dark); font-weight: 600; }
.tracer-steps li.current .step-no { background: var(--app-primary); color: #fff; }
@media (max-width: 767.98px) { .tracer-steps .step-title { display: none; } .tracer-steps li.current .step-title { display: inline; } }

.question { border: 0; padding: 0; margin: 0 0 1.75rem; min-width: 0; }
.question-text { float: none; width: auto; font-size: 1rem; font-weight: 600; margin-bottom: .5rem; line-height: 1.45; }
.question.has-error .question-text { color: var(--bs-danger); }
.question .form-check { margin-bottom: .35rem; }
.question .other-input { max-width: 360px; }
.number-group { max-width: 240px; }
.date-input { max-width: 220px; }

.likert { display: flex; flex-wrap: wrap; gap: .4rem; }
.likert-option { flex: 1 1 0; min-width: 96px; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .5rem .35rem; font-size: .8rem; line-height: 1.2; }
.likert-score { font-weight: 700; font-size: 1rem; }
@media (max-width: 575.98px) { .likert { flex-direction: column; } .likert-option { flex-direction: row; justify-content: flex-start; gap: .6rem; } }

.rating { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.rating-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating label { font-size: 1.75rem; color: #d1d5db; cursor: pointer; line-height: 1; }
.rating-input:checked ~ label, .rating label:hover, .rating label:hover ~ label { color: #f59e0b; }
.rating-input:focus-visible + label { outline: 2px solid var(--app-primary); border-radius: 4px; }
.rating-input:disabled + label { cursor: default; }

/* ---------- Tracer Study: builder ---------- */
.builder-question.inactive { background: #f9fafb; opacity: .75; }
.builder-no {
	width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; background: #f3f4f6;
	display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; color: #4b5563;
}
.builder-condition { color: #7c3aed; }
.source-options { display: flex; flex-direction: column; gap: .5rem; }
.source-option { display: flex; gap: .75rem; align-items: flex-start; border: 1px solid #e5e7eb; border-radius: 10px; padding: .85rem 1rem; cursor: pointer; }
.source-option:has(input:checked) { border-color: var(--app-primary); background: var(--app-primary-soft); }
.source-option > input { margin-top: .3rem; }

/* ---------- Grafik (components/bar_chart) ----------
   Satu seri, satu hue (warna utama tema). Batang ≤24px, ujung data 4px membulat,
   pangkal lurus di garis dasar, grid/sumbu tipis & redup, teks memakai warna teks (bukan warna seri). */
.viz { --viz-ink: #1f2937; --viz-muted: #6b7280; --viz-axis: #d1d5db; }
.viz-title { font-weight: 600; font-size: .95rem; color: var(--viz-ink); }
.viz-subtitle { font-size: .8rem; color: var(--viz-muted); }
.viz-empty { color: var(--viz-muted); font-size: .875rem; margin: 1.5rem 0; text-align: center; }

.viz-bars { display: flex; flex-direction: column; gap: .15rem; }
.viz-row {
	display: grid; grid-template-columns: minmax(0, 38%) 1fr; align-items: center; gap: .75rem;
	padding: .3rem .35rem; border-radius: 6px; position: relative; outline: none;
}
.viz-label { font-size: .8rem; color: var(--viz-ink); line-height: 1.25; overflow-wrap: anywhere; }
.viz-track { display: flex; align-items: center; gap: .4rem; min-width: 0; border-left: 1px solid var(--viz-axis); }
.viz-bar {
	display: block; height: 16px; min-width: 2px; background: var(--app-primary);
	width: calc((100% - 5.5rem) * var(--w) / 100); border-radius: 0 4px 4px 0;
}
.viz-value { font-size: .8rem; font-weight: 600; color: var(--viz-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.viz-pct { font-weight: 400; color: var(--viz-muted); margin-left: .15rem; }
@media (max-width: 575.98px) { .viz-row { grid-template-columns: 1fr; gap: .2rem; } }

.viz-columns { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 2px; }
.viz-col { display: flex; flex-direction: column; align-items: stretch; position: relative; outline: none; border-radius: 6px; }
.viz-col-plot {
	height: 170px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
	border-bottom: 1px solid var(--viz-axis);
}
.viz-col-value { font-size: .75rem; font-weight: 600; color: var(--viz-ink); margin-bottom: .2rem; font-variant-numeric: tabular-nums; }
.viz-col-bar {
	display: block; width: min(24px, 70%); min-height: 2px; background: var(--app-primary);
	height: calc((100% - 1.25rem) * var(--h) / 100); border-radius: 4px 4px 0 0;
}
.viz-col-label { font-size: .72rem; color: var(--viz-muted); text-align: center; margin-top: .3rem; line-height: 1.2; overflow-wrap: anywhere; }

/* Hover/fokus: seluruh baris/kolom adalah area sentuh; tooltip dari data-tip. */
.viz-row:hover, .viz-row:focus-visible, .viz-col:hover, .viz-col:focus-visible { background: #f3f4f6; }
.viz-row:focus-visible, .viz-col:focus-visible { box-shadow: 0 0 0 2px var(--app-primary); }
.viz [data-tip]:hover::after, .viz [data-tip]:focus-visible::after {
	content: attr(data-tip); position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
	background: #111827; color: #fff; font-size: .75rem; line-height: 1.3; padding: .35rem .55rem; border-radius: 6px;
	white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.viz-table summary { font-size: .8rem; color: var(--viz-muted); cursor: pointer; }
.viz-table table { font-size: .8rem; }
.tabular { font-variant-numeric: tabular-nums; }
.report-card { transition: box-shadow .15s; }
.report-card:hover { box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08) !important; }
.report-table th { font-size: .8rem; white-space: nowrap; }
.report-table td { font-size: .85rem; }
.report-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.report-table tr.total td { font-weight: 600; background: #f8fafb; }
.report-table td.empty { text-align: center; color: #6b7280; }
.answer-samples { list-style: none; padding: 0; margin: 0; font-size: .85rem; }
.answer-samples li { border-left: 3px solid var(--app-primary-soft); padding: .3rem .6rem; margin-bottom: .35rem; background: #f9fafb; border-radius: 0 6px 6px 0; }

/* Angka utama & meter */
.hero-figure { font-size: 3rem; font-weight: 700; line-height: 1.1; color: #111827; }
.meter { height: 10px; border-radius: 999px; background: var(--app-primary-soft); overflow: hidden; }
.meter-fill { display: block; height: 100%; background: var(--app-primary); border-radius: 999px; }
.kpi-value { font-size: 1.25rem; font-weight: 700; }
.kpi-label { font-size: .75rem; color: #6b7280; }

@media print {
	.admin-sidebar, .admin-topbar { display: none !important; }
}

/* ---------- Notifikasi ---------- */
.notif-bell { padding: .375rem .5rem; }
.notif-count { top: 8px; left: 70%; font-size: .65rem; }
.notif-menu { width: min(360px, calc(100vw - 2rem)); }
.notif-item {
	display: flex; gap: .65rem; padding: .65rem 1rem; color: inherit; text-decoration: none;
	border-bottom: 1px solid #f1f3f5; font-size: .875rem;
}
.notif-item:hover { background: #f8f9fa; }
.notif-item > i { color: var(--app-primary); margin-top: .1rem; }
.notif-item.unread { background: var(--app-primary-soft); }
.notif-title { display: block; line-height: 1.35; }
.notif-item.unread .notif-title { font-weight: 600; }
.notif-time { display: block; font-size: .75rem; color: #6b7280; }
.notif-page { max-width: 820px; }
.notif-row { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.25rem; }
.notif-row.unread { background: var(--app-primary-soft); }
.notif-icon {
	width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	background: #fff; color: var(--app-primary); box-shadow: 0 0 0 1px #e5e7eb;
}
.notif-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--app-primary); margin-top: .5rem; flex-shrink: 0; }
.notif-message { overflow-wrap: anywhere; }

/* ---------- Profil & direktori ---------- */
.profile-section-head {
	display: flex; align-items: center; gap: .5rem;
	border-bottom: 1px solid #eef0f3; padding-bottom: .5rem; margin-bottom: 1rem;
}
.privacy-select { width: auto; max-width: 11rem; }
.person-card { transition: box-shadow .15s, transform .15s; }
.person-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08) !important; }
.user-toggle { color: inherit; }
.min-w-0 { min-width: 0; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.empty-state {
	text-align: center; color: #6b7280; padding: 3rem 1rem;
	background: #fff; border-radius: var(--app-radius); border: 1px dashed #d1d5db;
}
.empty-state > i { font-size: 2.5rem; display: block; margin-bottom: .5rem; color: #9ca3af; }

.stat-icon {
	width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem;
}
.stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }

.post-card-img { height: 170px; object-fit: cover; }

/* ---------- Frontend ---------- */
.hero {
	padding: 4rem 0;
	background:
		radial-gradient(circle at 85% 20%, var(--app-primary-soft), transparent 45%),
		#fff;
	border-bottom: 1px solid #e5e7eb;
}
.hero-badge { background: var(--app-primary-soft); color: var(--app-primary-dark); font-weight: 500; }
.site-footer { background: var(--app-secondary); color: rgba(255, 255, 255, .8); }

.auth-section { padding: 3rem 0; }
.auth-card { max-width: 960px; margin: 0 auto; }
.auth-aside {
	background: linear-gradient(150deg, var(--app-primary), var(--app-secondary));
	color: #fff; padding: 3rem; align-items: flex-end;
}
.auth-card-sm { max-width: 460px; margin: 0 auto; }
.register-card { max-width: 760px; margin: 0 auto; }
.form-section-title {
	font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
	color: #6b7280; margin-bottom: .75rem;
}
.data-list dt { font-weight: 400; color: #6b7280; }
.data-list dd { margin-bottom: .6rem; }
.auth-step-icon {
	width: 52px; height: 52px; border-radius: 14px; margin-bottom: 1rem;
	display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem;
	background: var(--app-primary-soft); color: var(--app-primary-dark);
}
.auth-aside-icon {
	width: 64px; height: 64px; border-radius: 16px; background: rgba(255, 255, 255, .15);
	display: inline-flex; align-items: center; justify-content: center; font-size: 2rem;
}

/* ---------- Admin ---------- */
.layout-admin { flex-direction: row; }
.admin-sidebar {
	width: 260px; background: var(--app-secondary); color: rgba(255, 255, 255, .8);
	flex-shrink: 0;
	/* Latar offcanvas (layar kecil) */
	--bs-offcanvas-bg: var(--app-secondary);
	--bs-offcanvas-color: rgba(255, 255, 255, .8);
	--bs-offcanvas-width: 280px;
}
/* Bootstrap .offcanvas-lg memaksa latar transparan di layar lebar; kembalikan warna sidebar. */
@media (min-width: 992px) {
	.admin-sidebar.offcanvas-lg { background-color: var(--app-secondary) !important; }
}
@media (min-width: 992px) {
	.admin-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
}
.admin-sidebar-brand {
	display: flex; align-items: center; justify-content: space-between;
	padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.admin-nav { padding: .75rem; display: flex; flex-direction: column; gap: 2px; }
.admin-nav-link {
	display: flex; align-items: center; gap: .75rem; width: 100%;
	padding: .6rem .75rem; border-radius: 8px; border: 0; background: none;
	color: rgba(255, 255, 255, .8); text-decoration: none; font-size: .925rem; text-align: left;
}
.admin-nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.admin-nav-link.active { background: var(--app-primary); color: #fff; }
.admin-nav-group .chevron { font-size: .75rem; transition: transform .2s; }
.admin-nav-group.collapsed .chevron { transform: rotate(-90deg); }
.admin-nav-sublink {
	display: block; padding: .45rem .75rem .45rem 2.6rem; border-radius: 8px;
	color: rgba(255, 255, 255, .65); text-decoration: none; font-size: .875rem;
}
.admin-nav-sublink:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.admin-nav-sublink.active { color: #fff; font-weight: 600; background: rgba(255, 255, 255, .08); }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.admin-topbar {
	display: flex; align-items: center; gap: .75rem;
	background: #fff; border-bottom: 1px solid #e5e7eb;
	padding: .65rem 1.5rem; position: sticky; top: 0; z-index: 1020;
}
.admin-page-title { font-size: 1.1rem; font-weight: 600; margin: 0; }
.admin-content { padding: 1.5rem; flex: 1; }
.admin-footer { padding: 1rem 1.5rem; font-size: .8rem; color: #6b7280; }

@media (max-width: 575.98px) {
	.admin-topbar, .admin-content { padding-left: 1rem; padding-right: 1rem; }
}

/* ---------- Portal alumni ---------- */
.layout-alumni .navbar .nav-link { font-weight: 500; border-radius: 8px; }
.layout-alumni .navbar .nav-link.active { color: var(--app-primary); background: var(--app-primary-soft); }

.bottom-nav {
	position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
	display: flex; background: #fff; border-top: 1px solid #e5e7eb;
	padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
	flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
	padding: .5rem 0; font-size: .7rem; color: #6b7280; text-decoration: none;
}
.bottom-nav a i { font-size: 1.2rem; }
.bottom-nav a.active { color: var(--app-primary); }
@media (max-width: 991.98px) {
	.layout-alumni { padding-bottom: 64px; }
}

/* ---------- System: Settings & Audit Log ---------- */
.settings-tabs .nav-link { color: #374151; }
.settings-tabs .nav-link.active { color: #fff; }
.logo-preview {
	display: flex; align-items: center; justify-content: center; min-height: 88px;
	border: 1px dashed #d1d5db; border-radius: 8px; padding: .75rem;
	background: repeating-conic-gradient(#f3f4f6 0% 25%, #fff 0% 50%) 50% / 16px 16px;
}
.logo-preview img { max-height: 72px; max-width: 100%; }
.color-input .form-control-color { max-width: 3.25rem; }
.settings-checklist li { display: flex; gap: .5rem; align-items: baseline; padding: .3rem 0; }
.audit-table td { font-size: .875rem; }
.audit-table .audit-desc { min-width: 240px; }
.audit-ua { max-width: 260px; }
.audit-table .audit-user { min-width: 150px; }