/* ========================================================================== AntiBLOK — Stylesheet Utama Font : Poppins (ukuran dasar kecil, 13.5px) Komposisi : Putih 70% · Biru 20% · Hitam 10% + warna pendukung Catatan : nilai warna & font di-inject dari config.php melalui CSS variable pada (lihat views/layouts/partials/head.php) ========================================================================== */ /* --------------------------------------------------------------- 1. Reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-family); font-size: var(--fs-base); line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; vertical-align: middle; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-dark); } h1, h2, h3, h4, h5 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.3; color: var(--black); } h1 { font-size: 1.45rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } h4 { font-size: .95rem; } h5 { font-size: .875rem; } p { margin: 0 0 .75rem; } hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; } code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); } /* ------------------------------------------------------------ 2. Utilitas */ .text-muted { color: var(--text-muted) !important; } .text-primary { color: var(--primary) !important; } .text-success { color: var(--success) !important; } .text-danger { color: var(--danger) !important; } .text-warning { color: var(--warning) !important; } .text-center { text-align: center; } .text-right { text-align: right; } .text-sm { font-size: var(--fs-sm); } .text-xs { font-size: var(--fs-xs); } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .d-none { display: none !important; } .d-flex { display: flex; } .d-block { display: block; } .flex-1 { flex: 1; } .align-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .flex-wrap { flex-wrap: wrap; } .mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem} .mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem} .w-100 { width: 100%; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; display: inline-block; vertical-align: bottom; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); } /* --------------------------------------------------------- 3. Tata Letak */ .app { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--white); border-right: 1px solid var(--border); position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; z-index: 1040; transition: transform .25s ease; } .sidebar-brand { display: flex; align-items: center; gap: .55rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 1.05rem; color: var(--black); letter-spacing: -.02em; } .sidebar-brand .logo-mark { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), #3f86ff); color: #fff; font-size: .8rem; } .sidebar-brand small { display: block; font-size: 9.5px; font-weight: 500; color: var(--text-muted); letter-spacing: .06em; text-transform: uppercase; } .sidebar-nav { padding: .65rem .6rem 1.5rem; overflow-y: auto; flex: 1; } .nav-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-muted); font-weight: 600; padding: .85rem .6rem .35rem; } .nav-item { display: flex; align-items: center; gap: .6rem; padding: .52rem .65rem; border-radius: 8px; color: var(--text); font-size: var(--fs-sm); font-weight: 500; margin-bottom: 2px; transition: .15s; } .nav-item i { width: 17px; text-align: center; font-size: .82rem; color: var(--text-muted); } .nav-item:hover { background: var(--primary-soft); color: var(--primary); } .nav-item:hover i { color: var(--primary); } .nav-item.active { background: var(--primary-light); color: var(--primary-dark); font-weight: 600; } .nav-item.active i { color: var(--primary); } .nav-item .badge { margin-left: auto; } .main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; } .topbar { height: 54px; background: var(--white); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .75rem; padding: 0 1.1rem; position: sticky; top: 0; z-index: 1030; } .topbar .page-title { font-size: .95rem; font-weight: 600; margin: 0; } .topbar .page-title small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); } .hamburger { display: none; background: none; border: 0; font-size: 1.05rem; color: var(--text); cursor: pointer; } .user-chip { display: flex; align-items: center; gap: .5rem; padding: .3rem .55rem; border: 1px solid var(--border); border-radius: 999px; background: var(--white); cursor: pointer; font-size: var(--fs-sm); } .user-chip .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--primary-light); color: var(--primary-dark); display: grid; place-items: center; font-weight: 600; font-size: var(--fs-xs); } .dropdown { position: relative; } .dropdown-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(16,20,24,.12); padding: .35rem; display: none; z-index: 1050; } .dropdown-menu.show { display: block; } .dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left; padding: .45rem .55rem; border-radius: 7px; color: var(--text); font-size: var(--fs-sm); background: none; border: 0; cursor: pointer; font-family: inherit; } .dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--bg-alt); } .dropdown-divider { height: 1px; background: var(--border); margin: .3rem 0; } .content { padding: 1.1rem 1.2rem 2.5rem; flex: 1; } .container-narrow { max-width: 780px; margin: 0 auto; } /* ------------------------------------------------------------- 4. Kartu */ .card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1rem; } .card-header { padding: .7rem .95rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .card-header h3, .card-header h4 { margin: 0; font-size: .9rem; } .card-header .sub { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400; } .card-body { padding: .95rem; } .card-footer { padding: .65rem .95rem; border-top: 1px solid var(--border); background: var(--primary-soft); border-radius: 0 0 var(--radius) var(--radius); } .card-flat { box-shadow: none; } /* Kartu statistik */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: .75rem; margin-bottom: 1rem; } .stat { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem .9rem; position: relative; overflow: hidden; } .stat::after { content: ''; position: absolute; right: -14px; top: -14px; width: 62px; height: 62px; border-radius: 50%; background: var(--primary-soft); } .stat .stat-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--primary-light); color: var(--primary); font-size: .8rem; margin-bottom: .5rem; position: relative; z-index: 1; } .stat .stat-icon.green { background: #e6f7ee; color: var(--success); } .stat .stat-icon.orange { background: #fff4e0; color: var(--warning); } .stat .stat-icon.red { background: #fdecec; color: var(--danger); } .stat .stat-icon.purple { background: #f0ecff; color: var(--purple); } .stat .stat-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; position: relative; z-index: 1; } .stat .stat-value { font-size: 1.35rem; font-weight: 700; color: var(--black); line-height: 1.25; position: relative; z-index: 1; } .stat .stat-meta { font-size: var(--fs-xs); color: var(--text-muted); position: relative; z-index: 1; } /* --------------------------------------------------------- 5. Formulir */ .form-group { margin-bottom: .8rem; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; } label, .form-label { display: block; font-size: var(--fs-sm); font-weight: 500; margin-bottom: .25rem; color: var(--text); } label .req { color: var(--danger); } .form-control, .form-select, textarea.form-control { width: 100%; padding: .46rem .65rem; font-family: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--white); border: 1px solid var(--border); border-radius: 8px; transition: border-color .15s, box-shadow .15s; appearance: none; } .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7684' d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .5rem center; background-size: 14px; padding-right: 1.75rem; } .form-control:focus, .form-select:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(29,95,216,.12); } .form-control::placeholder { color: #a8b0bb; } .form-control[readonly] { background: var(--bg-alt); } .form-control.is-invalid { border-color: var(--danger); } .invalid-feedback { color: var(--danger); font-size: var(--fs-xs); margin-top: .2rem; display: block; } .form-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: .2rem; } .input-group { display: flex; } .input-group .form-control { border-radius: 8px 0 0 8px; } .input-group .input-addon { display: flex; align-items: center; padding: 0 .6rem; font-size: var(--fs-xs); background: var(--bg-alt); border: 1px solid var(--border); border-right: 0; color: var(--text-muted); border-radius: 8px 0 0 8px; white-space: nowrap; } .input-group .input-addon + .form-control { border-radius: 0 8px 8px 0; } .input-group .btn { border-radius: 0 8px 8px 0; } .switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-size: var(--fs-sm); } .switch input { display: none; } .switch .slider { width: 34px; height: 19px; border-radius: 999px; background: #cdd5e0; position: relative; transition: .2s; flex: 0 0 34px; } .switch .slider::after { content: ''; position: absolute; width: 15px; height: 15px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: .2s; } .switch input:checked + .slider { background: var(--primary); } .switch input:checked + .slider::after { transform: translateX(15px); } .check { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); cursor: pointer; } /* --------------------------------------------------------- 6. Tombol */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .44rem .8rem; font-family: inherit; font-size: var(--fs-sm); font-weight: 500; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: .15s; white-space: nowrap; line-height: 1.5; } .btn:disabled { opacity: .6; cursor: not-allowed; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-dark); color: #fff; } .btn-light { background: var(--white); color: var(--text); border-color: var(--border); } .btn-light:hover { background: var(--bg-alt); color: var(--text); } .btn-soft { background: var(--primary-light); color: var(--primary-dark); } .btn-soft:hover { background: #dbe7fd; color: var(--primary-dark); } .btn-success { background: var(--success); color: #fff; } .btn-success:hover { background: #0d8442; color: #fff; } .btn-warning { background: var(--warning); color: #fff; } .btn-warning:hover { background: #dc9420; color: #fff; } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { background: #c92a2a; color: #fff; } .btn-dark { background: var(--black); color: #fff; } .btn-dark:hover { background: #000; color: #fff; } .btn-link { background: none; color: var(--primary); padding: .25rem .35rem; } .btn-sm { padding: .27rem .55rem; font-size: var(--fs-xs); border-radius: 6px; } .btn-xs { padding: .15rem .4rem; font-size: 10.5px; border-radius: 5px; } .btn-block { width: 100%; } .btn-icon { padding: .34rem .48rem; } .btn-group { display: inline-flex; gap: .3rem; flex-wrap: wrap; } /* --------------------------------------------------------- 7. Lencana */ .badge { display: inline-flex; align-items: center; gap: .25rem; padding: .13rem .45rem; border-radius: 999px; font-size: 10.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; } .badge-primary { background: var(--primary-light); color: var(--primary-dark); } .badge-success { background: #e6f7ee; color: #0b7a3d; } .badge-warning { background: #fff4e0; color: #a96a05; } .badge-danger { background: #fdecec; color: #b32020; } .badge-info { background: #e5f6fe; color: #0b7fae; } .badge-purple { background: #f0ecff; color: #5a3fd6; } .badge-muted { background: var(--bg-alt); color: var(--text-muted); } .badge-dark { background: #e6e9ee; color: var(--black); } .badge-dot::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } /* ---------------------------------------------------------- 8. Tabel */ .table-wrap { overflow-x: auto; border-radius: var(--radius); } table.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } table.table th { text-align: left; padding: .55rem .7rem; background: var(--bg-alt); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; } table.table td { padding: .55rem .7rem; border-bottom: 1px solid var(--border); vertical-align: middle; } table.table tbody tr:hover { background: var(--primary-soft); } table.table tbody tr:last-child td { border-bottom: 0; } table.table.table-sm th, table.table.table-sm td { padding: .38rem .55rem; } .table-empty { padding: 2.2rem 1rem; text-align: center; color: var(--text-muted); } .table-empty i { font-size: 1.8rem; display: block; margin-bottom: .5rem; color: #c8d0dc; } /* ------------------------------------------------------ 9. Paginasi */ .pagination { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; } .pagination a, .pagination span { min-width: 29px; height: 29px; padding: 0 .45rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 7px; font-size: var(--fs-xs); color: var(--text); background: var(--white); } .pagination a:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); } .pagination .active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; } .pagination .disabled { color: #bcc4d0; background: var(--bg-alt); } .pagination-info { font-size: var(--fs-xs); color: var(--text-muted); } /* ------------------------------------------------------- 10. Modal */ .modal-backdrop { position: fixed; inset: 0; background: rgba(16,20,24,.45); display: none; align-items: flex-start; justify-content: center; z-index: 1060; padding: 4vh 1rem; overflow-y: auto; backdrop-filter: blur(2px); } .modal-backdrop.show { display: flex; } .modal { background: var(--white); border-radius: 14px; width: 100%; max-width: 540px; box-shadow: 0 24px 60px rgba(16,20,24,.22); animation: modalIn .18s ease-out; margin: auto 0; } .modal.modal-lg { max-width: 780px; } .modal.modal-xl { max-width: 1020px; } .modal.modal-sm { max-width: 400px; } @keyframes modalIn { from { opacity: 0; transform: translateY(-12px) scale(.985); } to { opacity: 1; transform: none; } } .modal-header { padding: .85rem 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .modal-header h3 { margin: 0; font-size: .98rem; } .modal-header .sub { font-size: var(--fs-xs); color: var(--text-muted); } .modal-close { background: none; border: 0; font-size: 1.05rem; color: var(--text-muted); cursor: pointer; line-height: 1; padding: .2rem; } .modal-close:hover { color: var(--danger); } .modal-body { padding: 1rem; max-height: 72vh; overflow-y: auto; } .modal-footer { padding: .75rem 1rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; } /* ------------------------------------------------------- 11. Alert */ .alert { display: flex; gap: .6rem; padding: .65rem .8rem; border-radius: 9px; font-size: var(--fs-sm); border: 1px solid transparent; margin-bottom: .8rem; align-items: flex-start; } .alert i { margin-top: .15rem; } .alert-info { background: #e5f6fe; border-color: #bfe7fb; color: #0b6a90; } .alert-success { background: #e6f7ee; border-color: #bfe9d3; color: #0b7a3d; } .alert-warning { background: #fff8ea; border-color: #fbe3b6; color: #97620a; } .alert-danger { background: #fdecec; border-color: #f8cfcf; color: #a91f1f; } .alert-title { font-weight: 600; display: block; } /* ------------------------------------------------- 12. Panel filter */ .filter-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1rem; } .filter-panel .filter-head { padding: .55rem .85rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: var(--fs-sm); font-weight: 600; gap: .5rem; } .filter-panel .filter-body { padding: .85rem; border-top: 1px solid var(--border); } .filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: .6rem; } .filter-actions { display: flex; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; } .active-filters { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .75rem; } .chip { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .5rem; background: var(--primary-light); color: var(--primary-dark); border-radius: 999px; font-size: 10.5px; font-weight: 500; } .chip a { color: inherit; opacity: .7; } .chip a:hover { opacity: 1; } /* --------------------------------------------------------- 13. Chart */ .chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: .9rem; margin-bottom: 1rem; } .chart-box { position: relative; height: 250px; } .chart-box.sm { height: 200px; } .chart-box.lg { height: 310px; } /* ------------------------------------------- 14. Repeater (backup link) */ .repeater-item { border: 1px solid var(--border); border-radius: 10px; padding: .7rem .8rem; margin-bottom: .6rem; background: var(--white); position: relative; } .repeater-item.is-primary { border-color: var(--primary); background: var(--primary-soft); } .repeater-item .drag-handle { cursor: grab; color: var(--text-muted); } .repeater-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; } .repeater-index { width: 21px; height: 21px; border-radius: 6px; background: var(--bg-alt); color: var(--text-muted); display: grid; place-items: center; font-size: 10.5px; font-weight: 700; flex: 0 0 21px; } .repeater-item.is-primary .repeater-index { background: var(--primary); color: #fff; } /* ------------------------------------------------ 15. Halaman otentikasi */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; background: radial-gradient(1000px 480px at 12% -8%, #e8f0fe 0%, transparent 60%), radial-gradient(760px 420px at 108% 108%, #eaf2ff 0%, transparent 55%), var(--bg); } .auth-card { width: 100%; max-width: 372px; background: var(--white); border: 1px solid var(--border); border-radius: 15px; padding: 1.6rem 1.5rem; box-shadow: 0 16px 44px rgba(16,20,24,.07); } .auth-logo { text-align: center; margin-bottom: 1.15rem; } .auth-logo .logo-mark { width: 46px; height: 46px; border-radius: 13px; display: inline-grid; place-items: center; background: linear-gradient(135deg, var(--primary), #3f86ff); color: #fff; font-size: 1.1rem; margin-bottom: .55rem; } .auth-logo h1 { font-size: 1.15rem; margin: 0; letter-spacing: -.02em; } .auth-logo p { font-size: var(--fs-xs); color: var(--text-muted); margin: .1rem 0 0; } .auth-footer { text-align: center; margin-top: 1.1rem; font-size: var(--fs-xs); color: var(--text-muted); } /* --------------------------------------------------- 16. Kotak salin URL */ .copy-box { display: flex; align-items: center; gap: .5rem; background: var(--bg-alt); border: 1px dashed var(--border); border-radius: 8px; padding: .4rem .6rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); word-break: break-all; } .copy-box .copy-btn { margin-left: auto; flex: 0 0 auto; } /* ------------------------------------------------------ 17. Empty state */ .empty-state { text-align: center; padding: 2.6rem 1rem; } .empty-state .icon { width: 62px; height: 62px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: inline-grid; place-items: center; font-size: 1.4rem; margin-bottom: .75rem; } .empty-state h4 { margin-bottom: .25rem; } .empty-state p { color: var(--text-muted); font-size: var(--fs-sm); max-width: 400px; margin: 0 auto 1rem; } /* -------------------------------------------------- 18. Progress & misc */ .progress { height: 6px; background: var(--bg-alt); border-radius: 999px; overflow: hidden; } .progress-bar { height: 100%; background: var(--primary); border-radius: 999px; transition: width .3s; } .divider-text { display: flex; align-items: center; gap: .6rem; color: var(--text-muted); font-size: var(--fs-xs); margin: .9rem 0; } .divider-text::before, .divider-text::after { content: ''; flex: 1; height: 1px; background: var(--border); } .tooltip-host { position: relative; cursor: help; border-bottom: 1px dotted var(--text-muted); } .spinner { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; } .spinner.dark { border-color: rgba(29,95,216,.25); border-top-color: var(--primary); } @keyframes spin { to { transform: rotate(360deg); } } .pulse { animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } } /* Tab */ .tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; overflow-x: auto; } .tabs a { padding: .5rem .8rem; font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap; } .tabs a.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; } .tabs a:hover { color: var(--primary); } /* Daftar deskripsi */ .dl { display: grid; grid-template-columns: 132px 1fr; gap: .3rem .75rem; font-size: var(--fs-sm); } .dl dt { color: var(--text-muted); } .dl dd { margin: 0; word-break: break-word; } /* --------------------------------------------------- 19. Toastr override */ #toast-container > div { border-radius: 9px; box-shadow: 0 10px 26px rgba(16,20,24,.16); opacity: 1; font-size: var(--fs-sm); padding: 12px 15px 12px 45px; } #toast-container > .toast-success { background-color: var(--success); } #toast-container > .toast-error { background-color: var(--danger); } #toast-container > .toast-info { background-color: var(--primary); } #toast-container > .toast-warning { background-color: var(--warning); } /* --------------------------------------------------------- 20. Responsif */ @media (max-width: 992px) { .sidebar { transform: translateX(-100%); box-shadow: 0 0 40px rgba(16,20,24,.15); } .sidebar.open { transform: none; } .main { margin-left: 0; } .hamburger { display: inline-flex; } .sidebar-overlay { position: fixed; inset: 0; background: rgba(16,20,24,.4); z-index: 1035; display: none; } .sidebar-overlay.show { display: block; } } @media (max-width: 640px) { .content { padding: .85rem .8rem 2.5rem; } .stats-grid { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: .55rem; } .stat .stat-value { font-size: 1.15rem; } .dl { grid-template-columns: 1fr; gap: .1rem .5rem; } .dl dt { margin-top: .4rem; font-size: var(--fs-xs); } .truncate { max-width: 160px; } .modal { max-width: 100%; } } /* Cetak */ @media print { .sidebar, .topbar, .filter-panel, .btn, .pagination { display: none !important; } .main { margin-left: 0; } .card { break-inside: avoid; border-color: #ccc; } }