/* ============================================================ APP OPS — PROFESSIONAL REDESIGN v3 Design: Clean dark-navy sidebar, crisp white content, indigo accent system, refined typography & spacing ============================================================ */ /* Font 'Inter' dimuat lewat di tiap HTML (preconnect + link, BUKAN @import) supaya tidak ada round-trip CSS tambahan yang blocking sebelum browser mulai download font. */ :root { /* ── Core Palette ── */ --navy: #0f172a; --navy-mid: #1e293b; --navy-light: #334155; --ink: #0f172a; --ink-mid: #334155; --muted: #64748b; --subtle: #94a3b8; --line: #e2e8f0; --line-light: #f1f5f9; --surface: #ffffff; --bg: #f8fafc; /* ── Accent (Indigo) ── */ --accent: #4f46e5; --accent-light: #6366f1; --accent-dim: rgba(79,70,229,0.12); --accent-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); /* ── Sidebar ── */ --sidebar-bg: #0f172a; --sidebar-border: rgba(99,102,241,0.15); --sidebar-link: #94a3b8; --sidebar-active: #e0e7ff; --sidebar-hover-bg: rgba(99,102,241,0.1); --sidebar-active-bg:rgba(99,102,241,0.18); /* ── Semantic ── */ --green: #10b981; --red: #ef4444; --yellow: #f59e0b; --blue: #3b82f6; --purple: #8b5cf6; /* ── Shadows ── */ --shadow-xs: 0 1px 2px rgba(15,23,42,0.06); --shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04); --shadow-md: 0 4px 12px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04); --shadow-lg: 0 10px 30px rgba(15,23,42,0.12), 0 4px 12px rgba(15,23,42,0.06); --shadow-xl: 0 24px 56px rgba(15,23,42,0.15), 0 8px 20px rgba(15,23,42,0.08); --shadow-accent: 0 4px 14px rgba(79,70,229,0.3); /* ── Layout ── */ --sidebar-width: 230px; --topbar-h: 60px; --bottomnav-h: 64px; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; /* ── Transition ── */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --transition: all 0.2s var(--ease); } /* ============================================================ VIEW TRANSITIONS — fade halus antar halaman (mengurangi "flash putih" saat navigasi multi-page). Browser yang tidak dukung View Transition API otomatis fallback ke navigasi normal tanpa efek apapun (tidak ada penalti / breaking). ============================================================ */ @supports (view-transition-name: none) { ::view-transition-old(root) { animation: vt-fade-out 0.12s ease-out forwards; } ::view-transition-new(root) { animation: vt-fade-in 0.18s ease-in forwards; } } @keyframes vt-fade-out { to { opacity: 0; } } @keyframes vt-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--ink); font-size: 13.5px; line-height: 1.6; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Focus Ring ── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sidebar-link:focus-visible, .bottom-link:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: -2px; } /* ============================================================ LOADING OVERLAY ============================================================ */ #loadingOverlay { position: fixed; inset: 0; background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 60%, #2d1b69 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; color: white; } .spinner { width: 40px; height: 40px; border: 3px solid rgba(99,102,241,0.2); border-top-color: #818cf8; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } #loadingOverlay p { font-size: 13px; font-weight: 500; color: rgba(165,180,252,0.7); margin-top: 16px; letter-spacing: 0.3px; } /* ============================================================ SYNC STATUS TOAST ============================================================ */ #syncStatus { position: fixed; bottom: 88px; right: 20px; padding: 9px 18px; border-radius: 50px; font-size: 12px; font-weight: 600; z-index: 999; color: white; display: none; max-width: 260px; box-shadow: var(--shadow-lg); transition: var(--transition); letter-spacing: 0.2px; } #syncStatus.syncing { background: var(--accent); display: block; } #syncStatus.success { background: var(--green); display: block; } #syncStatus.error { background: var(--red); display: block; } #syncStatus.info { background: var(--yellow); display: block; color: var(--navy); } /* ============================================================ TOPBAR ============================================================ */ .topbar { background: var(--navy); height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 20px 0 24px; position: sticky; top: 0; z-index: 30; border-bottom: 1px solid rgba(99,102,241,0.12); box-shadow: 0 1px 0 rgba(99,102,241,0.1), 0 2px 8px rgba(15,23,42,0.4); } .topbar .brand { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 700; font-size: 14px; flex-shrink: 0; } .topbar-brand-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-grad); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; box-shadow: var(--shadow-accent); } .topbar-brand-name { color: #f1f5f9; font-size: 15px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.2; } .topbar-brand-sub { color: rgba(148,163,184,0.7); font-size: 9.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; line-height: 1.2; } .hamburger { display: none; background: none; border: none; font-size: 18px; cursor: pointer; color: #94a3b8; padding: 6px 8px; border-radius: 8px; line-height: 1; transition: var(--transition); } .hamburger:hover { background: rgba(255,255,255,0.08); color: #fff; } /* ── Account Menu ── */ .account { position: relative; display: flex; align-items: center; } .account-btn { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); padding: 6px 14px 6px 7px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: #e2e8f0; border-radius: 50px; transition: var(--transition); font-family: inherit; } .account-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.18); } .account-btn .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-grad); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-accent); } .account-btn .caret { font-size: 10px; color: rgba(255,255,255,0.4); margin-left: 2px; } .account-menu { display: none; position: absolute; top: calc(100% + 10px); right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); min-width: 210px; z-index: 40; overflow: hidden; } .account-menu.open { display: block; animation: fadeDown 0.15s var(--ease); } @keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .account-menu .info { padding: 16px; background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); border-bottom: 1px solid var(--line); } .account-menu .info .name { font-weight: 700; font-size: 13.5px; color: var(--ink); } .account-menu .info .role-badge { display: inline-block; background: var(--accent-grad); color: white; padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; margin-top: 5px; letter-spacing: 0.3px; } .account-menu .info .online { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--green); margin-top: 8px; font-weight: 600; } .account-menu .info .online .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(16,185,129,0.2); } .account-menu button.linklike { width: 100%; text-align: left; background: none; border: none; padding: 11px 16px; font-size: 12.5px; font-weight: 500; color: var(--ink-mid); cursor: pointer; transition: var(--transition); font-family: inherit; } .account-menu button.linklike:hover { background: var(--line-light); color: var(--ink); } .account-menu button.linklike:last-child { color: var(--red); } .account-menu button.linklike:last-child:hover { background: #fff5f5; } /* ============================================================ LAYOUT: SIDEBAR + CONTENT ============================================================ */ .dashboard-container { display: flex; min-height: calc(100vh - var(--topbar-h)); } /* ── Sidebar ── */ .sidebar { width: var(--sidebar-width); background: var(--sidebar-bg); padding: 12px 0 0; position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); flex-shrink: 0; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; border-right: 1px solid var(--sidebar-border); } .sidebar::-webkit-scrollbar { display: none; } .sidebar-links { flex: 1; overflow-y: auto; padding: 4px 10px 16px; scrollbar-width: thin; scrollbar-color: rgba(99,102,241,0.2) transparent; } .sidebar-links::-webkit-scrollbar { width: 3px; } .sidebar-links::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.2); border-radius: 10px; } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 2px; border-radius: 10px; text-decoration: none; color: var(--sidebar-link); font-size: 13px; font-weight: 500; transition: all 0.15s var(--ease); letter-spacing: -0.1px; } .sidebar-link:hover { background: var(--sidebar-hover-bg); color: #c7d2fe; } .sidebar-link.active { background: var(--sidebar-active-bg); color: var(--sidebar-active); font-weight: 600; } .sidebar-link.active .sidebar-icon { opacity: 1; } .sidebar-icon { font-size: 15px; width: 22px; text-align: center; flex-shrink: 0; opacity: 0.75; transition: opacity 0.15s; } .sidebar-link:hover .sidebar-icon { opacity: 1; } .sidebar-section-label { padding: 14px 14px 5px; font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(148,163,184,0.4); } .sidebar-version { flex-shrink: 0; padding: 12px 16px 16px; font-size: 10px; font-weight: 600; color: rgba(148,163,184,0.25); text-align: center; letter-spacing: 0.8px; text-transform: uppercase; border-top: 1px solid rgba(99,102,241,0.08); margin-top: auto; } /* ── Main Content ── */ .main-content { flex: 1; padding: 24px 28px; max-width: 1260px; margin: 0 auto; width: 100%; min-height: calc(100vh - var(--topbar-h)); } /* ============================================================ TYPOGRAPHY ============================================================ */ h1 { font-size: 22px; font-weight: 800; margin: 0 0 2px; color: var(--ink); letter-spacing: -0.5px; } h2 { font-size: 13.5px; font-weight: 700; margin: 0 0 14px; color: var(--ink); letter-spacing: -0.1px; } .muted { color: var(--muted); font-size: 12px; } /* ============================================================ CARDS ============================================================ */ .card { background: var(--surface); border-radius: var(--radius-lg); padding: 20px 22px; border: 1px solid var(--line); margin-bottom: 16px; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s var(--ease); } .card:hover { box-shadow: var(--shadow-md); } .card-title { font-size: 14px; font-weight: 700; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--ink); padding-bottom: 14px; border-bottom: 1px solid var(--line); letter-spacing: -0.1px; } /* ============================================================ STAT CARDS — vibrant gradients, white text ============================================================ */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin: 0 0 22px; } .stat-card { background: var(--accent-grad); border-radius: var(--radius-lg); padding: 20px 20px 18px; color: #fff; position: relative; overflow: hidden; box-shadow: 0 4px 16px rgba(79,70,229,0.35); transition: var(--transition); border: none; } .stat-card::after { content: ''; position: absolute; top: -24px; right: -20px; width: 90px; height: 90px; border-radius: 50%; background: rgba(255,255,255,0.08); pointer-events: none; } .stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(79,70,229,0.45); } .stat-card .stat-number { font-size: 34px; font-weight: 800; line-height: 1; color: #fff; letter-spacing: -1.5px; margin-bottom: 6px; } .stat-card .stat-label { font-size: 11.5px; color: rgba(255,255,255,0.82); font-weight: 600; letter-spacing: 0.1px; } .stat-card.blue { background: linear-gradient(135deg, #4f46e5, #6366f1); box-shadow: 0 4px 16px rgba(79,70,229,0.35); } .stat-card.yellow { background: linear-gradient(135deg, #7c3aed, #9333ea); box-shadow: 0 4px 16px rgba(124,58,237,0.35); } .stat-card.green { background: linear-gradient(135deg, #059669, #10b981); box-shadow: 0 4px 16px rgba(5,150,105,0.35); } .stat-card.red { background: linear-gradient(135deg, #dc2626, #ef4444); box-shadow: 0 4px 16px rgba(220,38,38,0.35); } .stat-card.purple { background: linear-gradient(135deg, #6d28d9, #7c3aed); box-shadow: 0 4px 16px rgba(109,40,217,0.35); } .stat-card.teal { background: linear-gradient(135deg, #0891b2, #06b6d4); box-shadow: 0 4px 16px rgba(8,145,178,0.35); } /* ── Override number colors to always white ── */ .stat-card.blue .stat-number, .stat-card.yellow .stat-number, .stat-card.green .stat-number, .stat-card.red .stat-number, .stat-card.purple .stat-number, .stat-card.teal .stat-number { color: #fff; } /* ============================================================ MENU GRID (Dashboard) ============================================================ */ .nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-top: 14px; } .nav-card { background: var(--surface); border-radius: var(--radius-lg); padding: 18px 16px; text-decoration: none; color: var(--ink); border: 1px solid var(--line); transition: var(--transition); display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; } .nav-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-grad); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease); } .nav-card:hover { border-color: rgba(79,70,229,0.25); box-shadow: 0 8px 24px rgba(79,70,229,0.12); transform: translateY(-2px); } .nav-card:hover::before { transform: scaleX(1); } .nav-card .icon { font-size: 20px; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--accent-dim); transition: var(--transition); } .nav-card:hover .icon { background: var(--accent-grad); box-shadow: var(--shadow-accent); } .nav-card .title { font-weight: 700; font-size: 13px; color: var(--ink); } .nav-card .desc { font-size: 11px; color: var(--muted); line-height: 1.4; } /* ============================================================ TABLES ============================================================ */ .table-wrapper { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-xs); } .table-wrapper::-webkit-scrollbar { height: 5px; } .table-wrapper::-webkit-scrollbar-track { background: var(--line-light); } .table-wrapper::-webkit-scrollbar-thumb { background: rgba(79,70,229,0.25); border-radius: 10px; } table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 700px; } th { background: var(--navy); color: rgba(148,163,184,0.9); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px; padding: 11px 14px; text-align: left; white-space: nowrap; } th:first-child { border-radius: 0; } th:last-child { border-radius: 0; } td { padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ink-mid); vertical-align: middle; } tr:last-child td { border-bottom: none; } tr:hover td { background: #f8f7ff; } td:last-child { white-space: normal; word-break: break-word; max-width: 260px; } .status-over { color: var(--red); font-weight: 700; } .status-sesuai { color: var(--green); font-weight: 700; } .checkbox-col { width: 36px; text-align: center; padding: 10px 8px; } .data-table thead th { background: var(--navy); color: rgba(148,163,184,0.9); } .shortcut-table th, .sla-table th, .user-table th { background: var(--navy); color: rgba(148,163,184,0.9); } .shortcut-table tr:hover td, .sla-table tr:hover td, .user-table tr:hover td { background: #f8f7ff; } /* ============================================================ BADGES ============================================================ */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 700; } .badge.ok, .badge-success { background: #dcfce7; color: #15803d; } .badge.danger, .badge-danger { background: #fee2e2; color: #b91c1c; } .badge.warning, .badge-warning { background: #fef3c7; color: #92400e; } .badge.primary, .badge-info { background: #e0e7ff; color: #4338ca; } .user-badge { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 20px; font-size: 10px; font-weight: 700; color: white; background: var(--accent-grad); letter-spacing: 0.2px; } /* ============================================================ FORMS ============================================================ */ input, select, textarea { width: 100%; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; background: var(--surface); color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s; line-height: 1.5; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,70,229,0.12); } input[readonly] { background: var(--line-light); color: var(--muted); } input::placeholder, textarea::placeholder { color: var(--subtle); } label { font-size: 11px; font-weight: 600; color: var(--muted); display: block; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; } .field { margin-bottom: 14px; width: 100%; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 16px; } .form-group { display: flex; flex-direction: column; } .form-group label { font-size: 11px; font-weight: 600; margin-bottom: 5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; } .form-group input, .form-group select, .form-group textarea { padding: 9px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; transition: var(--transition); font-family: inherit; color: var(--ink); background: var(--surface); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,70,229,0.12); } .form-group .full-width { grid-column: 1 / -1; } /* ============================================================ BUTTONS ============================================================ */ .btn, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-export, .btn-import, .btn-delete-all { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--accent-grad); color: #fff; border: none; padding: 9px 18px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; letter-spacing: 0.1px; line-height: 1.3; cursor: pointer; transition: var(--transition); font-family: inherit; white-space: nowrap; box-shadow: 0 2px 8px rgba(79,70,229,0.25); } .btn:hover, .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(79,70,229,0.35); } .btn:active, .btn-primary:active { transform: translateY(0) scale(0.98); filter: brightness(0.97); } .btn:disabled, .btn-primary:disabled, .btn-secondary:disabled, .btn-success:disabled, .btn-danger:disabled, .btn-warning:disabled { opacity: 0.45; cursor: not-allowed; transform: none; filter: none; box-shadow: none; } .btn-secondary { background: var(--line-light); color: var(--ink-mid); box-shadow: none; border: 1px solid var(--line); } .btn-secondary:hover { background: #e2e8f0; color: var(--ink); transform: none; box-shadow: none; filter: none; border-color: #cbd5e1; } .btn-secondary:active { transform: scale(0.98); } .btn-success { background: linear-gradient(135deg, #059669, #10b981); box-shadow: 0 2px 8px rgba(5,150,105,0.25); } .btn-success:hover { box-shadow: 0 6px 16px rgba(5,150,105,0.35); } .btn-danger { background: linear-gradient(135deg, #dc2626, #ef4444); box-shadow: 0 2px 8px rgba(220,38,38,0.25); } .btn-danger:hover { box-shadow: 0 6px 16px rgba(220,38,38,0.35); } .btn-warning { background: linear-gradient(135deg, #d97706, #f59e0b); box-shadow: 0 2px 8px rgba(217,119,6,0.25); } .btn-warning:hover { box-shadow: 0 6px 16px rgba(217,119,6,0.35); } .btn-export { background: linear-gradient(135deg, #1d4ed8, #3b82f6); box-shadow: 0 2px 8px rgba(29,78,216,0.25); } .btn-export:hover { box-shadow: 0 6px 16px rgba(29,78,216,0.35); } .btn-import { background: linear-gradient(135deg, #059669, #10b981); box-shadow: 0 2px 8px rgba(5,150,105,0.25); } .btn-import:hover { box-shadow: 0 6px 16px rgba(5,150,105,0.35); } .btn-delete-all { background: linear-gradient(135deg, #dc2626, #ef4444); box-shadow: 0 2px 8px rgba(220,38,38,0.25); } .btn-delete-all:hover { box-shadow: 0 6px 16px rgba(220,38,38,0.35); } /* ── Small size ── */ .btn.small, .btn-primary.small, .btn-secondary.small, .btn-success.small, .btn-danger.small, .btn-warning.small { padding: 5px 12px; font-size: 11.5px; border-radius: 6px; } /* ── Table action buttons ── */ .data-table .btn-warning, .data-table .btn-danger, .data-table .btn-success, .data-table .btn-secondary, .shortcut-table .btn-warning, .shortcut-table .btn-danger, .shortcut-table .btn-success { padding: 5px 12px; font-size: 11.5px; border-radius: 7px; } /* ── Hover apply for danger/success/warning/export/import/delete-all ── */ .btn-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-export:hover, .btn-import:hover, .btn-delete-all:hover { filter: brightness(1.06); transform: translateY(-1px); } .btn-success:active, .btn-danger:active, .btn-warning:active, .btn-export:active, .btn-import:active, .btn-delete-all:active { transform: translateY(0) scale(0.98); filter: brightness(0.97); } /* ============================================================ FILTER BAR ============================================================ */ .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; background: #f8f7ff; padding: 14px 16px; border-radius: var(--radius); align-items: flex-end; border: 1px solid rgba(79,70,229,0.1); } .filter-group { display: flex; flex-direction: column; min-width: 120px; } .filter-group label { font-size: 10px; font-weight: 600; margin-bottom: 4px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; } .filter-group input, .filter-group select { padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 8px; font-size: 12.5px; background: var(--surface); color: var(--ink); transition: var(--transition); font-family: inherit; } .filter-group input:focus, .filter-group select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,70,229,0.12); } .filter-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; margin-left: auto; } /* ============================================================ TABS ============================================================ */ .tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab-btn { padding: 9px 20px; background: none; border: none; border-radius: 8px 8px 0 0; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); transition: var(--transition); white-space: nowrap; flex-shrink: 0; font-family: inherit; } .tab-btn:hover:not(.active) { color: var(--accent); background: rgba(79,70,229,0.06); } .tab-btn.active { background: var(--accent-grad); color: white; } .tab-content { display: none; } .tab-content.active { display: block; } /* ============================================================ PAGINATION ============================================================ */ .pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .pagination-info { font-size: 12px; color: var(--muted); font-weight: 500; } .pagination-controls { display: flex; align-items: center; gap: 4px; } .pagination-controls button { background: var(--surface); color: var(--ink-mid); border: 1.5px solid var(--line); width: 32px; height: 32px; min-width: 32px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; transition: var(--transition); } .pagination-controls button:hover:not(:disabled):not(.active) { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } .pagination-controls button:disabled { opacity: 0.35; cursor: not-allowed; } .pagination-controls button.active { background: var(--accent-grad); color: #fff; border-color: transparent; box-shadow: var(--shadow-accent); } .pagination-controls button.pg-nav { background: var(--line-light); border-color: transparent; color: var(--ink-mid); font-size: 13px; } .pagination-controls button.pg-nav:hover:not(:disabled) { background: var(--accent-grad); color: #fff; border-color: transparent; } .pagination-controls .pg-dots { color: var(--subtle); padding: 0 4px; font-size: 12px; line-height: 32px; } /* ============================================================ INFO / WARN BOX ============================================================ */ .info-box { background: #eef2ff; padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 12px; font-size: 12.5px; color: #4338ca; border-left: 3px solid var(--accent); line-height: 1.55; } .warn-box { background: #fffbeb; padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 12px; font-size: 12.5px; color: #92400e; border-left: 3px solid var(--yellow); line-height: 1.55; } /* ============================================================ MODALS ============================================================ */ .modal { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.6); z-index: 1000; justify-content: center; align-items: center; backdrop-filter: blur(4px); } .modal[style*="flex"], .modal.show { display: flex; } .modal-content { background: var(--surface); border-radius: var(--radius-xl); padding: 28px; width: 520px; max-width: 95%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl); animation: modalIn 0.2s var(--ease); border-top: 3px solid var(--accent); } @keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-header { display: flex; justify-content: space-between; margin-bottom: 20px; align-items: center; } .modal-title { font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.2px; } .close-modal { cursor: pointer; font-size: 22px; color: var(--subtle); transition: var(--transition); line-height: 1; padding: 2px; background: none; border: none; font-family: inherit; } .close-modal:hover { color: var(--ink); } /* ── Notification Modal ── */ .modal-notif { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.65); z-index: 10001; justify-content: center; align-items: center; backdrop-filter: blur(4px); } .modal-notif[style*="flex"], .modal-notif.show { display: flex; } .modal-notif-content { background: var(--surface); border-radius: var(--radius-xl); width: 520px; max-width: 95%; max-height: 80vh; overflow-y: auto; box-shadow: var(--shadow-xl); animation: modalIn 0.2s var(--ease); } .modal-notif-header { background: linear-gradient(135deg, #b91c1c, #ef4444); color: white; padding: 18px 22px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; display: flex; justify-content: space-between; align-items: center; } .modal-notif-header h3 { margin: 0; font-size: 14.5px; font-weight: 700; } .close-notif { background: none; border: none; color: white; font-size: 22px; cursor: pointer; line-height: 1; opacity: 0.8; transition: var(--transition); } .close-notif:hover { opacity: 1; } .modal-notif-body { padding: 18px; } .notif-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; background: #fafafa; transition: var(--transition); } .notif-item:hover { box-shadow: var(--shadow-sm); border-color: #fca5a5; } .notif-title { font-weight: 700; color: #b91c1c; margin-bottom: 8px; font-size: 13.5px; } .notif-detail { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; line-height: 1.65; } .notif-actions { display: flex; gap: 8px; justify-content: flex-end; } .btn-done { background: linear-gradient(135deg, #059669, #10b981); color: white; border: none; padding: 6px 16px; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 700; transition: var(--transition); font-family: inherit; } .btn-done:hover { filter: brightness(1.06); transform: translateY(-1px); } .btn-snooze { background: linear-gradient(135deg, #d97706, #f59e0b); color: white; border: none; padding: 6px 16px; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 700; transition: var(--transition); font-family: inherit; } .btn-snooze:hover { filter: brightness(1.06); transform: translateY(-1px); } /* ── Snooze Modal ── */ .modal-snooze-content { background: var(--surface); border-radius: var(--radius-xl); padding: 28px; width: 360px; max-width: 94%; box-shadow: var(--shadow-xl); border-top: 3px solid var(--accent); animation: modalIn 0.2s var(--ease); } .snooze-options { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } /* ============================================================ SETTING — MODERN REDESIGN ============================================================ */ .setting-header-card { display: flex; align-items: center; gap: 18px; background: var(--accent-grad); border-radius: var(--radius-xl); padding: 22px 26px; margin-bottom: 20px; color: white; box-shadow: 0 8px 28px rgba(79,70,229,0.35); } .setting-header-icon { font-size: 34px; } .setting-header-title { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; } .setting-header-sub { font-size: 12px; opacity: 0.75; margin-top: 3px; } .setting-tabs-modern { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 20px; background: var(--line-light); border-radius: var(--radius-lg); padding: 5px; } .setting-tab-modern { flex: 1; min-width: 110px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px; border: none; border-radius: 10px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); background: transparent; transition: var(--transition); white-space: nowrap; font-family: inherit; } .setting-tab-modern:hover { background: rgba(255,255,255,0.7); color: var(--ink-mid); } .setting-tab-modern.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-md); font-weight: 700; } .tab-icon { font-size: 15px; } .setting-panel { display: none; } .setting-panel.active { display: block; } .setting-section { background: var(--surface); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); margin-bottom: 16px; } .setting-section-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .setting-section-icon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .setting-section-title { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.2px; } .setting-section-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } .setting-preview-box { background: var(--line-light); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 16px; margin-top: 16px; } .setting-preview-label { font-size: 10.5px; color: var(--subtle); font-weight: 600; margin-bottom: 10px; letter-spacing: 0.6px; text-transform: uppercase; } .setting-preview-content { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 10px; padding: 12px 16px; box-shadow: var(--shadow-xs); } /* ============================================================ SHORTCUT ============================================================ */ .shortcut-table { width: 100%; border-collapse: collapse; font-size: 13px; } .shortcut-table th, .shortcut-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); } .link-preview { color: var(--accent); text-decoration: none; cursor: pointer; font-weight: 600; } .link-preview:hover { text-decoration: underline; } /* ============================================================ MASTER LIST ============================================================ */ .master-list { list-style: none; margin-top: 10px; max-height: 360px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); scrollbar-width: thin; scrollbar-color: rgba(79,70,229,0.2) transparent; } .master-list::-webkit-scrollbar { width: 4px; } .master-list::-webkit-scrollbar-thumb { background: rgba(79,70,229,0.2); border-radius: 10px; } .master-list li { display: flex; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 500; gap: 12px; transition: var(--transition); color: var(--ink-mid); } .master-list li:hover { background: #f8f7ff; } .master-list li:last-child { border-bottom: none; } .master-list li input[type="checkbox"] { width: 16px; min-width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); flex-shrink: 0; } .master-list li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .master-list li .btn-danger { flex-shrink: 0; padding: 4px 12px; font-size: 11px; border-radius: 7px; } .master-add-row { display: flex; gap: 8px; margin-bottom: 12px; } .master-add-row input { flex: 1; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; color: var(--ink); transition: var(--transition); } .master-add-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,70,229,0.12); } /* ============================================================ CHARTS ============================================================ */ .chart-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 16px; } .chart-box { background: var(--surface); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); } .chart-box h4 { font-size: 13.5px; margin-bottom: 14px; color: var(--ink); font-weight: 700; } /* ============================================================ CALENDAR ============================================================ */ #calendarGrid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; text-align: center; } .cal-day { padding: 6px 3px; font-size: 12px; border-radius: 4px; } .cal-has-data { background: var(--green); color: white; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; margin: 0 auto; cursor: pointer; font-weight: 700; font-size: 11px; } .cal-sunday { color: var(--red); } .cal-header { font-weight: 700; font-size: 10px; color: var(--muted); padding: 4px; } /* ============================================================ LOGIN PAGE ============================================================ */ .login-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 45%, #312e81 100%); padding: 20px; position: relative; overflow: hidden; } .login-container::before { content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 65%); top: -200px; right: -150px; pointer-events: none; } .login-container::after { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(139,92,246,0.1) 0%, transparent 65%); bottom: -150px; left: -100px; pointer-events: none; } .login-card { background: var(--surface); border-radius: 24px; padding: 44px 40px; width: 100%; max-width: 420px; box-shadow: 0 32px 80px rgba(15,23,42,0.5), 0 0 0 1px rgba(99,102,241,0.1); animation: loginIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; z-index: 1; } @keyframes loginIn { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .login-logo { text-align: center; margin-bottom: 20px; } .login-logo-icon { width: 68px; height: 68px; border-radius: 22px; background: var(--accent-grad); margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 32px; color: #fff; box-shadow: 0 12px 32px rgba(79,70,229,0.45); } .login-card h2 { text-align: center; font-size: 24px; font-weight: 800; margin-bottom: 2px; letter-spacing: -0.6px; color: var(--ink); } .login-subtitle { text-align: center; color: var(--muted); font-size: 11.5px; font-weight: 600; margin-bottom: 30px; letter-spacing: 0.8px; text-transform: uppercase; } .input-group { margin-bottom: 18px; } .input-group label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 7px; } .input-group input { padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; font-size: 14px; transition: var(--transition); } .input-group input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,70,229,0.12); } .error, .error-box { background: #fee2e2; color: #b91c1c; padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; display: none; text-align: center; font-size: 13px; border: 1px solid #fecaca; font-weight: 500; } .login-btn { width: 100%; padding: 14px; background: var(--accent-grad); color: white; border: none; border-radius: 12px; font-weight: 700; cursor: pointer; font-size: 15px; margin-top: 6px; transition: var(--transition); font-family: inherit; box-shadow: 0 6px 22px rgba(79,70,229,0.4); letter-spacing: 0.2px; } .login-btn:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(79,70,229,0.5); } .login-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* ============================================================ SKELETON LOADING ============================================================ */ .skeleton { background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%); background-size: 200% 100%; animation: skeleton 1.4s ease infinite; border-radius: 6px; height: 12px; margin: 4px 0; } @keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .empty { text-align: center; color: var(--muted); padding: 36px 16px; font-size: 12.5px; } /* ============================================================ BOTTOM NAV (Mobile) ============================================================ */ .bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--navy); border-top: 1px solid rgba(99,102,241,0.15); z-index: 20; padding: 4px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; height: var(--bottomnav-h); box-shadow: 0 -4px 20px rgba(15,23,42,0.3); } .bottom-nav::-webkit-scrollbar { display: none; } .bottom-nav-inner { display: flex; width: max-content; min-width: 100%; justify-content: center; margin: 0 auto; } .bottom-link { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: #475569; font-size: 9.5px; font-weight: 600; padding: 6px 14px; flex: 0 0 auto; min-width: 60px; transition: color 0.15s; } .bottom-icon { font-size: 17px; } .bottom-link.active { color: #818cf8; } .bottom-nav-arrow { display: none; position: fixed; bottom: 0; width: 28px; height: var(--bottomnav-h); align-items: center; justify-content: center; color: rgba(255,255,255,0.7); font-size: 14px; z-index: 21; pointer-events: none; } .bottom-nav-arrow.left { left: 0; background: linear-gradient(to right, var(--navy), transparent); } .bottom-nav-arrow.right { right: 0; background: linear-gradient(to left, var(--navy), transparent); } .bottom-nav-arrow.show { display: flex; } /* ============================================================ SIDEBAR BACKDROP ============================================================ */ .sidebar-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.55); backdrop-filter: blur(2px); z-index: 19; display: none; } .sidebar-backdrop.open { display: block; } /* ============================================================ TOAST ============================================================ */ .toast { position: fixed; bottom: 22px; right: 22px; background: var(--navy-mid); color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-lg); z-index: 100; opacity: 0; transform: translateY(10px); transition: all 0.22s var(--ease); max-width: 360px; border-left: 3px solid var(--accent); } .toast.show { opacity: 1; transform: translateY(0); } .toast.error { background: var(--red); border-left-color: transparent; } /* ============================================================ DETAIL BUTTON ============================================================ */ .btn-detail-text { display: inline; background: none; border: none; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0 4px; text-decoration: underline; font-family: inherit; } .btn-detail-text:hover { color: #4338ca; } /* ============================================================ GENERATE SURAT — section box, konsisten dengan tema situs ============================================================ */ .gen-section { background: var(--line-light); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; } .gen-section-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--accent); display: inline-block; } .gen-radio-group { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; } .gen-radio-label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; background: var(--surface); padding: 9px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); transition: var(--transition); } .gen-radio-label:hover { border-color: var(--accent-light); } .gen-radio-label input { accent-color: var(--accent); } .rekening-card-gen { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow-xs); } .rekening-card-gen-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); } .rekening-card-gen-head .label { font-weight: 700; font-size: 13px; color: var(--accent); } .rekening-card-gen-head .badge-aktif { background: var(--green); color: #fff; padding: 2px 9px; border-radius: 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; } /* ============================================================ SETTINGS LAYOUT ============================================================ */ .settings-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; width: 100%; } .settings-card { flex: 1; min-width: 280px; max-width: 480px; width: 100%; } .settings-card-full { max-width: 100%; width: 100%; } .settings-card input, .settings-card select, .settings-card textarea { width: 100%; box-sizing: border-box; } .settings-card .btn { width: 100%; } .user-add-form { background: var(--line-light); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; border: 1.5px solid var(--line); } /* ── Setting tabs (old class) ── */ .setting-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 18px; flex-wrap: wrap; } .setting-tab-btn { padding: 8px 16px; background: none; border: none; border-radius: 8px 8px 0 0; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); transition: var(--transition); font-family: inherit; white-space: nowrap; } .setting-tab-btn.active { background: var(--accent-grad); color: white; } .setting-tab-btn:hover:not(.active) { color: var(--accent); background: rgba(79,70,229,0.06); } .setting-tab-content { display: none; } .setting-tab-content.active { display: block; } /* ============================================================ UTILITY ============================================================ */ .hidden { display: none !important; } .text-center { text-align: center !important; } .mt-8 { margin-top: 8px !important; } .mb-8 { margin-bottom: 8px !important; } .flex { display: flex !important; } .gap-8 { gap: 8px !important; } .w-full { width: 100% !important; } /* ============================================================ PRINT ============================================================ */ @media print { .sidebar, .topbar, .bottom-nav, #loadingOverlay, #syncStatus, .btn, .btn-primary, .btn-secondary, .btn-danger, .bottom-nav-arrow { display: none !important; } .main-content { margin: 0 !important; padding: 0 !important; } .card { box-shadow: none !important; border: 1px solid #ddd; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .sidebar { position: fixed; top: 0; left: 0; height: 100vh; z-index: 22; width: 240px; padding-top: var(--topbar-h); transform: translateX(-100%); transition: transform 0.22s var(--ease); box-shadow: 4px 0 28px rgba(15,23,42,0.4); } .sidebar.open { transform: translateX(0); } .sidebar-backdrop.open { display: block; } .hamburger { display: block; } .bottom-nav { display: block; } .main-content { padding: 14px; padding-bottom: calc(var(--bottomnav-h) + 14px); } .stats-grid { grid-template-columns: 1fr 1fr; } .nav-grid { grid-template-columns: 1fr 1fr; } .form-grid { grid-template-columns: 1fr 1fr; } .row { flex-direction: column; } .row > .field { min-width: 100%; } } @media (max-width: 500px) { .topbar { padding: 0 12px; height: 52px; } .topbar-brand-name { font-size: 13px; } .account-btn span:not(.avatar):not(.caret) { display: none; } h1 { font-size: 18px; } .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .stat-card { padding: 16px; } .stat-card .stat-number { font-size: 28px; } .nav-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .nav-card { padding: 14px 12px; } .nav-card .icon { font-size: 18px; width: 38px; height: 38px; border-radius: 10px; } .card { padding: 14px; } .form-grid { grid-template-columns: 1fr; } .filter-bar { padding: 10px; gap: 8px; } .filter-group { min-width: 100%; } .filter-actions { margin-left: 0; width: 100%; } .login-card { padding: 30px 22px; margin: 8px; } .toast { bottom: 70px; right: 10px; left: 10px; max-width: 100%; } .pagination { justify-content: center; } .table-wrapper table { min-width: 520px; } .master-add-row { flex-direction: column; } .setting-tab-modern { min-width: 80px; font-size: 11.5px; padding: 8px 10px; } }