/* ===================================================================== SIAKAD PESANTREN DIGITAL - Tema Modern Islamic Dashboard ===================================================================== */ :root { --pst-green: #0f1e3d; --pst-green-dark: #0a1428; --pst-green-light: #e2e6ee; --pst-green-rgb: 15 30 61; --pst-green-bright: #93a5c9; --bg-sidebar: #060d1c; --pst-gold: #c9a227; --pst-gold-light: #f6efd6; --sidebar-w: 260px; --sidebar-w-collapsed: 76px; --bg-body: #f3f6f4; --bg-card: #ffffff; --bg-sidebar-active: rgba(255,255,255,.14); --text-main: #283a30; --text-muted: #7b8a82; --border: #e6ece8; --divider: rgba(20,97,63,.22); --shadow: 0 2px 12px rgba(20,60,40,.06); --topbar-h: 64px; } [data-theme="dark"] { --bg-body: #0e1512; --bg-card: #16201b; --text-main: #e4ece7; --text-muted: #93a89d; --border: #25332c; --divider: rgba(140,216,173,.28); --shadow: 0 2px 14px rgba(0,0,0,.4); /* Token BOOTSTRAP SENDIRI ("--bs-*") py default TETAP TERANG (--bs-body-bg:#fff dst) krn app ini tak pernah aktifkan [data-bs-theme=dark] bawaan Bootstrap - efeknya elemen yg warnanya diwariskan dari token itu (PALING KENTARA: sel /
, "--bs-table-bg: var(--bs-body-bg)" di Bootstrap 5.3) tetap terang walau app sudah gelap, badan tabel jadi putih menyala di tengah halaman gelap. Override ke palet gelap APP SENDIRI (bukan aktifkan dark bawaan Bootstrap yg abu-abu netral #212529 - beda nuansa dari hijau-gelap kita, bakal belang). */ --bs-body-bg: var(--bg-card); --bs-body-color: var(--text-main); --bs-emphasis-color: var(--text-main); --bs-secondary-color: var(--text-muted); --bs-border-color: var(--border); --bs-secondary-bg: var(--border); --bs-tertiary-bg: var(--bg-body); } /* ---------- WARNA TEMA (dinamis, dipilih & disimpan tiap user - topbar #themeColorPicker) ---------- 9 pilihan: navy (default) + hijau/biru/merah/kuning/hitam/nila/jingga/pink (lihat pemilih di includes/header.php). Tiap pilihan override 6 custom property yg dipakai luas di CSS ini (side-menu, tombol, ikon, header tabel, strip zebra, hover baris, header modal, tab aktif, dst) - --pst-green* tetap namanya (bukan direname) spy minim ubah di CSS lain, cukup NILAINYA yg jadi dinamis ikut atribut [data-theme-color] di . */ [data-theme-color="navy"] { --pst-green:#0f1e3d; --pst-green-dark:#0a1428; --pst-green-light:#e2e6ee; --pst-green-rgb:15 30 61; --pst-green-rgb-c:15,30,61; --pst-green-bright:#93a5c9; --bg-sidebar:#060d1c; } [data-theme-color="silver"] { --pst-green:#c0c0c0; --pst-green-dark:#777777; --pst-green-light:#ededed; --pst-green-rgb:192 192 192; --pst-green-rgb-c:192,192,192; --pst-green-bright:#d1d1d1; --bg-sidebar:#3d3d3d; } [data-theme-color="gray"] { --pst-green:#808080; --pst-green-dark:#4f4f4f; --pst-green-light:#ededed; --pst-green-rgb:128 128 128; --pst-green-rgb-c:128,128,128; --pst-green-bright:#b8b8b8; --bg-sidebar:#2c2c2c; } [data-theme-color="black"] { --pst-green:#000000; --pst-green-dark:#242424; --pst-green-light:#ededed; --pst-green-rgb:0 0 0; --pst-green-rgb-c:0,0,0; --pst-green-bright:#b8b8b8; --bg-sidebar:#1a1a1a; } [data-theme-color="red"] { --pst-green:#ff0000; --pst-green-dark:#9e0000; --pst-green-light:#f7e3e3; --pst-green-rgb:255 0 0; --pst-green-rgb-c:255,0,0; --pst-green-bright:#f47b7b; --bg-sidebar:#500707; } [data-theme-color="maroon"] { --pst-green:#800000; --pst-green-dark:#4f0000; --pst-green-light:#f7e3e3; --pst-green-rgb:128 0 0; --pst-green-rgb-c:128,0,0; --pst-green-bright:#f47b7b; --bg-sidebar:#2a0303; } [data-theme-color="olive"] { --pst-green:#808000; --pst-green-dark:#4f4f00; --pst-green-light:#f7f7e3; --pst-green-rgb:128 128 0; --pst-green-rgb-c:128,128,0; --pst-green-bright:#f4f47b; --bg-sidebar:#2a2a03; } [data-theme-color="lime"] { --pst-green:#00ff00; --pst-green-dark:#009e00; --pst-green-light:#e3f7e3; --pst-green-rgb:0 255 0; --pst-green-rgb-c:0,255,0; --pst-green-bright:#7bf47b; --bg-sidebar:#075007; } [data-theme-color="green"] { --pst-green:#008000; --pst-green-dark:#004f00; --pst-green-light:#e3f7e3; --pst-green-rgb:0 128 0; --pst-green-rgb-c:0,128,0; --pst-green-bright:#7bf47b; --bg-sidebar:#032a03; } [data-theme-color="aqua"] { --pst-green:#00ffff; --pst-green-dark:#009e9e; --pst-green-light:#e3f7f7; --pst-green-rgb:0 255 255; --pst-green-rgb-c:0,255,255; --pst-green-bright:#7bf4f4; --bg-sidebar:#075050; } [data-theme-color="teal"] { --pst-green:#008080; --pst-green-dark:#004f4f; --pst-green-light:#e3f7f7; --pst-green-rgb:0 128 128; --pst-green-rgb-c:0,128,128; --pst-green-bright:#7bf4f4; --bg-sidebar:#032a2a; } [data-theme-color="blue"] { --pst-green:#0000ff; --pst-green-dark:#00009e; --pst-green-light:#e3e3f7; --pst-green-rgb:0 0 255; --pst-green-rgb-c:0,0,255; --pst-green-bright:#7b7bf4; --bg-sidebar:#070750; } [data-theme-color="fuchsia"] { --pst-green:#ff00ff; --pst-green-dark:#9e009e; --pst-green-light:#f7e3f7; --pst-green-rgb:255 0 255; --pst-green-rgb-c:255,0,255; --pst-green-bright:#f47bf4; --bg-sidebar:#500750; } [data-theme-color="purple"] { --pst-green:#800080; --pst-green-dark:#4f004f; --pst-green-light:#f7e3f7; --pst-green-rgb:128 0 128; --pst-green-rgb-c:128,0,128; --pst-green-bright:#f47bf4; --bg-sidebar:#2a032a; } /* Selaraskan token warna "success" bawaan Bootstrap (dipakai badge/teks/border Aktif-Status di banyak halaman: .bg-success, .text-success, .border-success, & varian -subtle/-emphasis) ke warna tema aktif - SEMUA elemen itu otomatis ikut tanpa perlu ubah tiap file. Cuma "success" yg diselaraskan (bukan danger/warning/info) spy makna warna semantik lain (merah = bahaya, kuning = peringatan) tetap jelas & tak ketuker walau tema yg dipilih user kebetulan merah/kuning. */ [data-theme-color] { --bs-success: var(--pst-green); --bs-success-rgb: var(--pst-green-rgb-c); --bs-success-text-emphasis: var(--pst-green-dark); --bs-success-bg-subtle: var(--pst-green-light); --bs-success-border-subtle: var(--pst-green); } * { box-sizing: border-box; } body { margin: 0; font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; background: var(--bg-body); color: var(--text-main); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: background .25s, color .25s; } a { text-decoration: none; } /* ---------- SIDEBAR ---------- */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); background: var(--bg-sidebar); color: #dff3e9; z-index: 1040; display: flex; flex-direction: column; transition: width .25s, transform .25s; overflow: hidden; } .sidebar .brand { display: flex; align-items: center; gap: 12px; padding: 16px 18px; height: var(--topbar-h); border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; } .sidebar .brand img { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; background: #fff; padding: 3px; flex: 0 0 auto; } .sidebar .brand .title { font-weight: 600; font-size: 15px; line-height: 1.1; } .sidebar .brand .title small { display:block; font-weight: 400; font-size: 11px; color: var(--pst-gold-light); opacity:.85;} .sidebar .nav-menu { list-style: none; margin: 0; padding: 10px 0 40px; overflow-y: auto; flex: 1; } .sidebar .nav-menu::-webkit-scrollbar { width: 6px; } .sidebar .nav-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; } .sidebar .nav-section { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.4); padding: 14px 22px 6px; white-space: nowrap; } .sidebar .nav-item { position: relative; } .sidebar .nav-link { display: flex; align-items: center; gap: 13px; padding: 11px 22px; color: #cfe9dd; font-weight: 500; white-space: nowrap; cursor: pointer; border-left: 3px solid transparent; } .sidebar .nav-link i:first-child { width: 20px; text-align: center; font-size: 16px; flex: 0 0 auto; } .sidebar .nav-link .arrow { margin-left: auto; font-size: 11px; transition: transform .2s; } .sidebar .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; } .sidebar .nav-link.active { background: var(--bg-sidebar-active); color: #fff; border-left-color: var(--pst-gold); } .sidebar .nav-item.open > .nav-link .arrow { transform: rotate(90deg); } .sidebar .submenu { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height .25s; background: rgba(0,0,0,.16); } .sidebar .nav-item.open > .submenu { max-height: 1200px; } .sidebar .submenu .nav-link { padding: 9px 22px 9px 56px; font-size: 13px; font-weight: 400; } /* ---------- LAYOUT ---------- */ .app { margin-left: var(--sidebar-w); transition: margin-left .25s; min-height: 100vh; display: flex; flex-direction: column; } .topbar { height: var(--topbar-h); background: var(--bg-card); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: 14px; padding: 0 22px; } .topbar .btn-toggle { background: none; border: none; font-size: 20px; color: var(--text-main); cursor: pointer; } .topbar .page-title { font-weight: 600; font-size: 16px; margin: 0; } .topbar .spacer { flex: 1; } .topbar .topbar-icon { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-body); color: var(--text-main); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } /* ---------- App-launcher topbar (daftar aplikasi eksternal SSO) ---------- */ .app-launcher-menu { width: 260px; } .app-launcher-icon { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; } /* Aplikasi yg BELUM digrant ke user ini -- tetap ditampilkan (biar tahu apa saja yg ada), tapi diberi tanda gembok + sedikit pudar. Link tetap aktif: klik tetap mengarah ke aplikasinya, akses sesungguhnya diblokir gerbang aplikasi itu sendiri (bukan disembunyikan di sini). */ .app-launcher-locked { opacity: .55; } .app-launcher-locked .app-launcher-icon { filter: grayscale(65%); } /* ---------- PANEL TEMA (warna + mode gelap/terang), dropdown topbar ---------- */ .theme-panel { width: 296px; } .theme-panel-title { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; } .theme-panel-title .sep { margin: 0 3px; opacity: .6; } .theme-swatch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .theme-swatch { aspect-ratio: 1/1; width: 100%; border-radius: 14px; border: 0; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition: transform .15s ease, box-shadow .15s ease; } .theme-swatch:hover { transform: scale(1.06); } .theme-swatch i { opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .15s ease; text-shadow: 0 1px 2px rgba(0,0,0,.35); } .theme-swatch.active { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--text-main); } .theme-swatch.active i { opacity: 1; transform: scale(1); } .topbar .user-chip { display: flex; align-items: center; gap: 10px; cursor: pointer; } .topbar .user-chip img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--pst-green-light); } .topbar .user-chip .uname { font-weight: 600; line-height: 1.1; } .topbar .user-chip .urole { font-size: 11px; color: var(--text-muted); } .content { padding: 24px; padding-bottom: 64px; flex: 1; } /* ---------- FOOTER FREEZE (fixed di bawah) ---------- */ .app-footer { position: fixed; left: var(--sidebar-w); right: 0; bottom: 0; height: 42px; background: var(--bg-card); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 12.5px; color: var(--text-muted); z-index: 1020; transition: left .25s; } body.sidebar-collapsed .app-footer { left: var(--sidebar-w-collapsed); } @media (max-width: 992px) { .app-footer { left: 0; } } /* Mobile: footer_text panjang boleh membungkus rapi (tinggi auto) alih-alih meluber dari kotak 42px */ @media (max-width: 576px) { .app-footer { height: auto; min-height: 40px; line-height: 1.3; font-size: 11px; text-align: center; padding: 7px 16px; padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px)); } .content { padding-bottom: 78px; } } .content-header { margin-bottom: 20px; } .content-header h1 { font-size: 22px; font-weight: 600; margin: 0 0 4px; } .content-header .breadcrumb { margin: 0; font-size: 12.5px; } /* ---------- BODY STATES ---------- */ body.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); } body.sidebar-collapsed .sidebar .brand .title, body.sidebar-collapsed .sidebar .nav-link span, body.sidebar-collapsed .sidebar .nav-link .arrow, body.sidebar-collapsed .sidebar .nav-section { display: none; } body.sidebar-collapsed .sidebar .submenu { display: none; } body.sidebar-collapsed .app { margin-left: var(--sidebar-w-collapsed); } /* ---------- CARDS ---------- */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); } .card-header { background: transparent; border-bottom: 1px solid var(--border); font-weight: 600; padding: 14px 18px; } .card-body { padding: 18px; } .stat-card { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; } .stat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20,60,40,.14); } .card { transition: box-shadow .2s ease; } .stat-card .icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; flex: 0 0 auto; } .stat-card .num { font-size: 26px; font-weight: 700; line-height: 1; } .stat-card .lbl { color: var(--text-muted); font-size: 12.5px; margin-top: 5px; } .bg-grad-green { background: var(--pst-green-dark); } .bg-grad-gold { background: linear-gradient(135deg, #d9b43a, var(--pst-gold)); } .bg-grad-blue { background: linear-gradient(135deg, #3a86c9, #1f5d8f); } .bg-grad-rose { background: linear-gradient(135deg, #d96a8a, #b03a5f); } .badge.bg-rose { background-color: #b03a5f !important; color: #fff; } .bg-grad-teal { background: linear-gradient(135deg, #1aa6a6, #0c6b6b); } /* ---------- BUTTONS / BADGES ---------- */ .btn { border-radius: 8px; font-weight: 600; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.12); } .btn:active { transform: translateY(0); box-shadow: none; } .btn-sm { border-radius: 7px; } .btn-pesantren { background: var(--pst-green); border-color: var(--pst-green); color: #fff; } .btn-pesantren:hover { background: var(--pst-green-dark); border-color: var(--pst-green-dark); color: #fff; box-shadow: 0 4px 14px rgb(var(--pst-green-rgb) / .35); } .btn-pesantren:focus, .btn-pesantren:active, .btn-pesantren:focus-visible, .btn-pesantren.active { background: var(--pst-green-dark) !important; border-color: var(--pst-green-dark) !important; color: #fff !important; } .btn-gold { background: var(--pst-gold); border-color: var(--pst-gold); color: #fff; } .btn-gold:hover { background: var(--pst-gold); border-color: var(--pst-gold); filter: brightness(1.06); color: #fff; box-shadow: 0 4px 14px rgba(201,162,39,.35); } .btn-gold:focus, .btn-gold:active, .btn-gold:focus-visible { background: var(--pst-gold) !important; border-color: var(--pst-gold) !important; color: #fff !important; } .btn-gold:disabled, .btn-gold.disabled { background: var(--pst-gold) !important; border-color: var(--pst-gold) !important; color: #fff !important; opacity: .55; } .btn-pesantren:disabled, .btn-pesantren.disabled { background: var(--pst-green) !important; border-color: var(--pst-green) !important; color: #fff !important; opacity: .55; } .btn-outline-pesantren { color: var(--pst-green); border-color: var(--pst-green); } .btn-outline-pesantren:hover { background: var(--pst-green); color: #fff; } .text-pesantren { color: var(--pst-green) !important; } .badge { border-radius: 20px; font-weight: 600; letter-spacing: .02em; } /* ---------- TABLE / FORM (dark aware) ---------- */ .table { color: var(--text-main); font-size: 13.5px; border-collapse: separate; border-spacing: 0; } .table thead th, table.dataTable thead th { background: var(--pst-green-dark) !important; color: #eafdf3 !important; font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .045em; border: 0 !important; white-space: nowrap; padding: 11px 12px !important; vertical-align: middle; text-align: center; } .table tbody td { padding: 10px 12px !important; vertical-align: middle; border-color: var(--border); } .table tbody tr { transition: background .15s; } .table tbody tr:nth-child(even) > td { background: rgb(var(--pst-green-rgb) / .04); } .table tbody tr:hover > td { background: rgb(var(--pst-green-rgb) / .10); } [data-theme="dark"] .table tbody tr:nth-child(even) > td { background: rgba(255,255,255,.03); } [data-theme="dark"] .table tbody tr:hover > td { background: rgb(var(--pst-green-rgb) / .20); } /* Bootstrap .table-success mengompilasi warna literal (bukan var()), timpa agar ikut tema warna aktif */ .table-success, .table-success > td, .table-success > th { --bs-table-bg: rgb(var(--pst-green-rgb) / .14) !important; --bs-table-striped-bg: rgb(var(--pst-green-rgb) / .18) !important; --bs-table-hover-bg: rgb(var(--pst-green-rgb) / .22) !important; --bs-table-active-bg: rgb(var(--pst-green-rgb) / .26) !important; --bs-table-border-color: rgb(var(--pst-green-rgb) / .30) !important; --bs-table-color: var(--text-main) !important; color: var(--text-main) !important; } /* Checkbox/toggle switch: Bootstrap compile warna checked/focus sbg literal #0d6efd (bukan var()), timpa spy ikut tema warna aktif - dipakai toggle on/off (form-switch) & checkbox centang di mana pun. */ .form-check-input:checked { background-color: var(--pst-green) !important; border-color: var(--pst-green) !important; } .form-check-input[type="checkbox"]:indeterminate { background-color: var(--pst-green) !important; border-color: var(--pst-green) !important; } .form-check-input:focus { border-color: var(--pst-green) !important; box-shadow: 0 0 0 .25rem rgb(var(--pst-green-rgb) / .25) !important; } /* Tabel padat: banyak kolom, tetap muat tanpa scroll horisontal saat sidebar expand */ .tbl-compact { table-layout: fixed; } .tbl-compact thead th { white-space: normal; padding: 8px 8px !important; font-size: 10.5px; line-height: 1.25; } .tbl-compact tbody td { padding: 7px 8px !important; font-size: 12.5px; word-break: break-word; } .tbl-compact tbody td, .tbl-compact tbody td * { white-space: normal !important; } .form-label { font-weight: 500; font-size: 13px; margin-bottom: 4px; } .form-control, .form-select { background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 9px; color: var(--text-main); transition: border-color .18s, box-shadow .18s; } .form-control:focus, .form-select:focus { border-color: var(--pst-green); box-shadow: 0 0 0 .2rem rgb(var(--pst-green-rgb) / .16); } .input-group-text { border: 1.5px solid var(--border); border-radius: 9px; } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: #0f1714; } /* Preview file upload (crud.php type=file) - layout flex didefinisikan DI SINI (bukan utility .d-flex, yg pakai !important & menang lawan inline style="display:none" hasil toggle JS - akibatnya box preview SELALU tampil meski field kosong, gambar sekolah/dokumen lama nyangkut/bocor ke record lain yg dibuka belakangan). JS sekarang set inline display:flex/none secara eksplisit (bukan .show()/.hide() jQuery yg bisa salah tebak nilai "default" tampil), jadi tak ada lagi rule lain yg bisa menimpanya. */ .file-preview { align-items: center; gap: .5rem; } /* ---------- MODAL FUTURISTIK ---------- */ .modal-backdrop.show { opacity: .5; } .modal-backdrop { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .modal-content { background: var(--bg-card); color: var(--text-main); border: 1px solid rgb(var(--pst-green-rgb) / .25); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgb(var(--pst-green-rgb) / .30), 0 6px 18px rgba(0,0,0,.14); } .modal.fade .modal-dialog { transition: transform .25s ease, opacity .25s ease; transform: translateY(18px) scale(.98); } .modal.show .modal-dialog { transform: none; } .modal-header { background: var(--pst-green-dark); color: #fff; border-bottom: 0; padding: 14px 18px; position: relative; } .modal-header::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: linear-gradient(90deg, transparent, var(--pst-gold), transparent); } .modal-header .modal-title { color:#fff; font-weight:600; } .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2.2); opacity:.85; } .modal-header .nav-tabs .nav-link { color: rgba(255,255,255,.8); } .modal-tools { display:flex; gap:6px; align-items:center; } .btn-modal-max, .btn-modal-tool { background: rgba(255,255,255,.18); border:0; color:#fff; width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:13px; line-height:1; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; } .btn-modal-max:hover, .btn-modal-tool:hover { background: rgba(255,255,255,.32); } .modal-dialog.modal-maximized { max-width: 96vw; width: 96vw; margin: 2vh auto; } .modal-dialog.modal-maximized .modal-content { height: 96vh; } .modal-dialog.modal-maximized .modal-body { overflow: auto; } [data-theme="dark"] .modal-content { border-color: rgb(var(--pst-green-rgb) / .4); } /* SweetAlert2 (dipakai SIAKAD.confirmDelete/toast + semua Swal.fire ad-hoc lain) tak pernah ikut tema gelap sendiri - defaultnya SELALU popup putih terang walau app sudah gelap. */ [data-theme="dark"] .swal2-popup { background: var(--bg-card); color: var(--text-main); } [data-theme="dark"] .swal2-title, [data-theme="dark"] .swal2-html-container { color: var(--text-main); } [data-theme="dark"] .swal2-close { color: var(--text-muted); } [data-theme="dark"] .swal2-input, [data-theme="dark"] .swal2-textarea, [data-theme="dark"] .swal2-select { background: #0f1714; color: var(--text-main); border-color: var(--border); } [data-theme="dark"] .swal2-actions .swal2-styled.swal2-cancel { background: #3a4842; } /* modal panjang tidak terpotong: header & footer tetap, body yang scroll. Penting: banyak modal membungkus isi dengan
, jadi form juga harus jadi flex-column agar rantai flex (content > form > body) tetap utuh dan footer/tombol Simpan selalu terlihat. */ .modal-content { max-height: calc(100vh - 3.5rem); display: flex; flex-direction: column; } .modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } .modal-header, .modal-footer { flex-shrink: 0; } .modal-body { overflow-y: auto; min-height: 0; flex: 1 1 auto; } .modal-dialog.modal-maximized .modal-content { max-height: 96vh; } /* ikon maximize & close rapi rata kanan & ukuran sama */ .modal-header { align-items: center; } .modal-header .modal-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; } .modal-header .modal-tools .btn-close { margin: 0; padding: 0; width: 30px; height: 30px; flex: 0 0 auto; opacity: .9; } .modal-header .btn-modal-max, .modal-header .btn-modal-tool { width: 30px; height: 30px; flex: 0 0 auto; } /* Modal bisa digeser (drag) lewat header - lihat assets/js/app.js */ .modal-header { cursor: move; } .modal-header .modal-tools, .modal-header .btn-close, .modal-header button, .modal-header a { cursor: pointer; } /* ---------- TOGGLE FILTER COLLAPSE ---------- */ .filter-toggle { background: none; border: 0; cursor: pointer; } .filter-toggle .filter-caret { transition: transform .2s ease; } .filter-toggle[aria-expanded="true"] .filter-caret { transform: rotate(180deg); } /* ---------- EMPTY STATE (DataTables & tabel umum) ---------- */ .dt-empty { text-align: center; color: var(--text-muted); padding: 30px 12px; } .dt-empty i { font-size: 2.1rem; opacity: .35; display: block; margin-bottom: 10px; } .dt-empty div { font-size: .95rem; } table.dataTable td.dataTables_empty { padding: 0 !important; } /* ---------- PROFIL GURU/USTADZ (futuristik, dipakai modul Guru & Kelas) ---------- */ .gp-wrap{ --gp1:var(--bg-sidebar); --gp2:var(--pst-green); } .gp-hero{ position:relative; border-radius:18px; overflow:hidden; padding:26px 26px 60px; background:radial-gradient(1200px 200px at 10% -40%, rgba(255,255,255,.25), transparent), linear-gradient(125deg, var(--gp1), var(--gp2)); color:#fff; } .gp-hero:after{ content:""; position:absolute; inset:0; background: repeating-linear-gradient(120deg, rgba(255,255,255,.05) 0 2px, transparent 2px 22px); pointer-events:none; } .gp-hero h3{ margin:0; font-weight:700; letter-spacing:.3px; overflow-wrap:anywhere; } .gp-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .gp-chip{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); color:#fff; padding:4px 12px; border-radius:30px; font-size:.78rem; backdrop-filter:blur(4px); } .gp-chip.warn{ background:rgba(255,193,7,.22); border-color:rgba(255,193,7,.5); } .gp-avatar{ width:104px; height:104px; flex:0 0 104px; aspect-ratio:1/1; border-radius:20px; object-fit:cover; border:3px solid rgba(255,255,255,.7); box-shadow:0 10px 30px rgba(0,0,0,.25); background:#fff; } .gp-hero .d-flex > div{ min-width:0; } .gp-cards{ margin-top:-42px; padding:0 6px; position:relative; z-index:2; } .gp-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:16px 18px; box-shadow:0 8px 24px rgba(15,77,51,.07); height:100%; } .gp-card h6{ font-size:.74rem; text-transform:uppercase; letter-spacing:1px; color:var(--pst-green); margin:0 0 12px; display:flex; align-items:center; gap:8px; font-weight:700; } .gp-row{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed var(--border); } .gp-row:last-child{ border-bottom:0; } .gp-row .k{ color:var(--text-muted); font-size:.82rem; } .gp-row .v{ font-weight:600; text-align:right; } .gp-mapel{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; } .gp-mapel .badge{ font-weight:500; } .gp-jen{ font-weight:700; color:var(--pst-green); margin:8px 0 2px; font-size:.85rem; } /* ---------- TABEL HEADER STICKY/FREEZE ---------- */ table.dataTable.fixedHeader-floating { z-index: 1025 !important; box-shadow: 0 6px 16px rgba(0,0,0,.14); } .dataTables_wrapper .dataTables_paginate .page-item.active .page-link { background: var(--pst-green); border-color: var(--pst-green); color: #fff; } .dataTables_wrapper .page-link { color: var(--pst-green-dark); background: var(--bg-card); border-color: var(--border); border-radius: 7px !important; margin: 0 2px; } [data-theme="dark"] .dataTables_wrapper .page-link { color: var(--pst-green-bright); } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border-radius: 9px; } .tbl-freeze { max-height: 70vh; overflow: auto; border-radius: 10px; } .tbl-freeze thead th { position: sticky; top: 0; z-index: 3; background: var(--pst-green-light); } [data-theme="dark"] .tbl-freeze thead th { background: #14241c; } /* header freeze tanpa scroll container sendiri: ikut scroll halaman (1 scrollbar, tidak double-scroll). thead menempel di bawah topbar yang juga sticky. */ .tbl-sticky thead th { position: sticky; top: var(--topbar-h); z-index: 2; } /* di dalam body modal yang scroll, sticky cukup menempel ke atas body (bukan topbar) */ .modal-body .tbl-sticky thead th { top: 0; } /* ---------- TAB (gaya "folder" desktop) — dipakai modul bertab & form santri ---------- */ .kontrol-tabs { display: flex; align-items: flex-end; margin-top: 8px; border-bottom: 2px solid #d7dce3; position: relative; flex-wrap: wrap; padding: 0; list-style: none; } .kontrol-tab { position: relative; padding: 10px 24px; margin-right: 4px; text-decoration: none !important; color: #666; font-size: 13px; font-weight: 600; background: linear-gradient(to bottom, #f8f9fb, #e7ebf0); border: 1px solid #cfd6df; border-bottom: none; border-radius: 12px 12px 0 0; transition: .2s; top: 1px; cursor: pointer; } .kontrol-tab:hover { background: linear-gradient(to bottom, #ffffff, #edf2f7); color: var(--pst-green-dark); } .kontrol-tab.active { background: #fff; color: var(--pst-green-dark); border-top: 3px solid var(--pst-green); border-left: 1px solid #cfd6df; border-right: 1px solid #cfd6df; border-bottom: none; margin-bottom: -2px; z-index: 1; } .kontrol-tab.active:after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; background: #fff; } .kontrol-tab .icon { margin-right: 8px; } [data-theme="dark"] .kontrol-tabs { border-bottom-color: #2a3a31; } [data-theme="dark"] .kontrol-tab { background: linear-gradient(to bottom, #15241d, #0f1c16); border-color: #274034; color: #9fb3a8; } [data-theme="dark"] .kontrol-tab:hover { background: #15241d; color: var(--pst-green-bright); } [data-theme="dark"] .kontrol-tab.active { background: var(--bg-card); color: var(--pst-green-bright); border-top-color: var(--pst-green); border-left-color: #274034; border-right-color: #274034; } [data-theme="dark"] .kontrol-tab.active:after { background: var(--bg-card); } /* tinggi tab-content stabil agar modal tidak memendek saat pindah tab */ .tab-stable { min-height: 360px; } /* ---------- SELECT2 disamakan dengan .form-select (tinggi 38px, dark-aware) ---------- */ .select2-container--default .select2-selection--single { height: calc(1.5em + 0.75rem + 3px); border: 1.5px solid var(--border); border-radius: 9px; background: var(--bg-card); display: flex; align-items: center; overflow: hidden; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: normal; padding: 0 26px 0 10px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-muted); } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; } .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--pst-green); } .select2-dropdown { background: var(--bg-card); border-color: var(--border); } .select2-container--default .select2-results__option { color: var(--text-main); } /* Opsi disabled (mis. checklist exclusivity spt pegawai/master/cuti_level1.php) -- baris di atas men-set warna teks SEMUA opsi ke --text-main termasuk yg disabled, jadi terlihat sama spt yg bisa dipilih. Ditimpa di sini biar keliatan abu2/tak-aktif, sesuai visual disabled standar. */ .select2-container--default .select2-results__option[aria-disabled="true"] { color: var(--text-muted); cursor: not-allowed; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--pst-green); color: #fff; } /* Badge count (mis. "16 siswa" pada select Sub Kelas/Rombel, pola s2count() di banyak halaman) pakai Bootstrap .text-muted yg warnanya di-!important-kan - tanpa ini teks tetap abu2 gelap saat opsi di-hover, jadi nyaris tak kelihatan di tema warna gelap (navy/hitam/biru dsb). */ .select2-container--default .select2-results__option--highlighted[aria-selected] .text-muted { color: rgba(255,255,255,.85) !important; } .select2-search--dropdown .select2-search__field { background: var(--bg-card); color: var(--text-main); border-color: var(--border); } /* ---------- KALENDER JADWAL (grid jam x hari) ---------- */ .jadwal-grid { width:100%; table-layout:fixed; border-collapse:separate; border-spacing:4px; } .jadwal-grid th { background: var(--pst-green); color:#fff; padding:8px; border-radius:8px; font-size:12.5px; text-align:center; } .jadwal-grid td.jam { background: var(--pst-gold-light); color:#7a5c00; font-weight:600; font-size:11.5px; text-align:center; border-radius:8px; } [data-theme="dark"] .jadwal-grid td.jam { background:#2a2410; color:var(--pst-gold); } .jadwal-grid td.jam .jam-ke { display:block; font-size:11.5px; } .jadwal-grid td.jam .jam-waktu { display:block; font-size:10px; font-weight:500; opacity:.8; white-space:nowrap; } .jadwal-cell { background: var(--bg-body); border:1px solid var(--border); border-radius:8px; padding:6px; min-height:64px; vertical-align:top; font-size:11.5px; position:relative; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; } .jadwal-cell:hover { background: var(--pst-green-light); border-color: var(--pst-green); box-shadow: 0 2px 10px rgb(var(--pst-green-rgb) / .15); } [data-theme="dark"] .jadwal-cell:hover { background: rgb(var(--pst-green-rgb) / .14); border-color: var(--pst-green); } .jadwal-empty { color: var(--text-muted); font-size:10.5px; text-align:center; padding-top:14px; } /* satu blok jadwal di dalam sel (mapel / guru+ruang / aksi), dipisah garis tipis */ .jadwal-item { display:flex; flex-direction:column; } .jadwal-item + .jadwal-item { margin-top:6px; padding-top:6px; border-top:1px dashed var(--divider); } .jadwal-item .ji-mapel { font-weight:600; color:var(--pst-green-dark); padding-bottom:4px; margin-bottom:4px; border-bottom:1px solid var(--divider); } [data-theme="dark"] .jadwal-item .ji-mapel { color:var(--pst-green-bright); } .jadwal-item .ji-meta { color: var(--text-muted); font-size:10.5px; display:flex; flex-direction:column; gap:2px; padding-bottom:4px; margin-bottom:4px; border-bottom:1px solid var(--divider); } .jadwal-item .ji-meta i { width:12px; text-align:center; } .jadwal-item .ji-acts { display:flex; justify-content:flex-end; gap:4px; } /* tombol "+" tambah jadwal yang muncul saat kursor di atas sel kosong */ .btn-cell-add { display:none; position:absolute; inset:3px; align-items:center; justify-content:center; gap:6px; border:1.5px dashed var(--pst-green); background:rgb(var(--pst-green-rgb) / .08); color:var(--pst-green-dark); border-radius:8px; cursor:pointer; font-size:12px; font-weight:600; } .jadwal-cell:hover .btn-cell-add { display:flex; } [data-theme="dark"] .btn-cell-add { background:rgb(var(--pst-green-rgb) / .18); color:var(--pst-green-bright); } /* ---------- JADWAL - tampilan List (per hari): pakai style tabel global (.table), ini cuma tambahan kecil ---------- */ .jadwal-list-table td.jl-hari { font-weight:700; color:var(--pst-green-dark); border-right:1px solid var(--border); white-space:nowrap; } [data-theme="dark"] .jadwal-list-table td.jl-hari { color:var(--pst-green-bright); } .jadwal-list-table td.jl-hari i { margin-right:5px; } /* tombol "+ Tambah" pada baris kosong di List (dipakai ulang, class sama dgn tombol tambah di sel Grid) */ .jadwal-list-table .btn-cell-add { display:inline-flex; position:static; inset:auto; align-items:center; gap:5px; border:1.5px dashed var(--pst-green); background:rgb(var(--pst-green-rgb) / .08); color:var(--pst-green-dark); border-radius:6px; padding:2px 10px; cursor:pointer; font-size:11.5px; font-weight:600; } [data-theme="dark"] .jadwal-list-table .btn-cell-add { background:rgb(var(--pst-green-rgb) / .18); color:var(--pst-green-bright); } /* baris ISTIRAHAT (bisa disisipkan/dihapus di antara SETIAP jam pelajaran) di Grid & List Tab Kelas */ .jadwal-istirahat-row td { padding:3px 6px !important; border:none !important; background:transparent !important; } .jadwal-istirahat-row .ist-bar { display:flex; align-items:center; justify-content:center; gap:8px; background: var(--pst-gold-light); color:#7a5c00; border-radius:6px; padding:4px 10px; font-size:11px; font-weight:700; letter-spacing:.3px; } [data-theme="dark"] .jadwal-istirahat-row .ist-bar { background:#2a2410; color:var(--pst-gold); } .jadwal-istirahat-row .ist-bar .btn-ist-remove { border:none; background:transparent; color:inherit; opacity:.65; cursor:pointer; font-size:11px; padding:0 0 0 4px; } .jadwal-istirahat-row .ist-bar .btn-ist-remove:hover { opacity:1; } .jadwal-istirahat-row.jadwal-istirahat-empty .btn-ist-add { display:flex; width:100%; align-items:center; justify-content:center; gap:6px; border:1.5px dashed var(--pst-gold); background:transparent; color: var(--text-muted); border-radius:6px; padding:3px 10px; cursor:pointer; font-size:10.5px; font-weight:600; opacity:.55; } .jadwal-istirahat-row.jadwal-istirahat-empty .btn-ist-add:hover { opacity:1; background:rgba(212,160,23,.08); color:#7a5c00; } [data-theme="dark"] .jadwal-istirahat-row.jadwal-istirahat-empty .btn-ist-add:hover { color:var(--pst-gold); } /* ---------- PREVIEW DOKUMEN (PDF/cetak dalam modal) ---------- */ .desk-btn { white-space: normal; line-height: 1.35; } .desk-btn .desk-label.is-empty { color: var(--text-muted); font-style: italic; } .desk-saved { background: rgb(var(--pst-green-rgb) / .16) !important; transition: background .9s ease; } #docPreviewModal .modal-body { padding:0; background:#525659; position:relative; } #docPreviewModal iframe { width:100%; height:74vh; border:0; display:block; background:#fff; } .modal-dialog.modal-maximized #docPreviewModal iframe { height:84vh; } /* indikator memuat saat dokumen (PDF) sedang dibuat/dimuat di iframe */ .doc-preview-loading { position:absolute; inset:0; z-index:5; display:none; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:#525659; color:#fff; font-size:13.5px; } .doc-preview-loading .spinner-border { width:2.4rem; height:2.4rem; border-width:.28em; color:#fff; } .doc-preview-loading small { color:rgba(255,255,255,.7); } .dropdown-menu { background: var(--bg-card); border-color: var(--border); } .dropdown-item { color: var(--text-main); } .dropdown-item:hover { background: var(--pst-green-light); color: var(--pst-green-dark); } /* ---------- LOGIN ---------- */ .login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; } .login-art { background: linear-gradient(135deg, #14613f, #0a3322); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; text-align: center; position: relative; overflow: hidden; } .login-art::after { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; border: 30px solid rgba(255,255,255,.05); right: -120px; bottom: -120px; } .login-art .pattern { position:absolute; inset:0; opacity:.08; background-image: radial-gradient(circle, #fff 2px, transparent 2px); background-size: 28px 28px; } .login-form { display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--bg-body); } .login-card { width: 100%; max-width: 380px; } .login-logo { width: 80px; height: 80px; border-radius: 18px; background:#fff; padding:6px; object-fit:cover; box-shadow: var(--shadow); } /* ---------- RESPONSIVE ---------- */ .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1035; } @media (max-width: 992px) { .sidebar { transform: translateX(-100%); width: var(--sidebar-w); } body.sidebar-open .sidebar { transform: translateX(0); } body.sidebar-open .sidebar-backdrop { display: block; } .app { margin-left: 0 !important; } body.sidebar-collapsed .sidebar .brand .title, body.sidebar-collapsed .sidebar .nav-link span, body.sidebar-collapsed .sidebar .nav-section { display: revert; } } @media (max-width: 768px) { .login-wrap { grid-template-columns: 1fr; } .login-art { display: none; } .topbar .user-chip .uname, .topbar .user-chip .urole { display: none; } } /* ---------- PRINT ---------- */ @media print { .sidebar, .topbar, .no-print { display: none !important; } .app { margin-left: 0 !important; } .content { padding: 0 !important; } body { background: #fff; } }