/* SMP Madani — gaya bersama: sistem desain, mode gelap, dan penyesuaian kenyamanan baca. */
:root {
  --page: #f4f6fa; --surface: #ffffff; --surface-2: #f8fafc; --line: #e5e9f0; --ink: #0f172a; --muted: #64748b;
  --ring: #3b82f6; --shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.05);
}
html.dark {
  --page: #0b1220; --surface: #111a2e; --surface-2: #16213a; --line: #24324d; --ink: #e2e8f0; --muted: #94a3b8;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25); color-scheme: dark;
}
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; font-feature-settings: 'cv11', 'ss01'; line-height: 1.6; background: var(--page); }
body.bg-slate-50 { background: var(--page); }
h1, h2, h3 { letter-spacing: -0.01em; }
table { font-variant-numeric: tabular-nums; }

/* Bentuk: sudut lebih rapi dan bayangan lebih lembut. */
html body .rounded-3xl { border-radius: 1rem; }
html body .rounded-2xl { border-radius: .75rem; }
html body .shadow-sm, html body .shadow-xl, html body .shadow-2xl { box-shadow: var(--shadow); }
tbody tr { transition: background-color .12s; }
thead tr { background: var(--surface-2); }
thead th { font-weight: 600; white-space: nowrap; }

/* Fokus keyboard yang jelas namun tidak mencolok. */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
input:focus, select:focus, textarea:focus { border-color: var(--ring); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
html.dark ::-webkit-scrollbar-thumb { background: #334155; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn .25s ease-out forwards; }

/* Halaman depan / login */
.font-display { font-family: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif; font-optical-sizing: auto; letter-spacing: -0.02em; }
@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.hero-in { animation: heroIn .7s cubic-bezier(.2,.7,.2,1) both; }
.lp-input { width: 100%; height: 3rem; padding: 0 1rem 0 2.75rem; border-radius: .75rem; border: 1px solid #cbd5e1; background: #fff; color: #0f172a; font-size: .9375rem; transition: border-color .15s, box-shadow .15s; }
.lp-input-pw { padding-right: 3rem; }
.lp-input::placeholder { color: #94a3b8; }
.lp-input:focus { outline: none; border-color: #0F5FB8; box-shadow: 0 0 0 3px rgba(15,95,184,.2); }
html.dark .lp-input { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.scene-tab { display: block; width: 100%; text-align: left; padding: 1rem 1.25rem; border-left: 3px solid transparent; border-radius: 0 .75rem .75rem 0; transition: background-color .2s, border-color .2s; }
.scene-tab:hover { background: var(--surface-2); }
.scene-tab[aria-selected="true"] { border-left-color: #E0A800; background: var(--surface); box-shadow: var(--shadow); }
.scene-tab .scene-cap { display: none; }
.scene-tab[aria-selected="true"] .scene-cap { display: block; }
.scene-pip { position: relative; width: .5rem; height: .5rem; border-radius: 9999px; background: rgba(255,255,255,.6); transition: width .25s, background-color .25s; }
.scene-pip::before { content: ''; position: absolute; inset: -9px -5px; }
.scene-pip[aria-current="true"] { width: 1.5rem; background: #fff; }

/* Muncul perlahan saat elemen masuk layar (login). */
.reveal { opacity: 0; translate: 0 28px; transition: opacity .7s ease, translate .7s ease, transform .25s ease; }
.reveal.is-visible { opacity: 1; translate: 0 0; }

/* Skeleton saat memuat data. */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton { border-radius: 1rem; background: linear-gradient(90deg, var(--line) 25%, var(--surface-2) 50%, var(--line) 75%); background-size: 800px 100%; animation: shimmer 1.4s infinite linear; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }

/* ---- Mode gelap: menimpa kelas Tailwind yang dipakai di tampilan ---- */
html.dark .bg-white { background-color: var(--surface); }
html.dark .bg-slate-50, html.dark .bg-slate-50\/50 { background-color: var(--surface-2); }
html.dark .bg-slate-100 { background-color: #1c2942; }
html.dark .bg-slate-200 { background-color: #263553; }
html.dark .hover\:bg-slate-50:hover { background-color: #16213a; }
html.dark .hover\:bg-slate-200:hover { background-color: #2b3b5c; }
html.dark .hover\:bg-blue-50:hover { background-color: rgba(59,130,246,.15); }
html.dark .hover\:bg-rose-50:hover { background-color: rgba(244,63,94,.15); }
html.dark .border-slate-100, html.dark .border-slate-200, html.dark .border-slate-300, html.dark .border-slate-800 { border-color: var(--line); }
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line); }
html.dark .text-slate-900, html.dark .text-slate-800 { color: var(--ink); }
html.dark .text-slate-700 { color: #cbd5e1; }
html.dark .text-slate-600 { color: #b6c2d4; }
html.dark .text-slate-500 { color: var(--muted); }
html.dark .text-slate-400 { color: #7c8aa3; }
html.dark .hover\:text-slate-600:hover, html.dark .hover\:text-slate-900:hover { color: #e2e8f0; }
html.dark .text-blue-600, html.dark .text-blue-700, html.dark .text-blue-800 { color: #7db3ff; }
html.dark .text-emerald-600, html.dark .text-emerald-800 { color: #4ade80; }
html.dark .text-amber-600, html.dark .text-amber-800 { color: #fbbf24; }
html.dark .text-rose-600, html.dark .text-rose-700, html.dark .text-rose-800, html.dark .text-rose-900 { color: #fb7185; }
html.dark .text-indigo-800 { color: #a5b4fc; }
html.dark .text-teal-800 { color: #5eead4; }
html.dark .bg-blue-50, html.dark .bg-blue-100 { background-color: rgba(59,130,246,.16); }
html.dark .bg-emerald-50, html.dark .bg-emerald-100 { background-color: rgba(16,185,129,.16); }
html.dark .bg-amber-50, html.dark .bg-amber-100 { background-color: rgba(245,158,11,.16); }
html.dark .bg-rose-50, html.dark .bg-rose-100 { background-color: rgba(244,63,94,.16); }
html.dark .bg-indigo-50, html.dark .bg-indigo-100 { background-color: rgba(99,102,241,.18); }
html.dark .bg-teal-100 { background-color: rgba(20,184,166,.16); }
html.dark .border-rose-200 { border-color: rgba(244,63,94,.35); }
html.dark input, html.dark select, html.dark textarea { color: var(--ink); }
html.dark input::placeholder, html.dark textarea::placeholder { color: #66758f; }
html.dark svg path { stroke: var(--surface); }
html.dark .bg-white\/90 { background-color: rgba(17,26,46,.9); }
html.dark .bg-white\/95 { background-color: rgba(17,26,46,.95); }
html.dark .hover\:text-blue-600:hover { color: #9cc4ff; }
html.dark .hover\:text-rose-600:hover { color: #fda4af; }
html.dark .text-indigo-600 { color: #a5b4fc; }
html.dark .skeleton { opacity: .6; }

/* Cetak: sembunyikan navigasi dan kontrol, tampilkan hanya konten (selalu terang). */
@media print {
  .no-print { display: none !important; }
  .lg\:pl-64 { padding-left: 0 !important; }
  html, body { background: #fff !important; color: #000; }
  main { padding: 0 !important; }
}
[hidden] { display: none !important; }

/* Blog rich text editor and public articles */
#blog-rich-editor:empty:before { content: attr(data-placeholder); color: #94a3b8; pointer-events: none; }
#blog-rich-editor img, .blog-rich-content img { max-width: 100%; height: auto; border-radius: .75rem; margin: 1rem auto; }
.blog-rich-content { color: #334155; line-height: 1.85; overflow-wrap: anywhere; }
.blog-rich-content p { margin: .65rem 0; } .blog-rich-content ul { list-style: disc; padding-left: 1.5rem; } .blog-rich-content ol { list-style: decimal; padding-left: 1.5rem; }
.blog-rich-content h1, .blog-rich-content h2, .blog-rich-content h3 { font-weight: 800; margin: 1rem 0 .5rem; }

/* ---- Dashboard refresh: modern, calm, responsive ---- */
:root { --brand: #2563eb; --brand-soft: #eff6ff; --radius-card: 14px; }
body.bg-slate-100 { background: #f5f7fb; }
.app-sidebar { box-shadow: 8px 0 30px rgba(15,23,42,.08); }
.app-sidebar > div:first-child { min-height: 82px; padding: 1.25rem 1.35rem; }
.app-sidebar nav { padding: 1.25rem .8rem; }
.app-sidebar nav > div { padding: 1.1rem .8rem .45rem; font-size: .65rem; letter-spacing: .12em; }
.app-sidebar nav button { min-height: 43px; padding: .7rem .85rem; border: 1px solid transparent; }
.app-sidebar nav button[aria-current="page"] { background: rgba(59,130,246,.17); border-color: rgba(96,165,250,.17); box-shadow: inset 3px 0 #60a5fa; }
.app-sidebar nav button:hover { transform: translateX(2px); }
.app-topbar { border-color: var(--line); box-shadow: 0 1px 3px rgba(15,23,42,.025); }
.global-search { transition: border-color .15s, box-shadow .15s, background .15s; }
.global-search:focus-within { background: var(--surface); border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(59,130,246,.11); }
.global-search input:focus { outline: none; box-shadow: none; border-color: transparent; }
#main-content { padding: clamp(1rem, 2.2vw, 2rem); }
#main-content > .space-y-6, #main-content > .space-y-5 { max-width: 1600px; margin-inline: auto; }
#main-content .rounded-2xl, #main-content .rounded-3xl { border-radius: var(--radius-card); }
#main-content .border-slate-200 { border-color: #e6eaf1; }
#main-content .shadow-sm { box-shadow: 0 1px 2px rgba(15,23,42,.025), 0 5px 18px rgba(15,23,42,.035); }
#main-content .hover\:-translate-y-0\.5:hover { box-shadow: 0 8px 22px rgba(15,23,42,.07); }
#main-content button, #main-content a { transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
#main-content input:not([type=checkbox]):not([type=radio]), #main-content select, #main-content textarea { min-height: 2.6rem; border-radius: .65rem; }
#main-content table { border-collapse: separate; border-spacing: 0; }
#main-content tbody tr:hover { background: rgba(239,246,255,.68); }
#main-content thead th { padding-top: .85rem; padding-bottom: .85rem; font-size: .72rem; letter-spacing: .025em; color: #64748b; }
#main-content td { vertical-align: middle; }
#main-content .overflow-x-auto, #main-content .overflow-auto { scrollbar-width: thin; }
.sidebar-collapsed .app-sidebar { width: 5.25rem !important; }
.sidebar-collapsed .app-sidebar > div:first-child { justify-content: center; padding-inline: .65rem; }
.sidebar-collapsed .app-sidebar > div:first-child > div:last-child,
.sidebar-collapsed .app-sidebar nav > div,
.sidebar-collapsed .app-sidebar nav button span { display: none !important; }
.sidebar-collapsed .app-sidebar nav { padding-inline: .55rem; }
.sidebar-collapsed .app-sidebar nav button { justify-content: center; padding-inline: .5rem; }
.sidebar-collapsed .app-sidebar nav button i { margin: 0; }
.sidebar-collapsed .lg\:pl-64 { padding-left: 5.25rem !important; }
html.dark body.bg-slate-100 { background: var(--page); }
html.dark .app-sidebar { background: #0b1220; }
html.dark .app-topbar { background: rgba(17,26,46,.94); }
html.dark .global-search { background: var(--surface-2); border-color: var(--line); }
html.dark #main-content .border-slate-200 { border-color: var(--line); }
html.dark #main-content tbody tr:hover { background: rgba(59,130,246,.08); }
@media (max-width: 1023px) { .sidebar-collapsed .app-sidebar { width: 16rem !important; } .sidebar-collapsed .app-sidebar > div:first-child > div:last-child, .sidebar-collapsed .app-sidebar nav > div, .sidebar-collapsed .app-sidebar nav button span { display: revert !important; } .sidebar-collapsed .lg\:pl-64 { padding-left: 0 !important; } }
@media (max-width: 640px) { #main-content { padding: 1rem; } .app-topbar-actions { gap: .35rem; } #main-content .grid { gap: .85rem; } }

/* Madani visual refresh: editorial navy, warm ivory, and restrained teal accents. */
:root {
  --page: #f3f6f8;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --line: #e3e9ed;
  --ink: #142b3a;
  --muted: #647886;
  --ring: #188b83;
  --brand: #126d6a;
  --brand-soft: #e8f5f2;
  --shadow: 0 2px 8px rgba(20,43,58,.035), 0 14px 34px rgba(20,43,58,.055);
  --radius-card: 18px;
}
body { color: var(--ink); background: var(--page); }
body.bg-slate-100, body.bg-slate-50 { background: var(--page); }
::selection { background: #bfe5dc; color: #123c3c; }

/* Main portal shell */
.app-sidebar {
  background: linear-gradient(178deg, #112a3a 0%, #102332 54%, #0d202f 100%) !important;
  box-shadow: 12px 0 34px rgba(14,36,49,.11);
}
.app-sidebar > div:first-child { border-color: rgba(255,255,255,.09); }
.app-sidebar nav > div { color: #91a9b4; font-size: .62rem; letter-spacing: .15em; }
.app-sidebar nav button { min-height: 44px; border-radius: 12px; color: #b3c2ca; }
.app-sidebar nav button[aria-current="page"] {
  color: #fff;
  background: linear-gradient(100deg, rgba(27,145,133,.28), rgba(27,145,133,.12));
  border-color: rgba(83,201,183,.16);
  box-shadow: inset 3px 0 #58c3b4;
}
.app-sidebar nav button[aria-current="page"] i { color: #75d6c6; }
.app-sidebar nav button:hover { background: rgba(255,255,255,.07); color: #fff; }
.app-topbar { background: rgba(255,255,255,.88); border-color: #e4eaed; box-shadow: 0 4px 18px rgba(20,43,58,.035); }
.global-search:focus-within { border-color: #87c7bb; box-shadow: 0 0 0 4px rgba(24,139,131,.09); }
#main-content { background: radial-gradient(ellipse at 90% 0%, rgba(215,238,232,.24), transparent 34%); }
#main-content > .space-y-6, #main-content > .space-y-5 { max-width: 1500px; }
#main-content > .bg-white, #main-content .bg-white.rounded-3xl, #main-content .bg-white.rounded-2xl {
  border-color: #e5ebee;
  box-shadow: 0 2px 8px rgba(20,43,58,.025), 0 16px 38px rgba(20,43,58,.045);
}
#main-content .rounded-2xl, #main-content .rounded-3xl { border-radius: var(--radius-card); }
#main-content .border-slate-200 { border-color: #e4eaed; }
#main-content .bg-blue-600 { background-color: #126d6a; }
#main-content .hover\:bg-blue-700:hover { background-color: #0f5c59; }
#main-content .text-blue-600, #main-content .text-blue-700 { color: #167c74; }
#main-content .bg-blue-50 { background-color: #eaf5f2; }
#main-content .bg-blue-100 { background-color: #d9eee8; }
#main-content .text-blue-800, #main-content .text-blue-900 { color: #185c59; }
#main-content button, #main-content a { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
#main-content button.bg-blue-600, #main-content button.bg-rose-600 { box-shadow: 0 5px 14px rgba(18,109,106,.16); }
#main-content button:hover { transform: translateY(-1px); }
#main-content input:not([type=checkbox]):not([type=radio]), #main-content select, #main-content textarea { border-color: #dce5e9; background-color: #f9fbfc; }
#main-content input:focus, #main-content select:focus, #main-content textarea:focus { background-color: #fff; box-shadow: 0 0 0 4px rgba(24,139,131,.09); }
#main-content table { border-collapse: separate; border-spacing: 0; }
#main-content thead tr { background: #f4f8f8; }
#main-content thead th { color: #6b808b; font-size: .68rem; letter-spacing: .08em; }
#main-content tbody tr:hover { background: rgba(232,245,242,.72); }
#main-content td { border-color: #edf1f3; }
#main-content .text-slate-800 { color: #183342; }
#main-content .text-slate-500 { color: #6b7e89; }
.app-topbar-actions > div { border-color: #e4eaed; background: #f7f9fa; }
.app-topbar-actions > button { border-color: #e4eaed; }

/* Public landing and sign-in */
#app > .bg-slate-50 { background: #f5f7f7; }
#app header[class~="bg-[#071A33]"] { background: #122f41; }
#app header[class~="bg-[#071A33]"] > .bg-gradient-to-r { background-image: linear-gradient(90deg, rgba(12,37,51,.94), rgba(15,54,63,.78), rgba(13,64,68,.45)); }
#portal-akademik > div { border: 1px solid rgba(255,255,255,.65); border-radius: 22px; box-shadow: 0 28px 80px rgba(5,23,34,.28); }
#portal-akademik h2 { color: #173647; }
.lp-input { border-color: #dce5e8; background: #f8fafb; }
.lp-input:focus { border-color: #16867d; box-shadow: 0 0 0 4px rgba(22,134,125,.12); }
#portal-akademik button[type="submit"] { background: linear-gradient(100deg, #126d6a, #188a7c); box-shadow: 0 8px 18px rgba(18,109,106,.2); }
#portal-akademik button[type="submit"]:hover { background: linear-gradient(100deg, #0f5c59, #14776c); }

/* Dialogs and small-screen polish */
#modal-container { background-color: rgba(9,27,38,.62); }
#modal-content { border-radius: 20px; border-color: #e5ebee; box-shadow: 0 24px 80px rgba(7,25,35,.27); }
@media (max-width: 640px) {
  .app-topbar { min-height: 60px; }
  #main-content { padding: 1rem; }
  #main-content > .bg-white { padding: 1.15rem; }
  #portal-akademik > div { padding: 1.4rem; }
}
html.dark {
  --page: #0c1720; --surface: #12212c; --surface-2: #172a36; --line: #2a3d49;
  --ink: #e4edf0; --muted: #9aafb9; --ring: #55b9ad; --brand: #58b9ac; --brand-soft: #173a3b;
  --shadow: 0 2px 8px rgba(0,0,0,.24), 0 14px 34px rgba(0,0,0,.2);
}
html.dark .app-sidebar { background: linear-gradient(178deg, #091720, #0d202b 60%, #091720) !important; }
html.dark .app-topbar { background: rgba(18,33,44,.94); }
html.dark #main-content .bg-blue-600 { background-color: #197c76; }
html.dark #main-content .text-blue-600, html.dark #main-content .text-blue-700 { color: #70d0c2; }
html.dark #main-content .bg-blue-50, html.dark #main-content .bg-blue-100 { background-color: rgba(31,135,124,.17); }
html.dark #main-content .text-blue-800, html.dark #main-content .text-blue-900 { color: #9be0d4; }
html.dark #main-content input:not([type=checkbox]):not([type=radio]), html.dark #main-content select, html.dark #main-content textarea { background-color: #152733; border-color: #314550; }
html.dark #main-content input:focus, html.dark #main-content select:focus, html.dark #main-content textarea:focus { background-color: #182d39; }
html.dark #main-content thead tr { background: #172a36; }
html.dark #main-content tbody tr:hover { background: rgba(41,133,123,.12); }
html.dark #portal-akademik > div { background: #12212c; border-color: #2a3d49; }
html.dark #portal-akademik h2 { color: #e4edf0; }
html.dark .lp-input { background: #172a36; border-color: #314550; color: #e4edf0; }

/* Restore readable light text in the dark dashboard theme. */
html.dark #main-content .text-slate-900,
html.dark #main-content .text-slate-800 { color: #f8fafc; }
html.dark #main-content .text-slate-700 { color: #e2e8f0; }
html.dark #main-content .text-slate-600 { color: #cbd5e1; }
html.dark #main-content .text-slate-500 { color: #aab8c5; }
html.dark #main-content .text-slate-400 { color: #8fa1af; }

/* Keep the report's original blue and slate text palette in light mode. */
#main-content .report-document .text-slate-900 { color: #0f172a; }
#main-content .report-document .text-slate-800 { color: #1e293b; }
#main-content .report-document .text-slate-700 { color: #334155; }
#main-content .report-document .text-slate-600 { color: #475569; }
#main-content .report-document .text-slate-500 { color: #64748b; }
#main-content .report-document .text-blue-800 { color: #1e40af; }
#main-content .report-document .text-blue-700 { color: #1d4ed8; }
#main-content .report-document .text-blue-600 { color: #2563eb; }
html.dark #main-content .report-document .text-slate-900,
html.dark #main-content .report-document .text-slate-800 { color: #e2e8f0; }
html.dark #main-content .report-document .text-slate-700 { color: #cbd5e1; }
html.dark #main-content .report-document .text-slate-600 { color: #b6c2d4; }
html.dark #main-content .report-document .text-slate-500 { color: #94a3b8; }
html.dark #main-content .report-document .text-blue-800,
html.dark #main-content .report-document .text-blue-700,
html.dark #main-content .report-document .text-blue-600 { color: #7db3ff; }

/* Readable rhythm and responsive contact details on the public landing page. */
.school-landing { line-height: 1.65; }
.school-landing p { line-height: 1.7; }
.school-landing .contact-row-value { min-width: 0; overflow-wrap: anywhere; }
.school-landing #tentang-kami img { height: auto; object-fit: contain; }