/* Elang Course Management — gaya dasar. Warna brand dari --brand (per organisasi). */
:root {
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --surface: #ffffff;
  --canvas: #f5f7fb;
  --radius: 14px;
  /* Token tema (nilai bawaan = tema "klasik"; tema lain di bagian bawah file). */
  --tint: #f8fafc;
  --accent: #22d3ee;
  --card-shadow: none;
  --side-bg: #0b1220;
  --side-base: #0b1220;
  --side-ink: #cbd5e1;
  --side-muted: #64748b;
  --top-bg: rgba(255,255,255,.85);
  --nav-bg: #fff;
  --nav-ink: var(--ink);
  --site-bg: #fff;
  --site-nav-bg: rgba(255,255,255,.9);
  --hero-base: #f8fbff;
  --head-bg: #f8fbff;
  --footer-bg: #0b1220;
  --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-primary: var(--brand);
  --bs-link-color: var(--brand);
  --bs-link-hover-color: color-mix(in srgb, var(--brand) 80%, black);
}
body { color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; }
a { color: var(--brand); }

.btn-primary {
  --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand) 85%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--brand) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--brand) 75%, black);
  --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand);
}
.text-brand { color: var(--brand) !important; }
.bg-brand { background: var(--brand) !important; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: color-mix(in srgb, var(--brand) 55%, white);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 18%, transparent);
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.page-link { color: var(--brand); }
.active > .page-link { background: var(--brand); border-color: var(--brand); }

.brand-mark {
  display: inline-grid; place-items: center; border-radius: 10px; font-weight: 800;
  color: #fff; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--accent)));
}
.brand-logo { object-fit: contain; }

/* Kartu & tabel */
.card-soft { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--card-shadow); }
.table-modern { margin: 0; }
.table-modern thead th {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  font-weight: 600; background: var(--tint); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table-modern td { vertical-align: middle; border-color: var(--line); }
.sort-link { color: inherit; text-decoration: none; }
.sort-link.active { color: var(--ink); }

/* Badge status (soft) */
.badge-soft-success { background: #dcfce7; color: #166534; }
.badge-soft-secondary { background: #f1f5f9; color: #475569; }
.badge-soft-primary { background: #dbeafe; color: #1e40af; }
.badge-soft-danger { background: #fee2e2; color: #991b1b; }
.badge-soft-warning { background: #fef3c7; color: #92400e; }
.badge-soft-info { background: #cffafe; color: #155e75; }
.badge-soft-dark { background: #e2e8f0; color: #1e293b; }
.badge { font-weight: 600; padding: .4em .7em; }

.empty-icon {
  width: 64px; height: 64px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 1.6rem; color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, white);
}

/* ---------------- Back office ---------------- */
.bo-shell { display: flex; min-height: 100vh; }
.bo-sidebar {
  width: 260px; flex-shrink: 0; background: var(--side-bg); color: var(--side-ink);
  position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 1.1rem .8rem;
}
.bo-sidebar .brand { color: #fff; font-weight: 700; text-decoration: none; display: flex; gap: .6rem; align-items: center; padding: 0 .5rem 1rem; }
.bo-sidebar .nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--side-muted); padding: .9rem .75rem .35rem; }
.bo-sidebar .nav-link {
  color: var(--side-ink); border-radius: 10px; padding: .55rem .75rem; display: flex; gap: .7rem; align-items: center; font-size: .92rem;
}
.bo-sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.bo-sidebar .nav-link.active { background: color-mix(in srgb, var(--brand) 70%, var(--side-base)); color: #fff; }
.bo-sidebar .nav-link.disabled { color: var(--side-muted); opacity: .7; }
.bo-main { flex: 1; min-width: 0; }
.bo-topbar {
  background: var(--top-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 1020; padding: .7rem 1.5rem;
}
.bo-content { padding: 1.5rem; }
.page-title { font-weight: 700; font-size: 1.35rem; margin: 0; }
.stat-card { padding: 1.2rem; }
.stat-card .stat-icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem;
  color: var(--si, var(--brand)); background: color-mix(in srgb, var(--si, var(--brand)) 12%, white);
}
.stat-card .stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
@media (max-width: 991.98px) {
  .bo-sidebar { position: fixed; left: -280px; z-index: 1045; transition: left .2s; }
  .bo-sidebar.show { left: 0; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .bo-content { padding: 1rem; }
  .bo-topbar { padding: .6rem 1rem; }
}

/* ---------------- Portal pengajar/peserta ---------------- */
.portal-nav { background: var(--nav-bg); border-bottom: 1px solid var(--line); }
.portal-hero {
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 60%, var(--accent)));
  color: #fff; border-radius: var(--radius); padding: 1.6rem;
}
.quick-tile { padding: 1.1rem; text-decoration: none; color: var(--ink); display: block; height: 100%; transition: transform .12s, box-shadow .12s; }
.quick-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,23,42,.08); }
.quick-tile i { font-size: 1.5rem; color: var(--brand); }

/* ---------------- Website publik ---------------- */
.site-body { background: var(--site-bg); }
.site-nav { background: var(--site-nav-bg); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; }
.site-nav .nav-link { color: var(--ink); font-weight: 500; }
.hero {
  position: relative; overflow: hidden; padding: 5.5rem 0 4.5rem;
  background:
    radial-gradient(900px 400px at 85% -10%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%),
    radial-gradient(700px 380px at -10% 110%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
    var(--hero-base);
}
.hero h1 { font-weight: 800; font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.08; letter-spacing: -.02em; }
.hero .lead { color: #334155; font-size: 1.15rem; }
.hero-eyebrow {
  display: inline-flex; gap: .45rem; align-items: center; padding: .35rem .8rem; border-radius: 99px;
  background: #fff; border: 1px solid var(--line); font-size: .85rem; font-weight: 600; color: var(--brand);
}
.hero-card { background: #fff; border-radius: 20px; border: 1px solid var(--line); box-shadow: 0 30px 60px -20px rgba(15,23,42,.18); padding: 1.4rem; }
.feature-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem;
  color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, white);
}
.section { padding: 4.5rem 0; }
.section-title { font-weight: 800; letter-spacing: -.01em; }
.site-footer { background: var(--footer-bg); color: #94a3b8; padding: 3rem 0 2rem; }
.site-footer a { color: #cbd5e1; text-decoration: none; }

/* ---------------- Login ---------------- */
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem;
  background: radial-gradient(800px 400px at 50% -10%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 70%), var(--canvas); }
.auth-card { width: 100%; max-width: 440px; }
.portal-door { display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.2rem; text-decoration: none; color: var(--ink); transition: border-color .12s, transform .12s; }
.portal-door:hover { border-color: var(--brand); transform: translateY(-1px); }
.portal-door .door-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 1.4rem; color: #fff; background: var(--brand); flex-shrink: 0; }

/* Logo di atas latar gelap (sidebar back office, footer): beri alas terang agar kontras. */
.bo-sidebar .brand-logo, .site-footer .brand-logo { background: #fff; border-radius: 8px; padding: 3px; }

/* Crop foto */
.crop-stage { max-height: 60vh; background: #0f172a; border-radius: 10px; overflow: hidden; }
.crop-stage img { display: block; max-width: 100%; }
.img-preview img { max-height: 140px; border-radius: 10px; border: 1px solid var(--line); background: #f8fafc; }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--brand); border-color: var(--brand); }

/* ---------------- Website publik (Phase 1) ---------------- */
.site-banner { background: var(--brand); color: #fff; }
.site-banner a { color: #fff; text-decoration: underline; }
.page-head { background: var(--head-bg); border-bottom: 1px solid var(--line); padding: 2.5rem 0 2rem; }
.page-head h1 { letter-spacing: -.01em; }
.hero-logo { max-height: 150px; max-width: 100%; }
.stat-big { font-size: 2rem; font-weight: 800; color: var(--brand); line-height: 1.1; }
.course-card { color: var(--ink); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.course-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -12px rgba(15,23,42,.18); }
.course-cover { position: relative; aspect-ratio: 16 / 9; background: #eef2f7; overflow: hidden; }
.course-cover img { width: 100%; height: 100%; object-fit: cover; }
.course-cover-fallback { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2.6rem; color: var(--brand);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, white), color-mix(in srgb, var(--brand) 22%, white)); }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cta-band { border-radius: 20px; color: #fff;
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--accent))); }
.prose { line-height: 1.75; }
.prose h2 { font-size: 1.25rem; font-weight: 700; margin-top: 1.5rem; }
.prose h2:first-child { margin-top: 0; }
.syllabus li { padding: .35rem 0; border-bottom: 1px dashed var(--line); }
.syllabus li:last-child { border-bottom: 0; }
.check-list { list-style: none; padding-left: 0; }
.check-list li { position: relative; padding-left: 1.6rem; margin-bottom: .45rem; font-size: .92rem; }
.check-list li::before { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; color: var(--brand); }
.faq-acc .accordion-button:not(.collapsed) { color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, white); box-shadow: none; }
.faq-acc .accordion-button:focus { box-shadow: none; }
.step-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: .8rem; margin-right: .4rem; }
.progress-steps { display: flex; justify-content: space-between; position: relative; }
.progress-steps::before { content: ""; position: absolute; top: 16px; left: 8%; right: 8%; height: 2px; background: var(--line); }
.progress-steps .step { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; flex: 1; text-align: center; color: var(--muted); }
.progress-steps .dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--line); font-weight: 700; }
.progress-steps .step.done { color: var(--ink); }
.progress-steps .step.done .dot { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------------- Phase 2 ---------------- */
.avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-lg { width: 72px; height: 72px; }
.avatar-fallback { display: inline-grid; place-items: center; font-weight: 700; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, white); }
.avatar-lg.avatar-fallback { font-size: 1.6rem; }
.timeline { list-style: none; padding-left: 0; position: relative; }
.timeline li { display: flex; gap: .8rem; padding-bottom: 1rem; position: relative; }
.timeline li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--line); }
.tl-icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, white); }
.att { display: inline-block; min-width: 1.6rem; padding: .1rem .45rem; border-radius: 6px; font-size: .78rem; font-weight: 600; text-align: center; }
.att-present { background: #dcfce7; color: #166534; }
.att-late { background: #fef3c7; color: #92400e; }
.att-permission, .att-sick { background: #dbeafe; color: #1e40af; }
.att-absent { background: #fee2e2; color: #991b1b; }
.att-none { color: #94a3b8; }
.att-grid td, .att-grid th { padding: .35rem .4rem; }
.att-choices .btn { font-size: .78rem; padding: .25rem .5rem; }
.btn-check:checked + .att-btn-present { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn-check:checked + .att-btn-late { background: #d97706; border-color: #d97706; color: #fff; }
.btn-check:checked + .att-btn-permission, .btn-check:checked + .att-btn-sick { background: #2563eb; border-color: #2563eb; color: #fff; }
.btn-check:checked + .att-btn-absent { background: #dc2626; border-color: #dc2626; color: #fff; }

/* ---------------- Phase 3 (LMS) ---------------- */
.min-w-0 { min-width: 0; }
.code-block { background: #0f172a; color: #e2e8f0; border-radius: 12px; overflow: hidden; }
.code-block > div { background: #1e293b; color: #94a3b8; }
.code-block pre { padding: 1rem; color: #e2e8f0; font-size: .85rem; max-height: 70vh; overflow: auto; }
.gradebook-wrap { max-height: 70vh; }
.gradebook th, .gradebook td { vertical-align: middle; }
.gradebook .sticky-col { position: sticky; left: 0; background: #fff; z-index: 2; min-width: 190px; }
.gradebook thead th { position: sticky; top: 0; z-index: 3; }
.gradebook thead th.sticky-col { z-index: 4; }
.score-input { max-width: 90px; margin: 0 auto; }
.score-input.is-draft { border-color: #f59e0b; background: #fffbeb; }
.resource-view iframe { background: #fff; }

/* ---------------- Phase 4 (komunikasi) ---------------- */
.bg-unread { background: color-mix(in srgb, var(--brand) 5%, white); }
.border-brand { border-color: color-mix(in srgb, var(--brand) 45%, white) !important; }

/* ---------------- Detail kursus: warna soft + animasi ---------------- */
.course-hero { position: relative; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 5%, #eaf3ff), #f8fbff 65%); }
.course-hero::before, .course-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(8px); animation: blob-float 14s ease-in-out infinite alternate; }
.course-hero::before { width: 320px; height: 320px; right: -80px; top: -120px; background: rgba(96,165,250,.20); }
.course-hero::after { width: 220px; height: 220px; left: 35%; bottom: -150px; background: rgba(34,211,238,.16); animation-delay: -6s; }
.course-hero .container { position: relative; z-index: 1; }
.fact-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border-radius: 999px;
  background: rgba(255,255,255,.8); border: 1px solid var(--line); }
.hero-cover { transition: transform .4s ease; }
.hero-cover:hover { transform: scale(1.02) rotate(-.4deg); }
.lift { transition: transform .2s ease, box-shadow .2s ease; }
.lift:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(15,23,42,.22); }

.schedule-box { border-radius: var(--radius); border: 1px solid #cfe3fb;
  background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 4%, #e6f1ff), #f4f9ff); }
.schedule-box > h2 { color: color-mix(in srgb, var(--brand) 80%, black); }
.batch-item { background: #fff; border: 1px solid #dbe9fb; border-radius: 12px;
  padding: 1rem; margin-bottom: .75rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.batch-item:last-child { margin-bottom: 0; }
.batch-item:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 40%, white);
  box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--brand) 60%, transparent); }
.btn-cta i { display: inline-block; transition: transform .2s ease; }
.btn-cta:hover i { transform: translateX(3px); }
.batch-item.is-open .btn-cta { animation: cta-pulse 2.6s ease-out 1.2s 2; }

.ask-box { border-radius: var(--radius); background: #fff8ec; border: 1px solid #fde4b8; }
.ask-box .text-muted { color: #8a6a3b !important; }
.ask-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; margin-right: .2rem;
  background: #fde9c4; color: #b26a00; animation: ask-wiggle 4s ease-in-out 1.5s infinite; }

/* Muncul saat discroll. Hanya aktif bila JS jalan (html.js-anim) — tanpa JS konten tetap terlihat. */
.js-anim .reveal { opacity: 0; transform: translateY(18px); }
.js-anim .reveal.is-visible { opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--d, 0) * 90ms); }
.hero-in { animation: hero-in .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d, 0) * 110ms); }

@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes blob-float { from { transform: translate(0, 0) scale(1); } to { transform: translate(-30px, 20px) scale(1.12); } }
@keyframes cta-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); }
  100% { box-shadow: 0 0 0 12px transparent; } }
@keyframes ask-wiggle { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-12deg); } 96% { transform: rotate(10deg); } }

@media (prefers-reduced-motion: reduce) {
  .course-hero::before, .course-hero::after, .ask-icon, .batch-item.is-open .btn-cta { animation: none; }
  .js-anim .reveal, .hero-in { opacity: 1; transform: none; animation: none; transition: none; }
}

/* ---------------- Beranda: kartu keunggulan berwarna ---------------- */
.feature-card { --tone: #3b82f6; --tone-2: #60a5fa; --tone-bg: #eff6ff; --tone-line: #dbeafe;
  position: relative; overflow: hidden; padding: 1.75rem 1.5rem; border-radius: 18px;
  background: linear-gradient(160deg, var(--tone-bg), #fff 75%); border: 1px solid var(--tone-line);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.feature-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--tone), var(--tone-2)); }
.feature-card::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent); transform: skewX(-18deg); pointer-events: none; }
.feature-card:hover { transform: translateY(-6px); border-color: var(--tone-2);
  box-shadow: 0 22px 40px -22px color-mix(in srgb, var(--tone) 70%, transparent); }
.feature-card:hover::after { animation: shine .9s ease; }
.feature-card p { color: #475569; }
.feature-num { position: absolute; right: 1.1rem; top: .7rem; font-size: 2.6rem; font-weight: 800; line-height: 1;
  color: var(--tone); opacity: .1; letter-spacing: -.03em; }
.feature-icon-lg { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; font-size: 1.6rem;
  color: #fff; background: linear-gradient(135deg, var(--tone), var(--tone-2));
  box-shadow: 0 12px 22px -10px var(--tone); animation: icon-float 4.5s ease-in-out infinite; }
.feature-icon-lg i { display: inline-block; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.feature-card:hover .feature-icon-lg i { transform: rotate(-12deg) scale(1.18); }
.feature-card.tone-1 { --tone: #0d9488; --tone-2: #2dd4bf; --tone-bg: #f0fdfa; --tone-line: #ccfbf1; }
.feature-card.tone-2 { --tone: #d97706; --tone-2: #fbbf24; --tone-bg: #fffbeb; --tone-line: #fef3c7; }
.feature-card.tone-3 { --tone: #7c3aed; --tone-2: #a78bfa; --tone-bg: #f5f3ff; --tone-line: #ede9fe; }
.feature-card.tone-4 { --tone: #e11d48; --tone-2: #fb7185; --tone-bg: #fff1f2; --tone-line: #ffe4e6; }
.feature-card.tone-5 { --tone: #16a34a; --tone-2: #4ade80; --tone-bg: #f0fdf4; --tone-line: #dcfce7; }
.feature-card.tone-1 .feature-icon-lg { animation-delay: -.8s; }
.feature-card.tone-2 .feature-icon-lg { animation-delay: -1.6s; }
.feature-card.tone-3 .feature-icon-lg { animation-delay: -2.4s; }
.feature-card.tone-4 .feature-icon-lg { animation-delay: -3.2s; }
.feature-card.tone-5 .feature-icon-lg { animation-delay: -4s; }
@keyframes icon-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes shine { to { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
  .feature-icon-lg, .feature-card:hover::after { animation: none; }
  .feature-card:hover, .feature-card:hover .feature-icon-lg i { transform: none; }
}

/* ---------------- Laporan (Phase 8) ---------------- */
.kpi-tile { --k: #2a78d6; position: relative; padding: 1rem 1.1rem; border-top: 3px solid var(--k); }
.kpi-tile .kpi-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  color: var(--k); background: color-mix(in srgb, var(--k) 12%, white); font-size: 1.05rem; }
.kpi-tile .kpi-value { font-size: 1.45rem; font-weight: 800; line-height: 1.15; margin: .25rem 0 .15rem; font-variant-numeric: tabular-nums; }
.kpi-blue { --k: #2a78d6; } .kpi-orange { --k: #eb6834; } .kpi-aqua { --k: #0f9a6a; } .kpi-green { --k: #16a34a; }
.kpi-red { --k: #d03b3b; } .kpi-violet { --k: #7c3aed; } .kpi-amber { --k: #d97706; } .kpi-slate { --k: #475569; }
.kpi-tile:has(.stretched-link):hover { box-shadow: 0 10px 24px -16px rgba(15,23,42,.35); }
.report-link { transition: border-color .15s, transform .15s; }
.report-link:hover { border-color: var(--brand); transform: translateY(-2px); }
.report-link-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.2rem; color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, white); }
.report-table td, .report-table th { font-variant-numeric: tabular-nums; }
.report-table tr.rpt-section td { background: var(--tint); font-weight: 700; color: var(--ink); }
.report-table tr.rpt-subtotal td { font-weight: 700; border-top: 1px solid #cbd5e1; }
.report-table tr.rpt-total td { font-weight: 800; background: #f1f5f9; border-top: 2px solid var(--ink); }
.report-table tr.rpt-muted td { color: var(--muted); }
.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; }

/* ---------------- Tema warna (app/themes.py; dipilih di Profil Lembaga) ----------------
   Latar diberi rona lembut (bukan putih polos), kartu tetap putih agar teks nyaman dibaca;
   warna kuat hanya di sidebar, navigasi portal, dan footer. */
[data-theme="samudra"] {
  --ink: #0d2438; --muted: #587089; --line: #d6e4f0; --canvas: #e9f2fa; --tint: #eef5fb;
  --accent: #22b8cf; --card-shadow: 0 1px 2px rgba(13,58,92,.05), 0 6px 18px -12px rgba(13,58,92,.18);
  --side-bg: linear-gradient(180deg, #0b3a5c 0%, #0c4f6e 60%, #0d5f73 100%); --side-base: #0b3a5c;
  --side-ink: #d4e7f5; --side-muted: #7fb0cf;
  --top-bg: rgba(246,250,253,.82);
  --nav-bg: linear-gradient(90deg, #0b3a5c, #0d5f73); --nav-ink: #e6f2fa;
  --site-bg: #f6fafd; --site-nav-bg: rgba(246,250,253,.88); --hero-base: #eaf4fb;
  --head-bg: linear-gradient(135deg, #e1eefa, #e4f6f7); --footer-bg: #0b2f4a;
}
[data-theme="zamrud"] {
  --ink: #102a22; --muted: #5b7468; --line: #d5e6dc; --canvas: #ebf4ef; --tint: #f0f7f2;
  --accent: #d4a52a; --card-shadow: 0 1px 2px rgba(13,68,54,.05), 0 6px 18px -12px rgba(13,68,54,.18);
  --side-bg: linear-gradient(180deg, #0d4436 0%, #115744 60%, #146650 100%); --side-base: #0d4436;
  --side-ink: #d5ece2; --side-muted: #86b8a3;
  --top-bg: rgba(247,251,248,.82);
  --nav-bg: linear-gradient(90deg, #0d4436, #146650); --nav-ink: #e5f4ec;
  --site-bg: #f6faf7; --site-nav-bg: rgba(246,250,247,.88); --hero-base: #eaf5ee;
  --head-bg: linear-gradient(135deg, #e2f1e8, #f6f1de); --footer-bg: #0c3a2e;
}
[data-theme="senja"] {
  --ink: #2f1b20; --muted: #7d6266; --line: #eddcd2; --canvas: #faf2ec; --tint: #fcf5f0;
  --accent: #f0a43a; --card-shadow: 0 1px 2px rgba(74,32,52,.05), 0 6px 18px -12px rgba(74,32,52,.2);
  --side-bg: linear-gradient(180deg, #4a2034 0%, #5c2738 60%, #6e2f39 100%); --side-base: #4a2034;
  --side-ink: #f3dfe0; --side-muted: #c3949c;
  --top-bg: rgba(253,249,246,.84);
  --nav-bg: linear-gradient(90deg, #4a2034, #6e2f39); --nav-ink: #fbecea;
  --site-bg: #fdf8f4; --site-nav-bg: rgba(253,248,244,.88); --hero-base: #fbefe6;
  --head-bg: linear-gradient(135deg, #f9e6dc, #fbf0dc); --footer-bg: #3f1b2c;
}
[data-theme="anggrek"] {
  --ink: #1f1a38; --muted: #6a6488; --line: #dfdaf0; --canvas: #f2f0fa; --tint: #f6f4fc;
  --accent: #e0609b; --card-shadow: 0 1px 2px rgba(46,32,98,.05), 0 6px 18px -12px rgba(46,32,98,.2);
  --side-bg: linear-gradient(180deg, #2e2062 0%, #3a2878 60%, #47307f 100%); --side-base: #2e2062;
  --side-ink: #e2dcf6; --side-muted: #a197cf;
  --top-bg: rgba(249,248,253,.84);
  --nav-bg: linear-gradient(90deg, #2e2062, #47307f); --nav-ink: #efeafc;
  --site-bg: #f9f8fd; --site-nav-bg: rgba(249,248,253,.88); --hero-base: #f1edfb;
  --head-bg: linear-gradient(135deg, #ebe6fa, #f9e8f1); --footer-bg: #261a52;
}

/* Detail bersama untuk tema berwarna (semua kecuali klasik). */
[data-theme]:not([data-theme="klasik"]) {
  --bs-border-color: var(--line);
  --bs-secondary-color: var(--muted);
}
[data-theme]:not([data-theme="klasik"]) .text-muted { color: var(--muted) !important; }
[data-theme]:not([data-theme="klasik"]) .bo-topbar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}
[data-theme]:not([data-theme="klasik"]) .bo-sidebar .nav-link i { color: var(--gi, inherit); opacity: .95; }
[data-theme]:not([data-theme="klasik"]) .bo-sidebar .nav-link.active i { color: #fff; }
/* Ikon tiap kelompok menu diberi warna pastel berbeda (kelompok terakhir yang cocok menang). */
[data-theme]:not([data-theme="klasik"]) .bo-sidebar .ng-1 ~ .nav-link { --gi: #7dd3fc; }
[data-theme]:not([data-theme="klasik"]) .bo-sidebar .ng-2 ~ .nav-link { --gi: #fcd34d; }
[data-theme]:not([data-theme="klasik"]) .bo-sidebar .ng-3 ~ .nav-link { --gi: #86efac; }
[data-theme]:not([data-theme="klasik"]) .bo-sidebar .ng-4 ~ .nav-link { --gi: #f9a8d4; }
[data-theme]:not([data-theme="klasik"]) .bo-sidebar .ng-5 ~ .nav-link { --gi: #c4b5fd; }
[data-theme]:not([data-theme="klasik"]) .bo-sidebar .ng-6 ~ .nav-link { --gi: #fdba74; }
[data-theme]:not([data-theme="klasik"]) .bo-sidebar .ng-7 ~ .nav-link { --gi: #5eead4; }
[data-theme]:not([data-theme="klasik"]) .bo-sidebar .ng-8 ~ .nav-link { --gi: #e2e8f0; }
/* Kartu statistik berderet: ikon berganti warna. */
[data-theme]:not([data-theme="klasik"]) .row > :nth-child(4n+2) .stat-icon { --si: #0d9488; }
[data-theme]:not([data-theme="klasik"]) .row > :nth-child(4n+3) .stat-icon { --si: #d97706; }
[data-theme]:not([data-theme="klasik"]) .row > :nth-child(4n+4) .stat-icon { --si: #7c3aed; }
/* Navigasi portal pengajar/peserta jadi pita berwarna. */
[data-theme]:not([data-theme="klasik"]) .portal-nav { border-bottom: 0; box-shadow: 0 6px 18px -12px rgba(0,0,0,.45); }
[data-theme]:not([data-theme="klasik"]) .portal-nav .navbar-brand,
[data-theme]:not([data-theme="klasik"]) .portal-nav .nav-link { color: var(--nav-ink); }
[data-theme]:not([data-theme="klasik"]) .portal-nav .nav-link:hover,
[data-theme]:not([data-theme="klasik"]) .portal-nav .nav-link.active { color: #fff; }
[data-theme]:not([data-theme="klasik"]) .portal-nav .nav-link.active { background: rgba(255,255,255,.14); border-radius: 8px; }
[data-theme]:not([data-theme="klasik"]) .portal-nav .navbar-toggler-icon { filter: invert(1) brightness(1.4); }
[data-theme]:not([data-theme="klasik"]) .portal-nav .badge-soft-primary { background: rgba(255,255,255,.18); color: #fff; }
[data-theme]:not([data-theme="klasik"]) .portal-nav .brand-logo { background: #fff; border-radius: 8px; padding: 2px; }
[data-theme]:not([data-theme="klasik"]) .site-nav { border-bottom: 1px solid var(--line); }

/* Pilihan tema di Profil Lembaga */
.theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.theme-option { display: block; cursor: pointer; padding: .55rem; border: 2px solid var(--line); border-radius: 12px;
  background: var(--surface); transition: border-color .15s, transform .15s; }
.theme-option:hover { transform: translateY(-1px); }
.btn-check:checked + .theme-option { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.btn-check:focus-visible + .theme-option { outline: 2px solid var(--brand); outline-offset: 2px; }
.theme-desc { font-size: .72rem; line-height: 1.3; }
.theme-mini { display: flex; height: 62px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0,0,0,.06); }
.theme-mini .tm-side { width: 26%; background: var(--p-side); }
.theme-mini .tm-body { flex: 1; background: var(--p-bg); padding: 6px; display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; }
.theme-mini .tm-bar { width: 100%; height: 7px; border-radius: 4px; background: linear-gradient(90deg, var(--p-brand), var(--p-acc)); }
.theme-mini .tm-card { flex: 1; height: 26px; border-radius: 5px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
[data-theme]:not([data-theme="klasik"]) .bo-sidebar .nav-link.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 34%, transparent), rgba(255,255,255,.05));
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Form bertab: tanda pada tab yang berisi isian bermasalah (app.js). */
.nav-tabs .nav-link.has-error { color: #b42318; }
.nav-tabs .nav-link.has-error::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: .4rem;
  border-radius: 50%; background: #dc2626; vertical-align: middle; }

/* ---------- Halaman bantuan (publik & back office) ----------
   Pola isi: .help-toc (daftar isi, sticky di layar lebar) + .help-sec per topik.
   Langkah bernomor: <ol class="help-steps"><li><b>Judul</b> penjelasan</li></ol>.
   Kotak tips: .help-tip (biru) / .help-warn (kuning). Jalur menu: <span class="help-path">Menu › Sub</span>. */
.help-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 2rem; align-items: start; }
.help-toc { position: sticky; top: 90px; font-size: .9rem; }
.help-toc .toc-title { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: .5rem; }
.help-toc a { display: block; padding: .32rem .7rem; border-left: 2px solid var(--line, #e5e7eb); color: inherit; text-decoration: none; }
.help-toc a:hover { border-left-color: var(--brand); color: var(--brand); }
.help-sec { scroll-margin-top: 90px; margin-bottom: 2.4rem; }
.help-sec > h2 { font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: .55rem; margin-bottom: .4rem; }
.help-sec > h2 .bi { color: var(--brand); }
.help-sec > .lead-sm { color: var(--bs-secondary-color); margin-bottom: 1rem; }
.help-steps { counter-reset: hs; list-style: none; padding: 0; margin: 0 0 1rem; }
.help-steps > li { counter-increment: hs; position: relative; padding: .1rem 0 .85rem 2.6rem; }
.help-steps > li::before { content: counter(hs); position: absolute; left: 0; top: 0; width: 1.85rem; height: 1.85rem;
  border-radius: 50%; display: grid; place-items: center; font-size: .85rem; font-weight: 700; color: #fff; background: var(--brand); }
.help-steps > li > b:first-child { display: block; }
.help-path { display: inline-block; font-size: .82rem; font-weight: 600; padding: .05rem .5rem; border-radius: 6px;
  background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); white-space: nowrap; }
.help-tip, .help-warn { position: relative; border-radius: 10px; padding: .75rem 1rem .75rem 2.5rem; font-size: .92rem; margin: .4rem 0 1rem; }
.help-tip::before, .help-warn::before { position: absolute; left: 1rem; top: .78rem; }
.help-tip { background: #eef6ff; border: 1px solid #cfe3ff; }
.help-warn { background: #fff8e6; border: 1px solid #fde7a8; }
.help-tip::before { content: "\F431"; font-family: bootstrap-icons; color: #2563eb; }
.help-warn::before { content: "\F33A"; font-family: bootstrap-icons; color: #b45309; }
.help-card { border: 1px solid var(--line, #e5e7eb); border-radius: 14px; padding: 1.1rem 1.2rem; background: var(--surface, #fff); height: 100%; }
.help-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: .35rem; }
.help-faq .accordion-button { font-weight: 600; }
@media (max-width: 991.98px) {
  .help-wrap { grid-template-columns: 1fr; }
  .help-toc { position: static; display: flex; flex-wrap: wrap; gap: .3rem; }
  .help-toc .toc-title { width: 100%; }
  .help-toc a { border: 1px solid var(--line, #e5e7eb); border-radius: 999px; padding: .2rem .7rem; }
}

/* Isian anggaran: 12 kolom bulan, kolom akun tetap terlihat saat digeser */
.budget-grid .budget-acc { position: sticky; left: 0; background: var(--bs-body-bg, #fff); z-index: 1; min-width: 220px; max-width: 280px; }
.budget-grid tr.rpt-section td { position: static; }
.budget-grid .budget-cell { min-width: 108px; padding-left: .35rem; padding-right: .35rem; font-variant-numeric: tabular-nums; }
.budget-grid .budget-total { min-width: 124px; }

/* Daftar gaji staf (Phase 10): kolom nama cukup lebar, angka tidak terlipat */
.payroll-grid td:first-child, .payroll-grid th:first-child { min-width: 220px; }
.payroll-grid td, .payroll-grid th { white-space: nowrap; }
.payroll-grid td:first-child { white-space: normal; }