/* Tema HK Mandiri untuk AdminLTE 3: warna, tipografi, komponen, dan tampilan mobile. Dimuat setelah adminlte.min.css. Gaya inline lama di navbar dan sidebar ditimpa di sini (dan oleh hk-app.js). */ :root { --hk-accent: #f59e0b; --hk-danger: #dc2626; --hk-info: #0284c7; --hk-bg: #f3f5f7; --hk-surface: #ffffff; --hk-text: #1f2937; --hk-muted: #6b7280; --hk-border: #e5e7eb; --hk-radius: 12px; --hk-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08); --hk-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; /* Palet sistem: Jurnal (E-Finance): hijau. Setiap sistem punya warna identitas sendiri supaya mudah dibedakan; hijau --hk-success tetap dipakai untuk tombol simpan dan angka uang masuk di semua sistem. */ --hk-primary: #0e7a3c; --hk-primary-dark: #0a5c2d; --hk-primary-light: #13994b; --hk-primary-2: #22c55e; --hk-primary-soft: #e8f5ed; --hk-sidebar: #0c2a1b; --hk-sidebar-hover: #134029; --hk-sidebar-text: #d6e4dc; --hk-sidebar-icon: #9fc4ae; --hk-sidebar-muted: #7fa892; --hk-ring: rgba(14, 122, 60, .15); --hk-glow: rgba(10, 92, 45, .25); --hk-success: #0e7a3c; --hk-success-dark: #0a5c2d; } /* Dasar */ body, .main-header, .main-sidebar, .content-wrapper, .main-footer, .btn, .form-control, .table { font-family: var(--hk-font) !important; } body { color: var(--hk-text); background: var(--hk-bg); -webkit-font-smoothing: antialiased; } .content-wrapper { background: var(--hk-bg) !important; } a { color: var(--hk-primary); } a:hover { color: var(--hk-primary-dark); } h1, h2, h3, h4, h5, .card-title { letter-spacing: -.01em; } /* Bilah atas */ .main-header.navbar { background: linear-gradient(90deg, var(--hk-primary-dark), var(--hk-primary)) !important; border-bottom: 0 !important; box-shadow: 0 2px 8px var(--hk-glow); min-height: 56px; } .main-header .nav-link, .main-header .nav-link i { color: #fff !important; } .main-header .hk-judul-halaman { color: #fff; font-weight: 600; font-size: 15px; align-self: center; margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; } .main-header .hk-pengguna { color: rgba(255, 255, 255, .9); font-size: 13px; align-self: center; padding: 0 12px; } /* Sidebar */ .main-sidebar { background: var(--hk-sidebar) !important; } .main-sidebar .brand-link { border-bottom-color: rgba(255, 255, 255, .08) !important; } .main-sidebar .user-panel { border-bottom-color: rgba(255, 255, 255, .08) !important; } .nav-sidebar > .nav-item { background: transparent !important; margin: 2px 6px; } .nav-sidebar .nav-link { background: transparent !important; color: var(--hk-sidebar-text) !important; font-weight: 500 !important; border-radius: 10px !important; padding: 9px 12px; display: flex; align-items: center; gap: 2px; } .nav-sidebar .nav-link p { color: inherit !important; font-size: 13.5px; } .nav-sidebar .nav-link .nav-icon { color: var(--hk-sidebar-icon) !important; } .nav-sidebar .nav-link:hover { background: var(--hk-sidebar-hover) !important; color: #fff !important; } .nav-sidebar .nav-link.active, .nav-sidebar .nav-link.hk-aktif { background: var(--hk-primary) !important; color: #fff !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); } .nav-sidebar .nav-link.active .nav-icon, .nav-sidebar .nav-link.hk-aktif .nav-icon { color: #fff !important; } .nav-sidebar .nav-treeview { padding-left: 6px; } .nav-sidebar .nav-treeview .nav-link { font-size: 13px; } /* Titik warna menggantikan latar pastel lama, supaya pengguna tetap mengenali menunya */ .nav-sidebar .nav-link[data-hk-warna]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; margin-left: auto; background: var(--hk-warna); flex: 0 0 8px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .08); } .sidebar-collapse .nav-sidebar .nav-link[data-hk-warna]::after { display: none; } /* Kartu */ .card { border: 1px solid var(--hk-border) !important; border-radius: var(--hk-radius) !important; box-shadow: var(--hk-shadow) !important; overflow: hidden; } .card-header { background: var(--hk-surface) !important; border-bottom: 1px solid var(--hk-border) !important; padding: 14px 18px; } .card-header .card-title, .card-header h3 { font-size: 16px !important; font-weight: 600 !important; color: var(--hk-text) !important; } .card[class*="card-outline"] { border-top: 3px solid var(--hk-primary) !important; } .card-body { padding: 18px; } /* Form */ .form-control, .custom-select, .select2-container--default .select2-selection--single { border-radius: 10px !important; border-color: #d1d5db !important; min-height: 40px; } .form-control:focus, .custom-select:focus { border-color: var(--hk-primary) !important; box-shadow: 0 0 0 3px var(--hk-ring) !important; } label, .col-form-label { font-size: 12.5px; font-weight: 600 !important; color: #374151; text-transform: uppercase; letter-spacing: .02em; } .hk-rupiah { display: block; margin-top: 4px; font-size: 12.5px; color: var(--hk-primary-dark); font-weight: 600; } .hk-rupiah:empty { display: none; } .form-group { margin-bottom: 14px; } /* Tombol */ .btn { border-radius: 10px !important; font-weight: 600 !important; padding: 8px 16px; transition: transform .05s ease, box-shadow .15s ease; } .btn:active { transform: translateY(1px); } .btn-sm, .btn-xs { padding: 4px 10px; border-radius: 8px !important; } .btn-primary { background: var(--hk-info) !important; border-color: var(--hk-info) !important; } .btn-success { background: var(--hk-success) !important; border-color: var(--hk-success) !important; } .btn-success:hover { background: var(--hk-success-dark) !important; } .btn-warning { background: var(--hk-accent) !important; border-color: var(--hk-accent) !important; color: #1f2937 !important; } .btn-danger { background: var(--hk-danger) !important; border-color: var(--hk-danger) !important; } .btn.hk-memproses { opacity: .75; pointer-events: none; } .btn.hk-memproses::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: hk-putar .7s linear infinite; } @keyframes hk-putar { to { transform: rotate(360deg); } } /* Tabel */ .table { color: var(--hk-text); font-size: 13.5px; margin-bottom: 0; } .table thead th { background: #f9fafb; color: #4b5563; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--hk-border) !important; border-top: 0 !important; white-space: nowrap; } .table td, .table th { vertical-align: middle !important; border-color: var(--hk-border) !important; } .table-hover tbody tr:hover, .table tbody tr:hover { background: var(--hk-primary-soft); } .table-striped tbody tr:nth-of-type(odd) { background: #fafbfc; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border-radius: 8px; border: 1px solid #d1d5db; padding: 4px 8px; } .page-item.active .page-link { background: var(--hk-primary) !important; border-color: var(--hk-primary) !important; } /* Badge dan pesan */ .badge { border-radius: 999px; padding: 5px 10px; font-weight: 600; } .alert { border-radius: var(--hk-radius); border: 0; } .hk-toast { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 2000; background: #111827; color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px; box-shadow: 0 10px 25px rgba(0, 0, 0, .25); max-width: calc(100vw - 32px); } .hk-toast.hk-peringatan { background: #92400e; } /* Modal */ .modal-content { border-radius: 16px !important; border: 0 !important; } .modal-header { border-bottom: 1px solid var(--hk-border); } /* Footer */ .main-footer { background: var(--hk-surface) !important; color: var(--hk-muted) !important; border-top: 1px solid var(--hk-border) !important; font-weight: 500 !important; } /* Beranda */ .hk-sapa { background: linear-gradient(120deg, var(--hk-primary-dark), var(--hk-primary)); color: #fff; border-radius: 16px; padding: 22px; margin-bottom: 18px; } .hk-sapa h2 { font-size: 22px; font-weight: 700; margin: 0 0 4px; } .hk-sapa p { margin: 0; opacity: .9; } .hk-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin-bottom: 18px; } .hk-kpi a { display: block; background: var(--hk-surface); border: 1px solid var(--hk-border); border-radius: 14px; padding: 16px; color: var(--hk-text); box-shadow: var(--hk-shadow); text-decoration: none; } .hk-kpi a:hover { border-color: var(--hk-primary); } .hk-kpi .hk-angka { font-size: 26px; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hk-kpi .hk-angka.hk-uang { font-size: 19px; padding-top: 5px; } .hk-kpi .hk-angka.hk-minus { color: var(--hk-danger); } .hk-kpi .hk-ket { font-size: 12.5px; color: var(--hk-muted); margin-top: 4px; } .hk-kpi .hk-perlu { color: var(--hk-accent); } .hk-pintasan { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; } .hk-pintasan a { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; min-height: 92px; background: var(--hk-surface); border: 1px solid var(--hk-border); border-radius: 14px; color: var(--hk-text); font-weight: 600; font-size: 13px; text-decoration: none; box-shadow: var(--hk-shadow); } .hk-pintasan a:hover { border-color: var(--hk-primary); background: var(--hk-primary-soft); } .hk-pintasan i { font-size: 20px; color: var(--hk-primary); } /* Bilah bawah khusus mobile */ .hk-bawah { display: none; } @media (max-width: 767.98px) { .content-wrapper > .content, .content-wrapper > section.content { padding: 8px 6px 84px !important; } .content-header { padding: 10px 8px 0 !important; } .content-header h1 { font-size: 18px !important; } .card-body { padding: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .card-header { padding: 12px; } .table { font-size: 13px; } .table td, .table th { white-space: nowrap; } /* 16px mencegah zoom otomatis iPhone saat mengetik */ .form-control, .custom-select, input, select, textarea { font-size: 16px !important; } .form-control { min-height: 44px; } .btn { min-height: 42px; } .btn-sm, .btn-xs { min-height: 34px; } .form-horizontal .form-group.row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; } .form-horizontal .col-form-label { padding-bottom: 4px; } .main-footer { display: none; } .main-header .hk-pengguna { display: none; } .modal-dialog { margin: 8px; } .hk-sapa { border-radius: 14px; padding: 18px; } .hk-sapa h2 { font-size: 19px; } .hk-bawah { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; height: 64px; background: #fff; border-top: 1px solid var(--hk-border); box-shadow: 0 -4px 14px rgba(0, 0, 0, .06); padding-bottom: env(safe-area-inset-bottom); } .hk-bawah a, .hk-bawah button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--hk-muted); background: none; border: 0; text-decoration: none; } .hk-bawah i { font-size: 18px; } .hk-bawah .hk-utama { color: var(--hk-primary); } } @media print { .main-header, .main-sidebar, .main-footer, .hk-bawah, .hk-toast { display: none !important; } .content-wrapper { margin: 0 !important; background: #fff !important; } .card { box-shadow: none !important; border: 0 !important; } } /* Halaman transaksi (contoh: transaksi_realisasi.php): panel, grid form, filter, ringkasan, dan tabel .hk-tabel yang berubah menjadi kartu di layar HP (label kolom dari data-label). */ .hk-halaman { max-width: 1320px; margin: 0 auto; padding-top: 14px; } .hk-panel { background: var(--hk-surface); border: 1px solid var(--hk-border); border-radius: var(--hk-radius); box-shadow: var(--hk-shadow); margin-bottom: 16px; } .hk-panel-kepala { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--hk-border); } .hk-panel-kepala h2 { font-size: 16px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; } .hk-panel-kepala h2 i { color: var(--hk-primary); } .hk-panel-kepala p { margin: 2px 0 0; color: var(--hk-muted); font-size: 12.5px; } .hk-panel-isi { padding: 18px; } .hk-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin-bottom: 16px; } .hk-info > div { background: var(--hk-surface); border: 1px solid var(--hk-border); border-radius: var(--hk-radius); padding: 12px 16px; box-shadow: var(--hk-shadow); } .hk-info small { display: block; color: var(--hk-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-bottom: 2px; } .hk-info strong { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; } .hk-info .hk-uang { color: var(--hk-success); } .hk-info .hk-minus { color: var(--hk-danger); } .hk-form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 16px; } .hk-form-grid > * { grid-column: span 12; min-width: 0; } .hk-form-grid > .hk-k2 { grid-column: span 2; } .hk-form-grid > .hk-k3 { grid-column: span 3; } .hk-form-grid > .hk-k4 { grid-column: span 4; } .hk-form-grid > .hk-k5 { grid-column: span 5; } .hk-form-grid > .hk-k6 { grid-column: span 6; } .hk-form-grid > .hk-k8 { grid-column: span 8; } .hk-form-grid label { font-size: 12px; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; } .hk-form-grid label .hk-wajib { color: var(--hk-danger); } .hk-form-aksi { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; padding-top: 2px; } .hk-form-aksi .btn { min-width: 150px; } .hk-ringkas { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: 13px; color: var(--hk-muted); margin: 4px 0 12px; } .hk-ringkas strong { color: var(--hk-text); } .hk-tabel-wrap { border: 1px solid var(--hk-border); border-radius: var(--hk-radius); overflow-x: auto; background: var(--hk-surface); transition: opacity .15s; } .hk-tabel-wrap.hk-memuat, .hk-memuat { opacity: .45; pointer-events: none; } table.hk-tabel { width: 100%; border-collapse: collapse; } .hk-tabel thead th { background: #f8fafc; color: #475569; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--hk-border); text-align: left; white-space: nowrap; } .hk-tabel td { padding: 11px 12px; border-bottom: 1px solid var(--hk-border); vertical-align: top; font-size: 13.5px; } .hk-tabel tbody tr:last-child td { border-bottom: 0; } .hk-tabel tbody tr:hover { background: var(--hk-primary-soft); } .hk-tabel .hk-kanan { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .hk-tabel .hk-uang { font-weight: 700; } .hk-tabel .hk-redup { color: var(--hk-muted); font-size: 12px; display: block; } .hk-tabel tfoot td { background: #f8fafc; font-weight: 700; border-top: 1px solid var(--hk-border); border-bottom: 0; } .hk-label { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--hk-primary-soft); color: var(--hk-primary-dark); white-space: nowrap; } .hk-label.hk-biru { background: #e0f2fe; color: #075985; } .hk-label.hk-kuning { background: #fef3c7; color: #92400e; } .hk-aksi { display: flex; gap: 6px; justify-content: flex-end; } .hk-aksi a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--hk-border); color: var(--hk-text); background: var(--hk-surface); } .hk-aksi a:hover { border-color: var(--hk-primary); color: var(--hk-primary); } .hk-aksi a.hk-hapus:hover { border-color: var(--hk-danger); color: var(--hk-danger); } .hk-kosong { text-align: center; padding: 40px 12px; color: var(--hk-muted); } .hk-kosong i { font-size: 28px; display: block; margin-bottom: 8px; color: #cbd5e1; } .hk-paging { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; } .hk-paging a, .hk-paging span { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border-radius: 8px; border: 1px solid var(--hk-border); background: var(--hk-surface); color: var(--hk-text); font-weight: 600; cursor: pointer; text-decoration: none; } .hk-paging a:hover { border-color: var(--hk-primary); color: var(--hk-primary); } .hk-paging .hk-aktif { background: var(--hk-primary); border-color: var(--hk-primary); color: #fff; } .hk-paging .hk-mati { color: #cbd5e1; cursor: default; } .hk-tabel .hk-aksi a span { display: none; } .hk-hanya-hp { display: none !important; } @media (max-width: 991.98px) { .hk-form-grid > .hk-k2, .hk-form-grid > .hk-k3, .hk-form-grid > .hk-k4, .hk-form-grid > .hk-k5, .hk-form-grid > .hk-k8 { grid-column: span 6; } } @media (max-width: 767.98px) { .hk-halaman { padding-top: 6px; } .hk-panel-kepala, .hk-panel-isi { padding: 12px; } .hk-form-grid > * { grid-column: span 12 !important; } .hk-form-aksi .btn { flex: 1 1 100%; } .hk-info { grid-template-columns: 1fr 1fr; gap: 8px; } .hk-info strong { font-size: 15px; } /* Tabel menjadi kartu: satu baris = satu kartu, judul kolom tampil sebagai label. */ .hk-tabel-wrap { border: 0; background: transparent; overflow: visible; } table.hk-tabel thead { display: none; } table.hk-tabel, .hk-tabel tbody, .hk-tabel tfoot, .hk-tabel tr, .hk-tabel td { display: block; width: 100%; } .hk-tabel tr { background: var(--hk-surface); border: 1px solid var(--hk-border); border-radius: var(--hk-radius); margin-bottom: 10px; padding: 8px 12px; box-shadow: var(--hk-shadow); } .hk-tabel tbody tr:hover { background: var(--hk-surface); } .hk-tabel td { border: 0 !important; padding: 5px 0; display: flex; gap: 12px; justify-content: space-between; align-items: baseline; text-align: right; white-space: normal !important; } .hk-tabel td::before { content: attr(data-label); font-size: 11px; font-weight: 700; color: var(--hk-muted); text-transform: uppercase; letter-spacing: .04em; text-align: left; flex-shrink: 0; } .hk-tabel td[data-label=""]::before { display: none; } .hk-tabel td.hk-kanan { text-align: right; } .hk-tabel td .hk-redup { display: block; } .hk-hanya-hp { display: inline-flex !important; } .hk-filter:not(.hk-terbuka) .hk-filter-lain { display: none; } .hk-tabel .hk-aksi { justify-content: flex-end; width: 100%; padding-top: 4px; } .hk-tabel .hk-aksi a { width: auto; padding: 0 14px; gap: 6px; height: 38px; } .hk-tabel .hk-aksi a span { display: inline; } .hk-tabel tfoot tr { background: var(--hk-primary-soft); } .hk-tabel td.hk-kosong { display: block; text-align: center; } } /* Pilihan periode cepat (contoh: jurnal_kas.php) */ .hk-periode { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .hk-chip { border: 1px solid var(--hk-border); background: var(--hk-surface); color: var(--hk-text); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1.4; } .hk-chip:hover { border-color: var(--hk-primary); color: var(--hk-primary); } .hk-chip.hk-aktif { background: var(--hk-primary); border-color: var(--hk-primary); color: #fff; } @media (max-width: 767.98px) { .hk-periode { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .hk-chip { flex: 0 0 auto; } } @media print { .hk-periode, .hk-filter, .hk-paging, .hk-aksi, #tombol-filter, .btn { display: none !important; } .hk-panel, .hk-info > div { box-shadow: none !important; } .hk-halaman { max-width: none; padding: 0; } .hk-tabel td, .hk-tabel th { font-size: 11px; padding: 5px 6px; } } .hk-saldo-kepala { text-align: right; } .hk-periode { scrollbar-width: none; } .hk-periode::-webkit-scrollbar { display: none; } @media (max-width: 767.98px) { .hk-saldo-kepala { text-align: left; } .hk-tabel td.hk-sembunyi-hp, .hk-tabel tr td[data-label="Keterangan"]:has(> .hk-redup:only-child) { display: none; } } /* ===== Perapian global halaman lama (sekitar 160 halaman memakai gaya inline) ===== Hanya di dalam .content-wrapper, jadi halaman login, cetak, dan PDF tidak terpengaruh. */ /* Input berwarna pastel inline menjadi putih seragam; isian baca-saja abu-abu muda. */ .content-wrapper .form-control[style*="background-color"], .content-wrapper .custom-select[style*="background-color"] { background-color: var(--hk-surface) !important; } .content-wrapper .form-control[readonly], .content-wrapper .form-control:disabled { background-color: #f8fafc !important; color: var(--hk-text); } .content-wrapper textarea.form-control { min-height: 44px; } .content-wrapper .form-control::placeholder { color: #9ca3af; } /* Label isian seragam */ .content-wrapper .form-group > label, .content-wrapper .form-group > .input-group + label { font-size: 12px; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; } .content-wrapper label .hk-wajib { color: var(--hk-danger); margin-left: 2px; } /* Tombol hiasan di samping isian (ikon mahkota/kalender tanpa fungsi) disembunyikan. */ .content-wrapper .input-group-append:has(> #add-new-event > i.fa-crown:only-child), .content-wrapper .input-group-append:has(> #add-new-event > i.fa-calendar:only-child) { display: none; } .content-wrapper .input-group:has(> .input-group-append > #add-new-event > i.fa-crown:only-child) > .form-control, .content-wrapper .input-group:has(> .input-group-append > #add-new-event > i.fa-calendar:only-child) > .form-control, .content-wrapper .input-group:has(> .input-group-append > #add-new-event > i.fa-crown:only-child) > .select2-container, .content-wrapper .input-group:has(> .input-group-append > #add-new-event > i.fa-calendar:only-child) > .select2-container .select2-selection { border-radius: 10px !important; } /* Pratinjau rupiah lama (span #format2c dsb.) tampil sebagai label lembut, bukan tombol berwarna. */ .content-wrapper .input-group-append > #add-new-event { background: var(--hk-primary-soft) !important; border: 1px solid var(--hk-border) !important; color: var(--hk-primary-dark) !important; box-shadow: none !important; pointer-events: none; font-weight: 700 !important; font-size: 13px; white-space: nowrap; border-radius: 0 10px 10px 0 !important; padding: 0 12px; } .content-wrapper .input-group:has(> .input-group-append > #add-new-event span:empty) > .input-group-append:has(> #add-new-event > b > span:empty:only-child), .content-wrapper .input-group:has(> .input-group-append > #add-new-event > span:empty:only-child) > .input-group-append { display: none; } .content-wrapper .input-group:has(> .input-group-append > #add-new-event > b > span:empty:only-child) > .form-control, .content-wrapper .input-group:has(> .input-group-append > #add-new-event > span:empty:only-child) > .form-control { border-radius: 10px !important; } /* Kepala kartu berwarna (card-primary/info/warning/danger/success, bg-*, dan warna inline) menjadi putih dengan garis aksen. */ .content-wrapper .card[class*="card-"]:not(.card-outline) > .card-header, .content-wrapper .card > .card-header[class*=" bg-"], .content-wrapper .card-header[style*="background-color"] { background: var(--hk-surface) !important; color: var(--hk-text) !important; border-bottom: 1px solid var(--hk-border) !important; box-shadow: inset 3px 0 0 var(--hk-primary); } .content-wrapper .card[class*="card-"] > .card-header .card-title, .content-wrapper .card-header[style*="background-color"] .card-title, .content-wrapper .card > .card-header[class*=" bg-"] .card-title { color: var(--hk-text) !important; } .content-wrapper .card[class*="card-"] > .card-header .btn-tool, .content-wrapper .card > .card-header[class*=" bg-"] .btn-tool { color: var(--hk-muted) !important; } .content-wrapper .card.card-danger > .card-header, .content-wrapper .card-header.bg-danger { box-shadow: inset 3px 0 0 var(--hk-danger); } .content-wrapper .card.card-warning > .card-header, .content-wrapper .card-header.bg-warning { box-shadow: inset 3px 0 0 var(--hk-accent); } .content-wrapper .card.card-info > .card-header, .content-wrapper .card-header.bg-info, .content-wrapper .card.card-primary > .card-header, .content-wrapper .card-header.bg-primary { box-shadow: inset 3px 0 0 var(--hk-info); } .content-wrapper .card-header.mx-3 { margin-left: 0 !important; margin-right: 0 !important; } /* Latar panel pastel inline (mis. hijau muda di belakang filter) dihilangkan. */ .content-wrapper .row[style*="background-color"], .content-wrapper .card-body[style*="background-color"], .content-wrapper .card[style*="background-color"] { background: transparent !important; } .content-wrapper .card-footer { background: #f8fafc; border-top: 1px solid var(--hk-border); } /* Kepala tabel berwarna inline (hijau #009879, abu tua, dsb.) menjadi kepala tabel tema. */ .content-wrapper table thead tr[style*="background-color"], .content-wrapper table thead[style*="background-color"], .content-wrapper table thead tr[style*="background-color"] th, .content-wrapper table thead th[style*="background-color"] { background: #f8fafc !important; color: #475569 !important; } .content-wrapper table thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; white-space: nowrap; } .content-wrapper table[border="1"] { border-collapse: collapse; border-color: var(--hk-border) !important; } .content-wrapper table[border="1"] td, .content-wrapper table[border="1"] th { border-color: var(--hk-border) !important; padding: 8px 10px !important; } .content-wrapper table[border="1"] tbody tr:hover { background: var(--hk-primary-soft); } /* Ikon aksi di tabel (ubah/hapus) menjadi tombol kecil yang mudah disentuh. Kelas dipasang hk-app.js hanya pada link tanpa teks yang berisi satu ikon. */ .content-wrapper a.hk-ikon-aksi { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 2px; border: 1px solid var(--hk-border); border-radius: 8px; background: var(--hk-surface); color: var(--hk-text); vertical-align: middle; } .content-wrapper a.hk-ikon-aksi:hover { border-color: var(--hk-primary); } .content-wrapper a.hk-ikon-aksi > i.fa-times, .content-wrapper a.hk-ikon-aksi > i.fa-trash, .content-wrapper a.hk-ikon-aksi > i.fa-trash-alt { color: var(--hk-danger) !important; } .content-wrapper a.hk-ikon-aksi > i.fa-edit, .content-wrapper a.hk-ikon-aksi > i.fa-pen { color: var(--hk-primary) !important; } /* Paginasi lama (