:root{ --brand:#0b6e4f; --brand-light:#12a877; --brand-dark:#083f2c; --sidebar-w:258px; --bg:#f3f6f8; --surface:#ffffff; --text:#232b32; --text-muted:#6b7482; --border:#e7eaee; --shadow:0 2px 10px rgba(20,30,40,.06); --shadow-lg:0 10px 30px rgba(20,30,40,.12); --radius:14px; } /* Pilihan Tema Warna — diterapkan lewat atribut data-accent pada */ [data-accent="blue"]{ --brand:#1450a3; --brand-light:#2f6fd6; --brand-dark:#0b2f66; } [data-accent="purple"]{ --brand:#5b3aa6; --brand-light:#8b6fd1; --brand-dark:#33205e; } [data-accent="gold"]{ --brand:#a3760b; --brand-light:#d6a62f; --brand-dark:#5e4106; } [data-accent="red"]{ --brand:#a31414; --brand-light:#d63b3b; --brand-dark:#5e0b0b; } [data-accent="teal"]{ --brand:#0b8f8a; --brand-light:#25b8b0; --brand-dark:#064f4c; } [data-accent="navy"]{ --brand:#1c2b4a; --brand-light:#33507f; --brand-dark:#0d1526; } [data-theme="dark"]{ --bg:#11161c; --surface:#1a2129; --text:#e7edf2; --text-muted:#93a0ad; --border:#2a333c; --shadow:0 2px 10px rgba(0,0,0,.35); --shadow-lg:0 10px 30px rgba(0,0,0,.5); } *{box-sizing:border-box} body{background:var(--bg);font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:var(--text);transition:background .25s ease,color .25s ease} a{text-decoration:none} .app-wrapper{display:flex;min-height:100vh;} .sidebar{ width:var(--sidebar-w); background:linear-gradient(180deg,var(--brand-dark),var(--brand) 65%,var(--brand-light)); min-height:100vh;position:fixed;top:0;left:0;bottom:0;overflow-y:auto;z-index:1030; transition:transform .25s ease; } .sidebar::-webkit-scrollbar{width:6px} .sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px} .sidebar-brand{display:flex;align-items:center;gap:12px;padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.1)} .brand-badge{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;box-shadow:0 4px 14px rgba(0,0,0,.25)} .sidebar-nav{padding:12px 10px 40px} .nav-section{color:rgba(255,255,255,.42);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin:18px 12px 6px} .sidebar .nav-link{ display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.85); padding:9px 12px;border-radius:9px;font-size:14.5px;margin-bottom:2px;position:relative; transition:background .15s ease,color .15s ease,padding-left .15s ease; } .sidebar .nav-link i{font-size:17px;width:20px;text-align:center;flex-shrink:0} .sidebar .nav-link:hover{background:rgba(255,255,255,.09);color:#fff;padding-left:16px} .sidebar .nav-link.active{background:rgba(255,255,255,.14);color:#fff;font-weight:600;border-left:3px solid #fff;padding-left:9px} .nav-group-toggle{ display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;text-align:left; color:rgba(255,255,255,.85);padding:9px 12px;border-radius:9px;font-size:14.5px;margin-bottom:2px; transition:background .15s ease,color .15s ease; } .nav-group-toggle i:first-child{font-size:17px;width:20px;text-align:center;flex-shrink:0} .nav-group-toggle:hover{background:rgba(255,255,255,.09);color:#fff} .nav-group-toggle.active{background:rgba(255,255,255,.08);color:#fff;font-weight:600} .nav-group-toggle .chevron{margin-left:auto;font-size:12px;transition:transform .2s ease} .nav-group-toggle[aria-expanded="true"] .chevron{transform:rotate(180deg)} .sidebar .nav-link.sub{padding-left:34px;font-size:13.8px} .sidebar-divider{border-color:rgba(255,255,255,.15);margin:14px 10px} .nav-link-wrap{display:flex;align-items:center} .nav-link-wrap .nav-link{flex:1;margin-bottom:0} .fav-star{background:none;border:none;color:rgba(255,255,255,.35);padding:6px 10px;cursor:pointer;font-size:13px;flex-shrink:0} .fav-star:hover{color:#ffd43b} .fav-star.is-fav{color:#ffd43b} .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1020;backdrop-filter:blur(2px)} .app-content{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-width:0;} .topbar{height:62px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1010} .notif-dot{position:absolute;top:-6px;right:-10px;font-size:10px;padding:2px 5px} .avatar-circle{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--brand-light),var(--brand));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px} .theme-toggle{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease} .theme-toggle:hover{background:var(--bg);color:var(--brand)} .theme-swatch{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--border);cursor:pointer;display:inline-block;transition:transform .15s ease} .theme-swatch:hover{transform:scale(1.15)} .theme-swatch.active{box-shadow:0 0 0 2px var(--brand)} .stat-card{border:none;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;background:var(--surface);transition:transform .18s ease,box-shadow .18s ease} .stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)} .stat-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;flex-shrink:0} .stat-card .fs-4{color:var(--text)} .card{border:none;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--surface);color:var(--text)} .hover-lift{transition:transform .18s ease,box-shadow .18s ease} .hover-lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)} .table{color:var(--text)} .table thead th{font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);border-bottom-width:1px;background:var(--bg)} .table td, .table th{vertical-align:middle;border-color:var(--border)} .form-control,.form-select{background:var(--surface);color:var(--text);border-color:var(--border)} .form-control:focus,.form-select:focus{border-color:var(--brand-light);box-shadow:0 0 0 .2rem rgba(11,110,79,.15)} .modal-content{background:var(--surface);color:var(--text)} .dropdown-menu{background:var(--surface);color:var(--text);border-color:var(--border)} .dropdown-item{color:var(--text)} .dropdown-item:hover{background:var(--bg)} .btn-success{background:var(--brand);border-color:var(--brand)} .btn-success:hover{background:var(--brand-dark);border-color:var(--brand-dark)} .badge-menunggu{background:#fff3cd;color:#856404} .badge-dibaca{background:#cfe2ff;color:#084298} .badge-selesai{background:#d1e7dd;color:#0f5132} /* PENTING: animasi ini SENGAJA hanya pakai opacity, TIDAK transform. Kenapa: elemen manapun yang punya properti `transform` aktif (bahkan translateY(0) yang identitas) otomatis jadi "containing block" baru bagi anak position:fixed di dalamnya.
di header.php memakai class ini dan HAMPIR SEMUA modal (Tambah Tamu, Surat Masuk, Pegawai, dst) dirender di dalam
— kalau class ini pakai transform, modal-modal itu akan terjebak di bawah .modal-backdrop dan tombol di dalamnya tak bisa diklik sama sekali. */ .fade-in-up{animation:fadeInOpacity .35s ease both} @keyframes fadeInOpacity{from{opacity:0}to{opacity:1}} @media (max-width: 991.98px){ .sidebar{transform:translateX(-100%)} .sidebar.show{transform:translateX(0)} .app-content{margin-left:0} .sidebar-overlay.show{display:block} } /* ===== Print layout (Surat Resmi) ===== */ @media print{ .no-print{display:none !important} body{background:#fff} .surat-kertas{box-shadow:none !important;margin:0 !important;width:100% !important} } .surat-kertas{ background:#fff;width:210mm;min-height:297mm;margin:20px auto;padding:20mm 22mm; box-shadow:0 2px 16px rgba(0,0,0,.12);font-family:'Times New Roman',Times,serif;color:#000;font-size:12.5pt;line-height:1.45; } .kop-surat{display:flex;align-items:center;gap:12px;border-bottom:3px double #000;padding-bottom:6px;margin-bottom:14px} .kop-surat img{width:64px;height:64px;object-fit:contain;flex-shrink:0} .kop-surat h4,.kop-surat h5{margin:0;text-align:center;white-space:nowrap;font-size:13.5pt} .kop-surat .kop-text{flex:1;text-align:center;min-width:0} .kop-surat .kop-spacer{width:64px;flex-shrink:0} .tbl-data td{padding:1px 6px;vertical-align:top;border:none} .tbl-data td.label{width:220px} .ttd-block{margin-top:26px} .lampiran-kop{font-size:9.5pt;line-height:1.25;text-align:right;margin-bottom:2px} .lampiran-kop .model-tag{font-weight:700;font-size:10.5pt;margin-top:2px} .surat-judul{text-align:center;font-weight:700;text-decoration:underline;margin:2px 0 4px;font-size:13pt} /* ===== Login (Premium) ===== */ .login-page{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden; background:linear-gradient(135deg,var(--brand),var(--brand-dark) 55%,var(--brand-dark))} .login-orb{position:absolute;border-radius:50%;filter:blur(50px);opacity:.35;animation:floatOrb 14s ease-in-out infinite} .login-orb.o1{width:340px;height:340px;background:var(--brand-light);top:-80px;left:-80px} .login-orb.o2{width:260px;height:260px;background:#ffffff;bottom:-60px;right:-40px;animation-delay:2s} .login-orb.o3{width:180px;height:180px;background:#0d6efd;top:40%;right:15%;animation-delay:4s} @keyframes floatOrb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(24px,-28px) scale(1.08)}} .login-card{max-width:940px;width:100%;border:none;border-radius:20px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4);position:relative;z-index:2} .login-side{background:radial-gradient(circle at 30% 20%,var(--brand-light),var(--brand-dark) 75%);color:#fff;padding:48px} .login-form{padding:48px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px)} .brand-badge-lg{width:64px;height:64px;border-radius:16px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:30px} .btn-loading .btn-text{display:none} .btn-loading .spinner-border{display:inline-block !important}