/* ========================================================= THEME OVERRIDE: Regional 3 CEO - Executive Dashboard Menyesuaikan Edmate dengan referensi: https://executive-summary-regional-3.vercel.app/ ========================================================= */ /* --- 1. Google Fonts Stack (Sora + Inter sebagai fallback --- Sudah di-load di , cukup apply ke root */ :root { /* Font family baru mengikuti referensi */ --theme-body-font: "Inter", "Sora", "Segoe UI", system-ui, sans-serif; --theme-heading-font: "Sora", "Inter", "Segoe UI", system-ui, sans-serif; /* Palet warna utama (dari referensi Vercel) */ --r3-bg: #EEF3F8; /* halaman body utama */ --r3-bg-card: #F8FAFC; /* card di content area */ --r3-bg-soft-blue: #F8FBFF; /* card KPI/info */ --r3-navy: #062F56; /* teks heading/content utama */ --r3-navy-deep: #1E3A5F; /* tab aktif / sidebar bg */ --r3-navy-mid: #334E68; /* teks secondary */ --r3-slate-500: #64748B; /* tab non aktif */ --r3-gray-500: #5B6B7C; /* teks help */ --r3-slate-700: #334155; --r3-blue-pi: #4491CF; /* primary Pupuk Indonesia */ --r3-green-pi: #8AC341; /* accent hijau Pupuk Indonesia */ --r3-blue-50: #EAF4FC; --r3-blue-border: rgba(0, 114, 188, 0.24); --r3-blue-glow: rgba(68, 145, 207, 0.18); --r3-green-glow: rgba(138, 195, 65, 0.18); --r3-radius: 12px; /* Override variable Edmate (agar menimpa style asli) */ --heading-font: var(--theme-heading-font); --body-font: var(--theme-body-font); --heading-color: var(--r3-navy); --body-color: var(--r3-navy); --body-bg: #EEF3F8; --section-bg: #EEF3F8; --border-color: 214 32% 85%; } /* --- 2. Root dan Base --- */ html, body { font-family: var(--theme-body-font) !important; background: var(--r3-bg) !important; color: var(--r3-navy) !important; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--theme-heading-font) !important; color: var(--r3-navy) !important; font-weight: 700; letter-spacing: -0.01em; } h1, .h1 { font-weight: 800 !important; } /* Teks secondary / metadata */ .text-gray-300, .text-gray-400, .text-gray-500 { color: var(--r3-gray-500) !important; font-weight: 500 !important; } /* Link umum */ a { color: var(--r3-blue-pi); } a:hover { color: var(--r3-navy); } /* --- 3. Sidebar (tema gelap navy, seperti referensi) --- */ .sidebar { background: linear-gradient(180deg, var(--r3-navy) 0%, var(--r3-navy-deep) 100%); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10); border-inline-end: 1px solid rgba(255, 255, 255, 0.06); } .sidebar__logo { background: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; padding-top: 18px; padding-bottom: 18px; padding-inline: 18px; } /* Teks di dalam sidebar */ .sidebar-menu__link { color: rgba(216, 232, 243, 0.78) !important; font-weight: 600 !important; font-size: 12.5px !important; font-family: var(--theme-body-font) !important; letter-spacing: 0.01em; border-radius: 12px; padding: 8px 12px !important; margin-inline: 6px; transition: all 0.2s ease; } .sidebar-menu__link:hover { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; border-color: transparent; } .sidebar-menu__item.active > .sidebar-menu__link, .sidebar-menu__link.active { background: linear-gradient(90deg, rgba(68, 145, 207, 0.28), rgba(68, 145, 207, 0.08)) !important; color: #ffffff !important; font-weight: 700 !important; border-inline-start: 2px solid rgba(255, 255, 255, 0.18); } /* Ikon di sidebar: berwarna biru cerah atau hijau (Pupuk Indonesia) */ .sidebar-menu__link .icon { color: rgba(159, 199, 223, 0.85) !important; } .sidebar-menu__item.active > .sidebar-menu__link .icon { color: var(--r3-blue-pi) !important; } /* Submenu item (dalam dropdown menu utama) */ .sidebar-submenu__link { color: rgba(216, 232, 243, 0.74) !important; font-weight: 500 !important; font-size: 12.5px !important; font-family: var(--theme-body-font) !important; border-radius: 12px; padding: 7px 11px !important; margin-inline: 6px; transition: all 0.18s ease; } .sidebar-submenu__link:hover { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; } .sidebar-submenu__item.active > .sidebar-submenu__link { background: linear-gradient(90deg, rgba(68, 145, 207, 0.24), rgba(68, 145, 207, 0.08)) !important; color: #ffffff !important; font-weight: 700 !important; } /* Label group di sidebar (kategori menu): uppercase tipis */ .sidebar .sidebar-section-title, .sidebar-menu-label { color: rgba(216, 232, 243, 0.55) !important; font-family: var(--theme-body-font) !important; font-weight: 700 !important; font-size: 10px !important; letter-spacing: 0.12em; text-transform: uppercase; padding-left: 14px; } /* Tombol collapse sidebar */ .sidebar-collapse-btn { position: absolute !important; inset-inline-end: 12px !important; inset-block-start: auto !important; inset-block-end: 12px !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; color: rgba(216, 232, 243, 0.9) !important; border-radius: 999px !important; backdrop-filter: blur(2px); transition: all 0.2s ease; } .sidebar-collapse-btn:hover { background: var(--r3-blue-pi) !important; color: #ffffff !important; border-color: var(--r3-blue-pi) !important; } @media screen and (max-width: 1199px) { .sidebar-collapse-btn { inset-block-start: 18px !important; inset-block-end: auto !important; } } /* --- 4. Container dan layout content area --- */ .dashboard-body { padding: 22px 18px 40px !important; } @media (min-width: 1280px) { .dashboard-body { padding: 28px 28px 48px !important; } } /* Card wrapper utama di setiap page */ .card.border.rounded-12.box-shadow-custom, .card-body > .card { background: #ffffff !important; border: 1px solid rgba(6, 47, 86, 0.08) !important; border-radius: var(--r3-radius) !important; box-shadow: 0 8px 24px -12px rgba(6, 47, 86, 0.16) !important; } .card-body { padding: 22px 22px 26px !important; } @media (min-width: 1280px) { .card-body { padding: 28px 30px 34px !important; } } /* Heading H1 halaman */ .dashboard-body h1 { font-family: var(--theme-heading-font) !important; font-size: 22px !important; font-weight: 800 !important; color: var(--r3-navy) !important; letter-spacing: -0.01em; line-height: 1.15; } @media (min-width: 1024px) { .dashboard-body h1 { font-size: 26px !important; } } /* Badge info (Periode / File aktif) */ .dashboard-body .text-gray-300 code, .dashboard-body code { background: var(--r3-blue-50) !important; color: var(--r3-navy-deep) !important; border: 1px solid var(--r3-blue-border) !important; border-radius: 8px !important; padding: 3px 9px !important; font-family: "Sora", ui-monospace, monospace !important; font-size: 12px !important; font-weight: 600 !important; } /* --- 5. Button styles --- */ .btn { font-family: var(--theme-body-font) !important; font-weight: 600 !important; font-size: 13px !important; padding: 8px 16px !important; border-radius: 12px !important; letter-spacing: 0.005em; transition: all 0.18s ease; } .btn.btn-sm { padding: 5px 11px !important; font-size: 12px !important; border-radius: 10px !important; } /* Primary / btn-main: biru PI #4491CF */ .btn-main { background: var(--r3-blue-pi) !important; border: 1px solid var(--r3-blue-pi) !important; color: #ffffff !important; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.16) inset, 0 6px 18px -8px rgba(68, 145, 207, 0.7); } .btn-main:hover { background: #337ab8 !important; border-color: #337ab8 !important; transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(68, 145, 207, 0.75); } .btn-main:active { transform: translateY(0); background: #2b6ba3 !important; } /* Outline & tombol abu (btn-outline-gray, btn-outline-main) */ .btn-outline-gray, .btn-outline-main { background: #ffffff !important; border: 1px solid rgba(6, 47, 86, 0.14) !important; color: var(--r3-navy-mid) !important; font-weight: 600 !important; } .btn-outline-main { border-color: var(--r3-blue-pi) !important; color: var(--r3-blue-pi) !important; } .btn-outline-gray:hover, .btn-outline-main:hover { background: var(--r3-blue-50) !important; border-color: var(--r3-blue-pi) !important; color: var(--r3-blue-pi) !important; } /* Button action primary (sukses/danger inline tabel): compact */ .btn-primary:not(.btn-sm), .btn-danger:not(.btn-sm) { border-radius: 10px !important; padding: 6px 12px !important; font-size: 12px !important; font-weight: 600 !important; } /* --- 6. Form components (input, select, textarea) --- */ .form-control, .form-select, textarea, input[type=text], input[type=number], input[type=search], input[type=date], input[type=month] { font-family: var(--theme-body-font) !important; font-size: 13.5px !important; font-weight: 500; color: var(--r3-navy) !important; background: #ffffff !important; border: 1px solid rgba(6, 47, 86, 0.14) !important; border-radius: 12px !important; padding: 8px 13px !important; box-shadow: none !important; transition: all 0.16s ease; } .form-control:focus, .form-select:focus, textarea:focus, input:focus { border-color: var(--r3-blue-pi) !important; outline: 3px solid rgba(68, 145, 207, 0.14) !important; box-shadow: none !important; } .form-control::placeholder, .form-select::placeholder { color: var(--r3-slate-500) !important; font-weight: 500 !important; } /* Dropdown tahun (khusus) - agar tidak terpotong dan lebar */ select[name=year] { min-width: 160px !important; width: 160px !important; } /* --- 7. Table / Grid styling (mirip referensi) --- */ .table { font-family: var(--theme-body-font) !important; border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px !important; color: var(--r3-navy-deep) !important; background: #ffffff; border-radius: var(--r3-radius) !important; overflow: hidden; } .table thead th { font-family: var(--theme-heading-font) !important; background: var(--r3-bg) !important; color: var(--r3-navy) !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: 0.01em; text-transform: none; padding: 12px 13px !important; border: 0 !important; border-bottom: 1px solid rgba(6, 47, 86, 0.08) !important; white-space: nowrap; } .table tbody td { padding: 11px 13px !important; color: var(--r3-slate-700) !important; background: #ffffff; border: 0 !important; border-bottom: 1px solid rgba(6, 47, 86, 0.06) !important; font-size: 13px !important; font-weight: 500; vertical-align: middle; } .table tbody tr:hover td { background: var(--r3-bg-soft-blue); } .table tbody tr:last-child td { border-bottom: 0 !important; } /* Kolom ID rata kanan, kolom aksi tidak wrap */ .table tbody td:nth-child(2) { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--r3-navy); } /* Table wrap container dengan border halus */ .table-wrap { background: #ffffff; border: 1px solid rgba(6, 47, 86, 0.08); border-radius: var(--r3-radius); overflow: auto; box-shadow: 0 1px 0 0 rgba(6, 47, 86, 0.02) inset; } .table-wrap .table { border-radius: 0 !important; } /* --- 8. Alert (sukses, error, warning, info) --- */ .alert { font-family: var(--theme-body-font) !important; font-weight: 500 !important; font-size: 13px !important; border-radius: var(--r3-radius) !important; border-width: 1px !important; padding: 12px 16px !important; } .alert-success { background: #EFFBF3 !important; border-color: rgba(46, 184, 96, 0.35) !important; color: #1B5E34 !important; } .alert-success a { color: #104926 !important; font-weight: 700 !important; text-decoration: underline; text-underline-offset: 2px; } .alert-danger { background: #FEF2F2 !important; border-color: rgba(239, 68, 68, 0.35) !important; color: #7F1D1D !important; } .alert-warning { background: #FFF7ED !important; border-color: rgba(249, 115, 22, 0.32) !important; color: #7C2D12 !important; } .alert-info { background: var(--r3-bg-soft-blue) !important; border-color: var(--r3-blue-border) !important; color: var(--r3-navy-deep) !important; } /* --- 9. Pagination --- */ .pagination, .dashboard-body .mt-3.d-flex.gap-2, .dashboard-body .d-flex.align-items-center.gap-2.flex-wrap:has(> .btn.btn-sm) { gap: 6px !important; } .btn.btn-sm, .dashboard-body .btn.btn-outline-gray.btn-sm, .dashboard-body .btn.btn-main.btn-sm { font-family: var(--theme-body-font) !important; font-weight: 600 !important; min-width: 34px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px !important; border: 1px solid rgba(6, 47, 86, 0.12) !important; } .dashboard-body .btn.btn-main.btn-sm { background: var(--r3-blue-pi) !important; border-color: var(--r3-blue-pi) !important; color: #fff !important; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.18) inset; } .dashboard-body .btn.btn-outline-gray.btn-sm:hover { background: var(--r3-blue-50); border-color: var(--r3-blue-pi); color: var(--r3-blue-pi); } /* --- 10. Progress bar generate report --- */ progress { appearance: none; -webkit-appearance: none; width: 280px !important; height: 14px !important; border-radius: 999px !important; overflow: hidden; background: rgba(68, 145, 207, 0.14) !important; border: 1px solid rgba(68, 145, 207, 0.22) !important; } progress::-webkit-progress-bar { background: rgba(68, 145, 207, 0.10); border-radius: 999px; } progress::-webkit-progress-value { background: linear-gradient(90deg, var(--r3-blue-pi), #5FA9E0); border-radius: 999px; } progress::-moz-progress-bar { background: linear-gradient(90deg, var(--r3-blue-pi), #5FA9E0); border-radius: 999px; } /* --- 11. Summary info row (info file, info periode) --- */ .dashboard-body .d-flex.justify-content-between.align-items-center.flex-wrap.gap-2 { gap: 10px !important; } .dashboard-body .d-flex.justify-content-between.align-items-center { gap: 10px; flex-wrap: wrap; } /* Inline layout periode (tanggal bulan tahun + generate) agar rapi */ .dashboard-body form[method=get].d-inline-flex.align-items-center { gap: 6px !important; background: rgba(68, 145, 207, 0.05); border: 1px solid rgba(68, 145, 207, 0.10); padding: 8px 10px; border-radius: 14px; } /* --- 12. Utility colors untuk label --- */ .bg-primary, .badge-primary { background: var(--r3-blue-pi) !important; color: #ffffff !important; } .bg-success, .badge-success { background: var(--r3-green-pi) !important; color: #ffffff !important; } .text-primary { color: var(--r3-blue-pi) !important; } .text-success { color: var(--r3-green-pi) !important; } /* --- 13. Label/tag/card header mini --- */ .summary-kpi-card, .kpi-card, .stat-card { background: var(--r3-bg-soft-blue) !important; border: 1px solid var(--r3-blue-border) !important; border-radius: var(--r3-radius) !important; padding: 14px 16px; } /* Scrollbar cantik di table-wrap dan main area */ .table-wrap::-webkit-scrollbar, main::-webkit-scrollbar, body::-webkit-scrollbar, .dashboard-body::-webkit-scrollbar { width: 10px; height: 10px; } .table-wrap::-webkit-scrollbar-thumb, main::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: rgba(68, 145, 207, 0.35); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .table-wrap::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: rgba(68, 145, 207, 0.55); background-clip: padding-box; border: 2px solid transparent; } .table-wrap::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: rgba(6, 47, 86, 0.04); } /* --- 14. Sidebar Brand: Logo + Title (Regional 3 CEO Vercel style) --- */ .sidebar .sidebar__logo { background: transparent !important; padding: 16px 16px 10px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06); text-align: left !important; } .sidebar .r3-logo-card { display: block; width: 100%; padding: 10px 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; margin-bottom: 14px; } .sidebar .r3-logo-card .r3-logo-svg { display: block; width: 100%; height: auto; } .sidebar .r3-brand-text { padding-left: 1px; } .sidebar .r3-app-title { margin: 0; padding: 0; font-family: var(--r3-body-font); font-weight: 700; font-size: 13px; line-height: 16.25px; letter-spacing: 0.13px; color: #ffffff; margin-bottom: 3px; } .sidebar .r3-app-subtitle { margin: 0; padding: 0; font-family: var(--r3-body-font); font-weight: 800; font-size: 9.5px; line-height: 1.2; letter-spacing: 1.33px; color: rgba(216, 232, 243, 0.88); text-transform: uppercase; margin-bottom: 4px; } /* Sidebar minimized: hide brand text agar cuma logo tampil */ .sidebar.is-collapsed .r3-brand-text, .sidebar.collapsed .r3-brand-text { display: none !important; } .sidebar.is-collapsed .r3-logo-card text, .sidebar.collapsed .r3-logo-card text { display: none !important; } .sidebar.is-collapsed .r3-logo-card, .sidebar.collapsed .r3-logo-card { padding: 10px 6px; margin-bottom: 6px; } /* Tombol collapse tetap di kanan bawah area logo sesuai requirement sebelumnya */ .sidebar .sidebar-collapse-btn { position: absolute !important; inset-block-end: 12px !important; inset-inline-end: 10px !important; inset-block-start: auto !important; inset-inline-start: auto !important; top: auto !important; right: 10px !important; bottom: 12px !important; left: auto !important; background: rgba(255, 255, 255, 0.08) !important; color: rgba(216, 232, 243, 0.7) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 10px !important; width: 32px !important; height: 32px !important; padding: 0 !important; } .sidebar .sidebar-collapse-btn:hover { background: var(--r3-blue-pi) !important; color: #ffffff !important; border-color: rgba(68, 145, 207, 0.6) !important; }