:root { --app-primary: #6d5dfc; --app-primary-dark: #4c36d1; --app-accent-2: #b23ad6; --page-accent: #6d5dfc; /* di-override inline per halaman lewat body style="--page-accent:...", lihat header.php */ } body { background-color: #f4f5f9; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: .9rem; } h1, h2, h3, h4, h5, h6, .navbar-brand, .offcanvas-title { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 600; } h5.fw-bold, .fw-bold { font-weight: 600 !important; } h5 { font-size: 1rem; } .navbar-brand { font-size: 1rem; } .card-body, .card { font-size: .875rem; } /* ------------------------------------------------------------ NAVBAR - gradient vivid indigo -> magenta ------------------------------------------------------------ */ .app-navbar { background: linear-gradient(90deg, var(--app-primary) 0%, var(--app-accent-2) 100%); } .app-body { min-height: calc(100vh - 56px); } /* ------------------------------------------------------------ SIDEBAR - dark navy/violet gradient, tiap menu punya warna sendiri (--item-color di-set inline per item dari database, lihat sidebar.php) ------------------------------------------------------------ */ .app-sidebar { width: 230px; background: linear-gradient(180deg, #1e1b39 0%, #2a1b4a 100%); color: #fff; } .app-sidebar .nav-link { --item-color: #6d5dfc; display: flex; align-items: center; gap: .6rem; color: #cbd5e1; padding: .45rem 1rem; border-radius: 0; font-size: .85rem; transition: background-color .15s ease, color .15s ease; } .app-sidebar .nav-icon { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: color-mix(in srgb, var(--item-color) 28%, transparent); color: var(--item-color); font-size: .875rem; transition: background-color .15s ease, color .15s ease; } .app-sidebar .nav-link:hover, .app-sidebar .nav-link.active { color: #fff; background: color-mix(in srgb, var(--item-color) 22%, transparent); } .app-sidebar .nav-link:hover .nav-icon, .app-sidebar .nav-link.active .nav-icon { background: var(--item-color); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--item-color) 35%, transparent); } .app-sidebar .nav-link.active { border-left: 3px solid var(--item-color); } .app-content { min-width: 0; } /* ------------------------------------------------------------ CARDS - setiap halaman mewarisi warna aksen menunya sendiri (--page-accent di-set di , lihat header.php) ------------------------------------------------------------ */ .card { border: none; border-top: 4px solid var(--page-accent, var(--app-primary)); border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.06); } .stat-card { border-top: none; border-radius: 16px; color: #fff; } .stat-card .stat-value { font-size: 1.5rem; font-weight: 600; } /* ------------------------------------------------------------ TABEL - header tabel ikut warna aksen halaman ------------------------------------------------------------ */ table.table td, table.table th { vertical-align: middle; } table.table { font-size: .85rem; } table.table thead th { border-bottom: 2px solid var(--page-accent, var(--app-primary)); color: #334155; font-weight: 600; text-transform: uppercase; font-size: .72rem; letter-spacing: .03em; } /* ------------------------------------------------------------ TOMBOL & BADGE - brand warna utama dipakai konsisten di semua halaman ------------------------------------------------------------ */ .btn-primary { background-color: var(--app-primary); border-color: var(--app-primary); } .btn-primary:hover, .btn-primary:focus { background-color: var(--app-primary-dark); border-color: var(--app-primary-dark); } .btn-outline-primary { color: var(--app-primary); border-color: var(--app-primary); } .btn-outline-primary:hover { background-color: var(--app-primary); border-color: var(--app-primary); } a { color: var(--app-primary); } .badge-status-success { background:#16a34a; } .badge-status-failed { background:#dc2626; } .badge-status-no_match { background:#6b7280; } .badge-status-pending { background:#f59e0b; } /* ------------------------------------------------------------ LOGIN / REGISTER - gradient sunset violet -> magenta -> coral ------------------------------------------------------------ */ .auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-accent-2) 55%, #ff6f61 100%); padding: 16px; } .auth-card { max-width: 420px; width: 100%; border-radius: 18px; border-top: 4px solid var(--app-primary); } @media (min-width: 992px) { .offcanvas-lg.offcanvas-start { position: sticky; top: 56px; height: calc(100vh - 56px); } }