/* ========================================================= SIM Nurul Islam — Design System CSS terpusat: navbar, sidebar, card, table, form, modal. Ditulis di atas AdminLTE 3 + Bootstrap 4 (tidak menimpa struktur, hanya memodernkan tampilan & menghaluskan animasi). ========================================================= */ :root { /* Palet disamakan dengan halaman login (app/views/auth/login.php) */ --brand-50: #eefaf2; --brand-100: #d9f0e1; --brand-300: #7bc79a; --brand-500: #1c9645; --brand-600: #157a38; --brand-700: #12592c; --brand-800: #0f4d2a; --brand-900: #0d3d1f; --brand-gold: #f0c419; /* Aksen "info" (biru-teal) untuk aksi netral (Template, Restore, dsb) — dipilih supaya berdampingan rapi dengan hijau brand, bukan cyan Bootstrap bawaan */ --info-50: #eaf4f8; --info-100: #d3e9f0; --info-500: #2f7191; --info-600: #275f79; --info-700: #1f4c62; --ink-900: #1a2233; --ink-700: #3a4358; --ink-500: #6b7488; --ink-300: #b7bec9; --ink-100: #eef0f4; --surface: #f5f7fb; --surface-card: #ffffff; --border-soft: #e6e9f0; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(20, 30, 60, 0.06); --shadow-md: 0 6px 20px rgba(20, 30, 60, 0.08); --shadow-lg: 0 12px 32px rgba(20, 30, 60, 0.12); --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ---------- Reset ringan & tipografi ---------- */ html { scroll-behavior: smooth; } /* ========================================================= FONT PENGGANTI YANG "DIKUNCI" SEUKURAN INTER --------------------------------------------------------- Kenapa masih kelihatan "berubah font/ukuran" pas pindah menu setelah didiamkan lama: aplikasi ini reload penuh tiap pindah menu, dan font Inter itu dimuat dari Google (server luar) di SETIAP reload — bukan cuma sekali. Kalau pas reload itu Inter belum sempat termuat (jaringan sedang lambat/koneksi baru nyambung lagi), browser terpaksa pakai font cadangan bawaan (mis. Arial) yang bentuk & lebar hurufnya BEDA dari Inter. Jadi antara satu halaman ke halaman lain, tulisan bisa terlihat pakai "font A" lalu "font B" bergantian tergantung sempat- tidaknya Inter termuat saat itu -- itulah yang terlihat seperti "berubah font/ukuran". Solusinya: buat versi Arial yang ukuran & proporsi hurufnya di-set PERSIS SAMA seperti Inter (pakai size-adjust / ascent / descent -- fitur bawaan CSS, bukan font baru). Jadi kalaupun Inter belum sempat termuat, font cadangan yang tampil ukuran & posisinya tetap sama persis -- mata tidak akan menangkap perbedaan apapun, baik lagi dimuat Inter maupun belum. */ @font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } /* ========================================================= SKALA TAMPILAN MENYESUAIKAN UKURAN LAYAR --------------------------------------------------------- Desain ini awalnya "pas" di layar besar (21"+), tapi terlihat kebesaran di laptop 13"-14" walau sudah zoom 100% — karena ukuran browser yang dilaporkan (CSS pixel) di laptop kecil biasanya jauh lebih sempit daripada monitor besar. AdminLTE & Bootstrap 4 memakai satuan "rem" untuk hampir semua padding, margin, dan ukuran font (termasuk gaya inline di dashboard). 1rem = ukuran font . Jadi cukup mengecilkan ukuran font secara bertahap sesuai lebar layar, SELURUH tampilan (padding kartu, ukuran teks, jarak antar elemen) ikut mengecil secara proporsional — tanpa perlu menimpa satu per satu tiap komponen. Breakpoint Bootstrap sendiri (col-md, col-lg, dst) tidak terpengaruh karena itu berbasis lebar layar asli (px), bukan rem — jadi susunan/kolom tetap sama, cuma "kepadatan" visualnya yang menyesuaikan. */ @media (max-width: 1600px) { html { font-size: 15px; } } @media (max-width: 1440px) { html { font-size: 14px; } } @media (max-width: 1366px) { html { font-size: 13px; } } @media (max-width: 1200px) { html { font-size: 12.5px; } } @media (max-width: 991.98px) { html { font-size: 14px; } } /* Turunan lanjutan untuk HP (tablet & sidebar sudah jadi overlay penuh di bawah 992px, lihat blok "Layar kecil" di bawah) — tanpa baris ini, HP 6"-7" dan HP kecil (<400px) memakai ukuran yang sama dengan tablet 10", padahal lebar layarnya jauh berbeda. */ @media (max-width: 767.98px) { html { font-size: 13.5px; } } @media (max-width: 575.98px) { html { font-size: 13px; } } @media (max-width: 400px) { html { font-size: 12.5px; } } body { font-family: 'Inter', 'Inter Fallback', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--ink-900); background-color: var(--surface); -webkit-font-smoothing: antialiased; /* Jaring pengaman: kalau ada satu elemen saja yang melebihi lebar layar, jangan sampai SELURUH halaman ikut bisa di-scroll ke samping. Aman dipakai karena sidebar sudah position:fixed (AdminLTE bawaan) dan tidak terpengaruh oleh potongan ini. */ overflow-x: hidden; } html { overflow-x: hidden; /* Selalu sediakan "ruang" scrollbar vertikal dari awal (baik dipakai atau tidak), supaya saat konten berubah tinggi -- misalnya menu Guru yang loading-nya cuma 1 baris pendek lalu jadi tabel panjang setelah data selesai dimuat -- munculnya scrollbar TIDAK menggeser konten ke kiri secara tiba-tiba. Browser lama yang belum dukung scrollbar-gutter otomatis fallback ke overflow-y: scroll di bawah. */ overflow-y: scroll; scrollbar-gutter: stable; } a { transition: color .15s var(--ease); } /* ---------- Layout dasar ---------- */ .content-wrapper { background-color: var(--surface); } /* ========================================================= SIDEBAR: buka/tutup dengan GESER MURNI (transform), bukan mode "ikon-mini" bawaan AdminLTE. --------------------------------------------------------- Kenapa transform, bukan margin-left/width seperti sebelumnya? margin-left & width itu properti LAYOUT — mengubahnya membuat browser menghitung ulang posisi semua elemen di dalam sidebar, dan gampang "kalah" lawan CSS bawaan AdminLTE yang juga mengubah width/display banyak elemen sekaligus (logo, teks menu, label grup) tiap kali class .sidebar-collapse muncul/hilang — itu sebabnya sebelumnya masih terasa "loncat". transform: translateX() murni operasi lapisan (compositor), TIDAK memicu perhitungan ulang layout sama sekali. Sidebar selalu punya lebar & isi yang identik; yang berpindah cuma satu lapisan utuh (kotak sidebar) ke kiri/kanan layar. Karena itu class "sidebar-mini" juga sengaja dilepas dari (lihat header.php) — supaya AdminLTE tidak lagi mencoba menyusutkan logo / menyembunyikan teks menu sama sekali. */ :root { --sidebar-width: 250px; } /* Sidebar juga sedikit lebih ramping di layar laptop, supaya tidak memakan porsi terlalu besar dari lebar layar yang sempit. */ @media (max-width: 1440px) and (min-width: 992px) { :root { --sidebar-width: 220px; } } @media (max-width: 1200px) and (min-width: 992px) { :root { --sidebar-width: 200px; } } .main-sidebar { width: var(--sidebar-width) !important; /* Kunci margin-left ke 0 SELALU — posisi sidebar 100% dikendalikan lewat transform di bawah, tidak boleh ada properti lain (termasuk CSS bawaan AdminLTE yang lebih spesifik) yang ikut menggeser lewat margin-left, karena itu penyebab sidebar "hilang tanpa animasi" saat ditutup — CSS bawaan AdminLTE menang duluan lewat margin-left (tanpa transisi), padahal rule transform kita di bawah baru sempat jalan belakangan. */ margin-left: 0 !important; transform: translateX(0); transition: transform .3s var(--ease) !important; will-change: transform; } /* Isi sidebar tidak pernah punya transisi/animasi sendiri — memastikan logo, ikon, dan teks menu benar-benar diam di posisi yang sama persis, baik saat sidebar terbuka maupun tertutup. */ .main-sidebar .nav-link p, .main-sidebar .nav-icon, .main-sidebar .brand-text-custom, .main-sidebar .brand-logo-custom, .main-sidebar .brand-link-custom, .main-sidebar .nav-treeview { transition: none !important; animation: none !important; } .content-wrapper, .main-header, .main-footer { transition: margin-left .3s var(--ease) !important; } /* --- Layar besar (>=992px): sidebar mendorong konten --- */ @media (min-width: 992px) { .content-wrapper, .main-header, .main-footer { margin-left: var(--sidebar-width) !important; } body.sidebar-collapse .main-sidebar { transform: translateX(calc(-1 * var(--sidebar-width))) !important; } body.sidebar-collapse .content-wrapper, body.sidebar-collapse .main-header, body.sidebar-collapse .main-footer { margin-left: 0 !important; } } /* --- Layar kecil (<992px): sidebar tampil sebagai overlay penuh, tidak pernah mendorong/menyempitkan konten --- */ @media (max-width: 991.98px) { .main-sidebar { transform: translateX(calc(-1 * var(--sidebar-width))) !important; } body.sidebar-open .main-sidebar { transform: translateX(0) !important; } .content-wrapper, .main-header, .main-footer { margin-left: 0 !important; transition: none; } } /* Lapisan gelap di belakang sidebar, khusus mode HP (<992px) -- dikontrol oleh toggleSidebar di app.js (lihat catatan lengkap di sana). Dibuat dengan opacity + pointer-events (BUKAN display:none) supaya bisa fade in/out mulus dan SIMETRIS baik saat sidebar dibuka maupun ditutup; display:none tidak bisa dianimasikan sehingga akan terasa "patah". */ .sidebar-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 1032; /* di bawah .main-sidebar, di atas .content-wrapper */ opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); } @media (min-width: 992px) { /* Overlay ini cuma relevan untuk mode overlay HP; di layar besar sidebar mendorong konten (bukan menimpa), jadi tidak perlu overlay sama sekali. */ .sidebar-overlay { display: none; } } @media (max-width: 991.98px) { body.sidebar-open .sidebar-overlay { opacity: 1; pointer-events: auto; } } .card, .btn, .modal-content { transition: background-color .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), color .18s var(--ease); } /* Kartu statistik dashboard (angka besar + ikon watermark) — dipaksa pakai satuan rem supaya ikut mengecil bersama font-size di layar kecil, karena ini elemen paling mencolok yang bikin dashboard terasa "raksasa" di laptop. */ .small-box h3 { font-size: 2.1rem; } .small-box .icon { font-size: 4.2rem; top: 0.4rem; right: 0.9rem; } .small-box .inner p { font-size: 1rem; } .nav-sidebar .nav-link { transition: background-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease); } /* ---------- Navbar atas ---------- */ .main-header.navbar { background: #ffffff; border-bottom: 1px solid var(--border-soft); border-top: 3px solid var(--brand-500); box-shadow: var(--shadow-sm); min-height: 60px; padding: 0 .5rem; } /* ========================================================= PERBAIKAN: pita hijau "Selamat Datang" tertimpa header & garis aksen hijau di atas header terlihat "melewati"/menyatu dengan pita hijau di bawahnya. --------------------------------------------------------- Penyebabnya BUKAN box .welcome-banner itu sendiri, tapi jarak yang salah antara header (yang dibuat fixed oleh class bawaan AdminLTE "layout-navbar-fixed") dan .content-wrapper di bawahnya. AdminLTE bawaan mengira tinggi header selalu 3.5rem + 1px (~57px) dan mengunci jarak itu lewat CSS-nya sendiri (margin-top:calc(3.5rem + 1px) pada .content-wrapper). Tapi header kita SENGAJA dibuat lebih tinggi (min-height 60px + border-top hijau 3px sebagai aksen), jadi tingginya beda dari asumsi AdminLTE itu -> 2-3px bagian atas konten (termasuk pita hijau "Selamat Datang") jadi tertutup di belakang header, dan garis aksen hijau di atas header terlihat "menyatu" dengan hijau pita di bawahnya karena jaraknya nyaris nol. Solusi: kunci jarak header<->konten manual sesuai tinggi header YANG SEBENARNYA (var(--header-height)), jangan mengandalkan angka bawaan AdminLTE lagi. !important dipakai karena rule bawaan AdminLTE juga pakai !important/spesifisitas tinggi di sini. */ :root { --header-height: 60px; } body.layout-navbar-fixed .content-wrapper { margin-top: var(--header-height) !important; } /* Logo+nama sekolah (.brand-link-custom) di sidebar ini SUDAH ada di alur normal (bukan fixed) sebelum daftar menu (.sidebar), jadi posisinya sudah otomatis pas di bawah logo tanpa bantuan apa pun. AdminLTE bawaan tetap mengira logo sidebar itu fixed di atas layar (seperti skema aslinya) dan otomatis menambahkan jarak ekstra margin-top:calc(3.5rem + 1px) pada .sidebar untuk "mengalah"-i logo yang fixed itu -- padahal di sini tidak ada logo fixed yang perlu dihindari, jadi jarak itu jadi jarak kosong yang tidak perlu antara nama sekolah dan menu "Dashboard". Dibatalkan di sini. */ body.layout-navbar-fixed .main-sidebar .sidebar { margin-top: 0 !important; } .main-header .nav-link { color: var(--ink-700); border-radius: var(--radius-sm); padding: .5rem .65rem; } .main-header .nav-link:hover { background-color: var(--ink-100); color: var(--ink-900); } /* Tombol hamburger (ikon FontAwesome fa-bars): sebelum FONT IKONNYA selesai dimuat dari server luar, ikon ini bisa tampil kosong/glyph lain dulu lalu "muncul" begitu font-nya siap -- pergantian ukuran kotak ikon itulah yang terlihat sebagai navbar "bergerak", padahal konten di bawahnya sudah tidak (karena sudah dikunci lewat font fallback tadi). Dikasih ukuran kotak yang TETAP di sini supaya ikon boleh muncul belakangan, tapi ruang yang dia tempati tidak pernah berubah -- jadi tidak ada elemen lain yang ikut bergeser. */ .main-header .nav-link[data-widget="pushmenu"] { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; } /* Jaring pengaman tambahan: pastikan navbar atas & sidebar memakai font (dan font cadangan yang sudah dikunci ukurannya) yang PERSIS sama seperti body -- bukan fallback bawaan Bootstrap/AdminLTE yang belum tentu seukuran Inter. */ .main-header, .navbar-user-text, .main-sidebar, .brand-text-custom { font-family: 'Inter', 'Inter Fallback', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif; } .navbar-user-box { border-radius: 999px; padding: .3rem .75rem .3rem .3rem; } .navbar-user-box:hover { background-color: var(--ink-100); } .navbar-user-avatar { width: 34px; height: 34px; border: 2px solid var(--brand-100); } .img-circle.bg-primary.navbar-user-avatar { background: var(--brand-500) !important; } .navbar-logout-btn { color: #d9364a !important; font-weight: 600; border-radius: var(--radius-sm); } .navbar-logout-btn:hover { background-color: #fdeef0; } /* ---------- Sidebar ---------- */ .main-sidebar { background: linear-gradient(180deg, var(--brand-800) 0%, var(--brand-900) 100%); box-shadow: var(--shadow-md); } /* ========================================================= TINGGI & SCROLL SIDEBAR — supaya menu tidak "mentok kebawah" --------------------------------------------------------- Penyebabnya: AdminLTE bawaan menghitung tinggi area menu (.sidebar) dengan calc() berdasarkan tinggi logo/brand BAWAAN (~57px). Brand di aplikasi ini sengaja dibuat lebih tinggi (logo besar + nama sekolah 2 baris), jadi hitungan bawaan itu meleset — sisa ruang untuk daftar menu jadi lebih pendek dari yang sebenarnya tersedia, dan menu paling bawah (Kenaikan & Kelulusan, Data Alumni, dst) jadi terpotong / tidak terjangkau di layar pendek. Solusinya: paksa .main-sidebar jadi kolom flex setinggi layar penuh — bagian logo tetap di atas apa adanya, dan bagian daftar menu mengisi SISA ruang yang tersedia lalu scroll sendiri kalau memang tidak cukup. Jadi menu selalu bisa dijangkau (dengan scroll halus di dalam sidebar saja), tidak pernah terpotong. */ .main-sidebar { display: flex !important; flex-direction: column !important; height: 100vh !important; overflow: hidden !important; } .brand-link-custom { flex: 0 0 auto; } .main-sidebar > .sidebar { flex: 1 1 auto; min-height: 0; height: auto !important; overflow-x: hidden; overflow-y: auto; } .brand-link-custom { display: flex; flex-direction: column; align-items: center; padding: 18px 10px; border-bottom: 1px solid rgba(255,255,255,0.1); text-decoration: none !important; } .brand-logo-custom { width: 52px; height: 52px; object-fit: contain; margin-bottom: 8px; padding: 6px; background: #fff; border-radius: 14px; box-shadow: 0 8px 18px rgba(0,0,0,.25); } .brand-text-custom { font-size: .95rem; font-weight: 700; color: #fff; text-align: center; line-height: 1.25; overflow-wrap: break-word; word-break: break-word; max-width: 100%; } /* Catatan: logo & nama sekolah tidak pernah disusutkan/disembunyikan saat sidebar tertutup — lihat blok "SIDEBAR: buka/tutup dengan GESER MURNI" di atas, supaya isi kotak sidebar tidak pernah terlihat berubah posisi. */ .nav-sidebar { padding: 0 .6rem; } /* Label grup menu ("DATA SEKOLAH", "ADMINISTRASI", "LAINNYA"): dibikin kecil, huruf kapital berspasi, warna redup — supaya jadi pemisah visual yang jelas antar grup, bukan menyatu dengan daftar menu di bawahnya */ .nav-sidebar .nav-header { color: rgba(255,255,255,.32) !important; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 1.1rem .8rem .45rem !important; margin: 0; } .nav-sidebar .nav-header:first-child { padding-top: .5rem !important; } .nav-sidebar > .nav-item { margin-bottom: 0; } .nav-sidebar .nav-link { display: flex; align-items: center; border-radius: var(--radius-sm); color: rgba(255,255,255,.75); padding: .5rem .8rem; line-height: 1.3; } .nav-sidebar .nav-link:hover { background-color: rgba(255,255,255,.06); color: #fff; } .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active, .nav-sidebar .nav-link.active { background: #fff !important; color: var(--brand-700) !important; font-weight: 700; box-shadow: 0 6px 16px rgba(0,0,0,.18); } .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active .nav-icon, .nav-sidebar .nav-link.active .nav-icon { color: var(--brand-700) !important; } .nav-sidebar .nav-link p { white-space: nowrap !important; margin: 0 0 0 .6rem; line-height: 1.3; } .nav-sidebar .nav-icon { width: 20px; text-align: center; flex-shrink: 0; font-size: .85rem; } .nav-icon-box { width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .18s var(--ease); } .nav-link.active .nav-icon-box { background: transparent; } /* ========================================================= SIDEBAR MENYESUAIKAN TINGGI LAYAR (bukan cuma lebar) --------------------------------------------------------- Laptop 13" biasanya punya TINGGI layar jauh lebih pendek (mis. ~768px) dibanding monitor 21" (mis. ~1080px ke atas), walaupun lebar jendela browsernya bisa mirip. Sebelumnya sidebar cuma menyesuaikan LEBAR (--sidebar-width), jadi di laptop 13" ukuran logo/teks/jarak antar-menu tetap sebesar di monitor besar -> otomatis kepanjangan -> muncul scroll & terasa "besar"/kurang pas. Di sini ukuran logo, teks, dan jarak antar- menu ikut mengecil bertahap saat tinggi layar makin pendek, supaya semua menu bisa terlihat penuh tanpa scroll dan enak dipandang di layar kecil maupun besar. */ @media (max-height: 820px) { .brand-link-custom { padding: 12px 10px; } .brand-logo-custom { width: 42px; height: 42px; margin-bottom: 6px; } .brand-text-custom { font-size: .85rem; } .nav-sidebar .nav-header { padding: .7rem .8rem .3rem !important; font-size: .64rem; } .nav-sidebar .nav-header:first-child { padding-top: .4rem !important; } .nav-sidebar .nav-link { padding: .4rem .8rem; } .nav-icon-box { width: 24px; height: 24px; } } @media (max-height: 700px) { .brand-link-custom { padding: 8px 10px; } .brand-logo-custom { width: 36px; height: 36px; margin-bottom: 4px; } .brand-text-custom { font-size: .78rem; } .nav-sidebar .nav-header { padding: .5rem .8rem .2rem !important; font-size: .6rem; } .nav-sidebar .nav-header:first-child { padding-top: .3rem !important; } .nav-sidebar .nav-link { padding: .3rem .8rem; } .nav-sidebar .nav-link p { line-height: 1.15; } .nav-icon-box { width: 21px; height: 21px; } .nav-sidebar .nav-icon { font-size: .76rem; } } /* Submenu: latar sedikit lebih gelap + indent rapi, dan HANYA tampil kalau parent .menu-open — mencegah submenu "nyangkut" kebuka */ .nav-treeview { background: rgba(0,0,0,.15); border-radius: var(--radius-sm); margin: 2px 0 6px 0; overflow: hidden; } .nav-treeview > .nav-item > .nav-link { padding-left: 2.6rem; font-size: .92rem; } /* Panah dropdown berputar halus, dikontrol murni oleh class .menu-open dari AdminLTE JS */ .nav-item > .nav-link > .right { transition: transform .2s var(--ease); } .menu-open > .nav-link > .right { transform: rotate(-90deg); } /* ========================================================= DASHBOARD: kartu statistik custom (menggantikan small-box AdminLTE bawaan) — putih, kotak ikon hijau, teks tren. ========================================================= */ .stat-card { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); height: 100%; transition: box-shadow .18s var(--ease), transform .18s var(--ease); text-decoration: none; display: block; color: inherit; } .stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); color: inherit; } .stat-card .stat-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--brand-50); color: var(--brand-600); display: flex; align-items: center; justify-content: center; font-size: 1rem; margin-bottom: .6rem; } .stat-card .stat-label { margin: 0; font-size: .78rem; color: var(--ink-500); font-weight: 600; } .stat-card .stat-value { margin: .15rem 0 .3rem; font-size: 1.55rem; font-weight: 800; color: var(--ink-900); } .stat-card .stat-link { font-size: .76rem; font-weight: 700; color: var(--brand-600); } .stat-card:hover .stat-link { color: var(--brand-700); } .welcome-banner { border-radius: var(--radius-md); background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-600) 60%, var(--brand-500) 100%); box-shadow: var(--shadow-md); padding: 1.5rem; color: #fff; } .welcome-banner .accent-icon { color: var(--brand-gold); } .welcome-banner .welcome-pill { background: rgba(255,255,255,.18); border-radius: 8px; padding: 10px 15px; display: inline-block; } /* ---------- Card ---------- */ .card { border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .card:hover { box-shadow: var(--shadow-md); } .card-header { background-color: #fff; border-bottom: 1px solid var(--border-soft); border-left: 4px solid var(--brand-500); border-radius: var(--radius-md) var(--radius-md) 0 0 !important; font-weight: 600; } /* ---------- Tombol ---------- */ .btn { border-radius: var(--radius-sm); font-weight: 600; letter-spacing: .01em; box-shadow: 0 3px 8px -3px rgba(20,30,60,.25); } .btn-primary { background: linear-gradient(135deg, var(--brand-600), var(--brand-700)); border-color: var(--brand-700); box-shadow: 0 3px 8px -3px rgba(21,90,44,.5); } .btn-primary:hover { background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); border-color: var(--brand-600); filter: brightness(1.03); } .btn:active, .btn:focus { box-shadow: none !important; } .btn-info { background: linear-gradient(135deg, var(--info-500), var(--info-700)); border-color: var(--info-700); color: #fff; box-shadow: 0 3px 8px -3px rgba(31,76,98,.45); } .btn-info:hover, .btn-info:focus { background: linear-gradient(135deg, var(--info-600), var(--info-700)); border-color: var(--info-700); color: #fff; filter: brightness(1.03); } /* Tombol warna lain (success/warning/danger/secondary) sebelumnya tidak punya bayangan sama sekali — dibuat konsisten dengan primary/info, jarak bayangan dibuat dekat (tidak menyebar jauh dari tombol). */ .btn-success { box-shadow: 0 3px 8px -3px rgba(28,150,69,.45); } .btn-success:hover, .btn-success:focus { filter: brightness(1.04); } .btn-warning { box-shadow: 0 3px 8px -3px rgba(217,164,6,.4); } .btn-warning:hover, .btn-warning:focus { filter: brightness(1.04); } .btn-danger { box-shadow: 0 3px 8px -3px rgba(200,35,51,.4); } .btn-danger:hover, .btn-danger:focus { filter: brightness(1.04); } .btn-secondary { box-shadow: 0 3px 8px -3px rgba(90,98,110,.35); } .btn-secondary:hover, .btn-secondary:focus { filter: brightness(1.04); } /* ========================================================= WARNA "primary" & "info" BAWAAN BOOTSTRAP DISELARASKAN --------------------------------------------------------- Sebelumnya tombol (.btn-primary) sudah memakai hijau brand, tapi elemen lain yang juga berlabel "primary" (border kartu, header modal, ikon, badge) masih memakai biru Bootstrap bawaan sehingga terasa tidak selaras dengan tampilan Dashboard/Login. Di sini SEMUA elemen "primary" disamakan ke hijau brand, dan "info" (dipakai utk aksi netral: Template, Restore, dsb) diganti nuansa biru-teal yang senada, bukan cyan bawaan. */ .text-primary { color: var(--brand-600) !important; } .bg-primary { background-color: var(--brand-600) !important; } .badge-primary { background-color: var(--brand-500) !important; color: #fff !important; } .card-outline.card-primary, .card-primary.card-outline, .card-primary.card-outline-tabs { border-top-color: var(--brand-500) !important; } .text-info { color: var(--info-600) !important; } .bg-info { background-color: var(--info-600) !important; } .badge-info { background-color: var(--info-50) !important; color: var(--info-700) !important; } .card-outline.card-info, .card-info.card-outline { border-top-color: var(--info-500) !important; } /* ---------- Catatan kecil di bawah konten ---------- Pengganti kotak alert besar (Petunjuk/Perhatian) yang dulu memakan tempat di atas tiap menu — sekarang jadi teks kecil tanpa kotak. PENTING: sengaja TIDAK pakai display:flex di sini — flex membuat setiap elemen inline di dalam teks (

, ,
   ) dianggap "kolom" terpisah oleh browser, sehingga
   kalimatnya tercerai-berai alih-alih mengalir sebagai satu
   paragraf. Ikon cukup dibuat inline biasa di depan teks. */
.page-note {
  font-size: .8rem;
  color: var(--ink-500);
  margin: .3rem 0 0;
  line-height: 1.6;
  max-width: 62rem;
}
.page-note i {
  color: var(--brand-500);
  margin-right: .35rem;
}
.page-note.note-warning i { color: #c9880f; }
/* Varian catatan di BAWAH konten (bukan di bawah judul): diberi garis
   pemisah tipis di atasnya supaya rapi dan jelas terpisah dari kartu/tabel. */
/* ============================================================
   SKELETON LOADING TABEL
   Dipasangkan dengan fungsi JS renderTableSkeleton() di app.js.
   Satu gaya ini dipakai di SEMUA menu (Alumni/Guru/Mapel/Siswa/User)
   supaya bentuknya seragam -- ganti di sini saja kalau mau ubah gaya.
   ============================================================ */
@keyframes skeletonShimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton-bar {
  display: inline-block;
  height: .85em;
  width: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #eceff3 25%, #f6f7f9 37%, #eceff3 63%);
  background-size: 400px 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
tr.skeleton-row td {
  vertical-align: middle;
  padding-top: .65rem;
  padding-bottom: .65rem;
}

.page-note.page-note-bottom {
  /* Dipangkas dari 1.1rem/.9rem -> supaya total tinggi halaman yang
     punya catatan ini (mis. menu Guru) tidak melebihi tinggi layar
     dan memicu scrollbar, sementara halaman lain (mis. Siswa) yang
     tidak punya catatan ini muat pas tanpa scroll. */
  margin: .5rem 0 0;
  padding-top: .4rem;
  border-top: 1px dashed var(--border-soft);
}
.page-note strong, .page-note b { color: var(--ink-700); font-weight: 600; }
.page-note code {
  background: var(--brand-50);
  color: var(--brand-700);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: .76rem;
}

/* ---------- Tabel ---------- */
.table thead th {
  background-color: var(--brand-50);
  color: var(--brand-700);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: none;
  vertical-align: middle;
}
.table td { vertical-align: middle; }
.table-hover tbody tr:hover { background-color: var(--brand-50); }

/* ---------- Form ---------- */
.form-control, .custom-file-label, .custom-select {
  border-radius: var(--radius-sm);
  border-color: var(--border-soft);
}
.form-control:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}

/* ---------- Modal ---------- */
.modal-content {
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* =========================================================
   TINGGI HALAMAN KONSISTEN DI SEMUA UKURAN LAYAR
   ---------------------------------------------------------
   AdminLTE bawaan menghitung tinggi minimum .content-wrapper
   pakai JavaScript (window.innerHeight dikurangi tinggi header,
   dihitung sekali saat load). Ini yang bikin scrollbar muncul
   di satu layar tapi tidak di layar lain — karena angkanya
   "dibekukan" dalam pixel dari SATU ukuran layar tertentu, bukan
   dihitung ulang secara proporsional. Ini adalah bug lama yang
   sudah lama dilaporkan di proyek AdminLTE sendiri.

   Solusinya: pakai Flexbox murni via CSS (bukan JS) supaya
   .content-wrapper otomatis mengisi sisa tinggi layar dan footer
   selalu menempel di bawah — hasilnya identik di semua ukuran
   layar & selalu re-kalkulasi otomatis oleh browser, tanpa
   JS/pixel yang bisa "beku"/salah hitung.
   ========================================================= */
body.layout-fixed .wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.layout-fixed .content-wrapper {
  flex: 1 0 auto;
  /* Timpa nilai min-height inline yang disuntik JS AdminLTE (Layout.js) */
  min-height: 0 !important;
}
body.layout-fixed .main-footer {
  flex-shrink: 0;
}

/* ---------- Scrollbar sidebar lebih halus ---------- */
.main-sidebar ::-webkit-scrollbar { width: 6px; }
.main-sidebar ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 10px; }
/* Firefox: tidak dukung ::-webkit-scrollbar, dibikin tipis lewat properti standar */
.main-sidebar .sidebar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }

/* ---------- Responsif: navbar tidak berantakan di HP ---------- */
@media (max-width: 480px) {
  .navbar-user-text,
  .navbar-logout-text { display: none !important; }
  .navbar-user-box { padding: .3rem; }
}

/* =========================================================
   RESPONSIF: KONTEN, TOOLBAR TOMBOL, DAN TABEL DI LAYAR KECIL
   ---------------------------------------------------------
   Tiga masalah yang bikin halaman "kebesaran + pasti scroll"
   di HP/layar sempit:
   1. Padding container/kartu masih dijatah untuk layar besar.
   2. Toolbar tombol (Tambah/Import/Export/Cetak/dst di header
      kartu) tidak dibuat membungkus (wrap) ke baris baru.
   3. Tabel DataTables (Responsive extension) dibungkus lagi
      oleh .table-responsive bawaan Bootstrap — dua-duanya
      sama-sama "mengatur lebar tabel", saling tabrakan, dan
      hasil akhirnya tabel tetap melebar penuh + muncul scroll,
      padahal DataTables Responsive seharusnya melipat kolom
      yang tidak muat jadi tombol "+" (lihat perubahan di
      masing-masing halaman: Siswa/Guru/Mapel/Alumni/User).
   ========================================================= */
@media (max-width: 991.98px) {
  .content-wrapper > .content-header .container-fluid,
  .content-wrapper > .content > .container-fluid {
    padding-left: .85rem;
    padding-right: .85rem;
  }
  .card-body { padding: 1rem; }
  .content-header { padding: .9rem .85rem; }
}

/* Toolbar tombol di header kartu: bungkus ke baris baru & beri jarak
   rapi antar tombol, alih-alih menumpuk mepet atau meluber ke samping */
.card-header,
.card-tools {
  flex-wrap: wrap;
  row-gap: .4rem;
}
.card-header form.row { row-gap: .5rem; margin: 0; }
.card-tools { gap: .35rem; }
.card-tools .btn,
.card-header form .btn { margin-bottom: 0; }

@media (max-width: 575.98px) {
  /* Di HP sempit, tombol toolbar dibuat sama lebar & bertumpuk rapi
     satu kolom, jadi label & ikon tetap terbaca (tidak diperkecil
     paksa sampai jadi tidak jelas) */
  .card-tools { width: 100%; justify-content: flex-start; }
  .card-tools .btn,
  .card-header form .col-md-8 .btn,
  .card-header form .col-md-12 .btn { flex: 1 1 auto; }
}

/* ---------- Tabel DataTables Responsive di layar kecil ----------
   Kolom yang dilipat DataTables Responsive muncul sebagai baris detail
   di bawah baris utama (ikon "+"). Rapikan tampilannya supaya konsisten
   dengan desain kartu/tabel di atas, bukan tampilan bawaan yang kaku. */
table.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dtr-inline.collapsed > tbody > tr > th.dtr-control {
  position: relative;
  padding-left: 1.6rem;
}
table.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
  background-color: var(--brand-500);
  border: none;
  box-shadow: var(--shadow-sm);
  top: 50%;
  left: .5rem;
  transform: translateY(-50%);
}
tr.dtr-details { width: 100%; }
tr.dtr-details li {
  border-bottom: 1px solid var(--border-soft);
  padding: .4rem 0;
}
tr.dtr-details li .dtr-title { font-weight: 600; color: var(--ink-700); }

/* ---------- Baris pengisi (tinggi tabel DataTables stabil) ----------
   Lihat pertahankanTinggiTabelDataTables() di app.js. Baris ini murni
   "ruang kosong" penjaga tinggi -- tidak boleh kelihatan sebagai kotak
   kosong bergaris (table-bordered) atau ikut kena warna belang
   (table-striped) / highlight hover (table-hover), supaya benar-benar
   menyatu dengan latar card, bukan malah terlihat seperti baris rusak. */
table.dataTable > tbody > tr.dtr-filler-row,
table.dataTable > tbody > tr.dtr-filler-row > td {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
table.dataTable.table-hover > tbody > tr.dtr-filler-row:hover > td {
  background-color: transparent !important;
}
tr.dtr-filler-row { pointer-events: none; }

/* Kartu filter/pencarian di atas tabel (dropdown kelas, dsb): jangan
   sampai select/form memaksa lebar minimum yang bikin card meluber */
.card-header select.form-control,
.card-header input.form-control { max-width: 100%; }

/* Modal di HP: konten tidak mepet ke tepi layar */
@media (max-width: 575.98px) {
  .modal-dialog { margin: .6rem; }
}

/* =========================================================
   INTERAKSI KLIK YANG RAPI & KONSISTEN (standar aksesibilitas web)
   ---------------------------------------------------------
   Browser & Bootstrap 4 punya outline/box-shadow fokus bawaan yang
   warnanya sering "nabrak" dengan tema gelap sidebar / warna brand
   kita, jadi terlihat berantakan tiap kali item menu / tombol
   diklik atau ditab. Di sini kita ganti dengan gaya fokus SATU
   warna yang konsisten di seluruh aplikasi, tapi tetap terlihat
   jelas untuk pengguna keyboard (tidak dihilangkan total —
   itu justru melanggar standar aksesibilitas).
   ========================================================= */

/* Hilangkan flash abu-abu/biru bawaan saat tap di HP */
a, button, .nav-link, .btn {
  -webkit-tap-highlight-color: transparent;
}

/* Fokus mouse-klik: senyap (tidak perlu ring, karena sudah ada state :active/:hover) */
a:focus, button:focus, .btn:focus, .nav-link:focus {
  outline: none;
  box-shadow: none;
}

/* Fokus keyboard (Tab): tetap tampil jelas, satu gaya konsisten di semua tempat */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  box-shadow: none;
}
.nav-sidebar .nav-link:focus-visible {
  outline-color: #fff;
}

/* Umpan-balik saat DIKLIK (ditekan) — bikin klik terasa "hidup", bukan datar */
.btn:active {
  transform: translateY(1px) scale(.98);
}
.nav-sidebar .nav-link:active {
  background-color: rgba(255,255,255,.1);
}

/* Cegah teks menu ke-select tanpa sengaja saat klik cepat berulang */
.nav-sidebar, .main-header .navbar-nav {
  user-select: none;
}

/* Kursor pointer konsisten untuk semua elemen yang bisa diklik */
.nav-link, .btn, [data-toggle], [onclick] {
  cursor: pointer;
}

/* =========================================================
   DROPDOWN MODERN (Select2) DI SELURUH APLIKASI
   ---------------------------------------------------------
   Semua