/* ========================================================= ABSA Tourism Dashboard — style.css Satu file CSS untuk seluruh halaman. Tema gelap/terang diatur lewat atribut [data-theme] di , di-toggle oleh static/js/theme.js ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); /* ---------- 1. Design tokens ---------- */ :root, [data-theme="dark"] { --bg-app: #0a0e1a; --bg-shell: #0f1524; --bg-sidebar: #0c111e; --bg-card: #141b2d; --bg-card-hover: #182036; --bg-input: #0f1524; --border-color: rgba(255, 255, 255, 0.08); --text-primary: #f2f4f8; --text-secondary: #8b93a7; --text-muted: #5a6278; --accent-navy: #26425a; --accent-blue: #86a8cf; --accent-pink: #c38eb4; --accent-blush: #e1cbd7; --accent-gradient: linear-gradient(135deg, var(--accent-navy), var(--accent-pink)); --positive: #4ade80; --negative: #f87171; --warning: #fbbf24; --neutral: #64748b; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35); } [data-theme="light"] { --bg-app: #eef0f6; --bg-shell: #f6f7fb; --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f2f4fa; --bg-input: #ffffff; --border-color: rgba(20, 25, 40, 0.08); --text-primary: #1a1f2e; --text-secondary: #5b6478; --text-muted: #8a91a3; --shadow-card: 0 8px 24px rgba(30, 41, 59, 0.08); } /* ---------- 2. Reset & base ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Poppins', sans-serif; background: var(--bg-app); color: var(--text-primary); transition: background-color .25s ease, color .25s ease; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button, input, select { font-family: inherit; } /* ---------- 3. App shell layout ---------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 260px; flex-shrink: 0; background: var(--bg-sidebar); border-right: 1px solid var(--border-color); padding: 24px 16px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; } .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 999px; } .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 8px; } .brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 14px rgba(195, 142, 180, 0.25); } .brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .brand-title { font-weight: 600; font-size: 13.5px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-subtitle { font-size: 11.5px; color: var(--text-muted); } .nav-divider { height: 1px; background: var(--border-color); margin: 2px 4px; } .main-content { flex: 1; min-width: 0; padding: 24px 32px 48px; } /* ---------- 4. Sidebar navigation ---------- */ .nav-group { display: flex; flex-direction: column; gap: 2px; } .nav-group-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: 8px 12px 4px; } .nav-link, .nav-group-toggle { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .1s ease; } .nav-icon { flex-shrink: 0; opacity: .85; } .nav-group-label-text { flex: 1; min-width: 0; } .nav-link:hover, .nav-group-toggle:hover { background: var(--bg-card-hover); color: var(--text-primary); } .nav-link:active, .nav-group-toggle:active { transform: scale(0.98); } .nav-link.active { background: var(--accent-gradient); color: #fff; box-shadow: 0 4px 12px rgba(195, 142, 180, 0.18); } .nav-link.active .nav-icon { opacity: 1; } .nav-subgroup { padding-left: 6px; margin-top: 2px; display: flex; flex-direction: column; gap: 1px; } .nav-subgroup .nav-link { padding-left: 32px; font-size: 13px; font-weight: 400; position: relative; } .nav-subgroup .nav-link::before { content: ""; position: absolute; left: 17px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); transform: translateY(-50%); } .nav-subgroup .nav-link.active::before { background: #fff; } details.nav-group-details > summary { list-style: none; } details.nav-group-details > summary::-webkit-details-marker { display: none; } .nav-group-toggle .chevron { flex-shrink: 0; transition: transform .2s ease; opacity: .6; } details[open] .nav-group-toggle .chevron { transform: rotate(90deg); } /* ---------- 5. Navbar / topbar ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; } .topbar-title h1 { font-size: 22px; font-weight: 600; } .topbar-title p { font-size: 13px; color: var(--text-secondary); margin-top: 2px; } .topbar-actions { display: flex; align-items: center; gap: 10px; } .theme-toggle-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; } .theme-toggle-btn:hover { background: var(--bg-card-hover); } /* ---------- 6. Cards & common components ---------- */ .card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-card); } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; } .stat-card .stat-label { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 6px; } .stat-card .stat-value { font-size: 26px; font-weight: 700; } .stat-card .stat-delta.positive { color: var(--positive); } .stat-card .stat-delta.negative { color: var(--negative); } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; border: none; cursor: pointer; } .btn-primary { background: var(--accent-gradient); color: #fff; } .btn-outline { background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); } .badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; } .badge-positive { background: rgba(74, 222, 128, .12); color: var(--positive); } .badge-negative { background: rgba(248, 113, 113, .12); color: var(--negative); } .badge-warning { background: rgba(251, 191, 36, .12); color: var(--warning); } .empty-state { text-align: center; padding: 48px 16px; color: var(--text-secondary); } /* ---------- 7. Forms ---------- */ .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; } .form-control { width: 100%; padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-primary); font-size: 14px; } .form-control:focus { outline: none; border-color: var(--accent-blue); } textarea.form-control { min-height: 120px; resize: vertical; } .file-drop { border: 1.5px dashed var(--border-color); border-radius: var(--radius-md); padding: 32px 16px; text-align: center; color: var(--text-secondary); cursor: pointer; } .file-drop:hover { border-color: var(--accent-blue); color: var(--text-primary); } .file-drop input[type="file"] { display: none; } /* ---------- 8. Tables ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-md); } table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.data-table th, table.data-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-color); white-space: nowrap; } table.data-table th { color: var(--text-secondary); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; background: var(--bg-card-hover); } table.data-table tbody tr:hover { background: var(--bg-card-hover); } table.data-table tbody tr:last-child td { border-bottom: none; } .progress-bar-track { width: 100%; height: 8px; background: var(--bg-card-hover); border-radius: var(--radius-pill); overflow: hidden; } .progress-bar-fill { height: 100%; background: var(--accent-gradient); border-radius: var(--radius-pill); } /* ---------- 9b. Tabs ---------- */ .tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; padding-bottom: 0; } .tab-item { padding: 10px 16px; font-size: 13.5px; color: var(--text-secondary); white-space: nowrap; border-bottom: 2px solid transparent; cursor: pointer; } .tab-item:hover { color: var(--text-primary); } .tab-item.active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); font-weight: 500; } /* ---------- 9c. Pagination ---------- */ .pagination { display: flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; } .pagination a, .pagination span { padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); color: var(--text-secondary); } .pagination a:hover { background: var(--bg-card-hover); color: var(--text-primary); } .pagination .current { background: var(--accent-gradient); color: #fff; border-color: transparent; } /* ---------- 9. Responsive ---------- */ @media (max-width: 900px) { .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); z-index: 40; transition: transform .2s ease; box-shadow: var(--shadow-card); } .sidebar.open { transform: translateX(0); } .main-content { padding: 16px; } }