/* |-------------------------------------------------------------------------- | SDI Design System — Satu Data Kotabaru |-------------------------------------------------------------------------- | Curated colors and premium components for a modern government portal. | Supports light and dark mode via [data-theme="dark"] on . */ /* ═══════════════════════════════════════════════════════════ LIGHT MODE (default) ═══════════════════════════════════════════════════════════ */ :root { /* Color Palette */ --sdi-primary: #1a56db; --sdi-primary-50: #eff6ff; --sdi-primary-600: #1c4ed8; --sdi-primary-700: #1d4ed8; --sdi-accent: #059669; --sdi-accent-50: #ecfdf5; --sdi-warning: #d97706; --sdi-warning-50: #fffbeb; --sdi-danger: #dc2626; --sdi-danger-50: #fef2f2; /* Surfaces */ --sdi-surface: #f1f5f9; --sdi-card: #ffffff; --sdi-card-border: rgba(255,255,255,0.7); --sdi-sidebar: #0f172a; --sdi-table-head: #f8fafc; --sdi-input-bg: #ffffff; /* Text */ --sdi-text: #1e293b; --sdi-muted: #64748b; --sdi-heading: #0f172a; /* Shadows */ --sdi-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --sdi-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --sdi-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* Borders */ --sdi-border: #e2e8f0; --sdi-border-subtle: rgba(0,0,0,0.06); } /* ═══════════════════════════════════════════════════════════ DARK MODE ═══════════════════════════════════════════════════════════ */ [data-theme="dark"] { --sdi-primary: #3b82f6; --sdi-primary-50: #1e3a5f; --sdi-primary-600: #2563eb; --sdi-primary-700: #1d4ed8; --sdi-accent: #10b981; --sdi-accent-50: #064e3b; --sdi-warning: #f59e0b; --sdi-warning-50: #451a03; --sdi-danger: #f87171; --sdi-danger-50: #450a0a; --sdi-surface: #0f172a; --sdi-card: #1e293b; --sdi-card-border: rgba(255,255,255,0.06); --sdi-sidebar: #020617; --sdi-table-head: #1e293b; --sdi-input-bg: #1e293b; --sdi-text: #e2e8f0; --sdi-muted: #94a3b8; --sdi-heading: #f8fafc; --sdi-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); --sdi-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3); --sdi-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4); --sdi-border: #334155; --sdi-border-subtle: rgba(255,255,255,0.06); } /* ═══════════════════════════════════════════════════════════ GLOBAL RESETS & TRANSITIONS ═══════════════════════════════════════════════════════════ */ /* Scoped transitions for dark mode support - avoids performance issues */ body, .card, .btn, .form-control, .form-select, .dropdown-menu, .dropdown-item, .alert, .badge, .table, .nav-link, .border, .border-top, .border-bottom, .border-start, .border-end, .bg-white, .bg-light, .text-dark, .text-muted { transition: background-color 0.3s ease, color 0.2s ease, border-color 0.2s ease; } /* Body defaults — public pages override these via styles.css variables */ body { color: var(--sdi-text); } /* ═══════════════════════════════════════════════════════════ PAGE FADE-IN ANIMATION ═══════════════════════════════════════════════════════════ */ @keyframes sdiFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes sdiFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes sdiPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); } 50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } } @keyframes sdiCountUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .sdi-page-enter { animation: sdiFadeIn 0.3s ease both; } /* ═══════════════════════════════════════════════════════════ CARDS ═══════════════════════════════════════════════════════════ */ .sdi-card { background: var(--sdi-card); backdrop-filter: blur(10px); border: 1px solid var(--sdi-card-border); box-shadow: var(--sdi-shadow); border-radius: 20px; transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; color: var(--sdi-text); } .sdi-card:hover { transform: translateY(-2px); box-shadow: var(--sdi-shadow-lg); } /* ═══════════════════════════════════════════════════════════ STAT CARDS ═══════════════════════════════════════════════════════════ */ .sdi-stat-card { padding: 24px; background: var(--sdi-card); border-radius: 24px; display: flex; align-items: center; gap: 16px; color: var(--sdi-text); } .sdi-stat-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; } /* Stagger entrance */ .sdi-stat-card[data-delay="0"] { animation: sdiFadeInUp 0.5s ease 0.0s both; } .sdi-stat-card[data-delay="1"] { animation: sdiFadeInUp 0.5s ease 0.1s both; } .sdi-stat-card[data-delay="2"] { animation: sdiFadeInUp 0.5s ease 0.2s both; } .sdi-stat-card[data-delay="3"] { animation: sdiFadeInUp 0.5s ease 0.3s both; } /* ═══════════════════════════════════════════════════════════ BADGES ═══════════════════════════════════════════════════════════ */ .sdi-badge { padding: 6px 14px; font-weight: 600; font-size: 11px; letter-spacing: 0.025em; text-transform: uppercase; border-radius: 9999px; display: inline-flex; align-items: center; gap: 4px; } .sdi-badge-success { background-color: var(--sdi-accent-50); color: var(--sdi-accent); border: 1px solid rgba(5, 150, 105, 0.2); } .sdi-badge-warning { background-color: var(--sdi-warning-50); color: var(--sdi-warning); border: 1px solid rgba(217, 119, 6, 0.2); } .sdi-badge-danger { background-color: var(--sdi-danger-50); color: var(--sdi-danger); border: 1px solid rgba(220, 38, 38, 0.2); } .sdi-badge-primary { background-color: var(--sdi-primary-50); color: var(--sdi-primary); border: 1px solid rgba(26, 86, 219, 0.2); } /* ═══════════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════════ */ .sdi-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 20px; border-radius: 12px; font-weight: 700; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); border: none; text-decoration: none !important; cursor: pointer; } .sdi-btn-primary { background: linear-gradient(135deg, var(--sdi-primary) 0%, #3b82f6 100%); color: white; box-shadow: 0 4px 12px rgba(26, 86, 219, 0.2); } .sdi-btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(26, 86, 219, 0.3); color: white; } /* ═══════════════════════════════════════════════════════════ TABLES (dark-mode aware) ═══════════════════════════════════════════════════════════ */ [data-theme="dark"] .table { color: var(--sdi-text); } [data-theme="dark"] .table thead { background: var(--sdi-table-head); color: var(--sdi-muted); } [data-theme="dark"] .table-hover tbody tr:hover { background: rgba(255,255,255,0.04); } [data-theme="dark"] .bg-light { background: #1e293b !important; } [data-theme="dark"] .border-bottom { border-color: var(--sdi-border) !important; } [data-theme="dark"] .text-dark { color: var(--sdi-text) !important; } [data-theme="dark"] .text-muted { color: var(--sdi-muted) !important; } [data-theme="dark"] .dropdown-menu { background: var(--sdi-card); border: 1px solid var(--sdi-border); } [data-theme="dark"] .dropdown-item { color: var(--sdi-text); } [data-theme="dark"] .dropdown-item:hover { background: rgba(255,255,255,0.06); } [data-theme="dark"] .btn-light { background: #334155; color: var(--sdi-text); border-color: var(--sdi-border); } [data-theme="dark"] .btn-outline-primary { border-color: var(--sdi-primary); color: var(--sdi-primary); } [data-theme="dark"] .alert-success { background: #064e3b; color: #6ee7b7; border-color: #059669; } [data-theme="dark"] .alert-danger { background: #450a0a; color: #fca5a5; border-color: #dc2626; } [data-theme="dark"] .alert-warning { background: #451a03; color: #fcd34d; border-color: #d97706; } /* ═══════════════════════════════════════════════════════════ HOVER UTILITIES ═══════════════════════════════════════════════════════════ */ .hover-translate-y { transition: transform 0.2s ease, box-shadow 0.2s ease; } .hover-translate-y:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); } [data-theme="dark"] .hover-translate-y:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.4); } /* ═══════════════════════════════════════════════════════════ NOTIFICATION BELL PULSE ═══════════════════════════════════════════════════════════ */ .sdi-bell-pulse { animation: sdiPulse 2s infinite; border-radius: 50%; } /* ═══════════════════════════════════════════════════════════ THEME TOGGLE BUTTON ═══════════════════════════════════════════════════════════ */ #themeToggle { min-width: 42px; height: 42px; border-radius: 21px; border: 1px solid var(--sdi-border); background: var(--sdi-card); color: var(--sdi-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; box-shadow: var(--sdi-shadow-sm); padding: 0 12px; } #themeToggle:hover { transform: rotate(20deg) scale(1.1); box-shadow: var(--sdi-shadow); } /* ═══════════════════════════════════════════════════════════ SIDEBAR OVERLAY (mobile) ═══════════════════════════════════════════════════════════ */ .sdi-sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999; display: none; backdrop-filter: blur(2px); } .sdi-sidebar-overlay.active { display: block; } /* ═══════════════════════════════════════════════════════════ FLASH ALERTS — auto-dismiss with fade ═══════════════════════════════════════════════════════════ */ .sdi-flash-alert { transition: opacity 0.4s ease, transform 0.4s ease; opacity: 1; } .sdi-flash-alert.fading { opacity: 0; transform: translateY(-8px); } /* ═══════════════════════════════════════════════════════════ BREADCRUMB (dark-mode aware) ═══════════════════════════════════════════════════════════ */ .sdi-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sdi-muted); margin-bottom: 4px; } .sdi-breadcrumb a { color: var(--sdi-primary); text-decoration: none; } .sdi-breadcrumb a:hover { text-decoration: underline; } /* ═══════════════════════════════════════════════════════════ DARK MODE — sidebar ═══════════════════════════════════════════════════════════ */ [data-theme="dark"] .sidebar { background: var(--sdi-sidebar); } [data-theme="dark"] .main-content { background: var(--sdi-surface); } /* ═══════════════════════════════════════════════════════════ CHART CONTAINERS ═══════════════════════════════════════════════════════════ */ .sdi-chart-container { position: relative; width: 100%; } /* ═══════════════════════════════════════════════════════════ DARK MODE — form controls ═══════════════════════════════════════════════════════════ */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: var(--sdi-input-bg); color: var(--sdi-text); border-color: var(--sdi-border); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background: var(--sdi-input-bg); color: var(--sdi-text); border-color: var(--sdi-primary); box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.15); } [data-theme="dark"] .input-group-text { background: #334155; color: var(--sdi-muted); border-color: var(--sdi-border); } /* Generic Card overrides */ .card { background-color: var(--sdi-card); color: var(--sdi-text); border: 1px solid var(--sdi-border); transition: background-color 0.3s ease, border-color 0.2s ease, box-shadow 0.3s ease; } [data-theme="dark"] .card { background-color: var(--sdi-card); border-color: var(--sdi-border) !important; } /* Global utility dark mode overrides */ [data-theme="dark"] .bg-white { background-color: var(--sdi-card) !important; } [data-theme="dark"] .bg-light { background-color: var(--sdi-surface) !important; } [data-theme="dark"] .btn-white { background-color: var(--sdi-input-bg) !important; color: var(--sdi-text) !important; border-color: var(--sdi-border) !important; } [data-theme="dark"] .btn-white:hover { background-color: var(--sdi-surface) !important; color: var(--sdi-text) !important; } [data-theme="dark"] .text-dark { color: var(--sdi-text) !important; } [data-theme="dark"] .text-muted { color: var(--sdi-muted) !important; } [data-theme="dark"] .border { border-color: var(--sdi-border) !important; } [data-theme="dark"] .border-top { border-color: var(--sdi-border) !important; } [data-theme="dark"] .border-bottom { border-color: var(--sdi-border) !important; } [data-theme="dark"] .border-start { border-color: var(--sdi-border) !important; } [data-theme="dark"] .border-end { border-color: var(--sdi-border) !important; } [data-theme="dark"] .border-light { border-color: var(--sdi-border) !important; } /* Subtle / Soft Alerts and Badges */ [data-theme="dark"] .bg-success-subtle, [data-theme="dark"] .bg-success-soft { background-color: rgba(16, 185, 129, 0.15) !important; color: #34d399 !important; } [data-theme="dark"] .bg-danger-subtle, [data-theme="dark"] .bg-danger-soft { background-color: rgba(239, 68, 68, 0.15) !important; color: #f87171 !important; } [data-theme="dark"] .bg-warning-subtle, [data-theme="dark"] .bg-warning-soft { background-color: rgba(245, 158, 11, 0.15) !important; color: #fbbf24 !important; } [data-theme="dark"] .bg-primary-subtle { background-color: rgba(59, 130, 246, 0.15) !important; color: #3b82f6 !important; } /* Select option styling under chrome/firefox */ [data-theme="dark"] select option { background-color: var(--sdi-card) !important; color: var(--sdi-text) !important; } /* Multi-step form wizard components */ [data-theme="dark"] .step-circle.bg-white { background-color: var(--sdi-surface) !important; border-color: var(--sdi-border) !important; color: var(--sdi-muted) !important; } [data-theme="dark"] .option-card { border-color: var(--sdi-border) !important; background: var(--sdi-surface) !important; } [data-theme="dark"] .option-card:hover { background: var(--sdi-card) !important; border-color: var(--sdi-primary) !important; } [data-theme="dark"] .option-card.selected { background: var(--sdi-primary-50) !important; border-color: var(--sdi-primary) !important; } [data-theme="dark"] .upload-zone { border-color: var(--sdi-border) !important; background: var(--sdi-surface) !important; } [data-theme="dark"] .upload-zone:hover { border-color: var(--sdi-primary) !important; background: var(--sdi-primary-50) !important; } [data-theme="dark"] .field-card { background: var(--sdi-card) !important; border-color: var(--sdi-border) !important; } /* Dataset Sektoral & Dasar Filter / Search Page overrides */ [data-theme="dark"] .filter-card { background: var(--sdi-card) !important; border-color: var(--sdi-border) !important; box-shadow: var(--sdi-shadow) !important; } [data-theme="dark"] .filter-label { color: var(--sdi-muted) !important; } [data-theme="dark"] .search-wrap { background: var(--sdi-input-bg) !important; border-color: var(--sdi-border) !important; } [data-theme="dark"] .search-wrap.focused { background: var(--sdi-input-bg) !important; border-color: var(--sdi-primary) !important; } [data-theme="dark"] .search-input { color: var(--sdi-text) !important; } [data-theme="dark"] .search-input::placeholder { color: var(--sdi-muted) !important; } [data-theme="dark"] .filter-select { background: var(--sdi-input-bg) !important; color: var(--sdi-text) !important; border-color: var(--sdi-border) !important; } [data-theme="dark"] .filter-select:focus { background: var(--sdi-input-bg) !important; border-color: var(--sdi-primary) !important; } [data-theme="dark"] .filter-select.is-active { background: var(--sdi-primary-50) !important; border-color: var(--sdi-primary) !important; color: var(--sdi-text) !important; } [data-theme="dark"] .btn-reset { background: var(--sdi-input-bg) !important; color: var(--sdi-muted) !important; border-color: var(--sdi-border) !important; } [data-theme="dark"] .btn-reset:hover, [data-theme="dark"] .btn-reset.has-filters { background: var(--sdi-danger-50) !important; border-color: var(--sdi-danger) !important; color: var(--sdi-danger) !important; } [data-theme="dark"] .filter-chip { background: var(--sdi-primary-50) !important; border-color: var(--sdi-border) !important; } [data-theme="dark"] .chip-val { color: var(--sdi-text) !important; } [data-theme="dark"] .table-head { background: var(--sdi-table-head) !important; } [data-theme="dark"] .dataset-row:hover { background: rgba(255,255,255,0.04) !important; } [data-theme="dark"] .badge-year { background: var(--sdi-primary-50) !important; color: var(--sdi-primary) !important; } [data-theme="dark"] .icon-btn-view { background: var(--sdi-primary-50) !important; color: var(--sdi-primary) !important; } [data-theme="dark"] .icon-btn-verify { background: var(--sdi-accent-50) !important; color: var(--sdi-accent) !important; } /* ═══════════════════════════════════════════════════════════ MISC UTILITIES ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ STEP 3/4 TABLE OVERHAUL UX STYLES ═══════════════════════════════════════════════════════════ */ .field-grip-handle { cursor: grab; color: var(--sdi-muted); font-size: 1.1rem; display: inline-flex; align-items: center; padding: 0 4px; user-select: none; } .field-grip-handle:active { cursor: grabbing; } .field-type-badge { font-size: 0.75rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; } .badge-type-string { background-color: var(--sdi-primary-50); color: var(--sdi-primary); } .badge-type-integer { background-color: var(--sdi-accent-50); color: var(--sdi-accent); } .badge-type-decimal { background-color: var(--sdi-warning-50); color: var(--sdi-warning); } .badge-type-date { background-color: var(--sdi-danger-50); color: var(--sdi-danger); } .table-preview-panel { border-left: 1px solid var(--sdi-border); padding-left: 20px; } @media (max-width: 991.98px) { .table-preview-panel { border-left: none; border-top: 1px solid var(--sdi-border); padding-left: 0; padding-top: 20px; margin-top: 20px; } } .row-counter-pill { position: fixed; bottom: 24px; right: 24px; background: var(--sdi-sidebar); color: white; padding: 10px 20px; border-radius: 50px; box-shadow: var(--sdi-shadow-lg); z-index: 1040; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,0.1); font-size: 0.85rem; font-weight: 600; } [data-theme="dark"] .row-counter-pill { background: var(--sdi-card); border-color: var(--sdi-border); } .template-card { border: 1px solid var(--sdi-border); border-radius: 12px; background: var(--sdi-card); transition: all 0.2s ease; cursor: pointer; } .template-card:hover { border-color: var(--sdi-primary); transform: translateY(-2px); box-shadow: var(--sdi-shadow); } .empty-state-table { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; color: var(--sdi-muted); } .empty-state-table i { font-size: 2.5rem; margin-bottom: 12px; opacity: 0.6; } .fw-extrabold { font-weight: 800; } .x-small { font-size: 11px; } .z-index-1 { z-index: 1; } .transition-all { transition: all 0.2s ease; } /* ═══════════════════════════════════════════════════════════ MODAL TWEAKS ═══════════════════════════════════════════════════════════ */ body.modal-open { overflow: auto !important; padding-right: 0 !important; } .modal-body { max-height: 70vh; overflow-y: auto; }