/* ────────────────────────────────────────────────────────────────── * Infinnet Theme — Layer 1+2 override on top of AdminLTE 3 * * Aktif HANYA bila . Tanpa attribute itu, * AdminLTE original tampil tanpa perubahan. * * Disusun dari design package "Iflow" (claude.ai/design): * - Tipografi: Inter (UI), JetBrains Mono (angka) * - Aksen: deep teal oklch(0.55 0.09 200) * - Density: comfortable, 8px grid * - Komponen: card lebih bersih, border-radius 10px, soft shadow * ────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ──────── Layer 1: Design tokens ──────── */ body[data-theme="modern"] { --inf-accent: oklch(0.55 0.09 200); --inf-accent-2: oklch(0.65 0.09 200); --inf-accent-soft: oklch(0.95 0.02 200); --inf-accent-ink: oklch(0.30 0.07 200); --inf-ink: #0f172a; --inf-ink-2: #475569; --inf-ink-3: #94a3b8; --inf-bg: #f7f8fa; --inf-surface: #ffffff; --inf-line: #e6e8eb; --inf-line-strong: #cbd0d6; --inf-success: oklch(0.62 0.13 155); --inf-warning: oklch(0.72 0.15 75); --inf-danger: oklch(0.60 0.19 25); --inf-r-sm: 8px; --inf-r-md: 10px; --inf-r-lg: 14px; --inf-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04); --inf-shadow-md: 0 1px 3px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .06); --inf-shadow-lg: 0 10px 40px rgba(15, 23, 42, .08); --inf-font-ui: 'Inter', -apple-system, system-ui, sans-serif; --inf-font-mono: 'JetBrains Mono', ui-monospace, monospace; } /* ──────── Layer 2: Component shadowing ──────── */ /* ── Base ── */ body[data-theme="modern"] { font-family: var(--inf-font-ui); background: var(--inf-bg); color: var(--inf-ink); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body[data-theme="modern"] .content-wrapper { background: var(--inf-bg); } /* Heading */ body[data-theme="modern"] h1, body[data-theme="modern"] h2, body[data-theme="modern"] h3, body[data-theme="modern"] h4, body[data-theme="modern"] h5, body[data-theme="modern"] h6, body[data-theme="modern"] .h1, body[data-theme="modern"] .h2, body[data-theme="modern"] .h3 { color: var(--inf-ink); letter-spacing: -0.01em; } /* Numerical / monospace */ body[data-theme="modern"] .mono, body[data-theme="modern"] code, body[data-theme="modern"] kbd { font-family: var(--inf-font-mono); } /* ── Sidebar ── */ body[data-theme="modern"] .main-sidebar { background: var(--inf-surface) !important; border-right: 1px solid var(--inf-line); box-shadow: none; } body[data-theme="modern"] .main-sidebar .brand-link { background: var(--inf-surface) !important; border-bottom: 1px solid var(--inf-line); color: var(--inf-ink) !important; font-weight: 600; letter-spacing: -0.01em; } body[data-theme="modern"] .main-sidebar .brand-link .brand-text { color: var(--inf-ink) !important; } body[data-theme="modern"] .main-sidebar .nav-sidebar > .nav-item > .nav-link { color: var(--inf-ink-2); border-radius: var(--inf-r-sm); margin: 2px 8px; transition: background .15s ease, color .15s ease; } body[data-theme="modern"] .main-sidebar .nav-sidebar > .nav-item > .nav-link:hover { background: var(--inf-bg); color: var(--inf-ink); } body[data-theme="modern"] .main-sidebar .nav-sidebar > .nav-item > .nav-link.active { background: var(--inf-accent-soft) !important; color: var(--inf-accent-ink) !important; font-weight: 600; box-shadow: none !important; } body[data-theme="modern"] .main-sidebar .nav-sidebar > .nav-item > .nav-link.active i { color: var(--inf-accent) !important; } body[data-theme="modern"] .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link { color: var(--inf-ink-2); border-radius: var(--inf-r-sm); margin: 2px 14px; font-size: 13px; } body[data-theme="modern"] .main-sidebar .user-panel { border-bottom-color: var(--inf-line); } body[data-theme="modern"] .main-sidebar .user-panel .info a { color: var(--inf-ink) !important; } /* ──────── Status indicator (Active/Kadaluarsa) di user panel ──────── Ganti fas fa-genderless lama (yg tidak render) dengan dot CSS murni yang punya pulse halo supaya status visible jelas. ─────────────────────────────────────────────────────────────────── */ .user-status { display: inline-flex !important; align-items: center; gap: 8px; padding: 2px 0; font-size: 12px; text-decoration: none; margin-top: 2px; } .user-status .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .user-status .status-label { color: var(--inf-ink-2, #475569); font-weight: 500; letter-spacing: 0.01em; } .user-status-active .status-dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); animation: inf-pulse-active 2s ease-in-out infinite; } .user-status-expired .status-dot { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); } .user-status:hover { text-decoration: none; } .user-status:hover .status-label { color: var(--inf-ink, #0f172a); } @keyframes inf-pulse-active { 0%, 100% { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); } 50% { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.28); } } body[data-theme="modern"] .sidebar a:focus { outline: none; text-decoration: none; } /* ── Topbar / main-header ── */ body[data-theme="modern"] .main-header { background: var(--inf-surface) !important; border-bottom: 1px solid var(--inf-line); box-shadow: none; } body[data-theme="modern"] .main-header .nav-link { color: var(--inf-ink-2) !important; } body[data-theme="modern"] .main-header .nav-link:hover { color: var(--inf-ink) !important; } /* ── Cards ── */ body[data-theme="modern"] .card { background: var(--inf-surface); border: 1px solid var(--inf-line); border-radius: var(--inf-r-md); box-shadow: var(--inf-shadow-sm); margin-bottom: 1.25rem; } body[data-theme="modern"] .card:hover { box-shadow: var(--inf-shadow-md); } body[data-theme="modern"] .card-header { background: transparent; border-bottom: 1px solid var(--inf-line); padding: 14px 18px; } body[data-theme="modern"] .card-title, body[data-theme="modern"] .card-header h3, body[data-theme="modern"] .card-header .card-title { font-weight: 600; color: var(--inf-ink); font-size: 15px; letter-spacing: -0.01em; } body[data-theme="modern"] .card-body { padding: 18px; } body[data-theme="modern"] .card.card-outline { border-top: 3px solid var(--inf-accent); } /* ── small-box (KPI tiles) ── */ body[data-theme="modern"] .small-box { border-radius: var(--inf-r-md); box-shadow: var(--inf-shadow-sm); border: 1px solid var(--inf-line); position: relative; overflow: hidden; } body[data-theme="modern"] .small-box .icon > i { opacity: 0.18; font-size: 70px; } body[data-theme="modern"] .small-box .small-box-footer { background: rgba(0, 0, 0, 0.05); border-top: 1px solid rgba(0, 0, 0, 0.05); } body[data-theme="modern"] .small-box.bg-info { background: var(--inf-accent) !important; color: #fff; } body[data-theme="modern"] .small-box.bg-success { background: var(--inf-success) !important; color: #fff; } body[data-theme="modern"] .small-box.bg-warning { background: var(--inf-warning) !important; color: #fff; } body[data-theme="modern"] .small-box.bg-danger { background: var(--inf-danger) !important; color: #fff; } /* ── info-box ── */ body[data-theme="modern"] .info-box { border-radius: var(--inf-r-md); box-shadow: var(--inf-shadow-sm); border: 1px solid var(--inf-line); background: var(--inf-surface); } body[data-theme="modern"] .info-box-icon { border-radius: var(--inf-r-sm) 0 0 var(--inf-r-sm); } body[data-theme="modern"] .info-box .info-box-text { color: var(--inf-ink-2); font-weight: 500; } body[data-theme="modern"] .info-box .info-box-number { color: var(--inf-ink); font-weight: 600; font-family: var(--inf-font-mono); } /* ── Buttons ── */ body[data-theme="modern"] .btn { border-radius: var(--inf-r-sm); font-weight: 500; transition: background .15s ease, border-color .15s ease, transform .05s ease; letter-spacing: 0; } body[data-theme="modern"] .btn:active { transform: translateY(1px); } body[data-theme="modern"] .btn-primary, body[data-theme="modern"] .btn-info { background: var(--inf-accent); border-color: var(--inf-accent); } body[data-theme="modern"] .btn-primary:hover, body[data-theme="modern"] .btn-info:hover { background: var(--inf-accent-2); border-color: var(--inf-accent-2); } body[data-theme="modern"] .btn-success { background: var(--inf-success); border-color: var(--inf-success); } body[data-theme="modern"] .btn-warning { background: var(--inf-warning); border-color: var(--inf-warning); color: #fff; } body[data-theme="modern"] .btn-danger { background: var(--inf-danger); border-color: var(--inf-danger); } body[data-theme="modern"] .btn-outline-primary { color: var(--inf-accent); border-color: var(--inf-accent); } body[data-theme="modern"] .btn-outline-primary:hover { background: var(--inf-accent); color: #fff; } /* ── Forms ── */ body[data-theme="modern"] .form-control { border-color: var(--inf-line); border-radius: var(--inf-r-sm); font-family: var(--inf-font-ui); font-size: 14px; transition: border-color .15s, box-shadow .15s; } body[data-theme="modern"] .form-control:focus { border-color: var(--inf-accent); box-shadow: 0 0 0 3px var(--inf-accent-soft); } body[data-theme="modern"] .input-group-text { background: var(--inf-bg); border-color: var(--inf-line); color: var(--inf-ink-2); } /* ── Tables ── */ body[data-theme="modern"] .table { color: var(--inf-ink); font-size: 14px; } body[data-theme="modern"] .table thead th { background: var(--inf-bg); color: var(--inf-ink-2); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--inf-line); border-top: none; } body[data-theme="modern"] .table td, body[data-theme="modern"] .table th { border-top: 1px solid var(--inf-line); padding: 12px 14px; vertical-align: middle; } body[data-theme="modern"] .table-bordered, body[data-theme="modern"] .table-bordered td, body[data-theme="modern"] .table-bordered th { border-color: var(--inf-line); } body[data-theme="modern"] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--inf-bg); } /* ── Badges & pills ── */ body[data-theme="modern"] .badge { font-weight: 500; border-radius: 999px; padding: 4px 10px; font-size: 11px; letter-spacing: 0.02em; } body[data-theme="modern"] .badge-info, body[data-theme="modern"] .badge-primary { background: var(--inf-accent-soft); color: var(--inf-accent-ink); } body[data-theme="modern"] .badge-success { background: oklch(0.95 0.04 155); color: var(--inf-success); } body[data-theme="modern"] .badge-warning { background: oklch(0.96 0.06 75); color: oklch(0.45 0.13 75); } body[data-theme="modern"] .badge-danger { background: oklch(0.95 0.04 25); color: var(--inf-danger); } /* ── Alerts ── */ body[data-theme="modern"] .alert { border-radius: var(--inf-r-md); border-width: 1px; } /* ── Modals ── */ body[data-theme="modern"] .modal-content { border: none; border-radius: var(--inf-r-lg); box-shadow: var(--inf-shadow-lg); } body[data-theme="modern"] .modal-header { border-bottom-color: var(--inf-line); background: transparent !important; color: var(--inf-ink); } body[data-theme="modern"] .modal-header .close { color: var(--inf-ink-2); text-shadow: none; opacity: 0.7; } body[data-theme="modern"] .modal-footer { border-top-color: var(--inf-line); } /* ── Page header / content header ── */ body[data-theme="modern"] .content-header { padding: 20px 1rem 8px; } body[data-theme="modern"] .content-header h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--inf-ink); } /* ── Breadcrumb ── */ body[data-theme="modern"] .breadcrumb { background: transparent; padding: 0; font-size: 13px; color: var(--inf-ink-3); } body[data-theme="modern"] .breadcrumb-item.active { color: var(--inf-ink); font-weight: 500; } body[data-theme="modern"] .breadcrumb-item + .breadcrumb-item::before { color: var(--inf-ink-3); } /* ── Pagination ── */ body[data-theme="modern"] .page-link { color: var(--inf-ink-2); border-color: var(--inf-line); } body[data-theme="modern"] .page-item.active .page-link { background: var(--inf-accent); border-color: var(--inf-accent); } /* ── Dropdown menus ── */ body[data-theme="modern"] .dropdown-menu { border: 1px solid var(--inf-line); border-radius: var(--inf-r-md); box-shadow: var(--inf-shadow-md); padding: 6px; } body[data-theme="modern"] .dropdown-item { border-radius: var(--inf-r-sm); padding: 8px 12px; font-size: 13.5px; color: var(--inf-ink-2); } body[data-theme="modern"] .dropdown-item:hover, body[data-theme="modern"] .dropdown-item:focus { background: var(--inf-bg); color: var(--inf-ink); } body[data-theme="modern"] .dropdown-divider { border-top-color: var(--inf-line); } /* ── Nav tabs ── */ body[data-theme="modern"] .nav-tabs { border-bottom: 1px solid var(--inf-line); } body[data-theme="modern"] .nav-tabs .nav-link { color: var(--inf-ink-2); border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 14px; font-weight: 500; } body[data-theme="modern"] .nav-tabs .nav-link.active { color: var(--inf-accent-ink); background: transparent; border-bottom-color: var(--inf-accent); } /* ── DataTables tweak ── */ body[data-theme="modern"] .dataTables_wrapper .dataTables_filter input, body[data-theme="modern"] .dataTables_wrapper .dataTables_length select { border: 1px solid var(--inf-line); border-radius: var(--inf-r-sm); padding: 6px 10px; } body[data-theme="modern"] .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--inf-accent) !important; color: #fff !important; border-color: var(--inf-accent) !important; } /* ── Login page (.login-page) tweak ── */ body[data-theme="modern"].login-page, body[data-theme="modern"].register-page { background: var(--inf-bg); } body[data-theme="modern"].login-page .card, body[data-theme="modern"].register-page .card { box-shadow: var(--inf-shadow-md); border: 1px solid var(--inf-line); } /* ── Scrollbar (modern look in webkit) ── */ body[data-theme="modern"] ::-webkit-scrollbar { width: 10px; height: 10px; } body[data-theme="modern"] ::-webkit-scrollbar-track { background: transparent; } body[data-theme="modern"] ::-webkit-scrollbar-thumb { background: var(--inf-line-strong); border-radius: 999px; border: 2px solid var(--inf-bg); } body[data-theme="modern"] ::-webkit-scrollbar-thumb:hover { background: var(--inf-ink-3); } /* ── Utility helpers (untuk halaman baru yg ditulis dengan kode segar) ── */ body[data-theme="modern"] .inf-mono { font-family: var(--inf-font-mono); } body[data-theme="modern"] .inf-muted { color: var(--inf-ink-2); } body[data-theme="modern"] .inf-faint { color: var(--inf-ink-3); } body[data-theme="modern"] .inf-accent { color: var(--inf-accent); } /* ── Dengan banner V2 STAGING di atas, geser sidebar ── */ body[data-theme="modern"].staging-banner-active .main-sidebar, body[data-theme="modern"].staging-banner-active .main-header, body[data-theme="modern"].staging-banner-active .control-sidebar { /* tidak perlu offset karena banner pakai fixed top dan body sudah padded */ } /* ────────────────────────────────────────────────────────────────── * Modern Dashboard utilities — dipakai oleh pages/dashboard_v4.php * Pola dari Google Jules design (rebrand Netplus). Class ini bekerja * tanpa data-theme="modern" karena tidak override existing AdminLTE * classes — hanya nama-nama baru, jadi netral. * ────────────────────────────────────────────────────────────────── */ /* Card pattern utama — flat dengan soft shadow + rounded */ .card-modern { border: 1px solid var(--inf-line, #e6e8eb); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); background: #fff; transition: box-shadow .2s ease, transform .12s ease; } .card-modern:hover { box-shadow: 0 4px 16px rgba(15, 23, 42, .08); } /* Icon box — kotak ikon kecil di pojok KPI tile */ .icon-box { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } /* Stat card title (uppercase tiny) + besar value */ .stat-card-title { color: #64748b; font-size: 11px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.04em; margin: 8px 0 2px; } .stat-card-value { font-size: 28px; font-weight: 700; color: #0f172a; margin: 0 0 4px; line-height: 1.1; font-variant-numeric: tabular-nums; } /* ──────── Soft tinted backgrounds ──────── */ .bg-soft-primary { background-color: #e8f1ff !important; } .bg-soft-success { background-color: #e8f8ed !important; } .bg-soft-warning { background-color: #fff5d9 !important; } .bg-soft-danger { background-color: #fde8ec !important; } .bg-soft-info { background-color: #e3f4f9 !important; } .bg-soft-secondary { background-color: #f1f5f9 !important; } /* ──────── Modern text colors (saturated tone) ──────── */ .text-primary-modern { color: #1e40af !important; } .text-success-modern { color: #16a34a !important; } .text-warning-modern { color: #d97706 !important; } .text-danger-modern { color: #dc2626 !important; } .text-info-modern { color: #0e7490 !important; } .text-secondary-modern { color: #64748b !important; } /* ──────── Helper untuk Map widget ──────── */ .bg-gradient-modern-light { background: linear-gradient(135deg, #e3f4f9 0%, #ffffff 100%); } /* ──────── Tweaks untuk list group di tiket widget ──────── */ .card-modern .list-group-flush > .list-group-item { padding: 12px 16px; } .card-modern .list-group-flush > .list-group-item:hover { background: #f8fafc; } /* Override AdminLTE 3 .badge yang kurang rounded di Bootstrap 4 */ .card-modern .badge.rounded-pill { border-radius: 999px; } /* Force inter font di stat block */ .stat-card-title, .stat-card-value { font-family: 'Inter', -apple-system, system-ui, sans-serif; } /* ────────────────────────────────────────────────────────────────── * Status Pill — komponen unified untuk indikator status di table. * Generated by status_badge() PHP helper di config/functions/ui.php. * ────────────────────────────────────────────────────────────────── */ .inf-pill { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', system-ui, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; padding: 3px 10px 3px 8px; border-radius: 999px; white-space: nowrap; line-height: 1.5; } .inf-pill__dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; } .inf-pill--ok { background: #e8f8ed; color: #15803d; } .inf-pill--ok .inf-pill__dot { background: #16a34a; } .inf-pill--warn { background: #fff5d9; color: #a16207; } .inf-pill--warn .inf-pill__dot { background: #d97706; } .inf-pill--danger { background: #fde8ec; color: #b91c1c; } .inf-pill--danger .inf-pill__dot { background: #dc2626; } .inf-pill--info { background: #e3f4f9; color: #0e7490; } .inf-pill--info .inf-pill__dot { background: #0891b2; } .inf-pill--muted { background: #f1f5f9; color: #475569; } .inf-pill--muted .inf-pill__dot { background: #94a3b8; } /* ────────────────────────────────────────────────────────────────── * Toastr override — selaras dengan tema modern. * ────────────────────────────────────────────────────────────────── */ #toast-container > div { border-radius: 10px !important; box-shadow: 0 6px 24px rgba(15, 23, 42, .14) !important; font-family: 'Inter', system-ui, sans-serif !important; font-size: 13.5px !important; font-weight: 500 !important; padding: 14px 16px 14px 50px !important; opacity: 1 !important; background-position: 14px center !important; background-size: 22px !important; border-left: 4px solid transparent !important; } #toast-container > .toast-success { background-color: #fff !important; color: #15803d !important; border-left-color: #16a34a !important; } #toast-container > .toast-info { background-color: #fff !important; color: #0e7490 !important; border-left-color: #0891b2 !important; } #toast-container > .toast-warning { background-color: #fff !important; color: #a16207 !important; border-left-color: #d97706 !important; } #toast-container > .toast-error { background-color: #fff !important; color: #b91c1c !important; border-left-color: #dc2626 !important; } #toast-container > div .toast-progress { height: 3px !important; opacity: 0.5 !important; } /* ──────── Stat Target Card (Pasang Baru Bulan Ini) ──────── Dipakai di pages/dashboard_v4.php — featured metric dengan layout horizontal di desktop, stack vertical di mobile. ─────────────────────────────────────────────────────────── */ .stat-target-card { background: linear-gradient(135deg, var(--inf-surface, #fff) 0%, rgba(8, 145, 178, 0.04) 100%); border: 1px solid var(--inf-line, #e6e8eb); } .stat-target-card .icon-box { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 22px; } .stat-target-label { display: block; color: var(--inf-ink-2, #475569); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .stat-target-value { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--inf-ink, #0f172a); line-height: 1; } .stat-target-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; white-space: nowrap; } .stat-target-trend i { font-size: 16px; } .stat-target-progress { border-radius: 999px; background-color: var(--inf-bg, #f7f8fa); } .stat-target-progress .progress-bar { border-radius: 999px; transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1); } .stat-target-mini { padding: 4px 0; } .stat-target-mini-label { font-size: 11px; font-weight: 600; color: var(--inf-ink-3, #94a3b8); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; } .stat-target-mini-value { font-size: 22px; font-weight: 700; color: var(--inf-ink, #0f172a); line-height: 1.1; } /* Mobile tweaks — stack lebih rapi, value tidak terlalu besar */ @media (max-width: 767.98px) { .stat-target-value { font-size: 26px; } .stat-target-mini-value{ font-size: 18px; } .stat-target-trend { font-size: 12px; } } /* ──────── Stat card clickable wrapper ──────── membungkus .card supaya seluruh tile clickable ke detail page. Anchor tidak mengubah layout — display:block + height inherit. Hover lift + border accent sebagai affordance "ini bisa diklik". ───────────────────────────────────────────── */ .stat-card-link, .stat-card-link:hover, .stat-card-link:focus, .stat-card-link:visited { display: block; height: 100%; color: inherit; text-decoration: none; } .stat-card-link .card { transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1), border-color 180ms ease; cursor: pointer; } .stat-card-link:hover .card, .stat-card-link:focus-visible .card { transform: translateY(-2px); box-shadow: var(--inf-shadow-md, 0 4px 16px rgba(15, 23, 42, .08)); border-color: var(--inf-accent, #0e7490); } .stat-card-link:active .card { transform: translateY(0); } .stat-card-link:focus { outline: none; } .stat-card-link:focus-visible .card { outline: 2px solid var(--inf-accent, #0e7490); outline-offset: 2px; } /* ──────── Empty image state — gantikan broken-img tag saat file tidak tersedia di disk. Dipakai di tagihan_detail_lunas, dst. ───────────────────── */ .empty-image-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 220px; padding: 24px; background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 10px; color: #64748b; } .empty-image-state i { font-size: 48px; opacity: 0.5; } .empty-image-state small { font-size: 13px; font-weight: 500; }