/* ===================================================================== Diamondo Web — Apple-style design system Ditulis ulang dengan pendekatan gaya Apple: tipografi SF Pro, radius besar & konsisten, shadow lembut berlapis (bukan border tebal), transisi halus, dan focus ring biru. Semua nama class dipertahankan sama seperti sebelumnya supaya tidak ada halaman yang rusak — cuma nilai visualnya (warna, radius, shadow, transisi) yang diperhalus. ===================================================================== */ :root { /* Warna sistem, gaya Apple (biru sistem, merah/hijau/oranye Apple) */ --primary: #0071e3; --primary-dark: #0058b0; --danger: #ff3b30; --success: #34c759; --warning: #ff9500; --bg: #f5f5f7; --card: #ffffff; --text: #1d1d1f; --muted: #6e6e73; --border: #e5e5ea; --sidebar-width: 280px; /* Token tambahan supaya warna yang tadinya ditulis langsung (mis. rgba(0,0,0,0.05) atau #fff) bisa ikut berubah otomatis saat mode gelap aktif, tanpa perlu mengubah tiap aturan satu-satu. */ --hairline: rgba(0,0,0,0.06); --hairline-soft: rgba(0,0,0,0.05); --input-bg: #ffffff; --surface-tint: rgba(0,0,0,0.02); --surface-tint-2: rgba(0,0,0,0.025); --scrollbar-thumb: rgba(0,0,0,0.18); --scrollbar-thumb-hover: rgba(0,0,0,0.28); /* Warna brand sidebar (Diamondo Web) — burgundy dalam, gaya "System Preferences" Apple: gradasi halus, tidak pudar jadi pink di bawah */ --sidebar-color: #7a1226; --sidebar-color-light: #9c2438; --sidebar-color-dark: #4a0a16; /* Token desain: radius & shadow konsisten dipakai di semua komponen */ --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --shadow-xs: 0 1px 2px rgba(0,0,0,0.05); --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05); --shadow-lg: 0 20px 48px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.06); /* Memberi tahu browser supaya kontrol bawaan (kalender date-picker, tombol "Choose File", scrollbar) dirender versi terang -- browser otomatis pakai versi gelapnya begitu mode gelap aktif (lihat html[data-theme="dark"] di bawah). */ color-scheme: light; } /* ===================================================================== MODE GELAP Diaktifkan lewat atribut data-theme="dark" di elemen , diatur oleh tombol toggle (lihat header.php) dan disimpan di localStorage supaya pilihan pengguna tetap dipakai tiap buka halaman baru. ===================================================================== */ html[data-theme="dark"] { color-scheme: dark; --bg: #1c1c1e; --card: #2c2c2e; --text: #f2f2f7; --muted: #98989f; --border: #3d3d40; --hairline: rgba(255,255,255,0.09); --hairline-soft: rgba(255,255,255,0.07); --input-bg: #3a3a3c; --surface-tint: rgba(255,255,255,0.04); --surface-tint-2: rgba(255,255,255,0.05); --scrollbar-thumb: rgba(255,255,255,0.16); --scrollbar-thumb-hover: rgba(255,255,255,0.26); --shadow-xs: 0 1px 2px rgba(0,0,0,0.25); --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.22); --shadow-md: 0 8px 24px rgba(0,0,0,0.38), 0 2px 6px rgba(0,0,0,0.22); --shadow-lg: 0 20px 48px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3); } /* Beberapa warna badge/alert pakai teks gelap di atas latar tipis -- di mode gelap latarnya digelapkan sedikit & teksnya dicerahkan biar kontrasnya tetap enak dibaca. */ html[data-theme="dark"] .badge-ok { background: rgba(52,199,89,0.18); color: #63d67e; } html[data-theme="dark"] .badge-warn { background: rgba(255,149,0,0.2); color: #ffb84d; } html[data-theme="dark"] .badge-kuning { background: rgba(255,204,0,0.22); color: #e0c04a; } html[data-theme="dark"] .badge-danger { background: rgba(255,59,48,0.2); color: #ff6961; } html[data-theme="dark"] .badge-retur { background: rgba(124,58,237,0.22); color: #a78bfa; } html[data-theme="dark"] .alert-success { background: rgba(52,199,89,0.16); color: #6fe08a; } html[data-theme="dark"] .alert-danger { background: rgba(255,59,48,0.16); color: #ff8079; } html[data-theme="dark"] .alert-warn { background: rgba(255,149,0,0.18); color: #ffb84d; } /* Elemen yang di mode terang sengaja ditulis putih polos (bukan lewat variabel) supaya tetap pas dengan latar birunya sendiri di mode gelap. */ html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=number], html[data-theme="dark"] input[type=search], html[data-theme="dark"] input[type=date], html[data-theme="dark"] input[type=password], html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=tel], html[data-theme="dark"] input[type=url], html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] .pick-btn, html[data-theme="dark"] .qty-adj button { background: var(--input-bg); } html[data-theme="dark"] th { background: var(--surface-tint); } html[data-theme="dark"] .camera-modal-inner { background: #000; } /* ===================================================================== HALAMAN PENGATURAN -- segmented control, toggle switch, mode padat ===================================================================== */ /* Segmented control (mis. pilihan Terang / Gelap / Ikuti Sistem) */ .segmented { display: inline-flex; gap: 3px; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); } .segmented button { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: none; border-radius: 8px; background: none; color: var(--muted); font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease); white-space: nowrap; } .segmented button svg { width: 15px; height: 15px; flex-shrink: 0; } .segmented button:hover { color: var(--text); } .segmented button.active { background: var(--card); color: var(--primary); box-shadow: var(--shadow-xs); } /* Toggle switch ala iOS, dipakai untuk preferensi on/off */ .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; } .switch-row + .switch-row { border-top: 1px solid var(--hairline); } .switch-row-text { display: flex; flex-direction: column; gap: 2px; } .switch-row-title { font-weight: 600; font-size: 14.5px; color: var(--text); } .switch-row-desc { font-size: 12.5px; color: var(--muted); } .switch { position: relative; display: inline-block; width: 46px; height: 27px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .switch-track { position: absolute; inset: 0; background: var(--border); border-radius: 999px; cursor: pointer; transition: background 0.2s var(--ease); } .switch-track::before { content: ""; position: absolute; width: 23px; height: 23px; left: 2px; top: 2px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.2s var(--ease); } .switch input:checked + .switch-track { background: var(--primary); } .switch input:checked + .switch-track::before { transform: translateX(19px); } .switch input:focus-visible + .switch-track { box-shadow: 0 0 0 4px rgba(0,113,227,0.2); } /* Ringkasan akun read-only di kartu Pengaturan */ .settings-account { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--hairline); } .settings-account .user-avatar { width: 52px; height: 52px; font-size: 20px; } .settings-account-name { font-weight: 700; font-size: 16px; color: var(--text); } .settings-account-meta { font-size: 13px; color: var(--muted); margin-top: 2px; } .settings-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-bottom: 16px; } .settings-kv-item .k { font-size: 12px; color: var(--muted); margin-bottom: 2px; } .settings-kv-item .v { font-size: 14px; color: var(--text); font-weight: 600; } @media (max-width: 560px) { .settings-kv { grid-template-columns: 1fr; } } /* Mode Tampilan Padat -- kurangi padding di komponen utama supaya lebih banyak data kelihatan sekaligus di layar. */ html.compact .card { padding: 16px; } html.compact .card + .card { margin-top: 12px; } html.compact th, html.compact td { padding: 8px 12px; } html.compact .stat-box { padding: 16px; } html.compact .btn, html.compact .btn.secondary, html.compact .btn.outline { padding: 8px 16px; } html.compact .field { margin-bottom: 10px; } /* Swatch pilihan warna (Aksen & Latar Belakang) */ .swatch-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; border: none; background: none; cursor: pointer; padding: 2px; font-family: inherit; } .swatch-dot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border); transition: border-color 0.15s var(--ease), transform 0.1s var(--ease); } .swatch:hover .swatch-dot { transform: scale(1.08); } .swatch.active .swatch-dot { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,113,227,0.18); } .swatch-label { font-size: 11.5px; color: var(--muted); font-weight: 500; } .swatch.active .swatch-label { color: var(--text); font-weight: 700; } /* Slider volume suara scan */ input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--border); outline: none; cursor: pointer; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); border: 3px solid var(--card); box-shadow: 0 1px 3px rgba(0,0,0,0.3); cursor: pointer; } input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--primary); border: 3px solid var(--card); box-shadow: 0 1px 3px rgba(0,0,0,0.3); cursor: pointer; } input[type=range]:disabled { opacity: 0.4; cursor: not-allowed; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.47; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; } ::selection { background: rgba(0,113,227,0.25); color: inherit; } /* Di mode gelap, warna biru tipis di atas kartu/input yang sudah gelap jadi susah kelihatan -- dipakein warna aksen yang lebih terang & lebih pekat, sekalian teksnya dipastikan putih terang biar tetap kebaca persis pas lagi ngeblok angka di form. */ html[data-theme="dark"] ::selection { background: rgba(10,132,255,0.55); color: #ffffff; } /* Scrollbar custom (Webkit) — tipis & bulat, khas macOS/iOS */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 999px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* Focus ring yang konsisten untuk aksesibilitas keyboard, gaya Apple (cincin biru lembut) — dipakai saat elemen difokus lewat keyboard. */ a:focus-visible, button:focus-visible, .btn:focus-visible, .pick-btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(0,113,227,0.35); } /* Hormati preferensi "reduced motion" pengguna */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ================= SIDEBAR LAYOUT ================= */ .app-shell { display: flex; min-height: 100vh; } .sidebar-toggle { display: none; position: fixed; top: 14px; left: 14px; z-index: 30; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.35); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease); } .sidebar-toggle:active { transform: scale(0.93); } .sidebar { width: var(--sidebar-width); flex-shrink: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--sidebar-color-dark) 0%, var(--sidebar-color-light) 100%); border-right: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 2px 0 24px rgba(0,0,0,0.18); position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; z-index: 25; padding: 22px 0 16px; transition: transform 0.25s var(--ease); } .sidebar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 140px; background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0)); pointer-events: none; } /* Brand: tanda kotak bulat + wordmark, pengganti emoji — kesan logotype, bukan ikon dekoratif */ .sidebar .brand { display: flex; align-items: center; font-weight: 600; letter-spacing: -0.01em; padding: 4px 22px 24px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.16); color: #fff; position: relative; } .brand-mark { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.15); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; color: #fff; } .brand-word { display: flex; flex-direction: column; line-height: 1.25; font-size: 22px; font-weight: 700; } .brand-word small { font-size: 13px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 2px; } /* Kotak Pencarian Global di sidebar. Selector-nya sengaja dibikin lebih "berat" -- ".sidebar .sidebar-search input[type=text]" -- karena ada rule global lain di file ini (html[data-theme="dark"] input[type=text]) yang levelnya scara teknis lebih tinggi dari ".sidebar .sidebar-search input" biasa, jadi selalu menang & bikin warnanya ke-reset ke abu-abu (var(--input-bg)) walau CSS di sini sudah benar. Nambahin [type=text] di selector ini menaikkan levelnya biar pasti menang. */ .sidebar-search { position: relative; margin: 4px 16px 14px; } .sidebar-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: rgba(255,255,255,0.5); pointer-events: none; } .sidebar .sidebar-search input[type=text] { width: 100%; padding: 9px 12px 9px 36px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.16); /* Merah yang jelas kelihatan merahnya -- --sidebar-color-dark (dipakai sebelumnya) ternyata terlalu gelap, kelihatan nyaris hitam di banyak layar. Ini di antara --sidebar-color & --sidebar-color-dark, lebih pekat/jenuh warnanya tapi tetap gelap & kontras sama teks putih. */ background: #42000c; color: #fff; font-size: 13.5px; font-family: inherit; transition: border-color 0.15s var(--ease); } .sidebar .sidebar-search input[type=text]::placeholder { color: rgba(255,255,255,0.55); } .sidebar .sidebar-search input[type=text]:focus { outline: none; border-color: rgba(255,255,255,0.4); box-shadow: none; } .sidebar nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 12px; } .sidebar nav a, .nav-group-toggle { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; text-decoration: none; color: rgba(255,255,255,0.72); font-weight: 500; font-size: 14.5px; letter-spacing: -0.005em; padding: 9px 12px; border-radius: 9px; border: none; background: none; cursor: pointer; font-family: inherit; position: relative; transition: background 0.18s var(--ease), color 0.18s var(--ease), transform 0.15s var(--ease); } .nav-icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; } .nav-icon svg { width: 100%; height: 100%; } .sidebar nav a:hover, .nav-group-toggle:hover { color: #fff; background: rgba(255,255,255,0.12); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); } .sidebar nav a.active, .nav-group-toggle.active, .nav-group.active-group > .nav-group-toggle { color: #fff; background: linear-gradient(155deg, rgba(255,255,255,0.32), rgba(255,255,255,0.14)); backdrop-filter: blur(20px) saturate(200%); -webkit-backdrop-filter: blur(20px) saturate(200%); font-weight: 600; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 0 0 1px rgba(255,255,255,0.28), inset 0 -6px 10px -6px rgba(0,0,0,0.18), 0 6px 16px rgba(0,0,0,0.22), 0 2px 4px rgba(0,0,0,0.14); } .sidebar nav a.active .nav-icon, .nav-group-toggle.active .nav-icon, .nav-group.active-group > .nav-group-toggle .nav-icon { opacity: 1; } .nav-group-toggle .caret { margin-left: auto; font-size: 10px; transition: transform 0.2s var(--ease); opacity: 0.6; } .nav-group.open .caret { transform: rotate(180deg); } /* Titik notifikasi kecil di menu sidebar (mis. ada stok menipis, ada barang belum di-scan) -- sengaja cuma titik polos, tidak menampilkan angka, supaya tetap ringkas walau sumber notifikasinya lebih dari 1. */ .nav-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff453a; box-shadow: 0 0 0 2px rgba(255,69,58,0.35); flex-shrink: 0; } /* .nav-group-toggle sudah punya gap:11px antar flex item, jadi titiknya tidak perlu margin tambahan -- tapi di .nav-group-menu a (tidak ber-gap) didorong penuh ke kanan biar rapi sejajar dgn ujung kanan menu. */ .nav-group-menu a .nav-dot { margin-left: auto; } .nav-group-menu { display: none; flex-direction: column; padding-left: 15px; margin-top: 2px; gap: 1px; } .nav-group.open .nav-group-menu { display: flex; } .nav-group-menu a { display: flex; align-items: center; padding: 8px 12px; font-size: 14px; } .nav-group-menu a:hover { color: #fff; background: rgba(255,255,255,0.12); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); } .nav-group-menu a.active { color: #fff; background: rgba(255,255,255,0.22); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3), 0 2px 10px rgba(0,0,0,0.12); } .sidebar-overlay { visibility: hidden; position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 24; opacity: 0; transition: opacity 0.28s var(--ease), visibility 0s linear 0.28s; } .sidebar-overlay.show { visibility: visible; opacity: 1; transition: opacity 0.28s var(--ease), visibility 0s linear 0s; } .main-content { flex: 1; min-width: 0; margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-height: 100vh; } /* Warna Teks Otomatis untuk Latar Belakang Foto -- cuma menyentuh judul & paragraf yang duduk LANGSUNG di atas foto (anak langsung dari .container), BUKAN teks di dalam .card, karena .card selalu punya latar solid sendiri jadi tidak pernah kebaca-samar seperti foto. */ .bg-text-light .container > h1, .bg-text-light .container > h2, .bg-text-light .container > h3, .bg-text-light .container > p, .bg-text-light .container > .tab-panel > h1, .bg-text-light .container > .tab-panel > h2, .bg-text-light .container > .tab-panel > h3, .bg-text-light .container > .tab-panel > p { color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 2px 16px rgba(0,0,0,0.35); } .bg-text-light .container > p.subtitle a, .bg-text-light .container > .tab-panel > p.subtitle a { color: #cfe6ff; } .bg-text-dark .container > h1, .bg-text-dark .container > h2, .bg-text-dark .container > h3, .bg-text-dark .container > p, .bg-text-dark .container > .tab-panel > h1, .bg-text-dark .container > .tab-panel > h2, .bg-text-dark .container > .tab-panel > h3, .bg-text-dark .container > .tab-panel > p { color: #1d1d1f; text-shadow: 0 1px 3px rgba(255,255,255,0.7); } .bg-text-dark .container > p.subtitle a, .bg-text-dark .container > .tab-panel > p.subtitle a { color: #0058b0; } @media (max-width: 768px) { .sidebar-toggle { display: flex; } .sidebar .brand { padding-left: 22px; padding-top: 34px; } .sidebar { transform: translateX(-100%); box-shadow: 4px 0 24px rgba(0,0,0,0.18); } .sidebar.open { transform: translateX(0); } .sidebar-overlay.show { visibility: visible; } .main-content { margin-left: 0; } } /* ================= END SIDEBAR LAYOUT ================= */ .container { max-width: 1400px; width: 100%; margin: 24px auto; padding: 0 20px; } @media (max-width: 768px) { .container { margin-top: 60px; } } .footer { text-align: center; color: var(--muted); font-size: 12.5px; padding: 24px; } h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 4px; } h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin-top: 32px; } .subtitle { color: var(--muted); margin-top: 0; margin-bottom: 22px; font-size: 15px; } .card { background: var(--card); border: 1px solid var(--hairline-soft); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-sm); } /* ---- Section yang bisa dilipat (

) -- pola dasar "kurangi scroll di HP" dipakai di checkout.php/produk.php/pengaturan.php dst (Fase C-F mobile-first). Marker bawaan browser diganti caret kustom supaya konsisten dgn ikon lain di app (lihat nav_icon() header.php), &

boleh membungkus

tanpa margin aneh. ---- / details.card { padding: 0; overflow: hidden; } details.card > summary { cursor: pointer; list-style: none; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } details.card > summary::-webkit-details-marker { display: none; } details.card > summary h2 { margin: 0; } details.card > summary::after { content: '▾'; font-size: 13px; color: var(--muted); transition: transform 0.2s var(--ease); flex-shrink: 0; } details.card[open] > summary::after { transform: rotate(180deg); } details.card > summary:hover { background: var(--surface-tint); } / Isi selain summary WAJIB dibungkus 1
(bukan padding ditaruh langsung di tiap direct child) supaya beberapa elemen (tabel + paginasi, dst) tidak masing-masing dapat padding bawah sendiri-sendiri. / .details-card-body { padding: 0 24px 24px; } @media (max-width: 768px) { details.card > summary { padding: 16px; } .details-card-body { padding: 0 16px 16px; } } .grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; } .stat-box { background: var(--card); border: 1px solid var(--hairline-soft); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .stat-box:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .stat-box .num { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; } .stat-box .label { color: var(--muted); font-size: 13px; margin-top: 2px; } .stat-box.warn .num { color: var(--warning); } .stat-box.danger .num { color: var(--danger); } / Kotak ringkasan yang dibuat jadi tautan (mis. "Transaksi Keluar Hari Ini" -> Laporan, "Belum Checkout Hari Ini" -> Belum Checkout) tetap tampil sama persis seperti kotak biasa, tanpa gaya link bawaan browser. / a.stat-box { display: block; text-decoration: none; color: inherit; cursor: pointer; } a.stat-box:hover { border-color: rgba(0,113,227,0.35); } / Kartu Stok Menipis/Habis di Dashboard: lebih lebar (2 kolom) supaya nama produk yang panjang tetap muat, dan berisi daftar produk singkat. / .stat-box.stat-list { grid-column: span 2; } .stat-mini-list { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 6px; } .stat-mini-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; } .stat-mini-list li .nm { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stat-mini-list li .qty { color: var(--muted); white-space: nowrap; flex-shrink: 0; } .stat-box.stat-list .more { color: var(--muted); font-size: 12px; font-style: italic; margin-top: 6px; } @media (max-width: 768px) { .card { padding: 16px; } } / ---- Kartu KPI (dashboard & halaman lain yang butuh box angka besar) ---- Dipindah dari inline