/* ============================================== KUMBAHAN APP - Main Stylesheet All CSS combined from index.php, karyawan.php, admin.php ============================================== */ /* === RESET & CSS VARIABLES === */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #6C63FF; --primary-dark: #5B52F3; --secondary: #8B80FF; --bg: #F6F6FB; --card: #FFFFFF; --text: #1E1E2E; --text-secondary: #7A7A9D; --success: #10B981; --danger: #EF4444; --warning: #F59E0B; --radius-card: 30px; --radius-btn: 24px; --radius-input: 20px; --nav-height: 80px; --shadow-soft: 0 4px 20px rgba(108, 99, 255, 0.08); --shadow-card: 0 8px 32px rgba(108, 99, 255, 0.12); --shadow-float: 0 12px 40px rgba(108, 99, 255, 0.18); } /* === ANTI-FOUC === */ body:not(.app-ready) { opacity: 0 !important; } body.app-ready { opacity: 1 !important; transition: opacity 0.25s ease; } body { font-family: 'Poppins', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; justify-content: center; overscroll-behavior: none; } /* Lock scrolling on login page — prevents bounce/scroll on mobile */ body[data-page="login"] { overflow: hidden; height: 100vh; /* fallback for very old browsers */ height: 100dvh; /* better fallback — dynamic viewport */ height: 100svh; /* BEST: small viewport height — always the visible area (accounts for mobile address bar). Wins in modern browsers. */ position: fixed; width: 100%; top: 0; left: 0; } @media (min-width: 480px) { body { background: linear-gradient(135deg, #E8E6FF 0%, #F0EFFF 50%, #F6F6FB 100%); } .mobile-container { max-width: 100%; min-height: 100vh; position: relative; } .bottom-nav-wrapper { max-width: 100%; } } /* ---- RESPONSIVE: Tablet (768px+) ---- */ @media (min-width: 768px) { .mobile-container { padding: 0 16px; } .content-area { padding: 0 8px; } .header-top { padding: 16px 24px; } .bottom-nav-wrapper { padding: 0 24px 20px; } .bottom-nav { border-radius: 28px; } .dashboard-hero-card { margin: 0 8px; } .today-status-card { margin: 0 8px; } .quick-menu { margin: 0 8px; } .on-duty-card { margin: 0 8px; } .history-card { margin: 0 8px; } .kalender-page-header { margin: 0 8px; } /* Admin: karyawan list cards */ .karyawan-toolbar-card { margin: 0 8px; } /* Admin: 3-column stat grid on tablet */ .admin-stat-grid { grid-template-columns: 1fr 1fr 1fr; } /* Larger popup cards on tablet */ .absen-popup-card { width: 320px; } .admin-profile-card { width: 360px; } } /* ---- RESPONSIVE: Large tablet / small desktop (1024px+) ---- */ @media (min-width: 1024px) { .mobile-container { padding: 0 24px; } .content-area { padding: 0 12px; } .header-top { padding: 18px 32px; } .bottom-nav-wrapper { padding: 0 32px 24px; } /* Admin: 4-column stat grid on large tablet */ .admin-stat-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } } .mobile-container { width: 100%; max-width: 100%; min-height: 100vh; background: var(--bg); position: relative; overflow-x: clip; transition: opacity 0.3s ease; } .mobile-container.ready { opacity: 1 !important; visibility: visible !important; } /* ============== HEADER ============== */ .header-top { display: flex; align-items: center; justify-content: space-between; padding: 48px 24px 16px; } /* ---- Hide the shared header-top (greeting "Selamat...nama" + Settings button + Notification bell button) on every section that owns a custom page header. Driven by set in switchTab(). !important guarantees the hide wins over inline styles and survives any JS caching / timing issue. ---- */ body[data-active-section="sectionHistory"] .header-top, body[data-active-section="sectionKalender"] .header-top, body[data-active-section="sectionAbsen"] .header-top, body[data-active-section="sectionProfil"] .header-top, body[data-active-section="sectionKaryawan"] .header-top, body[data-active-section="sectionHistoryAdmin"] .header-top { display: none !important; } .header-greeting { color: var(--text-secondary); font-size: 13px; font-weight: 400; } .header-name { color: var(--text); font-size: 20px; font-weight: 700; margin-top: 2px; } .header-actions { display: flex; align-items: center; gap: 8px; } .header-icon-btn { width: 42px; height: 42px; border-radius: 13px; background: var(--card); border: 1.5px solid rgba(108,99,255,0.1); box-shadow: 0 2px 8px rgba(108,99,255,0.08); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .25s cubic-bezier(.4,0,.2,1); } .header-icon-btn:hover { background: linear-gradient(135deg, rgba(108,99,255,0.12), rgba(139,128,255,0.08)); border-color: rgba(108,99,255,0.25); box-shadow: 0 4px 14px rgba(108,99,255,0.15); transform: translateY(-1px); } .header-icon-btn:active { transform: scale(0.93); } .header-icon-btn svg { width: 21px; height: 21px; stroke: var(--primary); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ============== CONTENT ============== */ .content-area { padding: 20px 20px calc(var(--nav-height) + 20px); } .page-section { display: none; } .page-section.active-section { display: block; } /* ============== DASHBOARD SEARCH ============== */ .dash-search-wrap { position: relative; margin-bottom: 16px; } .dash-search-input { width: 100%; padding: 14px 18px 14px 48px; border-radius: 16px; border: 1.5px solid rgba(108,99,255,0.12); background: var(--card); font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--text); outline: none; transition: all .25s ease; box-shadow: 0 2px 10px rgba(0,0,0,0.03); } .dash-search-input::placeholder { color: var(--text-secondary); opacity: .45; } .dash-search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,99,255,0.1), 0 4px 16px rgba(108,99,255,0.08); } .dash-search-wrap svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; stroke: var(--text-secondary); opacity: .4; fill: none; stroke-width: 2; pointer-events: none; } /* ============== SUMMARY ROW (2 CARDS) ============== */ .summary-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } .summary-card { background: var(--card); border-radius: 18px; padding: 18px; display: flex; align-items: center; gap: 14px; box-shadow: 0 2px 4px rgba(108,99,255,0.04), 0 6px 20px rgba(108,99,255,0.06), 0 1px 0 rgba(255,255,255,0.9) inset; border: 1.5px solid rgba(108,99,255,0.06); transition: all .25s ease; } .summary-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(108,99,255,0.08), 0 12px 28px rgba(108,99,255,0.1), 0 1px 0 rgba(255,255,255,0.95) inset; } .summary-icon { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .summary-icon svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .summary-icon.ic-people { background: linear-gradient(145deg, #6C63FF, #8B80FF); box-shadow: 0 4px 14px rgba(108,99,255,0.3); } .summary-icon.ic-attend { background: linear-gradient(145deg, #10B981, #34D399); box-shadow: 0 4px 14px rgba(16,185,129,0.3); } .summary-info {} .summary-num { display: block; font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.1; } .summary-label { display: block; font-size: 11px; font-weight: 500; color: var(--text-secondary); margin-top: 2px; } /* ============== DAY CARDS 3D ============== */ .day-cards-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 20px; } .day-card-3d { position: relative; padding: 12px 0 10px; border-radius: 14px; text-align: center; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #5B52F3; background: var(--card); border: 1.5px solid rgba(108,99,255,0.08); box-shadow: 0 2px 4px rgba(108,99,255,0.06), 0 6px 16px rgba(108,99,255,0.06), 0 1px 0 rgba(255,255,255,0.8) inset; cursor: default; transition: all .3s cubic-bezier(.4,0,.2,1); user-select: none; overflow: hidden; } .day-card-3d::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%; background: linear-gradient(180deg, rgba(108,99,255,0.04) 0%, transparent 100%); border-radius: 14px 14px 0 0; pointer-events: none; } .day-card-3d::after { content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, transparent, rgba(108,99,255,0.15), transparent); border-radius: 2px; } .day-card-3d:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(108,99,255,0.1), 0 12px 28px rgba(108,99,255,0.1), 0 1px 0 rgba(255,255,255,0.9) inset; } /* Active day (today) */ .day-card-3d.today { background: linear-gradient(145deg, #6C63FF 0%, #5B52F3 40%, #8B80FF 100%); color: #fff; border-color: transparent; box-shadow: 0 4px 8px rgba(108,99,255,0.25), 0 10px 30px rgba(108,99,255,0.2), 0 2px 0 rgba(255,255,255,0.15) inset, 0 -2px 6px rgba(91,82,243,0.3) inset; transform: translateY(-2px) scale(1.04); } .day-card-3d.today::before { background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 100%); } .day-card-3d.today::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); } .day-card-3d.today:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 6px 12px rgba(108,99,255,0.3), 0 14px 36px rgba(108,99,255,0.25), 0 2px 0 rgba(255,255,255,0.15) inset, 0 -2px 6px rgba(91,82,243,0.3) inset; } /* ============== CHART CARD ============== */ .chart-card { background: var(--card); border-radius: 24px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(108,99,255,0.04), 0 8px 24px rgba(108,99,255,0.06), 0 1px 0 rgba(255,255,255,0.9) inset; border: 1.5px solid rgba(108,99,255,0.06); } .chart-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .chart-card-title { font-size: 15px; font-weight: 700; color: var(--text); } .chart-toggle-group { display: flex; background: var(--bg); border-radius: 12px; padding: 3px; gap: 2px; } .chart-toggle-btn { padding: 7px 16px; border: none; border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; color: var(--text-secondary); background: transparent; cursor: pointer; transition: all .25s ease; } .chart-toggle-btn.active { background: var(--card); color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .chart-canvas-wrap { position: relative; width: 100%; height: 200px; } .chart-canvas-wrap canvas { width: 100% !important; height: 100% !important; } /* ============== ASSET CARD ============== */ .asset-card { background: var(--card); border-radius: 24px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(108,99,255,0.04), 0 8px 24px rgba(108,99,255,0.06), 0 1px 0 rgba(255,255,255,0.9) inset; border: 1.5px solid rgba(108,99,255,0.06); } .asset-card-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 16px; } .asset-list { display: flex; flex-direction: column; gap: 0; } .asset-item { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid rgba(108,99,255,0.06); transition: background .2s; } .asset-item:last-child { border-bottom: none; } .asset-item-left { display: flex; align-items: center; gap: 12px; } .asset-icon-circle { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .asset-icon-circle svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .asset-icon-circle.ic-wash { background: linear-gradient(135deg, #6C63FF, #8B80FF); } .asset-icon-circle.ic-fan { background: linear-gradient(135deg, #3B82F6, #60A5FA); } .asset-icon-circle.ic-iron { background: linear-gradient(135deg, #F59E0B, #FBBF24); } .asset-icon-circle.ic-dry { background: linear-gradient(135deg, #10B981, #34D399); } .asset-icon-circle.ic-plant { background: linear-gradient(135deg, #EC4899, #F472B6); } .asset-icon-circle.ic-set { background: linear-gradient(135deg, #8B5CF6, #A78BFA); } .asset-icon-circle.ic-other { background: linear-gradient(135deg, #6B7280, #9CA3AF); } .asset-name { font-size: 13px; font-weight: 500; color: var(--text); } .asset-status { font-size: 11px; font-weight: 600; padding: 5px 14px; border-radius: 20px; letter-spacing: 0.02em; white-space: nowrap; } .asset-status.st-baik { color: #059669; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2); } .asset-status.st-kurang { color: #C2410C; background: rgba(234,88,12,0.08); border: 1px solid rgba(234,88,12,0.15); } .asset-status.st-rusak { color: #DC2626; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.15); } .asset-more-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px 0 2px; margin-top: 2px; border: none; border-top: 1px solid rgba(108,99,255,0.06); background: transparent; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--primary); transition: opacity .2s, background .2s; border-radius: 0; } .asset-more-btn:hover { opacity: .7; } .asset-more-btn:active { background: rgba(108,99,255,0.04); } .asset-more-btn svg { width: 16px; height: 16px; stroke: var(--primary); fill: none; transition: transform .35s cubic-bezier(.4,0,.2,1); } .asset-more-btn.expanded svg { transform: rotate(180deg); } /* ============== ADMIN STAT GRID ============== */ .admin-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .admin-stat-card { background: var(--card); border-radius: 24px; padding: 20px 16px; box-shadow: 0 2px 16px rgba(0,0,0,0.04); display: flex; flex-direction: column; gap: 14px; transition: transform 0.2s; } .admin-stat-card:active { transform: scale(0.97); } .stat-icon-wrap { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; } .stat-icon-wrap.purple { background: linear-gradient(135deg, #6C63FF, #8B80FF); } .stat-icon-wrap.blue { background: linear-gradient(135deg, #3B82F6, #60A5FA); } .stat-icon-wrap.green { background: linear-gradient(135deg, #10B981, #34D399); } .stat-icon-wrap.red { background: linear-gradient(135deg, #EF4444, #F87171); } .stat-num { display: block; font-size: 26px; font-weight: 700; color: var(--text); } .stat-label { display: block; font-size: 12px; color: var(--text-secondary); font-weight: 500; margin-top: 2px; } /* ============== KARYAWAN PAGE HEADER ============== */ .karyawan-page-header { display: flex; align-items: center; gap: 14px; padding: 34px 4px 8px; } .karyawan-page-icon { width: 50px; height: 50px; border-radius: 16px; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 16px rgba(108,99,255,0.25); } .karyawan-page-icon svg { width: 26px; height: 26px; stroke: #fff; fill: none; } .karyawan-page-title { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.2; } .karyawan-page-subtitle { font-size: 13px; font-weight: 400; color: var(--text-secondary); margin-top: 2px; } /* ============== KARYAWAN TOOLBAR CARD ============== */ .karyawan-toolbar-card { background: var(--card); border-radius: 20px; padding: 8px; margin-top: 30px; margin-bottom: 28px; box-shadow: 0 2px 4px rgba(108,99,255,0.04), 0 8px 24px rgba(108,99,255,0.06), 0 1px 0 rgba(255,255,255,0.9) inset; border: 1.5px solid rgba(108,99,255,0.06); } .karyawan-toolbar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; position: relative; } /* ============== ANIMATED EXPAND SEARCH ============== */ .karyawan-search-expand { display: flex; align-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(108,99,255,0.06); border: 2px solid rgba(108,99,255,0.08); transition: width .45s cubic-bezier(.22,.68,.36,1), border-color .3s ease, background .3s ease, box-shadow .3s ease; overflow: hidden; will-change: width; transform: translateZ(0); } .search-expand-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 0; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .3s ease; z-index: 2; } .search-expand-icon svg { width: 20px; height: 20px; stroke: var(--primary); fill: none; } .search-expand-icon:hover { background: rgba(108,99,255,0.08); } .search-expand-icon:active { transform: scale(0.92); } .search-expand-input { flex: 1; min-width: 0; height: 100%; padding: 0 14px; border: none; border-radius: 0; font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--text); background: transparent; outline: none; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .search-expand-input::placeholder { color: #B8B8D0; white-space: nowrap; } /* Expanded state */ .karyawan-search-expand.expanded { width: calc(100% - 54px); border-color: rgba(108,99,255,0.15); background: rgba(108,99,255,0.04); box-shadow: 0 0 0 4px rgba(108,99,255,0.06); } .karyawan-search-expand.expanded .search-expand-icon { background: transparent; } .karyawan-search-expand.expanded .search-expand-input { opacity: 1; pointer-events: auto; transition: opacity .2s ease .18s; } /* ============== MODAL BUTTON ROW ============== */ .modal-btn-row { display: flex; gap: 12px; margin-top: 24px; } .modal-btn-row .modal-submit-btn { flex: 1; width: auto; margin-top: 0; } .modal-btn-row .modal-cancel-btn { flex: 1; width: auto; margin-top: 0; } /* ============== SECTION HEADER ============== */ .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .section-header h3 { font-size: 18px; font-weight: 700; } .btn-add { display: flex; align-items: center; gap: 6px; padding: 10px 20px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border: none; border-radius: var(--radius-btn); font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 16px rgba(108,99,255,0.25); transition: all 0.3s; } .btn-add:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(108,99,255,0.35); } .btn-add:active { transform: scale(0.96); } .btn-add svg { width: 16px; height: 16px; } /* Icon-only variant (same height as search bar) */ .btn-add-icon { width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 14px; justify-content: center; position: absolute; right: 0; z-index: 3; } .btn-add-icon svg { width: 22px; height: 22px; } /* ============== SEARCH ============== */ .search-bar { margin-bottom: 16px; } .search-bar input { width: 100%; padding: 14px 18px 14px 46px; border: 2px solid #E8E8F0; border-radius: var(--radius-input); font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--text); background: var(--card); outline: none; transition: border-color 0.3s; } .search-bar input:focus { border-color: var(--primary); } .search-bar { position: relative; } .search-bar svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--text-secondary); } /* ============== KARYAWAN LIST ============== */ .karyawan-list { display: flex; flex-direction: column; } .karyawan-item { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid rgba(108,99,255,0.06); transition: background .2s; } .karyawan-item:last-child { border-bottom: none; } .karyawan-card { background: var(--card); border-radius: 20px; padding: 16px 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); display: flex; align-items: center; gap: 14px; transition: transform 0.2s; } .karyawan-card:active { transform: scale(0.98); } .karyawan-avatar { width: 48px; height: 48px; min-width: 48px; background: linear-gradient(135deg, #6C63FF, #8B80FF); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; font-weight: 700; } .karyawan-info { flex: 1; min-width: 0; } .karyawan-name { display: block; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .karyawan-username { display: block; font-size: 13px; color: var(--text-secondary); margin-top: 2px; } .karyawan-actions { display: flex; align-items: center; gap: 0; position: relative; flex-shrink: 0; } .action-btn { width: 40px; height: 40px; min-width: 40px; border: none; border-radius: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), background 0.2s ease, box-shadow 0.2s ease; background: #F0EEFF; flex-shrink: 0; box-sizing: border-box; padding: 0; } .action-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .action-btn:active { transform: scale(0.88); } .delete-btn { background: #FEE2E2; } /* ============== KARYAWAN ITEM — "+" trigger + slide-out action panel ============== */ /* Default state: only the round "+" trigger is visible. The action panel (Edit / Kirim Notifikasi / Hapus) is collapsed (width: 0, overflow hidden). When .actions-open is toggled on the .karyawan-item, the panel slides open to the LEFT of the trigger and the trigger rotates 135deg into a \"x\" (close) and shifts color from primary purple to red. */ .karyawan-trigger { width: 40px; height: 40px; min-width: 40px; border: none; border-radius: 14px; background: linear-gradient(135deg, #6C63FF, #8B80FF); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; box-sizing: border-box; padding: 0; box-shadow: 0 4px 14px rgba(108,99,255,0.30); transition: transform 0.5s cubic-bezier(.34,1.56,.64,1), background 0.4s ease, box-shadow 0.4s ease, border-radius 0.4s ease; position: relative; z-index: 2; } .karyawan-trigger__icon { width: 20px; height: 20px; transition: transform 0.5s cubic-bezier(.34,1.56,.64,1); } .karyawan-trigger:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(108,99,255,0.40); } .karyawan-trigger:active { transform: scale(0.90); } .karyawan-item.actions-open .karyawan-trigger { transform: rotate(135deg); background: linear-gradient(135deg, #EF4444, #DC2626); box-shadow: 0 4px 16px rgba(239,68,68,0.38); border-radius: 50%; } .karyawan-item.actions-open .karyawan-trigger:hover { transform: rotate(135deg) translateY(-2px); box-shadow: 0 6px 22px rgba(239,68,68,0.48); } .karyawan-item.actions-open .karyawan-trigger:active { transform: rotate(135deg) scale(0.90); } .karyawan-actions-panel { display: flex; align-items: center; gap: 8px; overflow: hidden; width: 0; opacity: 0; margin-right: 0; transition: width 0.5s cubic-bezier(.16,1,.3,1), opacity 0.35s ease, margin-right 0.5s cubic-bezier(.16,1,.3,1); } .karyawan-item.actions-open .karyawan-actions-panel { width: 184px; /* 4 * 40px + 3 * 8px gap */ opacity: 1; margin-right: 8px; } /* Each action button pops in with a spring + horizontal slide, staggered for a cascading reveal. */ .karyawan-actions-panel .action-btn { transform: translateX(28px) scale(0.4); opacity: 0; /* Normalize overrides — the legacy .edit-btn / .notif-btn rules below set padding/border-radius/font-size meant for text+icon buttons. Inside the slide-out panel we want pure 40x40 icon tiles. */ padding: 0; border-radius: 14px; display: flex; gap: 0; font-size: 0; transition: transform 0.5s cubic-bezier(.34,1.56,.64,1), opacity 0.35s ease, background 0.2s ease, box-shadow 0.2s ease; } .karyawan-item.actions-open .karyawan-actions-panel .action-btn { transform: translateX(0) scale(1); opacity: 1; } .karyawan-item.actions-open .karyawan-actions-panel .action-btn:nth-child(1) { transition-delay: 0.10s; } .karyawan-item.actions-open .karyawan-actions-panel .action-btn:nth-child(2) { transition-delay: 0.17s; } .karyawan-item.actions-open .karyawan-actions-panel .action-btn:nth-child(3) { transition-delay: 0.24s; } .karyawan-item.actions-open .karyawan-actions-panel .action-btn:nth-child(4) { transition-delay: 0.31s; } /* Work-settings action button — amber tint (clock icon) */ .work-btn { background: rgba(245,158,11,0.12); } .work-btn:hover { background: rgba(245,158,11,0.20); } /* Soft tint on the row while its actions are open — subtle active feedback */ .karyawan-item.actions-open { background: rgba(108,99,255,0.05); border-radius: 14px; transition: background 0.35s ease, border-radius 0.35s ease; } /* ============== HISTORY ADMIN ============== */ .history-main-card { margin: 22px 4px 16px; background: var(--card); border-radius: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); overflow: hidden; } .history-main-card__toolbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 20px; gap: 10px; } .history-main-card__search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } /* ---- Custom Date Picker ---- */ .history-date-picker { position: relative; flex: 1; min-width: 0; } .history-date-picker__trigger { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 2px solid #E8E8F0; border-radius: 12px; font-family: 'Poppins', sans-serif; font-size: 12px; color: var(--text); background: var(--bg, #f5f5fa); cursor: pointer; transition: border-color 0.3s; text-align: left; } .history-date-picker__trigger:hover { border-color: var(--primary); } .history-date-picker__trigger.active { border-color: var(--primary); } .history-date-picker__trigger svg:first-child { width: 16px; height: 16px; stroke: var(--text-secondary); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .history-date-picker__trigger span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .history-date-picker__trigger span.placeholder { color: var(--text-secondary); opacity: 0.6; } .history-date-picker__chevron { width: 14px; height: 14px; stroke: var(--text-secondary); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s cubic-bezier(.4,0,.2,1); flex-shrink: 0; } .history-date-picker__trigger.active .history-date-picker__chevron { transform: rotate(180deg); } .history-date-picker__dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--card, #fff); border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.06); border: 1px solid var(--border, #f0f0f5); padding: 12px; z-index: 100; opacity: 0; transform: translateY(-8px) scale(0.97); pointer-events: none; transition: opacity 0.25s cubic-bezier(.4,0,.2,1), transform 0.25s cubic-bezier(.4,0,.2,1); } .history-date-picker__dropdown.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; } .history-date-picker__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .history-date-picker__header span { font-size: 13px; font-weight: 600; color: var(--text); } .history-date-picker__header button { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: transparent; border: none; border-radius: 8px; color: var(--text-secondary); cursor: pointer; transition: background 0.2s; } .history-date-picker__header button:hover { background: var(--bg, #f5f5fa); } .history-date-picker__header button svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .history-date-picker__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-bottom: 6px; } .history-date-picker__weekdays span { font-size: 10px; font-weight: 600; color: var(--text-secondary); padding: 4px 0; opacity: 0.6; } .history-date-picker__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .history-date-picker__day { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border: none; border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500; color: var(--text); background: transparent; cursor: pointer; transition: all 0.15s ease; } .history-date-picker__day:hover { background: var(--bg, #f5f5fa); } .history-date-picker__day.other-month { color: var(--text-secondary); opacity: 0.3; } .history-date-picker__day.today { font-weight: 700; color: var(--primary); } .history-date-picker__day.selected { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-weight: 600; } .history-main-card__search-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border: none; border-radius: 12px; cursor: pointer; transition: all 0.2s; flex-shrink: 0; } .history-main-card__search-btn:active { transform: scale(0.93); } .history-main-card__search-btn svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .history-main-card__export { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; color: var(--text-secondary); border: 2px solid #E8E8F0; border-radius: 12px; cursor: pointer; transition: all 0.2s; flex-shrink: 0; } .history-main-card__export:hover { border-color: var(--primary); color: var(--primary); } .history-main-card__export:active { transform: scale(0.93); } .history-main-card__export svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .history-main-card__body { padding: 20px 16px 16px; } .history-main-card__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 16px; color: var(--text-secondary); font-size: 13px; } .history-main-card__empty svg { margin-bottom: 12px; opacity: 0.4; } .history-list { display: flex; flex-direction: column; gap: 12px; } .history-card { background: var(--card); border-radius: 20px; padding: 18px 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); transition: transform 0.2s; } .history-card:active { transform: scale(0.98); } .history-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .history-user-info { display: flex; align-items: center; gap: 12px; } .user-avatar-sm { width: 38px; height: 38px; min-width: 38px; background: linear-gradient(135deg, #6C63FF, #8B80FF); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 700; } .history-username { display: block; font-size: 14px; font-weight: 600; color: var(--text); } .history-date-sm { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; } .status-chip { padding: 5px 14px; border-radius: 30px; font-size: 12px; font-weight: 600; } .status-chip.hadir { background: #D1FAE5; color: #065F46; } .status-chip.terlambat { background: #FEF3C7; color: #92400E; } .status-chip.tidak { background: #FEE2E2; color: #991B1B; } .history-card-body { display: flex; flex-direction: column; gap: 6px; } .history-detail { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); } .history-date { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); } /* ============== SKELETON ============== */ .skeleton-card { background: var(--card); border-radius: 20px; padding: 20px; margin-bottom: 12px; } .skeleton-line { height: 14px; background: linear-gradient(90deg, #E8E8F0 25%, #F0F0F8 50%, #E8E8F0 75%); background-size: 200% 100%; border-radius: 8px; margin-bottom: 10px; animation: shimmer 1.5s infinite; } .skeleton-line.w80 { width: 80%; } .skeleton-line.w60 { width: 60%; } .skeleton-line.w40 { width: 40%; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============== EMPTY STATE ============== */ .empty-state { text-align: center; padding: 48px 24px; color: var(--text-secondary); } .empty-state p { margin-top: 16px; font-size: 14px; } /* ============== BOTTOM SHEET MODAL ============== */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .modal-overlay.active { opacity: 1; pointer-events: all; } .bottom-sheet-modal { position: fixed; bottom: 0; left: 0; width: 100%; max-width: 100%; left: 50%; transform: translate(-50%, 100%); background: var(--card); border-radius: 30px 30px 0 0; z-index: 201; padding: 12px 24px 40px; transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1); box-shadow: 0 -10px 40px rgba(0,0,0,0.12); } .bottom-sheet-modal.active { transform: translate(-50%, 0); } .modal-handle { width: 40px; height: 4px; background: #E0E0EE; border-radius: 4px; margin: 0 auto 20px; } .modal-title { font-size: 18px; font-weight: 700; margin-bottom: 24px; text-align: center; } .modal-form .form-group { margin-bottom: 18px; } .modal-form label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; } .modal-form input { width: 100%; padding: 14px 18px; border: 2px solid #E8E8F0; border-radius: var(--radius-input); font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--text); background: #FAFAFE; outline: none; transition: all 0.3s; } .modal-form input:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(108,99,255,0.1); } .modal-form input::placeholder { color: #B8B8D0; } .modal-submit-btn { width: 100%; padding: 16px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border: none; border-radius: var(--radius-btn); font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s; margin-top: 8px; } .modal-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(108,99,255,0.35); } .modal-submit-btn:active { transform: scale(0.97); } .modal-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } .modal-cancel-btn { width: 100%; padding: 14px; background: transparent; color: var(--text-secondary); border: 2px solid #E8E8F0; border-radius: var(--radius-btn); font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; margin-top: 10px; } .modal-cancel-btn:active { transform: scale(0.97); background: #F6F6FB; } /* ============== BOTTOM NAV ============== */ .bottom-nav-wrapper { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 100%; padding: 0 20px 16px; z-index: 100; pointer-events: none; } @media (min-width: 480px) { .bottom-nav-wrapper { margin-bottom: 20px; } } .bottom-nav { background: linear-gradient(135deg, #4F46E5, #7C3AED); border-radius: 30px; padding: 8px 4px; display: flex; align-items: center; justify-content: space-around; box-shadow: 0 -4px 30px rgba(79,70,229,0.2), 0 4px 20px rgba(124,58,237,0.15); pointer-events: all; position: relative; transform-origin: center bottom; transition: transform .6s cubic-bezier(.25,.8,.25,1); will-change: transform; } /* Karyawan page: use a 5-column grid so the FAB spacer sits in the middle and the 4 nav-items get equal, evenly-spaced columns on each side. This guarantees Dashboard/Kalender/History/Profil icons are perfectly aligned and the FAB is perfectly centered. */ body[data-page="karyawan"] .bottom-nav { display: grid; grid-template-columns: 1fr 1fr 70px 1fr 1fr; align-items: center; justify-items: stretch; padding: 8px 8px; } /* nav-indicator is position:absolute — DO NOT place it in the grid, otherwise its containing block changes from padding-box to grid-area and the indicator ends up at the wrong vertical/horizontal offset. Leave it using the default containing block (padding box of .bottom-nav). */ body[data-page="karyawan"] .nav-item:nth-of-type(1) { grid-column: 1; grid-row: 1; } body[data-page="karyawan"] .nav-item:nth-of-type(2) { grid-column: 2; grid-row: 1; } body[data-page="karyawan"] .nav-fab-spacer { grid-column: 3; grid-row: 1; } /* FAB is position:absolute — exclude it from grid placement entirely */ body[data-page="karyawan"] .nav-fab { grid-column: auto; grid-row: auto; } body[data-page="karyawan"] .nav-item:nth-of-type(3) { grid-column: 4; grid-row: 1; } body[data-page="karyawan"] .nav-item:nth-of-type(4) { grid-column: 5; grid-row: 1; } /* Each karyawan nav-item fills its grid cell so centers align symmetrically */ body[data-page="karyawan"] .nav-item { width: 100%; justify-self: stretch; align-self: stretch; padding: 8px 4px; } .nav-shrunk .bottom-nav { transform: scale(0.82); } .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 10px; cursor: pointer; border: none; background: none; border-radius: 16px; transition: all 0.3s ease; text-decoration: none; position: relative; justify-self: center; align-self: center; } .nav-item svg { width: 22px; height: 22px; stroke: #ffffff; fill: none; transition: all 0.3s ease; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Ensure outline elements render as strokes, not filled shapes (karyawan.php SVGs lack fill="none" attribute that admin.php has) */ .nav-item svg path:not([fill]), .nav-item svg polyline:not([fill]), .nav-item svg rect:not([fill]), .nav-item svg line:not([fill]), .nav-item svg polygon:not([fill]), .nav-item svg circle:not([fill]) { fill: none; } .nav-item svg [fill="currentColor"] { fill: currentColor; } .nav-item span { font-size: 10px; font-weight: 500; color: rgba(255,255,255,0.85); transition: color 0.3s ease; } .nav-item.active svg { stroke: #ffffff; stroke-width: 2.2; } .nav-item.active span { color: #ffffff; font-weight: 600; } .nav-indicator { display: none; position: absolute; top: 8px; left: 0; width: 24px; height: 3px; background: #ffffff; border-radius: 0 0 4px 4px; transition: transform .35s cubic-bezier(.4,0,.2,1); will-change: transform; z-index: 5; } /* ============== PROFIL ============== */ .profil-section { display: flex; flex-direction: column; align-items: stretch; padding-top: 0; } /* Center only the avatar/header area inside profil-section */ .profil-section > div:first-child { align-self: center; text-align: center; } .profil-admin-cards { margin: 0; padding: 0; width: 100%; background: var(--card); border-radius: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); overflow: hidden; } .profil-admin-card { display: flex; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; transition: background .2s ease; position: relative; } .profil-admin-card:not(:last-child)::after { content: ''; position: absolute; bottom: 0; left: 22px; right: 22px; height: 1px; background: rgba(0,0,0,0.06); } [data-theme="dark"] .profil-admin-card:not(:last-child)::after { background: rgba(255,255,255,0.08); } .profil-admin-card:hover { background: rgba(108,99,255,0.03); } .profil-admin-card:active { background: rgba(108,99,255,0.06); } .profil-admin-card__icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .profil-admin-card__icon svg { width: 20px; height: 20px; } .profil-admin-card__body { flex: 1; } .profil-admin-card__title { font-size: 14px; font-weight: 600; color: var(--text); } .profil-admin-card__desc { font-size: 11px; color: var(--text-secondary); margin-top: 1px; } .profil-admin-card__arrow { flex-shrink: 0; } .profil-admin-card__arrow svg { width: 18px; height: 18px; stroke: var(--text-secondary); } .profil-avatar-wrap { position: relative; margin-bottom: 12px; cursor: pointer; } .profil-avatar-circle { width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 34px; font-weight: 700; font-family: 'Poppins', sans-serif; box-shadow: 0 8px 24px rgba(108,99,255,0.25); overflow: hidden; transition: transform 0.3s ease; } .profil-avatar-circle img { width: 100%; height: 100%; object-fit: cover; } .profil-avatar-wrap:hover .profil-avatar-circle { transform: scale(1.04); } .profil-avatar-badge { position: absolute; bottom: 2px; right: 2px; width: 28px; height: 28px; background: var(--card, #fff); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.15); border: 2px solid var(--bg, #f5f5fa); transition: transform 0.2s; } .profil-avatar-wrap:hover .profil-avatar-badge { transform: scale(1.1); } .profil-avatar-badge svg { width: 14px; height: 14px; stroke: var(--primary); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .profil-name { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .profil-role-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; } .profil-info-card { width: calc(100% - 8px); background: var(--card); border-radius: 20px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); } .profil-menu-card { width: calc(100% - 8px); background: var(--card); border-radius: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); overflow: hidden; } .profil-menu-item { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; transition: background 0.2s; } .profil-menu-item:not(:last-child) { border-bottom: 1px solid var(--border, #f0f0f5); } .profil-menu-item:active { background: var(--bg, #f5f5fa); } .profil-menu-item__icon { width: 36px; height: 36px; background: var(--bg, #f5f5fa); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .profil-menu-item__icon svg { width: 18px; height: 18px; stroke: var(--primary); fill: none; } .profil-menu-item__text { flex: 1; font-size: 14px; font-weight: 500; color: var(--text); } .profil-menu-item__arrow { width: 16px; height: 16px; stroke: var(--text-secondary); fill: none; opacity: 0.4; } .profil-logout-wrap { width: calc(100% - 8px); margin-top: 16px; padding-bottom: 24px; } .profil-logout-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; background: #FEE2E2; color: #EF4444; border: none; border-radius: 16px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .profil-logout-btn:active { background: #FECACA; transform: scale(0.98); } .profil-logout-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; } /* ============== ANIMATIONS ============== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fadeInUp 0.5s ease both; } /* ============== SWAL2 FLUTTER STYLE ============== */ .swal2-popup { border-radius: 28px !important; font-family: 'Poppins', sans-serif !important; padding: 32px 24px 24px !important; box-shadow: 0 12px 48px rgba(108,99,255,0.18), 0 2px 8px rgba(0,0,0,0.06) !important; } .swal2-title { font-weight: 700 !important; font-size: 20px !important; margin-bottom: 8px !important; } .swal2-html-container { font-size: 14px !important; color: var(--text-secondary) !important; margin: 0 !important; } .swal2-icon { margin: 0 0 16px 0 !important; } .swal2-icon.swal2-success { border-color: #10B981 !important; } .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(16,185,129,0.25) !important; } .swal2-icon.swal2-error { border-color: #EF4444 !important; } .swal2-icon.swal2-error .swal2-x-mark-line { background-color: #EF4444 !important; } .swal2-icon.swal2-warning { border-color: #F59E0B !important; } .swal2-icon.swal2-question { border-color: #6C63FF !important; } .swal2-actions { margin: 24px 0 0 !important; } .swal2-confirm { border-radius: 24px !important; font-family: 'Poppins', sans-serif !important; font-size: 15px !important; font-weight: 600 !important; padding: 14px 36px !important; border: none !important; box-shadow: 0 6px 0 rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08) !important; transition: all 0.15s ease !important; text-shadow: 0 1px 1px rgba(0,0,0,0.1) !important; background: linear-gradient(180deg, #7B73FF 0%, #5B52F3 100%) !important; } .swal2-confirm:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 0 rgba(0,0,0,0.15), 0 6px 20px rgba(0,0,0,0.1) !important; } .swal2-confirm:active { transform: translateY(4px) !important; box-shadow: 0 2px 0 rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.06) !important; } .swal2-cancel { border-radius: 24px !important; font-family: 'Poppins', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; padding: 12px 28px !important; border: 2px solid #E8E8F0 !important; background: #fff !important; color: var(--text-secondary) !important; box-shadow: 0 3px 0 #D8D8E8, 0 2px 8px rgba(0,0,0,0.04) !important; transition: all 0.15s ease !important; } .swal2-cancel:hover { transform: translateY(-2px) !important; } .swal2-cancel:active { transform: translateY(3px) !important; box-shadow: 0 0 0 #D8D8E8, 0 1px 3px rgba(0,0,0,0.04) !important; } /* ============== LOGOUT CONFIRM CARD POPUP ============== */ .logout-confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .logout-confirm-overlay.active { opacity: 1; pointer-events: all; } .logout-card { width: 280px; background: #ffffff; border-radius: 24px; position: relative; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.06); font-family: 'Poppins', sans-serif; transform: translateY(30px) scale(0.95); opacity: 0; transition: all .5s cubic-bezier(.16,1,.3,1); } .logout-confirm-overlay.active .logout-card { transform: translateY(0) scale(1); opacity: 1; } .logout-card__shine { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 65%); opacity: 0; pointer-events: none; z-index: 3; } .logout-confirm-overlay.active .logout-card__shine { opacity: 1; animation: logoutCardShine 1.8s ease .3s forwards; } @keyframes logoutCardShine { 0% { background-position: -150% 0; opacity: 1; } 100% { background-position: 250% 0; opacity: 0; } } .logout-card__icon-wrap { display: flex; justify-content: center; padding-top: 28px; position: relative; z-index: 2; } .logout-card__icon { width: 60px; height: 60px; background: linear-gradient(135deg, #f59e0b, #d97706); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(245,158,11,0.3); transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1) .3s; } .logout-confirm-overlay.active .logout-card__icon { transform: scale(1); } .logout-card__icon svg { width: 30px; height: 30px; fill: none; stroke: #fff; } .logout-card__content { padding: 16px 24px 26px; position: relative; z-index: 2; text-align: center; } .logout-card__title { color: #1e293b; font-size: 18px; font-weight: 700; margin: 0 0 4px; transform: translateY(8px); opacity: 0; transition: all .4s ease .35s; } .logout-confirm-overlay.active .logout-card__title { transform: translateY(0); opacity: 1; } .logout-card__desc { color: #64748b; font-size: 13px; margin: 0 0 20px; opacity: 0; transition: all .4s ease .45s; } .logout-confirm-overlay.active .logout-card__desc { opacity: 1; } .logout-card__actions { display: flex; gap: 10px; transform: translateY(8px); opacity: 0; transition: all .4s ease .5s; } .logout-confirm-overlay.active .logout-card__actions { transform: translateY(0); opacity: 1; } .logout-card__btn { flex: 1; padding: 12px 0; border-radius: 16px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all .2s ease; } .logout-card__btn--cancel { background: #f1f5f9; color: #64748b; } .logout-card__btn--cancel:hover { background: #e2e8f0; } .logout-card__btn--cancel:active { background: #d5dbe3; } .logout-card__btn--confirm { background: linear-gradient(180deg, #ef4444, #dc2626); color: #fff; } .logout-card__btn--confirm:hover { background: linear-gradient(180deg, #f87171, #ef4444); } .logout-card__btn--confirm:active { background: linear-gradient(180deg, #dc2626, #b91c1c); } /* ============== ADMIN PROFILE POPUP (Centered, same theme as logout-card) ============== */ .admin-profile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .admin-profile-overlay.active { opacity: 1; pointer-events: all; } .admin-profile-card { width: 320px; max-width: 100%; max-height: 80vh; background: #ffffff; border-radius: 24px; position: relative; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.06); font-family: 'Poppins', sans-serif; transform: translateY(30px) scale(0.95); opacity: 0; transition: all .5s cubic-bezier(.16,1,.3,1); display: flex; flex-direction: column; } .admin-profile-overlay.active .admin-profile-card { transform: translateY(0) scale(1); opacity: 1; } .admin-profile-card__shine { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 65%); opacity: 0; pointer-events: none; z-index: 3; } .admin-profile-overlay.active .admin-profile-card__shine { opacity: 1; animation: adminProfileShine 1.8s ease .3s forwards; } @keyframes adminProfileShine { 0% { background-position: -150% 0; opacity: 1; } 100% { background-position: 250% 0; opacity: 0; } } .admin-profile-card__icon-wrap { display: flex; justify-content: center; padding-top: 24px; position: relative; z-index: 2; } .admin-profile-card__icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1) .3s; } .admin-profile-overlay.active .admin-profile-card__icon { transform: scale(1); } .admin-profile-card__icon svg { width: 30px; height: 30px; fill: none; stroke: #fff; } .admin-profile-card__content { padding: 14px 24px 0; position: relative; z-index: 2; text-align: center; overflow-y: auto; max-height: calc(80vh - 140px); -webkit-overflow-scrolling: touch; } /* No-header variant — used by payslip popup (icon + title + desc removed). Adds top padding to compensate for the missing icon-wrap (which had padding-top: 24px). */ .admin-profile-card__content--no-header { padding-top: 24px; } .admin-profile-card__title { color: #1e293b; font-size: 18px; font-weight: 700; margin: 0 0 4px; transform: translateY(8px); opacity: 0; transition: all .4s ease .35s; } .admin-profile-overlay.active .admin-profile-card__title { transform: translateY(0); opacity: 1; } .admin-profile-card__desc { color: #64748b; font-size: 13px; margin: 0 0 14px; opacity: 0; transition: all .4s ease .45s; } .admin-profile-overlay.active .admin-profile-card__desc { opacity: 1; } .admin-profile-card__body { text-align: left; opacity: 0; transform: translateY(8px); transition: all .4s ease .5s; } .admin-profile-overlay.active .admin-profile-card__body { opacity: 1; transform: translateY(0); } /* --- Akun Saya items --- */ .admin-profile-info { display: flex; flex-direction: column; gap: 14px; } .admin-profile-info__avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #6C63FF, #8B80FF); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; font-weight: 700; margin: 0 auto 6px; overflow: hidden; box-shadow: 0 4px 16px rgba(108,99,255,0.3); } .admin-profile-info__avatar img { width: 100%; height: 100%; object-fit: cover; } .admin-profile-info__row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #f8fafc; border-radius: 12px; } .admin-profile-info__row-icon { width: 34px; height: 34px; min-width: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .admin-profile-info__row-icon svg { width: 18px; height: 18px; stroke: #fff; fill: none; } .admin-profile-info__label { font-size: 11px; color: #94a3b8; font-weight: 500; } .admin-profile-info__value { font-size: 14px; color: #1e293b; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- Tentang Kumbahan items --- */ .admin-profile-about { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 5px; } .admin-profile-about__logo { width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg, #3B82F6, #2563EB); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28px; font-weight: 800; box-shadow: 0 6px 20px rgba(59,130,246,0.3); margin-bottom: 2px; } .admin-profile-about__name { font-size: 17px; font-weight: 700; color: #1e293b; } .admin-profile-about__version { font-size: 12px; color: #94a3b8; font-weight: 500; } .admin-profile-about__sep { width: 100%; height: 1px; background: rgba(0,0,0,0.06); margin: 4px 0; } .admin-profile-about__desc { font-size: 12.5px; color: #64748b; line-height: 1.6; text-align: left; } .admin-profile-about__label { font-size: 12px; color: #94a3b8; font-weight: 600; text-align: left; align-self: flex-start; } .admin-profile-about__dev { font-size: 13px; color: #1e293b; font-weight: 600; text-align: left; align-self: flex-start; } .admin-profile-about__copyright { font-size: 11px; color: #94a3b8; } /* Compact variant — for about popup (smaller, no clipping) */ .admin-profile-card--compact-about { width: 280px; overflow: visible; } .admin-profile-about--compact { gap: 3px; } .admin-profile-about--compact .admin-profile-about__logo { width: 44px; height: 44px; border-radius: 12px; font-size: 22px; margin-bottom: 0; } .admin-profile-about--compact .admin-profile-about__name { font-size: 15px; } .admin-profile-about--compact .admin-profile-about__version { font-size: 11px; } .admin-profile-about--compact .admin-profile-about__sep { margin: 3px 0; } .admin-profile-about--compact .admin-profile-about__desc { font-size: 11px; line-height: 1.5; } .admin-profile-about--compact .admin-profile-about__label { font-size: 10px; text-align: center; align-self: center; } .admin-profile-about--compact .admin-profile-about__dev { font-size: 11.5px; text-align: center; align-self: center; } .admin-profile-about--compact .admin-profile-about__copyright { font-size: 10px; } /* --- Privasi & Keamanan items --- */ .admin-profile-privacy { text-align: left; display: flex; flex-direction: column; gap: 0; } .admin-profile-privacy__item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.06); } .admin-profile-privacy__item:last-child { border-bottom: none; padding-bottom: 0; } .admin-profile-privacy__icon { width: 36px; height: 36px; min-width: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-top: 2px; } .admin-profile-privacy__icon svg { width: 18px; height: 18px; stroke: #fff; fill: none; } .admin-profile-privacy__title { font-size: 14px; font-weight: 600; color: #1e293b; } .admin-profile-privacy__desc { font-size: 11.5px; color: #64748b; line-height: 1.5; margin-top: 2px; } /* --- Close button --- */ .admin-profile-card__actions { padding: 18px 24px 24px; position: relative; z-index: 2; transform: translateY(8px); opacity: 0; transition: all .4s ease .55s; } .admin-profile-overlay.active .admin-profile-card__actions { transform: translateY(0); opacity: 1; } .admin-profile-card__actions { display: flex; gap: 10px; } .admin-profile-card__btn { flex: 1; width: 100%; padding: 12px 0; border-radius: 16px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all .2s ease; background: #f1f5f9; color: #64748b; } .admin-profile-card__btn:hover { background: #e2e8f0; } .admin-profile-card__btn:active { background: #d5dbe3; } /* Cancel variant — gray (same as base, explicit for clarity) */ .admin-profile-card__btn--cancel { background: #f1f5f9; color: #64748b; } .admin-profile-card__btn--cancel:hover { background: #e2e8f0; } .admin-profile-card__btn--cancel:active { background: #d5dbe3; } /* Confirm variant — gradient purple */ .admin-profile-card__btn--confirm { background: linear-gradient(180deg, #6C63FF, #5B52F3); color: #fff; } .admin-profile-card__btn--confirm:hover { background: linear-gradient(180deg, #8B80FF, #6C63FF); } .admin-profile-card__btn--confirm:active { background: linear-gradient(180deg, #5B52F3, #4A42E8); } .admin-profile-card__btn--confirm:disabled { opacity: 0.6; cursor: not-allowed; } [data-theme="dark"] .admin-profile-card__btn, [data-theme="dark"] .admin-profile-card__btn--cancel { background: rgba(255,255,255,0.08); color: #8B8BA7; } [data-theme="dark"] .admin-profile-card__btn:hover, [data-theme="dark"] .admin-profile-card__btn--cancel:hover { background: rgba(255,255,255,0.14); } /* ============== ABSEN RESULT POPUP (success/error/warning) ============== */ /* Aligned to match logout-card theme exactly — same dimensions, animations, nuance */ .absen-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .absen-popup-overlay.active { opacity: 1; pointer-events: all; } .absen-popup-card { width: 280px; max-width: 100%; background: #ffffff; border-radius: 24px; position: relative; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.06); font-family: 'Poppins', sans-serif; transform: translateY(30px) scale(0.95); opacity: 0; transition: all .5s cubic-bezier(.16,1,.3,1); } .absen-popup-overlay.active .absen-popup-card { transform: translateY(0) scale(1); opacity: 1; } .absen-popup-card__shine { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 65%); opacity: 0; pointer-events: none; z-index: 3; } .absen-popup-overlay.active .absen-popup-card__shine { opacity: 1; animation: absenPopupShine 1.8s ease .3s forwards; } @keyframes absenPopupShine { 0% { background-position: -150% 0; opacity: 1; } 100% { background-position: 250% 0; opacity: 0; } } .absen-popup-card__icon-wrap { display: flex; justify-content: center; padding-top: 28px; position: relative; z-index: 2; } .absen-popup-card__icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1) .3s; } .absen-popup-overlay.active .absen-popup-card__icon { transform: scale(1); } .absen-popup-card__icon svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } /* Color variants — set on .absen-popup-card__icon via JS */ .absen-popup-card__icon--success { background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.30); } .absen-popup-card__icon--error { background: linear-gradient(135deg, #EF4444, #DC2626); box-shadow: 0 6px 20px rgba(239, 68, 68, 0.30); } .absen-popup-card__icon--warning { background: linear-gradient(135deg, #F59E0B, #D97706); box-shadow: 0 6px 20px rgba(245, 158, 11, 0.30); } .absen-popup-card__icon--info { background: linear-gradient(135deg, #6C63FF, #5B52F3); box-shadow: 0 6px 20px rgba(108, 99, 255, 0.30); } .absen-popup-card__content { padding: 16px 24px 26px; position: relative; z-index: 2; text-align: center; } .absen-popup-card__title { color: #1e293b; font-size: 18px; font-weight: 700; margin: 0 0 4px; transform: translateY(8px); opacity: 0; transition: all .4s ease .35s; } .absen-popup-overlay.active .absen-popup-card__title { transform: translateY(0); opacity: 1; } .absen-popup-card__desc { color: #64748b; font-size: 13px; margin: 0 0 20px; line-height: 1.5; opacity: 0; transition: all .4s ease .45s; } .absen-popup-overlay.active .absen-popup-card__desc { opacity: 1; } .absen-popup-card__details { background: #F8FAFC; border: 1px solid rgba(108, 99, 255, 0.08); border-radius: 14px; padding: 10px 14px; margin: 0 0 16px; font-size: 12px; color: #475569; text-align: left; line-height: 1.6; transform: translateY(8px); opacity: 0; transition: all .4s ease .55s; } .absen-popup-overlay.active .absen-popup-card__details { transform: translateY(0); opacity: 1; } .absen-popup-card__details b { color: #1e293b; font-weight: 700; } .absen-popup-card__actions { display: flex; gap: 10px; transform: translateY(8px); opacity: 0; transition: all .4s ease .5s; } .absen-popup-overlay.active .absen-popup-card__actions { transform: translateY(0); opacity: 1; } .absen-popup-card__btn { flex: 1; padding: 12px 0; border-radius: 16px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all .2s ease; color: #fff; } .absen-popup-card__btn--ok { background: linear-gradient(135deg, #6C63FF, #5B52F3); box-shadow: 0 4px 14px rgba(108, 99, 255, 0.30); } .absen-popup-card__btn--ok:hover { background: linear-gradient(135deg, #5B52F3, #4F46E5); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(108, 99, 255, 0.40); } .absen-popup-card__btn--ok:active { transform: scale(0.97); } /* Dark mode */ [data-theme="dark"] .absen-popup-card { background: #1E1E2E; border-color: rgba(255,255,255,0.06); box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.2); } [data-theme="dark"] .absen-popup-card__title { color: #E8E8F0; } [data-theme="dark"] .absen-popup-card__desc { color: #8B8BA7; } [data-theme="dark"] .absen-popup-card__details { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); color: #B8B8D0; } [data-theme="dark"] .absen-popup-card__details b { color: #E8E8F0; } /* ============== EXPORT EMPTY CARD POPUP ============== */ .export-empty-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .export-empty-overlay.active { opacity: 1; pointer-events: all; } .export-empty-card { width: 280px; background: #ffffff; border-radius: 24px; position: relative; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.06); font-family: 'Poppins', sans-serif; transform: translateY(30px) scale(0.95); opacity: 0; transition: all .5s cubic-bezier(.16,1,.3,1); } .export-empty-overlay.active .export-empty-card { transform: translateY(0) scale(1); opacity: 1; } .export-empty-card__shine { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 65%); opacity: 0; pointer-events: none; z-index: 3; } .export-empty-overlay.active .export-empty-card__shine { opacity: 1; animation: exportEmptyShine 1.8s ease .3s forwards; } @keyframes exportEmptyShine { 0% { background-position: -150% 0; opacity: 1; } 100% { background-position: 250% 0; opacity: 0; } } .export-empty-card__icon-wrap { display: flex; justify-content: center; padding-top: 28px; position: relative; z-index: 2; } .export-empty-card__icon { width: 60px; height: 60px; background: linear-gradient(135deg, #6C63FF, #5B52F3); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(108,99,255,0.3); transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1) .3s; } .export-empty-overlay.active .export-empty-card__icon { transform: scale(1); } .export-empty-card__icon svg { width: 30px; height: 30px; fill: none; stroke: #fff; } .export-empty-card__content { padding: 16px 24px 26px; position: relative; z-index: 2; text-align: center; } .export-empty-card__title { color: #1e293b; font-size: 18px; font-weight: 700; margin: 0 0 4px; transform: translateY(8px); opacity: 0; transition: all .4s ease .35s; } .export-empty-overlay.active .export-empty-card__title { transform: translateY(0); opacity: 1; } .export-empty-card__desc { color: #64748b; font-size: 13px; margin: 0 0 20px; opacity: 0; transition: all .4s ease .45s; } .export-empty-overlay.active .export-empty-card__desc { opacity: 1; } .export-empty-card__actions { display: flex; gap: 10px; transform: translateY(8px); opacity: 0; transition: all .4s ease .5s; } .export-empty-overlay.active .export-empty-card__actions { transform: translateY(0); opacity: 1; } .export-empty-card__btn { flex: 1; padding: 12px 0; border-radius: 16px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all .2s ease; background: linear-gradient(180deg, #6C63FF, #5B52F3); color: #fff; } .export-empty-card__btn:hover { background: linear-gradient(180deg, #7B73FF, #6C63FF); } .export-empty-card__btn:active { background: linear-gradient(180deg, #5B52F3, #4A43E0); } /* ============== KARYAWAN SUCCESS CARD POPUP ============== */ .karyawan-success-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .karyawan-success-overlay.active { opacity: 1; pointer-events: all; } .karyawan-success-card { width: 280px; background: #ffffff; border-radius: 24px; position: relative; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.06); font-family: 'Poppins', sans-serif; transform: translateY(30px) scale(0.95); opacity: 0; transition: all .5s cubic-bezier(.16,1,.3,1); } .karyawan-success-overlay.active .karyawan-success-card { transform: translateY(0) scale(1); opacity: 1; } .karyawan-success-card__shine { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 65%); opacity: 0; pointer-events: none; z-index: 3; } .karyawan-success-overlay.active .karyawan-success-card__shine { opacity: 1; animation: karyawanSuccessShine 1.8s ease .3s forwards; } @keyframes karyawanSuccessShine { 0% { background-position: -150% 0; opacity: 1; } 100% { background-position: 250% 0; opacity: 0; } } .karyawan-success-card__icon-wrap { display: flex; justify-content: center; padding-top: 28px; position: relative; z-index: 2; } .karyawan-success-card__icon { width: 60px; height: 60px; background: linear-gradient(135deg, #10B981, #059669); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(16,185,129,0.3); transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1) .3s; } .karyawan-success-overlay.active .karyawan-success-card__icon { transform: scale(1); } .karyawan-success-card__icon svg { width: 30px; height: 30px; fill: none; stroke: #fff; } .karyawan-success-card__content { padding: 16px 24px 26px; position: relative; z-index: 2; text-align: center; } .karyawan-success-card__title { color: #1e293b; font-size: 18px; font-weight: 700; margin: 0 0 4px; transform: translateY(8px); opacity: 0; transition: all .4s ease .35s; } .karyawan-success-overlay.active .karyawan-success-card__title { transform: translateY(0); opacity: 1; } .karyawan-success-card__desc { color: #64748b; font-size: 13px; margin: 0 0 20px; opacity: 0; transition: all .4s ease .45s; } .karyawan-success-overlay.active .karyawan-success-card__desc { opacity: 1; } .karyawan-success-card__actions { display: flex; gap: 10px; transform: translateY(8px); opacity: 0; transition: all .4s ease .5s; } .karyawan-success-overlay.active .karyawan-success-card__actions { transform: translateY(0); opacity: 1; } .karyawan-success-card__btn { flex: 1; padding: 12px 0; border-radius: 16px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all .2s ease; background: linear-gradient(180deg, #10B981, #059669); color: #fff; } .karyawan-success-card__btn:hover { background: linear-gradient(180deg, #34D399, #10B981); } .karyawan-success-card__btn:active { background: linear-gradient(180deg, #059669, #047857); } /* ============== KARYAWAN ERROR CARD POPUP ============== */ .karyawan-error-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .karyawan-error-overlay.active { opacity: 1; pointer-events: all; } .karyawan-error-card { width: 280px; background: #ffffff; border-radius: 24px; position: relative; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.06); font-family: 'Poppins', sans-serif; transform: translateY(30px) scale(0.95); opacity: 0; transition: all .5s cubic-bezier(.16,1,.3,1); } .karyawan-error-overlay.active .karyawan-error-card { transform: translateY(0) scale(1); opacity: 1; } .karyawan-error-card__shine { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 65%); opacity: 0; pointer-events: none; z-index: 3; } .karyawan-error-overlay.active .karyawan-error-card__shine { opacity: 1; animation: karyawanErrorShine 1.8s ease .3s forwards; } @keyframes karyawanErrorShine { 0% { background-position: -150% 0; opacity: 1; } 100% { background-position: 250% 0; opacity: 0; } } .karyawan-error-card__icon-wrap { display: flex; justify-content: center; padding-top: 28px; position: relative; z-index: 2; } .karyawan-error-card__icon { width: 60px; height: 60px; background: linear-gradient(135deg, #EF4444, #DC2626); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(239,68,68,0.3); transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1) .3s; } .karyawan-error-overlay.active .karyawan-error-card__icon-wrap { transform: scale(1); } .karyawan-error-card__icon svg { width: 30px; height: 30px; fill: none; stroke: #fff; } .karyawan-error-card__content { padding: 16px 24px 26px; position: relative; z-index: 2; text-align: center; } .karyawan-error-card__title { color: #1e293b; font-size: 18px; font-weight: 700; margin: 0 0 4px; transform: translateY(8px); opacity: 0; transition: all .4s ease .35s; } .karyawan-error-overlay.active .karyawan-error-card__title { transform: translateY(0); opacity: 1; } .karyawan-error-card__desc { color: #64748b; font-size: 13px; margin: 0 0 20px; opacity: 0; transition: all .4s ease .45s; } .karyawan-error-overlay.active .karyawan-error-card__desc { opacity: 1; } .karyawan-error-card__actions { display: flex; gap: 10px; transform: translateY(8px); opacity: 0; transition: all .4s ease .5s; } .karyawan-error-overlay.active .karyawan-error-card__actions { transform: translateY(0); opacity: 1; } .karyawan-error-card__btn { flex: 1; padding: 12px 0; border-radius: 16px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all .2s ease; background: linear-gradient(180deg, #EF4444, #DC2626); color: #fff; } .karyawan-error-card__btn:hover { background: linear-gradient(180deg, #F87171, #EF4444); } .karyawan-error-card__btn:active { background: linear-gradient(180deg, #DC2626, #B91C1C); } /* ============== KARYAWAN DELETE CONFIRM CARD POPUP ============== */ .karyawan-delete-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .karyawan-delete-overlay.active { opacity: 1; pointer-events: all; } .karyawan-delete-card { width: 280px; background: #ffffff; border-radius: 24px; position: relative; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.06); font-family: 'Poppins', sans-serif; transform: translateY(30px) scale(0.95); opacity: 0; transition: all .5s cubic-bezier(.16,1,.3,1); } .karyawan-delete-overlay.active .karyawan-delete-card { transform: translateY(0) scale(1); opacity: 1; } .karyawan-delete-card__shine { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 65%); opacity: 0; pointer-events: none; z-index: 3; } .karyawan-delete-overlay.active .karyawan-delete-card__shine { opacity: 1; animation: karyawanDeleteShine 1.8s ease .3s forwards; } @keyframes karyawanDeleteShine { 0% { background-position: -150% 0; opacity: 1; } 100% { background-position: 250% 0; opacity: 0; } } .karyawan-delete-card__icon-wrap { display: flex; justify-content: center; padding-top: 28px; position: relative; z-index: 2; } .karyawan-delete-card__icon { width: 60px; height: 60px; background: linear-gradient(135deg, #F59E0B, #D97706); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(245,158,11,0.3); transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1) .3s; } .karyawan-delete-overlay.active .karyawan-delete-card__icon { transform: scale(1); } .karyawan-delete-card__icon svg { width: 30px; height: 30px; fill: none; stroke: #fff; } .karyawan-delete-card__content { padding: 16px 24px 26px; position: relative; z-index: 2; text-align: center; } .karyawan-delete-card__title { color: #1e293b; font-size: 18px; font-weight: 700; margin: 0 0 4px; transform: translateY(8px); opacity: 0; transition: all .4s ease .35s; } .karyawan-delete-overlay.active .karyawan-delete-card__title { transform: translateY(0); opacity: 1; } .karyawan-delete-card__desc { color: #64748b; font-size: 13px; margin: 0 0 20px; opacity: 0; transition: all .4s ease .45s; } .karyawan-delete-overlay.active .karyawan-delete-card__desc { opacity: 1; } .karyawan-delete-card__actions { display: flex; gap: 10px; transform: translateY(8px); opacity: 0; transition: all .4s ease .5s; } .karyawan-delete-overlay.active .karyawan-delete-card__actions { transform: translateY(0); opacity: 1; } .karyawan-delete-card__btn { flex: 1; padding: 12px 0; border-radius: 16px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all .2s ease; } .karyawan-delete-card__btn--cancel { background: #f1f5f9; color: #64748b; } .karyawan-delete-card__btn--cancel:hover { background: #e2e8f0; } .karyawan-delete-card__btn--cancel:active { background: #d5dbe3; } .karyawan-delete-card__btn--confirm { background: linear-gradient(180deg, #EF4444, #DC2626); color: #fff; } .karyawan-delete-card__btn--confirm:hover { background: linear-gradient(180deg, #F87171, #EF4444); } .karyawan-delete-card__btn--confirm:active { background: linear-gradient(180deg, #DC2626, #B91C1C); } /* ============== SETTINGS CARD POPUP ============== */ .settings-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .settings-overlay.active { opacity: 1; pointer-events: all; } .settings-card { width: 300px; background: #ffffff; border-radius: 24px; position: relative; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.06); font-family: 'Poppins', sans-serif; transform: translateY(30px) scale(0.95); opacity: 0; transition: all .5s cubic-bezier(.16,1,.3,1); } .settings-overlay.active .settings-card { transform: translateY(0) scale(1); opacity: 1; } .settings-card__shine { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 65%); opacity: 0; pointer-events: none; z-index: 3; } .settings-overlay.active .settings-card__shine { opacity: 1; animation: settingsShine 1.8s ease .3s forwards; } @keyframes settingsShine { 0% { background-position: -150% 0; opacity: 1; } 100% { background-position: 250% 0; opacity: 0; } } .settings-card__icon-wrap { display: flex; justify-content: center; padding-top: 28px; position: relative; z-index: 2; } .settings-card__icon { width: 60px; height: 60px; background: linear-gradient(135deg, #6C63FF, #5B52F3); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(108,99,255,0.3); transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1) .3s; } .settings-overlay.active .settings-card__icon { transform: scale(1); } .settings-card__icon svg { width: 30px; height: 30px; fill: none; stroke: #fff; } .settings-card__content { padding: 16px 24px 26px; position: relative; z-index: 2; text-align: center; } .settings-card__title { color: #1e293b; font-size: 18px; font-weight: 700; margin: 0 0 16px; transform: translateY(8px); opacity: 0; transition: all .4s ease .35s; } .settings-overlay.active .settings-card__title { transform: translateY(0); opacity: 1; } .settings-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid #f0f0f5; transform: translateY(8px); opacity: 0; transition: all .4s ease .4s; } .settings-overlay.active .settings-row { transform: translateY(0); opacity: 1; } .settings-row:last-of-type { border-bottom: none; } .settings-row__left { display: flex; align-items: center; gap: 10px; text-align: left; } .settings-row__icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .settings-row__icon--dark { background: #FEF3C7; } .settings-row__icon--dark svg { width: 18px; height: 18px; stroke: #D97706; fill: none; } .settings-row__icon--lang { background: #DBEAFE; } .settings-row__icon--lang svg { width: 18px; height: 18px; stroke: #2563EB; fill: none; } .settings-row__label { font-size: 14px; font-weight: 600; color: #1e293b; } .settings-row__sublabel { font-size: 11px; color: #94a3b8; margin-top: 1px; } /* Toggle Switch */ .toggle-switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; cursor: pointer; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-switch__slider { position: absolute; inset: 0; background: #e2e8f0; border-radius: 26px; transition: all .3s ease; } .toggle-switch__slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: all .3s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .toggle-switch input:checked + .toggle-switch__slider { background: #6C63FF; } .toggle-switch input:checked + .toggle-switch__slider::before { transform: translateX(20px); } /* Language Switch */ .lang-switch { display: flex; background: #f1f5f9; border-radius: 12px; overflow: hidden; flex-shrink: 0; } .lang-switch__btn { padding: 6px 14px; border: none; background: none; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; color: #94a3b8; cursor: pointer; transition: all .25s ease; } .lang-switch__btn.active { background: #6C63FF; color: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(108,99,255,0.3); } /* ============== DARK MODE ============== */ [data-theme="dark"] { --bg: #13131F; --card: #1E1E2E; --text: #E8E8F0; --text-secondary: #8B8BA7; } [data-theme="dark"] body { background: var(--bg); color: var(--text); } [data-theme="dark"] .mobile-container { background: var(--bg); } [data-theme="dark"] .header-top { background: transparent; } [data-theme="dark"] .header-icon-btn { background: var(--card); border-color: rgba(108,99,255,0.15); } [data-theme="dark"] .karyawan-toolbar-card, [data-theme="dark"] .history-main-card, [data-theme="dark"] .today-status-card, [data-theme="dark"] .absen-info-card, [data-theme="dark"] .chart-card, [data-theme="dark"] .asset-card { background: var(--card); box-shadow: 0 2px 12px rgba(0,0,0,0.2); } [data-theme="dark"] .profil-info-card { background: var(--card); } [data-theme="dark"] .karyawan-item { background: var(--card); } [data-theme="dark"] .karyawan-trigger { box-shadow: 0 4px 14px rgba(0,0,0,0.45); } [data-theme="dark"] .karyawan-item.actions-open { background: rgba(108,99,255,0.10); } [data-theme="dark"] .karyawan-actions-panel .action-btn { background: rgba(255,255,255,0.06); } [data-theme="dark"] .karyawan-actions-panel .action-btn:hover { background: rgba(255,255,255,0.12); box-shadow: 0 4px 14px rgba(0,0,0,0.35); } [data-theme="dark"] .karyawan-actions-panel .delete-btn { background: rgba(239,68,68,0.18); } [data-theme="dark"] .history-card { background: var(--card); } [data-theme="dark"] .search-expand-input { background: var(--card); color: var(--text); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .dash-search-input { background: var(--card); color: var(--text); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .dash-search-wrap { background: var(--card); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .day-card-3d { background: var(--card); color: var(--text); } [data-theme="dark"] .day-card-3d.today { background: linear-gradient(135deg, #6C63FF, #5B52F3); color: #fff; } [data-theme="dark"] .summary-card { background: var(--card); } [data-theme="dark"] .asset-item { border-bottom-color: rgba(255,255,255,0.06); } [data-theme="dark"] .karyawan-page-header { background: transparent; } [data-theme="dark"] .profil-section { background: transparent; } [data-theme="dark"] .history-date-picker__trigger { background: var(--card); color: var(--text); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .history-date-picker__dropdown { background: var(--card); border-color: rgba(255,255,255,0.08); box-shadow: 0 12px 40px rgba(0,0,0,0.3); } [data-theme="dark"] .history-date-picker__day { color: var(--text); } [data-theme="dark"] .history-date-picker__day:hover { background: rgba(108,99,255,0.12); } [data-theme="dark"] .history-date-picker__day.other-month { color: #555; } [data-theme="dark"] .history-date-picker__day.today { color: #6C63FF; } [data-theme="dark"] .history-date-picker__day.selected { background: #6C63FF; color: #fff; } [data-theme="dark"] .history-date-picker__header button { color: var(--text); } [data-theme="dark"] .history-date-picker__header span { color: var(--text); } [data-theme="dark"] .history-date-picker__weekdays span { color: var(--text-secondary); } [data-theme="dark"] .history-main-card__search-btn { background: var(--card); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .history-main-card__search-btn svg { stroke: var(--text); } [data-theme="dark"] .history-main-card__export { background: var(--card); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .history-main-card__export svg { stroke: var(--text); } [data-theme="dark"] .skeleton-card { background: var(--card); } [data-theme="dark"] .skeleton-line { background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%); background-size: 200% 100%; } [data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.6); } [data-theme="dark"] .bottom-sheet-modal { background: var(--card); } [data-theme="dark"] .bottom-sheet-modal label { color: var(--text); } [data-theme="dark"] .modal-cancel-btn { background: rgba(255,255,255,0.08); color: var(--text-secondary); } [data-theme="dark"] .filter-bar input[type="month"] { background: var(--card); color: var(--text); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .filter-bar input[type="month"]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.22); } [data-theme="dark"] .filter-bar input[type="month"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.7; } [data-theme="dark"] .absen-info-row + .absen-info-row { border-top-color: rgba(255,255,255,0.08); } [data-theme="dark"] .hadir-badge { background: rgba(16,185,129,0.15); color: #34D399; } [data-theme="dark"] .pending-badge { background: rgba(245,158,11,0.15); color: #FCD34D; } [data-theme="dark"] .status-chip.hadir { background: rgba(16,185,129,0.15); color: #34D399; } [data-theme="dark"] .status-chip.terlambat { background: rgba(245,158,11,0.15); color: #FCD34D; } [data-theme="dark"] .status-chip.tidak { background: rgba(239,68,68,0.15); color: #FCA5A5; } [data-theme="dark"] .logout-card, [data-theme="dark"] .karyawan-success-card, [data-theme="dark"] .karyawan-error-card, [data-theme="dark"] .karyawan-delete-card, [data-theme="dark"] .export-empty-card, [data-theme="dark"] .settings-card { background: #1E1E2E; border-color: rgba(255,255,255,0.06); } [data-theme="dark"] .logout-card__title, [data-theme="dark"] .karyawan-success-card__title, [data-theme="dark"] .karyawan-error-card__title, [data-theme="dark"] .karyawan-delete-card__title, [data-theme="dark"] .export-empty-card__title, [data-theme="dark"] .settings-card__title { color: #E8E8F0; } [data-theme="dark"] .logout-card__desc, [data-theme="dark"] .karyawan-success-card__desc, [data-theme="dark"] .karyawan-error-card__desc, [data-theme="dark"] .karyawan-delete-card__desc, [data-theme="dark"] .export-empty-card__desc { color: #8B8BA7; } [data-theme="dark"] .logout-card__btn--cancel { background: rgba(255,255,255,0.08); color: #8B8BA7; } [data-theme="dark"] .admin-profile-card { background: #1E1E2E; border-color: rgba(255,255,255,0.06); } [data-theme="dark"] .admin-profile-card__title { color: #E8E8F0; } [data-theme="dark"] .admin-profile-card__desc { color: #8B8BA7; } [data-theme="dark"] .admin-profile-info__row { background: rgba(255,255,255,0.05); } [data-theme="dark"] .admin-profile-info__value { color: #E8E8F0; } [data-theme="dark"] .admin-profile-about__name, [data-theme="dark"] .admin-profile-about__dev { color: #E8E8F0; } [data-theme="dark"] .admin-profile-about__sep, [data-theme="dark"] .admin-profile-privacy__item { border-color: rgba(255,255,255,0.06); } [data-theme="dark"] .admin-profile-privacy__title { color: #E8E8F0; } [data-theme="dark"] .admin-profile-card__btn { background: rgba(255,255,255,0.08); color: #8B8BA7; } [data-theme="dark"] .karyawan-delete-card__btn--cancel { background: rgba(255,255,255,0.08); color: #8B8BA7; } [data-theme="dark"] .settings-row { border-bottom-color: rgba(255,255,255,0.06); } [data-theme="dark"] .settings-row__label { color: #E8E8F0; } [data-theme="dark"] .lang-switch { background: rgba(255,255,255,0.08); } [data-theme="dark"] .toggle-switch__slider { background: rgba(255,255,255,0.15); } [data-theme="dark"] .btn-add { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); } [data-theme="dark"] .btn-add-icon svg { stroke: #fff !important; } [data-theme="dark"] .search-expand-icon { background: var(--card); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .search-expand-icon svg { stroke: var(--text); } [data-theme="dark"] .history-main-card__empty svg { stroke: var(--text-secondary); } [data-theme="dark"] .history-main-card__empty p { color: var(--text-secondary); } [data-theme="dark"] .profil-role-label { color: var(--text-secondary); } [data-theme="dark"] .profil-name { color: var(--text); } [data-theme="dark"] .profil-info-item { border-bottom-color: rgba(255,255,255,0.06); } [data-theme="dark"] .profil-info-item__label { color: var(--text-secondary); } [data-theme="dark"] .profil-info-item__value { color: var(--text); } [data-theme="dark"] .logout-btn-profile { background: rgba(239,68,68,0.1); color: #FCA5A5; border-color: rgba(239,68,68,0.15); } [data-theme="dark"] .modal-title { color: var(--text); } [data-theme="dark"] .modal-form input { background: rgba(255,255,255,0.05); color: var(--text); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .modal-form input::placeholder { color: var(--text-secondary); } [data-theme="dark"] .modal-form label { color: var(--text); } [data-theme="dark"] .modal-submit-btn { background: linear-gradient(180deg, var(--primary), var(--primary-dark)); } [data-theme="dark"] .asset-more-btn { background: var(--card); color: var(--text); } [data-theme="dark"] .asset-more-btn svg { stroke: var(--text); } [data-theme="dark"] .asset-card-title { color: var(--text); } [data-theme="dark"] .asset-name { color: var(--text); } [data-theme="dark"] .chart-card-title { color: var(--text); } [data-theme="dark"] .chart-toggle-btn { background: rgba(255,255,255,0.08); color: var(--text-secondary); } [data-theme="dark"] .chart-toggle-btn.active { background: var(--primary); color: #fff; } /* ============== SPLASH SCREEN ============== */ #splashScreen { position: fixed; inset: 0; background: linear-gradient(135deg, #6C63FF 0%, #5B52F3 50%, #8B80FF 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.6s ease; } #splashScreen.hidden { opacity: 0; pointer-events: none; } .splash-logo { margin-bottom: 16px; animation: splashLogoIn 0.8s cubic-bezier(.16,1,.3,1) both; } .splash-logo-img { width: 240px; height: auto; max-width: 70vw; } @keyframes splashLogoIn { from { opacity: 0; transform: scale(0.5) translateY(30px); } to { opacity: 1; transform: scale(1) translateY(0); } } .splash-loader-wrap { width: 200px; animation: fadeInUp 0.6s ease 0.4s both; } .splash-progress-bar { width: 100%; height: 6px; background: rgba(255,255,255,0.2); border-radius: 3px; overflow: hidden; } .splash-progress-fill { height: 100%; width: 0%; background: #fff; border-radius: 3px; transition: width 0.3s ease; } .splash-progress-text { text-align: center; color: rgba(255,255,255,0.9); font-size: 12px; font-weight: 500; margin-top: 8px; } /* ============== LOGIN ============== */ #loginSection { display: none; width: 100%; max-width: 100%; margin: 0 auto; min-height: 100svh; /* override 100vh from below — small viewport for true centering */ animation: fadeInUp 0.5s ease both; } #loginSection.active { display: block; } .login-header { background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%); padding: 60px 24px 48px; text-align: center; border-radius: 0 0 28px 28px; position: relative; overflow: hidden; } .login-header::before { content: ''; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; background: rgba(255,255,255,0.08); border-radius: 50%; } .login-header::after { content: ''; position: absolute; bottom: -20px; left: -20px; width: 80px; height: 80px; background: rgba(255,255,255,0.06); border-radius: 50%; } .login-header-logo { position: relative; z-index: 1; margin-bottom: 12px; } .login-header-logo img { width: 72px; height: auto; border-radius: 16px; } .login-header-title { position: relative; z-index: 1; font-size: 22px; font-weight: 700; color: #FFF; letter-spacing: 1px; } .login-body { padding: 32px 24px 24px; } .login-greeting { font-size: 26px; font-weight: 700; color: #333; margin-bottom: 4px; } .login-subtitle { font-size: 14px; color: #999; margin-bottom: 28px; } .input-group { margin-bottom: 16px; } .input-group-field { position: relative; display: flex; align-items: center; } .input-group-icon { position: absolute; left: 16px; width: 20px; height: 20px; color: #999; pointer-events: none; display: flex; align-items: center; justify-content: center; } .input-group-field input { width: 100%; padding: 16px 16px 16px 48px; border: 1.5px solid #E0E0E0; border-radius: 12px; font-family: 'Poppins', sans-serif; font-size: 14px; color: #333; background: #F8F8F8; outline: none; transition: all 0.25s ease; } .input-group-field input:focus { border-color: #4ECDC4; background: #FFF; box-shadow: 0 0 0 3px rgba(78,205,196,0.12); } .input-group-field input::placeholder { color: #BBB; } .toggle-password { position: absolute; right: 14px; background: none; border: none; cursor: pointer; padding: 4px; display: flex; align-items: center; opacity: 0.45; transition: opacity 0.2s; } .toggle-password:hover { opacity: 1; } .remember-row { margin-bottom: 24px; } .remember-row label { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #666; cursor: pointer; } .remember-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: #4ECDC4; cursor: pointer; } .login-btn { width: 100%; padding: 16px; background: #4ECDC4; color: #FFF; border: none; border-radius: 12px; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 4px 16px rgba(78,205,196,0.35); transition: all 0.25s ease; } .login-btn:hover { background: #3DBDB5; transform: translateY(-1px); box-shadow: 0 6px 22px rgba(78,205,196,0.4); } .login-btn:active { transform: scale(0.97); } .login-btn svg { stroke: #fff; fill: none; } .login-footer { text-align: center; padding: 20px 24px 32px; color: #FFFFFF; font-size: 12px; } /* ============== LOGIN SUCCESS CARD POPUP ============== */ .login-success-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .15s ease; } .login-success-overlay.active { opacity: 1; pointer-events: all; } .success-card { width: 280px; background: #ffffff; border-radius: 24px; position: relative; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.06); font-family: 'Poppins', sans-serif; transform: translateY(30px) scale(0.95); opacity: 0; transition: all .25s cubic-bezier(.16,1,.3,1); } .login-success-overlay.active .success-card { transform: translateY(0) scale(1); opacity: 1; } .success-card__shine { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 65%); opacity: 0; pointer-events: none; z-index: 3; } .login-success-overlay.active .success-card__shine { opacity: 1; animation: loginSuccessShine .8s ease 0s forwards; } @keyframes loginSuccessShine { 0% { background-position: -150% 0; opacity: 1; } 100% { background-position: 250% 0; opacity: 0; } } .success-card__icon-wrap { display: flex; justify-content: center; padding-top: 28px; position: relative; z-index: 2; } .success-card__icon { width: 60px; height: 60px; background: linear-gradient(135deg, #10B981, #059669); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(16,185,129,0.3); transform: scale(0); transition: transform .3s cubic-bezier(.34,1.56,.64,1) .05s; } .login-success-overlay.active .success-card__icon { transform: scale(1); } .success-card__icon svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .success-card__content { padding: 16px 24px 26px; position: relative; z-index: 2; text-align: center; } .success-card__title { color: #1e293b; font-size: 18px; font-weight: 700; margin: 0 0 4px; transform: translateY(8px); opacity: 0; transition: all .25s ease .1s; } .login-success-overlay.active .success-card__title { transform: translateY(0); opacity: 1; } .success-card__desc { color: #64748b; font-size: 13px; margin: 0 0 16px; opacity: 0; transition: all .25s ease .15s; } .login-success-overlay.active .success-card__desc { opacity: 1; } .success-card__footer { transform: translateY(8px); opacity: 0; transition: all .25s ease .2s; } .login-success-overlay.active .success-card__footer { transform: translateY(0); opacity: 1; } .success-card__role { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(108,99,255,0.08); border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--primary); } .success-card__role-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); } .success-card__role-text { color: var(--primary); } /* ============== LOGIN ERROR CARD POPUP ============== */ .login-error-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .login-error-overlay.active { opacity: 1; pointer-events: all; } .error-card { width: 280px; background: #ffffff; border-radius: 24px; position: relative; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.06); font-family: 'Poppins', sans-serif; transform: translateY(30px) scale(0.95); opacity: 0; transition: all .5s cubic-bezier(.16,1,.3,1); } .login-error-overlay.active .error-card { transform: translateY(0) scale(1); opacity: 1; } .error-card__shine { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 65%); opacity: 0; pointer-events: none; z-index: 3; } .login-error-overlay.active .error-card__shine { opacity: 1; animation: loginErrorShine 1.8s ease .3s forwards; } @keyframes loginErrorShine { 0% { background-position: -150% 0; opacity: 1; } 100% { background-position: 250% 0; opacity: 0; } } .error-card__icon-wrap { display: flex; justify-content: center; padding-top: 28px; position: relative; z-index: 2; } .error-card__icon { width: 60px; height: 60px; background: linear-gradient(135deg, #EF4444, #DC2626); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(239,68,68,0.3); transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1) .3s; } .login-error-overlay.active .error-card__icon { transform: scale(1); } .error-card__icon svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .error-card__content { padding: 16px 24px 26px; position: relative; z-index: 2; text-align: center; } .error-card__title { color: #1e293b; font-size: 18px; font-weight: 700; margin: 0 0 4px; transform: translateY(8px); opacity: 0; transition: all .4s ease .35s; } .login-error-overlay.active .error-card__title { transform: translateY(0); opacity: 1; } .error-card__desc { color: #64748b; font-size: 13px; margin: 0 0 16px; opacity: 0; transition: all .4s ease .45s; } .login-error-overlay.active .error-card__desc { opacity: 1; } .error-card__footer { transform: translateY(8px); opacity: 0; transition: all .4s ease .5s; } .login-error-overlay.active .error-card__footer { transform: translateY(0); opacity: 1; } .error-card__btn { padding: 12px 32px; border-radius: 16px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all .2s ease; background: linear-gradient(135deg, #EF4444, #DC2626); color: #fff; } .error-card__btn:hover { background: linear-gradient(135deg, #F87171, #EF4444); } .error-card__btn:active { background: linear-gradient(135deg, #DC2626, #B91C1C); } /* ============== FILTER BAR ============== NOTE: On iOS Safari, is rendered with the user-agent's intrinsic widget chrome + min-height, which makes the bar look "terlalu memanjang" (too tall) on iPhone. To get pixel-identical height on both iPhone (Safari) and Android (Chrome) we MUST: 1. strip native appearance (-webkit-appearance: none) 2. lock an explicit height (height + min/max-height) 3. use border-box so the 2px border is included in the height 4. drive vertical centering from the fixed height, not from padding ============================================================== */ .filter-bar { width: 100%; margin-bottom: 16px; /* prevent the bar from ever stretching wider than its column */ max-width: 100%; box-sizing: border-box; } .filter-bar input[type="month"] { /* --- 1. Strip native widget chrome (THE iOS fix) --- */ -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; -webkit-rtl-ordering: logical; /* --- 2. Lock the box dimensions --- */ width: 100%; height: 48px; /* identical on iPhone & Android */ min-height: 48px; /* defend against iOS UA min-height */ max-height: 48px; /* defend against iOS stretching */ box-sizing: border-box; margin: 0; /* symmetric horizontal padding — guarantees the content box is centered so text-align:center produces a PRECISE visual center on every device. The right padding also reserves room for the absolutely-positioned calendar-picker icon (see section 4 below). */ padding: 0 40px; position: relative; /* anchor for the absolute picker icon */ /* --- 3. Visual style (unchanged design tokens) --- */ border: 2px solid #E8E8F0; border-radius: var(--radius-input); font-family: 'Poppins', sans-serif; font-size: 14px; line-height: 1.2; /* keeps text vertically centered in 48px */ /* Bold + centered — makes the Bulan & Tahun text stand out and sit precisely in the middle of the bar on both iPhone & Android. */ font-weight: 700; text-align: center; letter-spacing: 0.4px; color: var(--text); background: var(--card); outline: none; cursor: pointer; display: block; transition: border-color 0.3s, box-shadow 0.3s; } .filter-bar input[type="month"]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.12); } /* --- 4. Calendar-picker icon — pulled OUT of the text flow so the Bulan/Tahun text can be perfectly centered. Positioned absolutely on the right edge, vertically centered. --- */ .filter-bar input[type="month"]::-webkit-calendar-picker-indicator { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); cursor: pointer; opacity: 0.55; transition: opacity 0.2s ease; padding: 0; margin: 0; } .filter-bar input[type="month"]::-webkit-calendar-picker-indicator:hover { opacity: 0.9; } .filter-bar input[type="month"]::-moz-calendar-picker-indicator { cursor: pointer; opacity: 0.6; } /* --- 5. Strip legacy spin buttons (old Android Chrome fallback) --- */ .filter-bar input[type="month"]::-webkit-inner-spin-button, .filter-bar input[type="month"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* --- 6. iPhone SE / very narrow screens — keep it compact & on one line --- */ @media (max-width: 360px) { .filter-bar input[type="month"] { height: 46px; min-height: 46px; max-height: 46px; /* keep symmetric so text stays precisely centered */ padding: 0 36px; font-size: 13px; } .filter-bar input[type="month"]::-webkit-calendar-picker-indicator { right: 10px; } } /* ============== DASHBOARD HERO & QUICK MENU ============== */ .dashboard-hero-card { background: linear-gradient(135deg, #6C63FF, #5B52F3, #8B80FF); border-radius: 24px; padding: 24px; margin-bottom: 20px; color: #fff; position: relative; overflow: hidden; box-shadow: 0 8px 32px rgba(108,99,255,0.25); } .dashboard-hero-card::before { content: ''; position: absolute; top: -50%; right: -30%; width: 200px; height: 200px; background: rgba(255,255,255,0.08); border-radius: 50%; } .quick-menu-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .quick-menu-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; background: var(--card); border-radius: 18px; cursor: pointer; transition: all .25s ease; box-shadow: 0 2px 10px rgba(108,99,255,0.06); } .quick-menu-item:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(108,99,255,0.12); } .quick-menu-item:active { transform: scale(0.95); } .quick-icon { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; } .quick-icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; } .quick-menu-item span { font-size: 11px; font-weight: 500; color: var(--text); text-align: center; } .hero-stat { display: flex; align-items: center; gap: 12px; } .hero-stat-num { font-size: 28px; font-weight: 700; } .hero-stat-label { font-size: 12px; opacity: 0.8; } /* ============== TODAY STATUS & ABSEN INFO ============== */ .today-status-card { background: var(--card); border-radius: 20px; padding: 18px 20px; margin-bottom: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); } /* ============== ON DUTY TODAY (REVISI: daftar karyawan jadwal hari ini) ============== */ .on-duty-card { background: var(--card); border-radius: 20px; padding: 18px 18px 8px; margin-bottom: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); overflow: hidden; } .on-duty-card__header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } /* REVISI 1+2: header centered tanpa icon */ .on-duty-card__header--center { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 3px; } .on-duty-card__icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #6C63FF, #8B80FF); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(108,99,255,0.25); } .on-duty-card__icon svg { width: 22px; height: 22px; } .on-duty-card__title-wrap { flex: 1; min-width: 0; } .on-duty-card__title { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.2; } /* REVISI 1: title & subtitle center saat header --center */ .on-duty-card__header--center .on-duty-card__title, .on-duty-card__header--center .on-duty-card__subtitle { text-align: center; } .on-duty-card__subtitle { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } .on-duty-card__body { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 10px; padding: 4px 2px 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } /* Custom scrollbar (horizontal) for on-duty list */ .on-duty-card__body::-webkit-scrollbar { height: 4px; } .on-duty-card__body::-webkit-scrollbar-track { background: transparent; } .on-duty-card__body::-webkit-scrollbar-thumb { background: rgba(108,99,255,0.25); border-radius: 4px; } .on-duty-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 14px; transition: background .15s ease; } .on-duty-row + .on-duty-row { border-top: 1px solid rgba(108,99,255,0.06); } .on-duty-row:hover { background: rgba(108,99,255,0.04); } .on-duty-row__avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #6C63FF, #8B80FF); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; box-shadow: 0 3px 8px rgba(108,99,255,0.2); } .on-duty-row--bekerja .on-duty-row__avatar { background: linear-gradient(135deg, #6C63FF, #8B6BFF); } .on-duty-row--selesai .on-duty-row__avatar { background: linear-gradient(135deg, #10B981, #059669); } .on-duty-row--belum .on-duty-row__avatar { background: linear-gradient(135deg, #F59E0B, #D97706); } .on-duty-row__info { flex: 1; min-width: 0; } .on-duty-row__name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* REVISI 5: animasi berdenyut (pulse) pada nama karyawan */ .on-duty-row__name--pulse { animation: on-duty-name-pulse 1.6s ease-in-out infinite; will-change: text-shadow, opacity; } @keyframes on-duty-name-pulse { 0%, 100% { opacity: 1; text-shadow: 0 0 0 rgba(108, 99, 255, 0); } 50% { opacity: 0.82; text-shadow: 0 0 8px rgba(108, 99, 255, 0.55); } } /* Reduced motion: matikan pulse untuk pengguna yang sensitif */ @media (prefers-reduced-motion: reduce) { .on-duty-row__name--pulse { animation: none; } } .on-duty-row__shift { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); margin-top: 2px; } .on-duty-row__shift svg { width: 13px; height: 13px; flex-shrink: 0; } .on-duty-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; color: #fff; flex-shrink: 0; white-space: nowrap; } .on-duty-badge svg { width: 13px; height: 13px; } .on-duty-badge--done { background: #10B981; } .on-duty-badge--working { background: #6C63FF; } .on-duty-badge--pending { background: #F59E0B; } .on-duty-empty { flex: 0 0 100%; width: 100%; text-align: center; padding: 20px 10px; font-size: 13px; color: var(--text-secondary); } .on-duty-skeleton { flex: 0 0 88px; height: 118px; border-radius: 16px; background: linear-gradient(90deg, rgba(108,99,255,0.05), rgba(108,99,255,0.12), rgba(108,99,255,0.05)); background-size: 200% 100%; animation: on-duty-shimmer 1.4s infinite; } @keyframes on-duty-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============== ON-DUTY CHIP (REVISI: icon orang di atas nama, 1 baris horizontal) ============== */ .on-duty-chip { flex: 1 1 0; min-width: 78px; max-width: 120px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 10px 6px; border-radius: 16px; background: rgba(108,99,255,0.05); scroll-snap-align: start; } /* REVISI 1: icon orang (personal) di atas nama */ .on-duty-chip__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #6C63FF, #8B80FF); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(108,99,255,0.3); } .on-duty-chip__avatar svg { width: 24px; height: 24px; } .on-duty-chip--bekerja .on-duty-chip__avatar { background: linear-gradient(135deg, #6C63FF, #8B6BFF); } .on-duty-chip--selesai .on-duty-chip__avatar { background: linear-gradient(135deg, #10B981, #059669); } .on-duty-chip__name { display: block; width: 100%; font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.15; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform-origin: center; } /* REVISI: denyut TEKS — hanya animasi scale (membesar-mengecil), tanpa glow warna. */ .on-duty-chip__name--pulse { animation: on-duty-name-beat 1.25s ease-in-out infinite; will-change: transform; } @keyframes on-duty-name-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } } @media (prefers-reduced-motion: reduce) { .on-duty-chip__name--pulse { animation: none; } } .on-duty-chip__shift { font-size: 10.5px; font-weight: 500; color: var(--text-secondary); line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Dark theme overrides for on-duty card */ [data-theme="dark"] .on-duty-card { background: var(--card); box-shadow: 0 2px 12px rgba(0,0,0,0.2); } [data-theme="dark"] .on-duty-chip { background: rgba(108,99,255,0.1); } .hadir-badge { display: inline-flex; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; background: rgba(16,185,129,0.1); color: #10B981; } .pending-badge { display: inline-flex; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; background: rgba(245,158,11,0.1); color: #F59E0B; } .absen-info-card { background: var(--card); border-radius: 20px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); } .absen-info-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; } .absen-info-row + .absen-info-row { border-top: 1px solid rgba(108,99,255,0.06); } .absen-info-row svg { width: 20px; height: 20px; stroke: var(--primary); fill: none; flex-shrink: 0; } .absen-info-text { font-size: 13px; color: var(--text-secondary); } .absen-info-text strong { color: var(--text); font-weight: 600; } /* ============== ABSEN HERO & TIME ============== */ .absen-hero { text-align: center; padding: 30px 20px 20px; } .absen-time-card { display: flex; flex-direction: column; align-items: center; margin: 16px 0; } .clock-ring-svg { width: 180px; height: 180px; transform: rotate(-90deg); } .clock-ring-bg { fill: none; stroke: rgba(108,99,255,0.1); stroke-width: 6; } .clock-ring-fill { fill: none; stroke: var(--primary); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1s ease; } .clock-time { font-size: 32px; font-weight: 700; color: var(--text); margin-top: -110px; margin-bottom: 80px; letter-spacing: 2px; } .clock-date { font-size: 13px; color: var(--text-secondary); font-weight: 500; } .absen-btn { width: 100%; max-width: 280px; padding: 16px; border: none; border-radius: var(--radius-btn); font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; transition: all .3s ease; box-shadow: 0 6px 20px rgba(108,99,255,0.3); } .absen-btn--masuk { background: linear-gradient(135deg, #10B981, #059669); color: #fff; } .absen-btn--keluar { background: linear-gradient(135deg, #EF4444, #DC2626); color: #fff; } .absen-btn:hover { transform: translateY(-2px); } .absen-btn:active { transform: scale(0.97); } .absen-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* ============== CALENDAR ============== */ .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 12px; } .cal-weekday { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-secondary); padding: 8px 0; opacity: 0.6; } .cal-day { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: none; border-radius: 12px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; color: var(--text); background: transparent; cursor: pointer; transition: all .2s ease; } .cal-day:hover { background: rgba(108,99,255,0.06); } .cal-day.other-month { color: var(--text-secondary); opacity: 0.3; } .cal-day.today { font-weight: 700; color: var(--primary); background: rgba(108,99,255,0.08); } .cal-day.has-record { position: relative; } .cal-day.has-record::after { content: ''; position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); } .cal-day.has-record.hadir::after { background: #10B981; } .cal-day.has-record.terlambat::after { background: #F59E0B; } .cal-day.has-record.tidak::after { background: #EF4444; } .cal-month-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .cal-month-nav span { font-size: 16px; font-weight: 700; color: var(--text); } .cal-month-nav button { width: 36px; height: 36px; border-radius: 10px; border: none; background: var(--card); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: all .2s; } .cal-month-nav button svg { width: 18px; height: 18px; stroke: var(--text); fill: none; } .cal-month-nav button:hover { background: rgba(108,99,255,0.08); } /* ============== PROFIL INFO ITEMS ============== */ .profil-info-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid rgba(108,99,255,0.06); } .profil-info-item:last-child { border-bottom: none; } .profil-info-item__label { font-size: 13px; color: var(--text-secondary); font-weight: 500; } .profil-info-item__value { font-size: 13px; color: var(--text); font-weight: 600; text-align: right; } /* ============== PROFIL POPUP OVERLAY ============== */ .profil-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 10000; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .profil-popup-overlay.active { opacity: 1; pointer-events: all; } .profil-popup-card { width: 100%; max-width: 100%; max-height: 80vh; background: #ffffff; border-radius: 28px 28px 0 0; position: relative; overflow: hidden; box-shadow: 0 -10px 40px rgba(0,0,0,0.12); font-family: 'Poppins', sans-serif; transform: translateY(100%); opacity: 0; transition: all .5s cubic-bezier(.16,1,.3,1); } .profil-popup-overlay.active .profil-popup-card { transform: translateY(0); opacity: 1; } .profil-popup-card__shine { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 65%); opacity: 0; pointer-events: none; z-index: 3; } .profil-popup-overlay.active .profil-popup-card__shine { opacity: 1; animation: profilPopupShine 2s ease .3s forwards; } @keyframes profilPopupShine { 0% { background-position: -150% 0; opacity: 1; } 100% { background-position: 250% 0; opacity: 0; } } .profil-popup-card__header-bar { height: 6px; width: 100%; border-radius: 0 0 3px 3px; } .profil-popup-card__icon-wrap { display: flex; justify-content: center; padding: 20px 0 8px; position: relative; z-index: 2; } .profil-popup-card__icon { width: 50px; height: 50px; border-radius: 16px; display: flex; align-items: center; justify-content: center; transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1) .2s; } .profil-popup-overlay.active .profil-popup-card__icon { transform: scale(1); } .profil-popup-card__icon svg { width: 24px; height: 24px; stroke: #fff; fill: none; } .profil-popup-card__title { text-align: center; font-size: 16px; font-weight: 700; color: #1e293b; margin-bottom: 4px; padding: 0 24px; transform: translateY(8px); opacity: 0; transition: all .4s ease .3s; } .profil-popup-overlay.active .profil-popup-card__title { transform: translateY(0); opacity: 1; } .profil-popup-card__items { padding: 8px 16px 32px; overflow-y: auto; max-height: calc(80vh - 140px); -webkit-overflow-scrolling: touch; } .profil-popup-item { display: flex; align-items: center; gap: 14px; padding: 14px 12px; border-radius: 14px; cursor: pointer; transition: background .2s ease; } .profil-popup-item:hover { background: rgba(108,99,255,0.04); } .profil-popup-item:active { background: rgba(108,99,255,0.08); } .profil-popup-item__avatar { width: 42px; height: 42px; min-width: 42px; border-radius: 50%; background: linear-gradient(135deg, #6C63FF, #8B80FF); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 700; overflow: hidden; } .profil-popup-item__avatar img { width: 100%; height: 100%; object-fit: cover; } .profil-popup-item__icon { width: 42px; height: 42px; min-width: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .profil-popup-item__icon svg { width: 20px; height: 20px; stroke: #fff; fill: none; } .profil-popup-item__body { flex: 1; min-width: 0; } .profil-popup-item__title { font-size: 14px; font-weight: 600; color: #1e293b; } .profil-popup-item__desc { font-size: 11px; color: #94a3b8; margin-top: 1px; } .profil-popup-item__right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .profil-popup-item__value { font-size: 13px; font-weight: 500; color: #64748b; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profil-popup-item__arrow { width: 18px; height: 18px; stroke: #94a3b8; fill: none; opacity: 0.4; } .profil-popup-item__arrow svg { width: 100%; height: 100%; stroke: inherit; fill: none; } /* Clickable variant — adds hover feedback + active press state */ .profil-popup-item--clickable { cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; } .profil-popup-item--clickable:hover { background: rgba(108, 99, 255, 0.04); } .profil-popup-item--clickable:active { background: rgba(108, 99, 255, 0.10); transform: scale(0.99); } /* ============== RADIUS SETTINGS (Admin) ============== */ .radius-settings { display: flex; flex-direction: column; gap: 14px; } /* Big live value display */ .radius-settings__display { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 12px 8px 6px; } .radius-settings__value { font-size: 30px; font-weight: 700; color: var(--primary); letter-spacing: 0.5px; line-height: 1.1; font-variant-numeric: tabular-nums; } .radius-settings__unit { font-size: 13px; font-weight: 500; color: var(--text-secondary); } /* Slider */ .radius-settings__slider-wrap { position: relative; padding: 6px 0 2px; } .radius-settings__slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: transparent; outline: none; cursor: pointer; margin: 0; /* The track is drawn by the fill element below for cross-browser consistency */ position: relative; z-index: 2; } .radius-settings__slider-track { position: absolute; top: 50%; left: 0; right: 0; height: 6px; margin-top: -3px; background: #E8E8F0; border-radius: 999px; overflow: hidden; z-index: 1; } .radius-settings__slider-fill { height: 100%; width: 20%; background: linear-gradient(90deg, #6C63FF, #8B80FF); border-radius: 999px; transition: width 0.1s ease; } /* WebKit thumb */ .radius-settings__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid #6C63FF; box-shadow: 0 2px 8px rgba(108, 99, 255, 0.35); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; margin-top: 0; } .radius-settings__slider::-webkit-slider-thumb:hover { transform: scale(1.12); box-shadow: 0 4px 12px rgba(108, 99, 255, 0.45); } .radius-settings__slider::-webkit-slider-thumb:active { transform: scale(1.05); } /* Firefox thumb */ .radius-settings__slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid #6C63FF; box-shadow: 0 2px 8px rgba(108, 99, 255, 0.35); cursor: pointer; transition: transform 0.15s ease; } .radius-settings__slider::-moz-range-thumb:hover { transform: scale(1.12); } .radius-settings__slider::-moz-range-track { height: 6px; background: transparent; /* drawn by .radius-settings__slider-track */ border-radius: 999px; } /* Scale labels */ .radius-settings__scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-secondary); padding: 0 4px; margin-top: -4px; } /* Numeric input row */ .radius-settings__input-row { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; } .radius-settings__input-label { font-size: 12.5px; color: var(--text-secondary); font-weight: 500; } .radius-settings__input-wrap { position: relative; display: flex; align-items: center; } .radius-settings__input { width: 100%; height: 46px; padding: 0 44px 0 14px; border: 2px solid #E8E8F0; border-radius: 14px; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; color: var(--text); background: var(--card); outline: none; transition: border-color 0.25s ease, box-shadow 0.25s ease; -moz-appearance: textfield; box-sizing: border-box; } .radius-settings__input::-webkit-outer-spin-button, .radius-settings__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .radius-settings__input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.12); } .radius-settings__input-suffix { position: absolute; right: 14px; font-size: 14px; font-weight: 600; color: var(--text-secondary); pointer-events: none; } /* Preset chips */ .radius-settings__presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .radius-settings__preset { padding: 8px 14px; border: 1.5px solid #E8E8F0; border-radius: 999px; background: var(--card); font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease; } .radius-settings__preset:hover { border-color: var(--primary); color: var(--primary); background: rgba(108, 99, 255, 0.04); } .radius-settings__preset.active { background: linear-gradient(135deg, #6C63FF, #5B52F3); border-color: #5B52F3; color: #fff; box-shadow: 0 3px 10px rgba(108, 99, 255, 0.25); } /* Info note */ .radius-settings__note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: rgba(108, 99, 255, 0.05); border-radius: 12px; margin-top: 2px; } .radius-settings__note svg { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--primary); fill: none; margin-top: 1px; } .radius-settings__note span { font-size: 11.5px; line-height: 1.45; color: var(--text-secondary); } /* Dark mode */ [data-theme="dark"] .radius-settings__value { color: #A9A3FF; } [data-theme="dark"] .radius-settings__unit { color: #8B8BA7; } [data-theme="dark"] .radius-settings__slider-track { background: rgba(255, 255, 255, 0.10); } [data-theme="dark"] .radius-settings__slider-fill { background: linear-gradient(90deg, #6C63FF, #8B80FF); } [data-theme="dark"] .radius-settings__slider::-webkit-slider-thumb { background: #1E1E2E; border-color: #8B80FF; } [data-theme="dark"] .radius-settings__slider::-moz-range-thumb { background: #1E1E2E; border-color: #8B80FF; } [data-theme="dark"] .radius-settings__input { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.10); color: #E8E8F0; } [data-theme="dark"] .radius-settings__preset { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.10); color: #8B8BA7; } [data-theme="dark"] .radius-settings__preset:hover { border-color: #8B80FF; color: #A9A3FF; background: rgba(108, 99, 255, 0.10); } [data-theme="dark"] .radius-settings__note { background: rgba(108, 99, 255, 0.10); } [data-theme="dark"] .radius-settings__note span { color: #8B8BA7; } [data-theme="dark"] .radius-settings__note svg { stroke: #A9A3FF; } /* Mobile compact */ @media (max-width: 360px) { .radius-settings__value { font-size: 26px; } .radius-settings__preset { padding: 7px 11px; font-size: 11.5px; } } /* ============== NAV FAB (Presensi Button) — Premium Purple ============== */ .nav-fab-spacer { width: 70px; flex-shrink: 0; } .nav-fab { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); width: 60px; height: 60px; min-width: 60px; border-radius: 50%; background: linear-gradient(135deg, #6C63FF 0%, #5B52F3 50%, #8B80FF 100%); border: 3px solid rgba(255, 255, 255, 0.92); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 20px rgba(108, 99, 255, 0.50), 0 2px 8px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease; z-index: 10; } /* Subtle outer glow ring (pulsing) — premium effect */ .nav-fab::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; background: linear-gradient(135deg, #6C63FF, #5B52F3); opacity: 0.20; z-index: -1; animation: navFabPulse 2.6s ease-in-out infinite; pointer-events: none; } /* Inner highlight — gives a glossy 3D feel */ .nav-fab::after { content: ''; position: absolute; top: 6px; left: 12px; width: 22px; height: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 100%); border-radius: 50%; pointer-events: none; } @keyframes navFabPulse { 0%, 100% { transform: scale(1); opacity: 0.22; } 50% { transform: scale(1.18); opacity: 0.08; } } .nav-fab:hover { transform: translateX(-50%) scale(1.10) rotate(8deg); box-shadow: 0 10px 28px rgba(108, 99, 255, 0.60), 0 4px 12px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .nav-fab:active { transform: translateX(-50%) scale(0.94) rotate(0deg); } .nav-fab svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; position: relative; z-index: 2; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); } /* Dark mode — keep purple gradient but slightly deeper */ [data-theme="dark"] .nav-fab { background: linear-gradient(135deg, #5B52F3 0%, #4F46E5 50%, #6C63FF 100%); border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15); } /* ============== LOGOUT BTN PROFILE ============== */ .logout-btn-profile { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; background: rgba(239,68,68,0.08); color: #EF4444; border: 1.5px solid rgba(239,68,68,0.12); border-radius: 16px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; } .logout-btn-profile:hover { background: rgba(239,68,68,0.12); } .logout-btn-profile:active { transform: scale(0.98); } .logout-btn-profile svg { width: 18px; height: 18px; stroke: currentColor; fill: none; } /* ============== DARK MODE - LOGIN ============== */ [data-theme="dark"] #splashScreen { background: linear-gradient(135deg, #4F46E5, #3730A3, #6C63FF); } [data-theme="dark"] .login-card { background: var(--card); box-shadow: 0 8px 32px rgba(0,0,0,0.3); } [data-theme="dark"] .login-card-header-text h2 { color: var(--text); } [data-theme="dark"] .login-card-header-text p { color: var(--text-secondary); } [data-theme="dark"] .form-group label { color: var(--text); } [data-theme="dark"] .input-wrapper input { background: rgba(255,255,255,0.05); color: var(--text); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .input-wrapper input::placeholder { color: var(--text-secondary); } [data-theme="dark"] .login-btn { box-shadow: 0 6px 20px rgba(108,99,255,0.3); } [data-theme="dark"] .login-footer { color: var(--text-secondary); } [data-theme="dark"] .success-card, [data-theme="dark"] .error-card { background: #1E1E2E; border-color: rgba(255,255,255,0.06); } [data-theme="dark"] .success-card__title, [data-theme="dark"] .error-card__title { color: #E8E8F0; } [data-theme="dark"] .success-card__desc, [data-theme="dark"] .error-card__desc { color: #8B8BA7; } [data-theme="dark"] .dashboard-hero-card { background: linear-gradient(135deg, #4F46E5, #3730A3, #6C63FF); } [data-theme="dark"] .quick-menu-item { background: var(--card); } [data-theme="dark"] .quick-menu-item span { color: var(--text); } [data-theme="dark"] .today-status-card { background: var(--card); box-shadow: 0 2px 12px rgba(0,0,0,0.2); } [data-theme="dark"] .on-duty-card { background: var(--card); box-shadow: 0 2px 12px rgba(0,0,0,0.2); } [data-theme="dark"] .on-duty-chip { background: rgba(108,99,255,0.1); } [data-theme="dark"] .absen-info-card { background: var(--card); box-shadow: 0 2px 12px rgba(0,0,0,0.2); } [data-theme="dark"] .cal-day { color: var(--text); } [data-theme="dark"] .cal-day:hover { background: rgba(108,99,255,0.12); } [data-theme="dark"] .cal-day.other-month { color: #555; } [data-theme="dark"] .cal-day.today { color: #6C63FF; background: rgba(108,99,255,0.12); } [data-theme="dark"] .cal-month-nav span { color: var(--text); } [data-theme="dark"] .cal-month-nav button { background: var(--card); } [data-theme="dark"] .cal-month-nav button svg { stroke: var(--text); } [data-theme="dark"] .clock-time { color: var(--text); } [data-theme="dark"] .clock-date { color: var(--text-secondary); } [data-theme="dark"] .absen-info-text { color: var(--text-secondary); } [data-theme="dark"] .absen-info-text strong { color: var(--text); } [data-theme="dark"] .profil-popup-card { background: #1E1E2E; } [data-theme="dark"] .profil-popup-card__title { color: #E8E8F0; } [data-theme="dark"] .profil-popup-item__title { color: #E8E8F0; } [data-theme="dark"] .profil-popup-item__desc { color: #8B8BA7; } [data-theme="dark"] .profil-popup-item__value { color: #8B8BA7; } [data-theme="dark"] .profil-info-item { border-bottom-color: rgba(255,255,255,0.06); } [data-theme="dark"] .profil-info-item__label { color: var(--text-secondary); } [data-theme="dark"] .profil-info-item__value { color: var(--text); } /* ============================================== SCROLLBAR & TEXT RENDERING ============================================== */ /* Optimize scrollbar rendering */ ::-webkit-scrollbar { width: 4px; -webkit-appearance: none; } ::-webkit-scrollbar-thumb { background: rgba(108,99,255,0.2); border-radius: 4px; } ::-webkit-scrollbar-track { background: transparent; } /* Prevent text rendering jitter */ body { text-rendering: optimizeSpeed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ================================================== NEW LOGIN THEME - Modern Blue (Image-based) Override section for index.php Palette: #2563EB royal blue / #0EA5E9 sky blue / #FF6B6B coral / #E6F7FF light blue / #FFB6C1 light pink ================================================== */ /* ---- Splash Screen: Royal Blue Gradient ---- */ #splashScreen { background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 50%, #3B82F6 100%) !important; } .splash-progress-bar { background: rgba(255,255,255,0.25) !important; } .splash-progress-fill { background: linear-gradient(90deg, #FFFFFF, #DBEAFE) !important; box-shadow: 0 0 12px rgba(255,255,255,0.5); } /* ---- Login Page Background: Radial spotlight ---- */ /* This definition OVERRIDES the earlier #loginSection at line 3118. Key fixes: 1. height: 100svh — small viewport height (accounts for mobile address bar). Using `inset: 0` or `bottom: 0` on a fixed element uses the LAYOUT viewport (large viewport), which is taller than visible → content pushed down. 2. min-height: 100svh — overrides the earlier `min-height: 100vh`. 3. padding-bottom: 80px — nudges the centered stack UPWARD for upper-center feel. */ #loginSection { background: radial-gradient(circle at 50% 35%, #E6F7FF 0%, #F0F9FF 35%, #FFE4E6 100%); position: fixed; top: 0; left: 0; right: 0; bottom: auto; /* don't use bottom:0 — it uses large viewport */ height: 100vh; /* fallback */ height: 100dvh; /* fallback */ height: 100svh; /* small viewport — exactly the visible area */ min-height: 100svh; /* override earlier min-height:100vh */ padding: 12px; padding-bottom: 80px; display: none; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; overscroll-behavior: none; } #loginSection.active { display: flex !important; } /* !important to override earlier display:block */ /* Logo above card */ .login-logo-top { margin-bottom: 8px; z-index: 2; animation: fadeInUp 0.6s ease both; } .login-logo-top img { width: 160px; height: auto; max-width: 40vw; } /* Footer below card */ .login-footer-below { margin-top: 10px; text-align: center; color: rgba(100, 116, 139, 0.7); font-size: 10.5px; z-index: 2; letter-spacing: 0.2px; animation: fadeInUp 0.6s ease 0.2s both; } .login-page-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .login-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; animation: floatBlob 10s ease-in-out infinite; } .login-blob--blue { width: 320px; height: 320px; background: rgba(37, 99, 235, 0.35); top: -80px; left: -80px; } .login-blob--pink { width: 280px; height: 280px; background: rgba(255, 107, 107, 0.30); bottom: -60px; right: -60px; animation-delay: -3s; } @keyframes floatBlob { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px, -20px) scale(1.08); } } /* ---- Login Card (white card centered) ---- */ .login-card { position: relative; z-index: 1; width: 100%; max-width: 360px; max-height: calc(100vh - 110px); /* fallback */ max-height: calc(100dvh - 110px); /* better fallback */ max-height: calc(100svh - 110px); /* best: small viewport — consistent with body height */ background: #FFFFFF; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 60px rgba(37, 99, 235, 0.15), 0 4px 20px rgba(0,0,0,0.06); animation: fadeInUp 0.6s ease both; display: flex; flex-direction: column; } /* ---- Login Header (royal blue gradient) ---- */ #loginSection .login-header { background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%); padding: 36px 24px 32px; text-align: center; border-radius: 0; position: relative; overflow: hidden; } #loginSection .login-header::before, #loginSection .login-header::after { display: none; } .login-header-deco { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.08); pointer-events: none; } .login-header-deco--1 { width: 140px; height: 140px; top: -60px; right: -50px; } .login-header-deco--2 { width: 90px; height: 90px; bottom: -30px; left: -30px; background: rgba(255,255,255,0.06); } .login-header-deco--3 { width: 50px; height: 50px; top: 20px; left: 20px; background: rgba(255,255,255,0.05); } .login-header-logo { position: relative; z-index: 1; margin-bottom: 14px; } .login-avatar { width: 110px; height: 110px; margin: 0 auto; border-radius: 50%; background: #FFFFFF; box-shadow: 0 8px 28px rgba(0,0,0,0.18), 0 0 0 6px rgba(255,255,255,0.18); overflow: hidden; display: flex; align-items: center; justify-content: center; animation: avatarFloat 4s ease-in-out infinite; } @keyframes avatarFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } #loginSection .login-header-title { position: relative; z-index: 1; font-size: 22px; font-weight: 700; color: #FFFFFF; letter-spacing: 0.5px; margin-bottom: 4px; } .login-header-subtitle { position: relative; z-index: 1; font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.85); letter-spacing: 0.3px; } /* ---- Login Body (white card form area) ---- */ #loginSection .login-body { padding: 18px 22px 8px; background: #FFFFFF; flex: 1; } #loginSection .login-card .login-body:first-child { border-radius: 24px 24px 0 0; } #loginSection .login-greeting { font-size: 22px; font-weight: 700; color: #1E293B; margin-bottom: 4px; text-align: center; } #loginSection .login-subtitle { font-size: 12px; color: #64748B; margin-bottom: 14px; line-height: 1.45; text-align: center; } .input-label { display: block; font-size: 11px; font-weight: 600; color: #475569; margin-bottom: 5px; letter-spacing: 0.3px; } #loginSection .input-group { margin-bottom: 10px; } #loginSection .input-group-field { position: relative; display: flex; align-items: center; } #loginSection .input-group-icon { position: absolute; left: 13px; width: 18px; height: 18px; color: #94A3B8; pointer-events: none; display: flex; align-items: center; justify-content: center; z-index: 1; } #loginSection .input-group-field input { width: 100%; padding: 11px 14px 11px 42px; border: 1.5px solid #E5E7EB; border-radius: 11px; font-family: 'Poppins', sans-serif; font-size: 13.5px; color: #1E293B; background: #F9FAFB; outline: none; transition: all 0.25s ease; } #loginSection .input-group-field input:focus { border-color: #0EA5E9; background: #FFFFFF; box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.12); } #loginSection .input-group-field input::placeholder { color: #9CA3AF; } #loginSection .toggle-password { right: 12px; } #loginSection .toggle-password:hover { opacity: 0.85; } #loginSection .remember-row { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } #loginSection .remember-row label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #475569; cursor: pointer; user-select: none; } #loginSection .remember-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: #2563EB; cursor: pointer; } .forgot-link { font-size: 12px; color: #2563EB; text-decoration: none; font-weight: 500; transition: color 0.2s; } .forgot-link:hover { color: #1D4ED8; text-decoration: underline; } /* ---- Login Button (sky blue gradient) ---- */ #loginSection .login-btn { width: 100%; padding: 12px; background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%); color: #FFFFFF; border: none; border-radius: 11px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 5px 16px rgba(14, 165, 233, 0.32); transition: all 0.25s ease; letter-spacing: 0.3px; } #loginSection .login-btn:hover { background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(14, 165, 233, 0.45); } #loginSection .login-btn:active { transform: scale(0.97); } #loginSection .login-btn svg { stroke: #fff; fill: none; } #loginSection .login-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } /* ---- Login Actions Row (Masuk + Face ID square side by side) ---- */ .login-actions-row { display: flex; gap: 10px; align-items: stretch; } .login-actions-row .login-btn { flex: 1; } /* Square Face ID button */ .login-faceid-square-btn { width: 48px; min-width: 48px; height: 48px; border-radius: 11px; background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%); border: none; color: #FFFFFF; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .25s ease; flex-shrink: 0; box-shadow: 0 5px 16px rgba(14, 165, 233, 0.32); } .login-faceid-square-btn:hover { background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(14, 165, 233, 0.42); } .login-faceid-square-btn:active { transform: scale(0.95); } .login-faceid-square-btn svg { stroke: #FFFFFF; fill: none; } /* ---- Demo Credentials Hint ---- */ .demo-hint { margin-top: 18px; padding: 12px 14px; background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%); border: 1px dashed #93C5FD; border-radius: 12px; font-size: 12px; } .demo-hint-title { font-weight: 600; color: #1D4ED8; margin-bottom: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; } .demo-hint-row { color: #475569; margin-top: 2px; display: flex; gap: 6px; align-items: center; } .demo-hint-row span { font-weight: 500; } .demo-hint-row code { background: rgba(37, 99, 235, 0.10); color: #1D4ED8; padding: 1px 6px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 11px; font-weight: 600; } /* ---- Login Footer (copyright + animated wave) ---- */ #loginSection .login-footer { text-align: center; padding: 0; color: #FFFFFF; font-size: 11px; position: relative; background: #FFFFFF; } .login-footer-text { padding: 8px 24px 4px; color: #FFFFFF; font-size: 11px; background: #FFFFFF; letter-spacing: 0.2px; } .login-wave { position: relative; width: 100%; height: 45px; line-height: 0; overflow: hidden; display: block; background: #FFFFFF; flex-shrink: 0; border-radius: 0 0 22px 22px; } .wave-layer { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; pointer-events: none; will-change: transform; } .wave-layer svg { width: 100%; height: 100%; display: block; } /* Back wave: moves slowly to the right */ .wave-layer--back { animation: waveMoveRight 16s linear infinite; opacity: 0.6; } /* Mid wave: moves to the left at medium speed */ .wave-layer--mid { animation: waveMoveLeft 12s linear infinite; bottom: -4px; opacity: 0.8; } /* Front wave: moves fastest to the right, gives main motion */ .wave-layer--front { animation: waveMoveRight 9s linear infinite; bottom: -8px; } @keyframes waveMoveRight { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes waveMoveLeft { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } /* Dark mode adjustments for animated wave */ [data-theme="dark"] .login-wave { background: #1E293B; } [data-theme="dark"] .wave-layer--back svg path { fill: #1E3A8A; } [data-theme="dark"] .wave-layer--mid svg path { fill: #1E40AF; opacity: 0.8; } [data-theme="dark"] .wave-layer--front svg path { fill: #2563EB; opacity: 0.9; } /* Respect reduced motion preference */ @media (prefers-reduced-motion: reduce) { .wave-layer--back, .wave-layer--mid, .wave-layer--front { animation: none; } } /* ---- Dark Mode Adjustments for new login theme ---- */ [data-theme="dark"] #splashScreen { background: linear-gradient(135deg, #1E3A8A 0%, #1E40AF 50%, #312E81 100%) !important; } [data-theme="dark"] #loginSection { background: radial-gradient(circle at 50% 35%, #0F172A 0%, #1E293B 35%, #1E1B4B 100%); } [data-theme="dark"] .login-card { background: #1E293B; box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 4px 20px rgba(0,0,0,0.2); } [data-theme="dark"] #loginSection .login-header { background: linear-gradient(135deg, #1E40AF 0%, #1E3A8A 100%); } [data-theme="dark"] #loginSection .login-body { background: #1E293B; } [data-theme="dark"] #loginSection .login-greeting { color: #F1F5F9; } [data-theme="dark"] #loginSection .login-subtitle { color: #94A3B8; } [data-theme="dark"] .input-label { color: #CBD5E1; } [data-theme="dark"] #loginSection .input-group-field input { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #F1F5F9; } [data-theme="dark"] #loginSection .input-group-field input::placeholder { color: #64748B; } [data-theme="dark"] #loginSection .input-group-field input:focus { border-color: #0EA5E9; background: rgba(255,255,255,0.06); box-shadow: 0 0 0 4px rgba(14,165,233,0.15); } [data-theme="dark"] #loginSection .input-group-icon { color: #64748B; } [data-theme="dark"] #loginSection .remember-row label { color: #CBD5E1; } [data-theme="dark"] .demo-hint { background: linear-gradient(135deg, rgba(30,58,138,0.15) 0%, rgba(30,64,175,0.10) 100%); border-color: rgba(96,165,250,0.25); } [data-theme="dark"] .demo-hint-title { color: #93C5FD; } [data-theme="dark"] .demo-hint-row { color: #CBD5E1; } [data-theme="dark"] .demo-hint-row code { background: rgba(96,165,250,0.15); color: #93C5FD; } [data-theme="dark"] .login-footer-text { background: #1E293B; color: #8B8BA7; } [data-theme="dark"] .login-blob--blue { background: rgba(37, 99, 235, 0.45); } [data-theme="dark"] .login-blob--pink { background: rgba(255, 107, 107, 0.25); } /* ---- Responsive ---- */ @media (max-width: 380px) { #loginSection .login-body { padding: 16px 18px 8px; } #loginSection .login-greeting { font-size: 20px; } #loginSection .login-subtitle { font-size: 11px; margin-bottom: 10px; } #loginSection .input-group { margin-bottom: 8px; } #loginSection .input-group-field input { padding: 10px 12px 10px 40px; font-size: 13px; } #loginSection .login-btn { padding: 11px; font-size: 13px; } #loginSection .login-header { padding: 24px 20px 20px; } .login-wave { height: 30px; } /* On very small screens, reduce the upward nudge so the card+logo still fit */ #loginSection { padding-bottom: 50px; } } @media (min-width: 768px) { #loginSection { padding: 24px 32px; padding-bottom: 100px; } } /* ---- Prevent any scroll on login page (mobile browsers) ---- */ @media (max-width: 430px) { body[data-page="login"] { height: 100vh; /* fallback */ height: 100dvh; /* fallback */ height: 100svh; /* small viewport — always visible, perfectly centered */ position: fixed; width: 100%; top: 0; left: 0; overflow: hidden; } #loginSection { position: fixed; inset: 0; overflow: hidden; } } /* ================================================== KARYARAN DASHBOARD FIXES — Missing CSS Rules Adds styling for classes used in Main.js templates but missing from original Main.css ================================================== */ /* ============== HERO CARD DECORATIVE SHAPES ============== */ .hero-card-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; } .floating-shape { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.10); animation: heroFloatShape 6s ease-in-out infinite; } .shape-1 { width: 140px; height: 140px; top: -50px; right: -40px; animation-delay: 0s; } .shape-2 { width: 90px; height: 90px; bottom: -30px; left: -20px; animation-delay: 1.5s; opacity: 0.7; } .shape-3 { width: 50px; height: 50px; top: 45%; left: 55%; animation-delay: 3s; opacity: 0.5; } @keyframes heroFloatShape { 0%, 100% { transform: translateY(0) rotate(0deg); } 33% { transform: translateY(-12px) rotate(8deg); } 66% { transform: translateY(8px) rotate(-5deg); } } /* ============== HERO CARD CONTENT ============== */ .hero-card-content { position: relative; z-index: 1; text-align: center; } .hero-card-label { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.92); margin: 0 0 14px; letter-spacing: 0.3px; } .hero-stats-row { display: flex; align-items: center; justify-content: space-around; gap: 8px; } /* Override the original horizontal .hero-stat — template uses stacked layout */ .hero-stat { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; flex: 1; min-width: 0; } .hero-stat-num { font-size: 28px; font-weight: 700; color: #FFFFFF; line-height: 1; } .hero-stat-num.terlambat { color: #FBBF24; } .hero-stat-num.tidak { color: #FCA5A5; } .hero-stat-label { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.85); margin-top: 2px; text-align: center; letter-spacing: 0.2px; } .hero-stat-divider { width: 1px; height: 32px; background: rgba(255,255,255,0.22); flex-shrink: 0; } /* ============== QUICK MENU CONTAINER ============== */ /* Original Main.css only has .quick-menu-row, but Main.js uses .quick-menu */ .quick-menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; } .quick-menu-title { font-size: 15px; font-weight: 600; color: var(--text); margin: 4px 0 12px; letter-spacing: 0.2px; text-align: center; } /* Colored icon badges for each quick-menu-item (1=Izin, 2=Slip Gaji, 3=Jadwal, 4=Lembur) */ .quick-icon { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.10); transition: transform .25s ease; } .quick-menu-item:hover .quick-icon { transform: scale(1.08) rotate(-3deg); } .quick-menu-item:active .quick-icon { transform: scale(0.92); } /* Override inline stroke so icons show white on colored background */ .quick-icon svg { width: 22px !important; height: 22px !important; stroke: #FFFFFF !important; fill: none !important; stroke-width: 1.8 !important; stroke-linecap: round; stroke-linejoin: round; } /* Per-item gradient colors matching the original Main.js intent */ .quick-menu-item:nth-child(1) .quick-icon { background: linear-gradient(135deg, #6C63FF 0%, #8B80FF 100%); box-shadow: 0 4px 12px rgba(108,99,255,0.35); } .quick-menu-item:nth-child(2) .quick-icon { background: linear-gradient(135deg, #10B981 0%, #059669 100%); box-shadow: 0 4px 12px rgba(16,185,129,0.35); } .quick-menu-item:nth-child(3) .quick-icon { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); box-shadow: 0 4px 12px rgba(245,158,11,0.35); } .quick-menu-item:nth-child(4) .quick-icon { background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%); box-shadow: 0 4px 12px rgba(239,68,68,0.35); } /* Dark mode — keep icon gradients same, just deeper shadow */ [data-theme="dark"] .quick-icon { box-shadow: 0 4px 12px rgba(0,0,0,0.3); } /* ============== STATUS BADGE BASE ============== */ .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-bottom: 8px; line-height: 1.4; } .status-badge svg { width: 16px; height: 16px; flex-shrink: 0; } .status-detail { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.5; } /* ============== ABSEN PAGE HEADER ============== */ .absen-page-header { display: flex; align-items: center; gap: 14px; padding: 6px 4px 18px; margin-bottom: 4px; } .absen-page-header__icon { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #6C63FF 0%, #5B52F3 50%, #8B80FF 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 6px 18px rgba(108, 99, 255, 0.30); position: relative; overflow: hidden; } .absen-page-header__icon::before { content: ''; position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; background: rgba(255, 255, 255, 0.15); border-radius: 50%; } .absen-page-header__icon svg { width: 26px; height: 26px; stroke: #FFFFFF; fill: none; position: relative; z-index: 1; } .absen-page-header__text { flex: 1; min-width: 0; } .absen-page-header__title { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 2px; letter-spacing: 0.3px; line-height: 1.2; } .absen-page-header__tagline { font-size: 12.5px; color: var(--text-secondary); margin: 0; line-height: 1.4; } [data-theme="dark"] .absen-page-header__title { color: #E8E8F0; } [data-theme="dark"] .absen-page-header__tagline { color: #8B8BA7; } [data-theme="dark"] .absen-page-header__icon { background: linear-gradient(135deg, #4F46E5 0%, #3730A3 50%, #6C63FF 100%); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); } @media (max-width: 380px) { .absen-page-header { gap: 12px; padding: 4px 2px 14px; } .absen-page-header__icon { width: 46px; height: 46px; border-radius: 14px; } .absen-page-header__icon svg { width: 22px; height: 22px; } .absen-page-header__title { font-size: 18px; } .absen-page-header__tagline { font-size: 11.5px; } } /* ============== ABSEN PAGE — TIME CARD ============== */ .absen-time-card { background: linear-gradient(135deg, #6C63FF 0%, #5B52F3 100%); border-radius: 22px; padding: 22px 20px; color: #FFFFFF; text-align: center; box-shadow: 0 8px 28px rgba(108,99,255,0.28); margin-bottom: 18px; position: relative; overflow: hidden; } .absen-time-card::before { content: ''; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; background: rgba(255,255,255,0.08); border-radius: 50%; } .absen-time-card::after { content: ''; position: absolute; bottom: -30px; left: -30px; width: 90px; height: 90px; background: rgba(255,255,255,0.06); border-radius: 50%; } .absen-time-card__label { position: relative; z-index: 1; font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.85); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 6px; } .absen-time-card__clock { position: relative; z-index: 1; font-size: 40px; font-weight: 700; color: #FFFFFF; letter-spacing: 1px; line-height: 1; margin-bottom: 4px; font-variant-numeric: tabular-nums; text-shadow: 0 2px 8px rgba(0,0,0,0.15); } .absen-time-card__date { position: relative; z-index: 1; font-size: 12px; color: rgba(255,255,255,0.88); margin-bottom: 14px; } .absen-time-card__divider { position: relative; z-index: 1; height: 1px; background: rgba(255,255,255,0.18); margin: 0 auto 14px; width: 60%; } /* Masuk / Pulang mode buttons (replaces old status-row) */ .absen-time-card__buttons { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .absen-mode-btn { background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.18); border-radius: 14px; padding: 14px 12px; display: flex; align-items: center; justify-content: center; cursor: default; transition: all .3s ease; backdrop-filter: blur(4px); text-align: center; color: #FFFFFF; } .absen-mode-btn__text { font-size: 15px; font-weight: 700; letter-spacing: 0.5px; line-height: 1; display: inline-flex; align-items: center; gap: 6px; } /* Checkmark icon inside done button */ .absen-mode-btn__check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #10B981; color: #FFFFFF; font-size: 13px; font-weight: 700; box-shadow: 0 0 8px rgba(16, 185, 129, 0.5); flex-shrink: 0; } /* ACTIVE state — button is glowing, currently absen-able */ .absen-mode-btn.active { background: #FFFFFF; color: #5B52F3; border-color: #FFFFFF; box-shadow: 0 4px 14px rgba(255,255,255,0.35); transform: translateY(-1px); animation: absenModeActiveGlow 1.6s ease-in-out infinite; } @keyframes absenModeActiveGlow { 0%, 100% { box-shadow: 0 4px 14px rgba(255,255,255,0.30); } 50% { box-shadow: 0 6px 22px rgba(255,255,255,0.55); } } /* DIMMED state — outside window */ .absen-mode-btn.dimmed { opacity: 0.42; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); } /* DONE state — already absen (shows ✓ + text) */ .absen-mode-btn.done { background: rgba(52, 211, 153, 0.18); border-color: rgba(52, 211, 153, 0.45); color: #A7F3D0; } .absen-mode-btn.done .absen-mode-btn__text { font-size: 14px; color: #FFFFFF; } /* ============== ABSEN PAGE — LOCATOR (premium animated absen button) ============== */ .absen-locator-wrap { display: flex; justify-content: center; padding: 16px 0 24px; perspective: 800px; /* Smooth bottom-padding collapse when the absen map appears right below */ transition: padding 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .absen-locator { position: relative; width: 180px; height: 180px; border-radius: 50%; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); } .absen-locator:disabled { cursor: not-allowed; transform: scale(0.95); } .absen-locator:not(:disabled):hover { transform: scale(1.05); } .absen-locator:not(:disabled):active { transform: scale(0.96); } /* Outer rings (3 layers, expanding pulse) */ .absen-locator__ring { position: absolute; border-radius: 50%; border: 2px solid rgba(108, 99, 255, 0.25); pointer-events: none; } .absen-locator__ring--1 { width: 100%; height: 100%; animation: locatorRingPulse 3s ease-out infinite; } .absen-locator__ring--2 { width: 75%; height: 75%; animation: locatorRingPulse 3s ease-out 1s infinite; } .absen-locator__ring--3 { width: 50%; height: 50%; animation: locatorRingPulse 3s ease-out 2s infinite; } @keyframes locatorRingPulse { 0% { opacity: 0.8; transform: scale(0.85); border-color: rgba(108,99,255,0.40); } 100% { opacity: 0; transform: scale(1.18); border-color: rgba(108,99,255,0.05); } } /* Radar scan sweep (rotating gradient line) — only when active */ .absen-locator__scan { position: absolute; inset: 12px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, rgba(108, 99, 255, 0.40) 40deg, transparent 80deg); opacity: 0; transition: opacity .3s ease; pointer-events: none; } .absen-locator.active-mode-masuk .absen-locator__scan, .absen-locator.active-mode-pulang .absen-locator__scan { opacity: 1; animation: locatorScan 2.5s linear infinite; } @keyframes locatorScan { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Inner pulsing glow */ .absen-locator__pulse { position: absolute; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, rgba(108, 99, 255, 0.45) 0%, rgba(108, 99, 255, 0) 70%); animation: locatorPulseThrob 1.8s ease-in-out infinite; } .absen-locator__pulse.delay { animation-delay: 0.9s; } @keyframes locatorPulseThrob { 0%, 100% { transform: scale(0.85); opacity: 0.55; } 50% { transform: scale(1.20); opacity: 0.25; } } /* Floating GPS pins (decorative) */ .absen-locator__pin { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #6C63FF; box-shadow: 0 0 8px rgba(108, 99, 255, 0.7); animation: locatorPinBlink 2s ease-in-out infinite; } .absen-locator__pin--1 { top: 14%; left: 28%; animation-delay: 0s; } .absen-locator__pin--2 { top: 22%; right: 22%; animation-delay: 0.5s; } .absen-locator__pin--3 { bottom: 22%; left: 22%; animation-delay: 1.0s; } .absen-locator__pin--4 { bottom: 14%; right: 28%; animation-delay: 1.5s; } @keyframes locatorPinBlink { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } } /* Center icon (the actual button) */ .absen-locator__icon { position: relative; z-index: 2; width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #6C63FF 0%, #5B52F3 50%, #8B80FF 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(108, 99, 255, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.30), inset 0 -2px 6px rgba(0, 0, 0, 0.18); transition: all .35s cubic-bezier(.34, 1.56, .64, 1); } .absen-locator__icon::after { content: ''; position: absolute; top: 8px; left: 18px; width: 28px; height: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 100%); border-radius: 50%; pointer-events: none; } .absen-locator__icon svg { width: 44px; height: 44px; stroke: #FFFFFF; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.30)); position: relative; z-index: 1; } /* Mode-specific color tints */ .absen-locator.active-mode-masuk .absen-locator__icon { background: linear-gradient(135deg, #10B981 0%, #059669 50%, #34D399 100%); box-shadow: 0 10px 30px rgba(16, 185, 129, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 6px rgba(0, 0, 0, 0.20); animation: locatorIconBounce 1.6s ease-in-out infinite; } .absen-locator.active-mode-pulang .absen-locator__icon { background: linear-gradient(135deg, #F59E0B 0%, #D97706 50%, #FBBF24 100%); box-shadow: 0 10px 30px rgba(245, 158, 11, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 6px rgba(0, 0, 0, 0.20); animation: locatorIconBounce 1.6s ease-in-out infinite; } @keyframes locatorIconBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .absen-locator.locked .absen-locator__icon { background: linear-gradient(135deg, #9CA3AF 0%, #6B7280 50%, #9CA3AF 100%); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), inset 0 2px 0 rgba(255, 255, 255, 0.15); } .absen-locator.locked .absen-locator__ring { border-color: rgba(156, 163, 175, 0.20); } .absen-locator.locked .absen-locator__pulse { background: radial-gradient(circle, rgba(156, 163, 175, 0.35) 0%, rgba(156, 163, 175, 0) 70%); } .absen-locator.locked .absen-locator__pin { background: #9CA3AF; box-shadow: 0 0 6px rgba(156, 163, 175, 0.5); } .absen-locator.locked .absen-locator__scan { opacity: 0 !important; animation: none !important; } /* ============== ABSEN PAGE — CHIPS ============== */ .absen-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; /* Smooth slide-down when the absen map opens above this. The map grows via max-height animation, pushing this grid down. A matching transition on transform keeps the motion buttery. */ transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .absen-chip { background: var(--card); border-radius: 16px; padding: 12px; display: flex; align-items: center; gap: 10px; box-shadow: 0 2px 10px rgba(108,99,255,0.06); border: 1px solid rgba(108,99,255,0.06); } .absen-chip__icon { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .absen-chip__icon svg { width: 18px; height: 18px; stroke: #fff; fill: none; } .absen-chip__icon--location { background: linear-gradient(135deg, #6C63FF, #8B80FF); } .absen-chip__icon--clock { background: linear-gradient(135deg, #F59E0B, #D97706); } .absen-chip__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .absen-chip__label { font-size: 10px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.2px; text-transform: uppercase; } .absen-chip__value { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.2; } /* ============== ABSEN PAGE — CHECK-IN BUTTON ============== */ .absen-checkin-btn { width: 100%; padding: 15px 20px; background: linear-gradient(135deg, #10B981 0%, #059669 100%); color: #FFFFFF; border: none; border-radius: 16px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 6px 22px rgba(16,185,129,0.35); transition: all 0.25s ease; text-transform: uppercase; } .absen-checkin-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(16,185,129,0.45); } .absen-checkin-btn:active { transform: scale(0.97); } .absen-checkin-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* ============== ABSEN HERO WRAP ============== */ .absen-hero { background: linear-gradient(180deg, rgba(108,99,255,0.04) 0%, transparent 100%); border-radius: 24px; padding: 20px 18px; margin-bottom: 16px; } /* ============== PROFIL SECTION ============== */ .profil-info { background: var(--card); border-radius: 18px; padding: 6px 0; box-shadow: 0 2px 12px rgba(0,0,0,0.04); margin-bottom: 16px; overflow: hidden; } .profil-avatar { width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 32px; font-weight: 700; box-shadow: 0 6px 20px rgba(108,99,255,0.28); overflow: hidden; } .profil-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } /* ============== EMPTY STATE (alternate) ============== */ .empty { text-align: center; padding: 40px 20px; color: var(--text-secondary); font-size: 13px; } /* ============== KARYAWAN LIST (admin) — Edit button ============== */ .edit-btn { background: rgba(108,99,255,0.10); color: var(--primary); border: none; padding: 6px 12px; border-radius: 10px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 4px; } .edit-btn:hover { background: rgba(108,99,255,0.18); transform: translateY(-1px); } .edit-btn:active { transform: scale(0.95); } /* Notification send button (admin) — sky blue accent */ .notif-btn { background: rgba(14, 165, 233, 0.10); color: #0284C7; border: none; padding: 6px 12px; border-radius: 10px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 4px; } .notif-btn:hover { background: rgba(14, 165, 233, 0.18); transform: translateY(-1px); } .notif-btn:active { transform: scale(0.95); } [data-theme="dark"] .notif-btn { color: #38BDF8; } /* ============== KALENDER PAGE ============== */ /* Kalender page header — icon + title + tagline */ .kalender-page-header { display: flex; align-items: center; gap: 14px; padding: 6px 4px 18px; margin-bottom: 4px; } .kalender-page-header__icon { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #6C63FF 0%, #5B52F3 50%, #8B80FF 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 6px 18px rgba(108, 99, 255, 0.30); position: relative; overflow: hidden; } .kalender-page-header__icon::before { content: ''; position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; background: rgba(255, 255, 255, 0.15); border-radius: 50%; pointer-events: none; } .kalender-page-header__icon svg { width: 26px; height: 26px; stroke: #FFFFFF; fill: none; position: relative; z-index: 1; } .kalender-page-header__text { flex: 1; min-width: 0; } .kalender-page-header__title { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 2px; letter-spacing: 0.3px; line-height: 1.2; } .kalender-page-header__tagline { font-size: 12.5px; color: var(--text-secondary); margin: 0; line-height: 1.4; font-weight: 400; letter-spacing: 0.1px; } /* Dark mode */ [data-theme="dark"] .kalender-page-header__title { color: #E8E8F0; } [data-theme="dark"] .kalender-page-header__tagline { color: #8B8BA7; } [data-theme="dark"] .kalender-page-header__icon { background: linear-gradient(135deg, #4F46E5 0%, #3730A3 50%, #6C63FF 100%); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); } /* Mobile compact */ @media (max-width: 380px) { .kalender-page-header { gap: 12px; padding: 4px 2px 14px; } .kalender-page-header__icon { width: 46px; height: 46px; border-radius: 14px; } .kalender-page-header__icon svg { width: 22px; height: 22px; } .kalender-page-header__title { font-size: 18px; } .kalender-page-header__tagline { font-size: 11.5px; } } /* ============== HISTORY PAGE HEADER ============== */ /* Mirrors .kalender-page-header — icon on the left, bold 'History' title on the right of the icon, smaller tagline below the title. */ .history-page-header { display: flex; align-items: center; gap: 14px; padding: 6px 4px 18px; margin-bottom: 4px; } .history-page-header__icon { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #6C63FF 0%, #5B52F3 50%, #8B80FF 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 6px 18px rgba(108, 99, 255, 0.30); position: relative; overflow: hidden; } .history-page-header__icon::before { content: ''; position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; background: rgba(255, 255, 255, 0.15); border-radius: 50%; pointer-events: none; } .history-page-header__icon svg { width: 26px; height: 26px; stroke: #FFFFFF; fill: none; position: relative; z-index: 1; } .history-page-header__text { flex: 1; min-width: 0; } .history-page-header__title { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 2px; letter-spacing: 0.3px; line-height: 1.2; } .history-page-header__tagline { font-size: 12.5px; color: var(--text-secondary); margin: 0; line-height: 1.4; font-weight: 400; letter-spacing: 0.1px; } /* Dark mode */ [data-theme="dark"] .history-page-header__title { color: #E8E8F0; } [data-theme="dark"] .history-page-header__tagline { color: #8B8BA7; } [data-theme="dark"] .history-page-header__icon { background: linear-gradient(135deg, #4F46E5 0%, #3730A3 50%, #6C63FF 100%); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); } /* Mobile compact */ @media (max-width: 380px) { .history-page-header { gap: 12px; padding: 4px 2px 14px; } .history-page-header__icon { width: 46px; height: 46px; border-radius: 14px; } .history-page-header__icon svg { width: 22px; height: 22px; } .history-page-header__title { font-size: 18px; } .history-page-header__tagline { font-size: 11.5px; } } .kalender-card { background: var(--card); border-radius: 22px; padding: 20px 18px 18px; box-shadow: 0 4px 16px rgba(108, 99, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03); margin-bottom: 16px; border: 1px solid rgba(108, 99, 255, 0.04); } /* Calendar header — gradient banner */ .kalender-header { background: linear-gradient(135deg, #6C63FF 0%, #5B52F3 50%, #8B80FF 100%); border-radius: 16px; padding: 14px 18px; margin-bottom: 16px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 6px 20px rgba(108, 99, 255, 0.20); } .kalender-header::before { content: ''; position: absolute; top: -30px; right: -30px; width: 90px; height: 90px; background: rgba(255, 255, 255, 0.10); border-radius: 50%; pointer-events: none; } .kalender-header::after { content: ''; position: absolute; bottom: -20px; left: -20px; width: 60px; height: 60px; background: rgba(255, 255, 255, 0.06); border-radius: 50%; pointer-events: none; } .kalender-header h3 { position: relative; z-index: 1; font-size: 17px; font-weight: 700; color: #FFFFFF; margin: 0; letter-spacing: 0.4px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.10); } /* Calendar grid — 7 columns equal width */ /* grid-auto-rows: auto lets each row size to its content (day-names row is shorter, date rows are fixed height via .cal-day height). Combined with a uniform `row-gap`, this produces perfectly even vertical spacing. */ .kalender-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; grid-auto-rows: auto; width: 100%; box-sizing: border-box; } /* Day name labels (Su Mo Tu We Th Fr Sa) */ /* NO bottom padding/margin — the grid `row-gap` is the ONLY vertical spacing. */ .cal-day-name { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-secondary); padding: 0; margin: 0; line-height: 1; letter-spacing: 0.5px; text-transform: uppercase; } .cal-day-name:nth-child(1), .cal-day-name:nth-child(7) { color: #9CA3AF; } /* Day cell — fixed height (not aspect-ratio, which can cause uneven rows in grid contexts). 38px is a good mobile touch target that fits 7 columns. */ .cal-day { display: flex; align-items: center; justify-content: center; height: 38px; border: none; border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--text); background: rgba(108, 99, 255, 0.04); cursor: pointer; transition: all .2s ease; position: relative; padding: 0; margin: 0; line-height: 1; } .cal-day:hover { background: rgba(108, 99, 255, 0.12); transform: scale(1.05); } .cal-day:active { transform: scale(0.95); } /* Empty placeholder cells (for days from prev/next month) */ .cal-day.empty, .cal-day.empty:hover { background: transparent; cursor: default; transform: none; } /* Weekend cells — slightly muted */ .cal-day.weekend { color: #9CA3AF; background: rgba(156, 163, 175, 0.06); } .cal-day.weekend:hover { background: rgba(156, 163, 175, 0.12); } /* Future days — lighter / faded */ .cal-day.future { color: var(--text-secondary); opacity: 0.55; background: transparent; font-weight: 500; } .cal-day.future:hover { opacity: 0.85; background: rgba(108, 99, 255, 0.06); } /* Today — gradient background, white text */ .cal-day.today { color: #FFFFFF !important; background: linear-gradient(135deg, #6C63FF 0%, #5B52F3 100%) !important; font-weight: 700; box-shadow: 0 4px 14px rgba(108, 99, 255, 0.40); opacity: 1 !important; } .cal-day.today:hover { transform: scale(1.08); box-shadow: 0 6px 18px rgba(108, 99, 255, 0.50); } .cal-day.today::before { content: ''; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; background: #FFFFFF; border-radius: 50%; box-shadow: 0 0 6px rgba(255, 255, 255, 0.8); } /* Days with attendance records — small colored dot at bottom */ .cal-day.has-record { position: relative; } .cal-day.has-record::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--primary); } .cal-day.has-record.hadir::after { background: #10B981; box-shadow: 0 0 4px rgba(16, 185, 129, 0.5); } .cal-day.has-record.terlambat::after { background: #F59E0B; box-shadow: 0 0 4px rgba(245, 158, 11, 0.5); } .cal-day.has-record.tidak::after { background: #EF4444; box-shadow: 0 0 4px rgba(239, 68, 68, 0.5); } /* Other-month days (faded) */ .cal-day.other-month { color: var(--text-secondary); opacity: 0.25; background: transparent; cursor: default; } .cal-day.other-month:hover { background: transparent; transform: none; } /* Month navigation */ .cal-month-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 8px; } .cal-month-nav span { font-size: 16px; font-weight: 700; color: var(--text); } .cal-month-nav button { width: 36px; height: 36px; border-radius: 10px; border: none; background: var(--card); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); transition: all .2s ease; } .cal-month-nav button:hover { background: rgba(108, 99, 255, 0.08); transform: translateY(-1px); } /* Legend — color reference at bottom of calendar */ .kalender-legend { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(108, 99, 255, 0.15); } .legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.2px; } .legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); } /* Dark mode for kalender */ [data-theme="dark"] .kalender-card { background: var(--card); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); border-color: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .kalender-header { background: linear-gradient(135deg, #4F46E5 0%, #3730A3 50%, #6C63FF 100%); } [data-theme="dark"] .cal-day { color: var(--text); background: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .cal-day:hover { background: rgba(108, 99, 255, 0.18); } [data-theme="dark"] .cal-day.weekend { color: #8B8BA7; background: rgba(255, 255, 255, 0.02); } [data-theme="dark"] .cal-day.future { color: #8B8BA7; } [data-theme="dark"] .cal-day.other-month { color: #555; } [data-theme="dark"] .kalender-legend { border-top-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .legend-item { color: #8B8BA7; } [data-theme="dark"] .cal-month-nav button { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .cal-month-nav button:hover { background: rgba(108, 99, 255, 0.20); } /* ============== STATUS ROW (history items) ============== */ .status-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(108,99,255,0.06); gap: 12px; } .status-row:last-child { border-bottom: none; } .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-secondary); } .status-dot.hadir { background: #10B981; box-shadow: 0 0 6px rgba(16,185,129,0.4); } .status-dot.terlambat { background: #F59E0B; box-shadow: 0 0 6px rgba(245,158,11,0.4); } .status-dot.tidak { background: #EF4444; box-shadow: 0 0 6px rgba(239,68,68,0.4); } .status-text { font-size: 13px; color: var(--text); font-weight: 500; flex: 1; min-width: 0; } /* ============== ASSET OVERFLOW WRAP ============== */ .asset-overflow-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -20px; padding: 0 20px; } .asset-overflow-wrap::-webkit-scrollbar { height: 4px; } .asset-overflow-wrap::-webkit-scrollbar-thumb { background: rgba(108,99,255,0.2); border-radius: 4px; } /* ============== ANIMATION HELPER ============== */ .delay { animation-delay: 0.3s !important; } /* ============== DARK MODE FOR NEW KARYARAN STYLES ============== */ [data-theme="dark"] .absen-time-card { background: linear-gradient(135deg, #4F46E5 0%, #3730A3 100%); box-shadow: 0 8px 28px rgba(0,0,0,0.4); } [data-theme="dark"] .absen-chip { background: var(--card); border-color: rgba(255,255,255,0.06); box-shadow: 0 2px 10px rgba(0,0,0,0.2); } [data-theme="dark"] .absen-chip__value { color: var(--text); } [data-theme="dark"] .absen-chip__label { color: var(--text-secondary); } [data-theme="dark"] .absen-hero { background: linear-gradient(180deg, rgba(108,99,255,0.10) 0%, transparent 100%); } [data-theme="dark"] .kalender-card, [data-theme="dark"] .profil-info { background: var(--card); box-shadow: 0 2px 12px rgba(0,0,0,0.2); } [data-theme="dark"] .status-row { border-bottom-color: rgba(255,255,255,0.06); } [data-theme="dark"] .quick-menu-title { color: var(--text); } [data-theme="dark"] .empty { color: var(--text-secondary); } /* ================================================== NOTIFICATIONS — Bell Button, Badge, Popup Panel ================================================== */ /* ---- Bell Button (overrides .header-icon-btn baseline) ---- */ .header-icon-btn--bell { position: relative; overflow: visible; } .header-icon-btn--bell svg { width: 21px; height: 21px; stroke: var(--primary); fill: none; stroke-width: 1.8; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); } .header-icon-btn--bell:hover svg { transform: rotate(15deg) scale(1.08); animation: bellRing 0.6s ease; } @keyframes bellRing { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(15deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-5deg); } } /* ---- Red Notification Badge ---- */ .notif-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%); color: #FFFFFF; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.55), 0 0 0 2.5px var(--bg); display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; z-index: 5; pointer-events: none; letter-spacing: -0.3px; } .notif-badge.pulse { animation: notifBadgePulse 0.7s cubic-bezier(.34, 1.56, .64, 1); } @keyframes notifBadgePulse { 0% { transform: scale(0.4); opacity: 0; } 50% { transform: scale(1.35); } 100% { transform: scale(1); opacity: 1; } } [data-theme="dark"] .notif-badge { box-shadow: 0 2px 8px rgba(239, 68, 68, 0.55), 0 0 0 2.5px #1E1E2E; } /* ---- Notification Overlay (full-screen dimmer, centered) ---- */ .notif-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.40); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px 16px; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .notif-overlay.active { opacity: 1; pointer-events: all; } /* ---- Notification Panel (centered popup modal) ---- */ .notif-panel { width: 100%; max-width: 380px; max-height: min(80vh, 620px); background: var(--bg); border-radius: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 6px 20px rgba(0, 0, 0, 0.12); transform: scale(0.88) translateY(20px); opacity: 0; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.5); } .notif-overlay.active .notif-panel { transform: scale(1) translateY(0); opacity: 1; } /* Rounded top corners on header to match popup shape */ /* Panel Header — gradient banner */ .notif-panel__header { border-radius: 23px 23px 0 0; background: linear-gradient(135deg, #6C63FF 0%, #5B52F3 50%, #8B80FF 100%); color: #FFFFFF; padding: 20px 20px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; position: relative; overflow: hidden; flex-shrink: 0; } .notif-panel__header::before { content: ''; position: absolute; top: -50px; right: -40px; width: 130px; height: 130px; background: rgba(255, 255, 255, 0.10); border-radius: 50%; pointer-events: none; } .notif-panel__header::after { content: ''; position: absolute; bottom: -30px; left: -20px; width: 80px; height: 80px; background: rgba(255, 255, 255, 0.08); border-radius: 50%; pointer-events: none; } .notif-panel__title-wrap { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; flex: 1; min-width: 0; } .notif-panel__icon { width: 42px; height: 42px; border-radius: 13px; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); } .notif-panel__icon svg { width: 22px; height: 22px; stroke: #FFFFFF; fill: none; } .notif-panel__title { font-size: 18px; font-weight: 700; color: #FFFFFF; margin: 0; letter-spacing: 0.3px; } .notif-panel__subtitle { font-size: 11px; color: rgba(255, 255, 255, 0.85); margin: 2px 0 0; font-weight: 400; } .notif-panel__close { width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 255, 255, 0.15); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .25s ease; flex-shrink: 0; position: relative; z-index: 1; } .notif-panel__close:hover { background: rgba(255, 255, 255, 0.28); transform: rotate(90deg); } .notif-panel__close svg { width: 18px; height: 18px; stroke: #FFFFFF; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* Actions bar (Mark all read button) */ .notif-panel__actions { padding: 10px 16px 4px; background: var(--bg); flex-shrink: 0; display: flex; justify-content: flex-end; } .notif-panel__markall { background: rgba(108, 99, 255, 0.10); color: var(--primary); border: none; padding: 7px 14px; border-radius: 14px; font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all .2s ease; display: inline-flex; align-items: center; gap: 4px; } .notif-panel__markall:hover { background: rgba(108, 99, 255, 0.18); transform: translateY(-1px); } .notif-panel__markall:active { transform: scale(0.96); } /* Panel Body (scrollable list) */ .notif-panel__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 14px 20px; display: flex; flex-direction: column; gap: 8px; } /* Notification Item */ .notif-item { background: var(--card); border-radius: 16px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; transition: all .25s ease; position: relative; border: 1.5px solid transparent; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); } .notif-item:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(108, 99, 255, 0.10); } .notif-item:active { transform: scale(0.99); } /* Unread item — highlighted with subtle accent border + tinted bg */ .notif-item.unread { background: linear-gradient(135deg, rgba(108, 99, 255, 0.06) 0%, var(--card) 100%); border-color: rgba(108, 99, 255, 0.18); box-shadow: 0 3px 12px rgba(108, 99, 255, 0.08); } .notif-item.unread .notif-item__title { color: var(--text); font-weight: 700; } /* Icon (per-type colored gradient badge) */ .notif-item__icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10); } .notif-item__icon svg { width: 18px; height: 18px; fill: none; } .notif-item__icon--info { background: linear-gradient(135deg, #3B82F6, #2563EB); } .notif-item__icon--success { background: linear-gradient(135deg, #10B981, #059669); } .notif-item__icon--warning { background: linear-gradient(135deg, #F59E0B, #D97706); } .notif-item__icon--danger { background: linear-gradient(135deg, #EF4444, #DC2626); } .notif-item__body { flex: 1; min-width: 0; } .notif-item__title { font-size: 13.5px; font-weight: 600; color: var(--text); margin: 0 0 2px; line-height: 1.3; } .notif-item__msg { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 4px; line-height: 1.45; word-break: break-word; } .notif-item__time { font-size: 10.5px; color: var(--text-secondary); opacity: 0.75; font-weight: 500; letter-spacing: 0.2px; } /* Unread dot indicator */ .notif-item__dot { width: 9px; height: 9px; border-radius: 50%; background: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); flex-shrink: 0; margin-top: 6px; } /* Empty State */ .notif-empty { text-align: center; padding: 60px 24px; color: var(--text-secondary); display: flex; flex-direction: column; align-items: center; gap: 8px; } .notif-empty__icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(108, 99, 255, 0.08); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; } .notif-empty__icon svg { width: 32px; height: 32px; stroke: var(--primary); fill: none; stroke-width: 1.5; opacity: 0.6; } .notif-empty__text { font-size: 14px; font-weight: 600; color: var(--text); margin: 0; } .notif-empty__sub { font-size: 12px; color: var(--text-secondary); margin: 0; } /* Dark mode adjustments */ [data-theme="dark"] .notif-overlay { background: rgba(0, 0, 0, 0.55); } [data-theme="dark"] .notif-panel { background: #1E1E2E; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .notif-panel__header { background: linear-gradient(135deg, #4F46E5 0%, #3730A3 50%, #6C63FF 100%); } [data-theme="dark"] .notif-panel__actions { background: #1E1E2E; } [data-theme="dark"] .notif-item { background: #252537; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .notif-item.unread { background: linear-gradient(135deg, rgba(108, 99, 255, 0.14) 0%, #252537 100%); border-color: rgba(108, 99, 255, 0.30); } [data-theme="dark"] .notif-item__title { color: #E8E8F0; } [data-theme="dark"] .notif-item__msg { color: #8B8BA7; } [data-theme="dark"] .notif-item__time { color: #8B8BA7; } [data-theme="dark"] .notif-empty__icon { background: rgba(108, 99, 255, 0.15); } [data-theme="dark"] .notif-empty__icon svg { stroke: #8B80FF; } [data-theme="dark"] .notif-empty__text { color: #E8E8F0; } [data-theme="dark"] .notif-panel__markall { background: rgba(108, 99, 255, 0.18); color: #8B80FF; } [data-theme="dark"] .notif-panel__markall:hover { background: rgba(108, 99, 255, 0.28); } /* Mobile-friendly: popup fills more width on small screens */ @media (max-width: 480px) { .notif-overlay { padding: 16px 12px; } .notif-panel { max-width: 100%; max-height: 85vh; } .notif-panel__header { padding: 18px 16px 16px; } .notif-panel__body { padding: 6px 12px 16px; } } /* ================================================== FACE ID — Modal, Login Button, Profil Card ================================================== */ /* ---- Login Page: Face ID Button + Divider ---- */ .login-divider { display: flex; align-items: center; text-align: center; margin: 16px 0 12px; color: var(--text-secondary); font-size: 11px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; } .login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #E5E7EB, transparent); } .login-divider span { padding: 0 12px; } .login-faceid-btn { width: 100%; padding: 12px 14px; background: #FFFFFF; color: var(--text); border: 1.5px solid #E5E7EB; border-radius: 12px; font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all .25s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .login-faceid-btn:hover { background: linear-gradient(135deg, #6C63FF 0%, #5B52F3 100%); color: #FFFFFF; border-color: transparent; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(108, 99, 255, 0.30); } .login-faceid-btn:active { transform: scale(0.97); } .login-faceid-btn svg { stroke: currentColor; fill: none; transition: stroke .25s; } .faceid-hint { text-align: center; font-size: 11px; color: var(--text-secondary); margin-top: 10px; line-height: 1.4; padding: 0 8px; } /* ---- Profil Card (karyawan) ---- */ .face-id-card { background: var(--card); border-radius: 16px; padding: 16px; margin-bottom: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); border: 1.5px solid rgba(108, 99, 255, 0.08); } .face-id-card__header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .face-id-card__icon { width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg, #6C63FF 0%, #5B52F3 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(108, 99, 255, 0.25); } .face-id-card__icon svg { width: 22px; height: 22px; } .face-id-card__info { flex: 1; min-width: 0; } .face-id-card__title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .face-id-card__status { font-size: 11.5px; color: var(--text-secondary); line-height: 1.4; } .face-id-card__actions { display: flex; gap: 8px; } .face-id-btn { flex: 1; padding: 10px 14px; border-radius: 11px; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; border: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all .2s ease; } .face-id-btn--register { background: linear-gradient(135deg, #6C63FF, #5B52F3); color: #FFFFFF; box-shadow: 0 3px 10px rgba(108, 99, 255, 0.25); } .face-id-btn--register:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(108, 99, 255, 0.35); } .face-id-btn--disable { background: rgba(239, 68, 68, 0.10); color: #DC2626; border: 1.5px solid rgba(239, 68, 68, 0.20); } .face-id-btn--disable:hover { background: rgba(239, 68, 68, 0.18); } .face-id-btn:active { transform: scale(0.97); } /* Mini action buttons for Face ID row in profil list (Daftar/Update/Hapus) */ .face-id-mini-btn { padding: 5px 12px; border-radius: 9px; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; cursor: pointer; border: none; transition: all .2s ease; white-space: nowrap; } .face-id-mini-btn--register { background: linear-gradient(135deg, #6C63FF, #5B52F3); color: #FFFFFF; box-shadow: 0 2px 8px rgba(108, 99, 255, 0.25); } .face-id-mini-btn--register:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(108, 99, 255, 0.35); } .face-id-mini-btn--update { background: rgba(108, 99, 255, 0.12); color: #5B52F3; border: 1px solid rgba(108, 99, 255, 0.20); } .face-id-mini-btn--update:hover { background: rgba(108, 99, 255, 0.20); } .face-id-mini-btn--delete { background: rgba(239, 68, 68, 0.10); color: #DC2626; border: 1px solid rgba(239, 68, 68, 0.20); } .face-id-mini-btn--delete:hover { background: rgba(239, 68, 68, 0.18); } .face-id-mini-btn:active { transform: scale(0.95); } [data-theme="dark"] .face-id-mini-btn--update { color: #8B80FF; } [data-theme="dark"] .face-id-mini-btn--delete { color: #F87171; } /* ---- Face ID Modal ---- */ .face-id-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 10002; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity .3s ease; } .face-id-modal-overlay.active { opacity: 1; pointer-events: all; } .face-id-modal { width: 100%; max-width: 380px; background: #FFFFFF; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30), 0 4px 20px rgba(0, 0, 0, 0.15); transform: scale(0.92) translateY(20px); opacity: 0; transition: all .35s cubic-bezier(.34, 1.56, .64, 1); } .face-id-modal-overlay.active .face-id-modal { transform: scale(1) translateY(0); opacity: 1; } .face-id-modal__header { background: linear-gradient(135deg, #6C63FF 0%, #5B52F3 50%, #8B80FF 100%); color: #FFFFFF; padding: 18px 18px 16px; display: flex; align-items: center; gap: 12px; position: relative; overflow: hidden; } .face-id-modal__header::before { content: ''; position: absolute; top: -40px; right: -30px; width: 110px; height: 110px; background: rgba(255, 255, 255, 0.10); border-radius: 50%; pointer-events: none; } .face-id-modal__icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); position: relative; z-index: 1; } .face-id-modal__icon svg { width: 22px; height: 22px; } .face-id-modal__title { font-size: 17px; font-weight: 700; margin: 0; letter-spacing: 0.3px; position: relative; z-index: 1; } .face-id-modal__subtitle { font-size: 11.5px; color: rgba(255, 255, 255, 0.88); margin: 2px 0 0; position: relative; z-index: 1; } .face-id-modal__close { width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, 0.18); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #FFFFFF; flex-shrink: 0; margin-left: auto; transition: all .2s ease; position: relative; z-index: 1; } .face-id-modal__close:hover { background: rgba(255, 255, 255, 0.30); transform: rotate(90deg); } .face-id-modal__close svg { width: 16px; height: 16px; } /* Video + Canvas wrap */ .face-id-modal__video-wrap { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #000000; overflow: hidden; } .face-id-modal__video-wrap video, .face-id-modal__video-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .face-id-modal__video-wrap video { transform: scaleX(-1); /* mirror for selfie view */ } .face-id-modal__canvas { pointer-events: none; z-index: 2; } .face-id-modal__guide { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 45% 55% at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%); } /* Dotted face guide — visual hint where to position face */ .face-id-modal__guide::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; aspect-ratio: 3 / 4; border: 3px dashed rgba(255, 255, 255, 0.55); border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2); animation: faceGuidePulse 2s ease-in-out infinite; } /* Corner dots around the face guide */ .face-id-modal__guide::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; aspect-ratio: 3 / 4; background: radial-gradient(circle at 8% 12%, rgba(255,255,255,0.85) 0 5px, transparent 6px), radial-gradient(circle at 92% 12%, rgba(255,255,255,0.85) 0 5px, transparent 6px), radial-gradient(circle at 8% 88%, rgba(255,255,255,0.85) 0 5px, transparent 6px), radial-gradient(circle at 92% 88%, rgba(255,255,255,0.85) 0 5px, transparent 6px), radial-gradient(circle at 50% 6%, rgba(255,255,255,0.7) 0 4px, transparent 5px), radial-gradient(circle at 50% 94%, rgba(255,255,255,0.7) 0 4px, transparent 5px); pointer-events: none; } @keyframes faceGuidePulse { 0%, 100% { border-color: rgba(255, 255, 255, 0.55); transform: translate(-50%, -50%) scale(1); } 50% { border-color: rgba(255, 255, 255, 0.85); transform: translate(-50%, -50%) scale(1.03); } } /* Progress bar */ .face-id-modal__progress-bar { height: 4px; background: #F1F5F9; overflow: hidden; } .face-id-modal__progress-fill { height: 100%; background: linear-gradient(90deg, #6C63FF, #8B80FF); border-radius: 0 4px 4px 0; transition: width .35s ease; box-shadow: 0 0 8px rgba(108, 99, 255, 0.4); } /* Status indicator */ .face-id-status { padding: 14px 18px; display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(0, 0, 0, 0.04); transition: background-color .25s ease; } .face-id-status--loading { background: #F8FAFC; } .face-id-status--scanning { background: rgba(108, 99, 255, 0.06); } .face-id-status--success { background: rgba(16, 185, 129, 0.08); } .face-id-status--warning { background: rgba(245, 158, 11, 0.08); } .face-id-status--error { background: rgba(239, 68, 68, 0.08); } .face-id-status__icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(108, 99, 255, 0.10); color: #6C63FF; } .face-id-status--success .face-id-status__icon { background: rgba(16, 185, 129, 0.15); color: #10B981; } .face-id-status--warning .face-id-status__icon { background: rgba(245, 158, 11, 0.15); color: #F59E0B; } .face-id-status--error .face-id-status__icon { background: rgba(239, 68, 68, 0.15); color: #EF4444; } .face-id-status__text { font-size: 12.5px; font-weight: 500; color: var(--text); line-height: 1.4; margin: 0; flex: 1; } .face-id-spinner { width: 20px; height: 20px; border: 2.5px solid rgba(108, 99, 255, 0.20); border-top-color: #6C63FF; border-radius: 50%; animation: faceIdSpin 0.8s linear infinite; } @keyframes faceIdSpin { to { transform: rotate(360deg); } } .face-id-status--success .face-id-spinner, .face-id-status--warning .face-id-spinner, .face-id-status--error .face-id-spinner { display: none; } /* Show appropriate icon per state */ .face-id-status--success .face-id-status__icon::before { content: '✓'; font-size: 18px; font-weight: 700; } .face-id-status--warning .face-id-status__icon::before { content: '!'; font-size: 18px; font-weight: 700; } .face-id-status--error .face-id-status__icon::before { content: '✕'; font-size: 16px; font-weight: 700; } .face-id-status--scanning .face-id-spinner, .face-id-status--loading .face-id-spinner { display: block; } /* Footer */ .face-id-modal__footer { padding: 12px 18px 16px; display: flex; justify-content: flex-end; gap: 8px; } .face-id-modal__cancel-btn { padding: 9px 18px; background: #F1F5F9; color: var(--text-secondary); border: none; border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s ease; } .face-id-modal__cancel-btn:hover { background: #E2E8F0; color: var(--text); } .face-id-modal__cancel-btn:active { transform: scale(0.96); } /* Dark mode */ [data-theme="dark"] .login-faceid-btn { background: rgba(255, 255, 255, 0.06); color: #E8E8F0; border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .face-id-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .face-id-card__title { color: #E8E8F0; } [data-theme="dark"] .face-id-card__status { color: #8B8BA7; } [data-theme="dark"] .face-id-modal { background: #1E1E2E; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .face-id-status--loading { background: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .face-id-modal__progress-bar { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .face-id-modal__cancel-btn { background: rgba(255, 255, 255, 0.06); color: #B8B8D0; } [data-theme="dark"] .face-id-modal__cancel-btn:hover { background: rgba(255, 255, 255, 0.12); } /* Mobile responsive */ @media (max-width: 380px) { .face-id-modal { max-width: 100%; } .face-id-modal__header { padding: 14px 14px 12px; } .face-id-modal__title { font-size: 16px; } } /* ====================================================================== */ /* ============== POPUP THEME UNIFICATION (matches logout-card) ========= */ /* ====================================================================== */ /* Goal: every confirmation/notification popup in the app shares the EXACT same visual theme as the logout confirmation popup — same card chrome, same 60x60 gradient icon circle, same typography (18px bold title, 13px gray desc), same button shape (16px radius, 14px 600 weight), same scale-in + shine animations, and same dark mode. SweetAlert2 popups are also themed to match. */ /* === 1. profil-popup-card: convert bottom-sheet → centered modal === */ .profil-popup-overlay { align-items: center !important; background: rgba(0,0,0,0.2) !important; } .profil-popup-card { width: 320px !important; max-width: calc(100% - 40px) !important; max-height: 80vh !important; border-radius: 24px !important; box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06) !important; border: 1px solid rgba(0,0,0,0.06) !important; transform: translateY(30px) scale(0.95) !important; transition: all .5s cubic-bezier(.16,1,.3,1) !important; display: flex !important; flex-direction: column !important; } .profil-popup-overlay.active .profil-popup-card { transform: translateY(0) scale(1) !important; } .profil-popup-card__header-bar { border-radius: 0 !important; } .profil-popup-card__icon-wrap { padding: 28px 0 0 !important; } .profil-popup-card__icon { width: 60px !important; height: 60px !important; border-radius: 50% !important; box-shadow: 0 6px 20px rgba(108,99,255,0.30) !important; } .profil-popup-card__icon svg { width: 30px !important; height: 30px !important; } .profil-popup-card__title { font-size: 18px !important; padding: 16px 24px 0 !important; transition: all .4s ease .35s !important; } .profil-popup-card__items { padding: 14px 16px 8px !important; max-height: calc(80vh - 220px) !important; } /* Footer + close button — previously unstyled, now matches logout-card cancel button */ .profil-popup-card__footer { padding: 14px 24px 24px !important; position: relative !important; z-index: 2 !important; transform: translateY(8px) !important; opacity: 0 !important; transition: all .4s ease .5s !important; } .profil-popup-overlay.active .profil-popup-card__footer { transform: translateY(0) !important; opacity: 1 !important; } .profil-popup-card__close-btn { width: 100% !important; padding: 12px 0 !important; border-radius: 16px !important; font-family: 'Poppins', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; border: none !important; transition: all .2s ease !important; background: #f1f5f9 !important; color: #64748b !important; } .profil-popup-card__close-btn:hover { background: #e2e8f0 !important; } .profil-popup-card__close-btn:active { background: #d5dbe3 !important; } /* === 2. SweetAlert2 — theme to match logout-card === */ .swal2-container.swal2-center { background: rgba(0,0,0,0.2) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .swal2-popup { width: 320px !important; max-width: calc(100% - 40px) !important; background: #ffffff !important; border-radius: 24px !important; border: 1px solid rgba(0,0,0,0.06) !important; box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06) !important; font-family: 'Poppins', sans-serif !important; padding: 28px 24px 24px !important; position: relative !important; overflow: hidden !important; } /* Shine sweep — mimics logout-card__shine */ .swal2-popup::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 65%); opacity: 0; pointer-events: none; z-index: 1; animation: swal2Shine 1.8s ease .3s forwards; } @keyframes swal2Shine { 0% { background-position: -150% 0; opacity: 1; } 100% { background-position: 250% 0; opacity: 0; } } .swal2-title { color: #1e293b !important; font-size: 18px !important; font-weight: 700 !important; margin: 0 0 4px !important; padding: 0 !important; position: relative !important; z-index: 2 !important; } .swal2-html-container { color: #64748b !important; font-size: 13px !important; margin: 0 !important; padding: 0 !important; position: relative !important; z-index: 2 !important; } /* Icon circle — 60x60 gradient like logout-card */ .swal2-icon { width: 60px !important; height: 60px !important; border-radius: 50% !important; margin: 0 auto 16px !important; border: none !important; position: relative !important; z-index: 2 !important; } .swal2-icon .swal2-icon-content { color: #fff !important; font-size: 32px !important; margin: 0 !important; } .swal2-icon.swal2-success, .swal2-icon.swal2-error, .swal2-icon.swal2-warning, .swal2-icon.swal2-info, .swal2-icon.swal2-question { background: linear-gradient(135deg, #6C63FF, #5B52F3) !important; box-shadow: 0 6px 20px rgba(108,99,255,0.30) !important; } .swal2-icon.swal2-success { background: linear-gradient(135deg, #10B981, #059669) !important; box-shadow: 0 6px 20px rgba(16,185,129,0.30) !important; } .swal2-icon.swal2-error { background: linear-gradient(135deg, #EF4444, #DC2626) !important; box-shadow: 0 6px 20px rgba(239,68,68,0.30) !important; } .swal2-icon.swal2-warning { background: linear-gradient(135deg, #F59E0B, #D97706) !important; box-shadow: 0 6px 20px rgba(245,158,11,0.30) !important; } .swal2-icon.swal2-info { background: linear-gradient(135deg, #6C63FF, #5B52F3) !important; box-shadow: 0 6px 20px rgba(108,99,255,0.30) !important; } .swal2-icon.swal2-question{ background: linear-gradient(135deg, #6C63FF, #5B52F3) !important; box-shadow: 0 6px 20px rgba(108,99,255,0.30) !important; } /* Make icon SVGs/lines white to match logout-card icon style */ .swal2-icon .swal2-success-ring { border-color: rgba(255,255,255,0.3) !important; background: transparent !important; } .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: #fff !important; } .swal2-icon.swal2-success .swal2-success-fix, .swal2-icon.swal2-success .swal2-success-circular-line-right { display: none !important; } .swal2-icon.swal2-error .swal2-x-mark-line-left, .swal2-icon.swal2-error .swal2-x-mark-line-right { background-color: #fff !important; } .swal2-icon.swal2-warning .swal2-warning-body, .swal2-icon.swal2-warning .swal2-warning-dot { color: #fff !important; } .swal2-icon.swal2-info .swal2-info-line { background-color: #fff !important; } .swal2-icon.swal2-question .swal2-question-mark { color: #fff !important; } /* Buttons — match logout-card__btn */ .swal2-actions { margin-top: 20px !important; gap: 10px !important; position: relative !important; z-index: 2 !important; } .swal2-styled.swal2-confirm, .swal2-styled.swal2-cancel, .swal2-styled.swal2-deny { flex: 1 !important; padding: 12px 0 !important; border-radius: 16px !important; font-family: 'Poppins', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; border: none !important; box-shadow: none !important; transition: all .2s ease !important; } .swal2-styled.swal2-cancel, .swal2-styled.swal2-deny { background: #f1f5f9 !important; color: #64748b !important; } .swal2-styled.swal2-cancel:hover, .swal2-styled.swal2-deny:hover { background: #e2e8f0 !important; } .swal2-styled.swal2-confirm { background: linear-gradient(180deg, #6C63FF, #5B52F3) !important; color: #fff !important; } .swal2-styled.swal2-confirm:hover { background: linear-gradient(180deg, #8B80FF, #6C63FF) !important; } /* Validation message */ .swal2-validation-message { background: #FEF3C7 !important; color: #92400E !important; border-radius: 12px !important; font-size: 12px !important; font-family: 'Poppins', sans-serif !important; margin-top: 12px !important; } /* === 3. Dark mode for SweetAlert2 + profil-popup close button === */ [data-theme="dark"] .swal2-popup { background: #1E1E2E !important; border-color: rgba(255,255,255,0.06) !important; } [data-theme="dark"] .swal2-title { color: #E8E8F0 !important; } [data-theme="dark"] .swal2-html-container { color: #8B8BA7 !important; } [data-theme="dark"] .swal2-styled.swal2-cancel, [data-theme="dark"] .swal2-styled.swal2-deny { background: rgba(255,255,255,0.08) !important; color: #8B8BA7 !important; } [data-theme="dark"] .swal2-styled.swal2-cancel:hover, [data-theme="dark"] .swal2-styled.swal2-deny:hover { background: rgba(255,255,255,0.14) !important; } [data-theme="dark"] .swal2-validation-message { background: rgba(245,158,11,0.15) !important; color: #FBBF24 !important; } [data-theme="dark"] .profil-popup-card__close-btn { background: rgba(255,255,255,0.08) !important; color: #8B8BA7 !important; } [data-theme="dark"] .profil-popup-card__close-btn:hover { background: rgba(255,255,255,0.14) !important; } /* ====================================================================== */ /* ============== WORK SETTINGS FORM (Jam Kerja & Penggajian) =========== */ /* ====================================================================== */ /* Form inside the admin-profile-card popup for setting per-karyawan work hours (jam_masuk, jam_pulang) and hourly wage (gaji_per_jam). Includes a live-preview box showing estimated daily salary. */ .work-settings-form { display: flex; flex-direction: column; gap: 14px; text-align: left; } .work-settings-form__row { display: flex; flex-direction: column; gap: 6px; } .work-settings-form__label { font-size: 11px; font-weight: 600; color: #64748b; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 2px; } .work-settings-form__input { width: 100%; padding: 12px 14px; border: 1.5px solid #E5E7EB; border-radius: 12px; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; color: #1e293b; outline: none; background: #FFFFFF; box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; text-align: center; /* For time inputs: ensure consistent appearance across browsers */ -webkit-appearance: none; appearance: none; } .work-settings-form__input:focus { border-color: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,0.12); background: #FFFBEB; } .work-settings-form__input:hover:not(:focus) { border-color: #FCD34D; } /* ---- Time input (Jam Masuk / Jam Pulang) custom styling ---- */ /* Style the native time picker to match the amber theme */ .work-settings-form__input[type="time"] { padding-left: 38px; /* room for clock icon */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F59E0B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center; background-size: 18px 18px; letter-spacing: 1px; } /* Webkit (Chrome/Safari) — style the time picker indicator button */ .work-settings-form__input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.5; filter: invert(60%) sepia(60%) saturate(500%) hue-rotate(5deg); transition: opacity 0.2s ease; } .work-settings-form__input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 0.9; } /* Firefox — minimal adjustment */ .work-settings-form__input[type="time"]::-moz-calendar-picker-indicator { cursor: pointer; opacity: 0.6; } /* Number input (Gaji per Jam) — remove default spinner arrows for cleaner look */ .work-settings-form__input[type="number"]::-webkit-outer-spin-button, .work-settings-form__input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .work-settings-form__input[type="number"] { -moz-appearance: textfield; text-align: left; padding-left: 14px; /* Currency prefix via background SVG (Rp) */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='3' x2='6' y2='15'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M6 9c0 2 2 4 6 4s6-2 6-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center; background-size: 18px 18px; padding-left: 38px; color: #059669; } .work-settings-form__input[type="number"]:focus { border-color: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,0.12); background-color: #F0FDF4; } .work-settings-form__input[type="number"]:hover:not(:focus) { border-color: #6EE7B7; } /* Live preview box — shows estimated daily salary based on current inputs */ .work-settings-form__preview { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(217,119,6,0.06)); border: 1px solid rgba(245,158,11,0.20); border-radius: 14px; margin-top: 4px; } .work-settings-form__preview-label { font-size: 11px; font-weight: 600; color: #92400E; line-height: 1.5; } .work-settings-form__preview-label span { font-weight: 400; color: #B45309; font-size: 10.5px; } .work-settings-form__preview-value { font-size: 18px; font-weight: 700; color: #D97706; white-space: nowrap; } /* Dark mode for work-settings form */ [data-theme="dark"] .work-settings-form__label { color: #B8B8D0; } [data-theme="dark"] .work-settings-form__input { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #E8E8F0; } [data-theme="dark"] .work-settings-form__input:focus { border-color: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,0.15); background: rgba(245,158,11,0.08); } /* Dark mode: time input keeps amber clock icon (visible on dark bg) */ [data-theme="dark"] .work-settings-form__input[type="time"] { background-color: rgba(255,255,255,0.04); } /* Dark mode: number input keeps green icon + green text */ [data-theme="dark"] .work-settings-form__input[type="number"] { background-color: rgba(255,255,255,0.04); color: #34D399; } [data-theme="dark"] .work-settings-form__input[type="number"]:focus { border-color: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,0.18); background: rgba(16,185,129,0.08); } [data-theme="dark"] .work-settings-form__preview { background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(217,119,6,0.08)); border-color: rgba(245,158,11,0.25); } [data-theme="dark"] .work-settings-form__preview-label { color: #FBBF24; } [data-theme="dark"] .work-settings-form__preview-label span { color: #F59E0B; } [data-theme="dark"] .work-settings-form__preview-value { color: #FBBF24; } [data-theme="dark"] .work-btn { background: rgba(245,158,11,0.15); } [data-theme="dark"] .work-btn:hover { background: rgba(245,158,11,0.25); } /* ---- Work settings form: horizontal jam masuk/pulang row ---- */ /* IMPORTANT: must override flex-direction:column from base .work-settings-form__row */ .work-settings-form__row--double { display: flex; flex-direction: row !important; gap: 12px; align-items: stretch; } .work-settings-form__field { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } /* ---- Work settings form: 7-day checkbox grid ---- */ /* Layout: 4 checkboxes on top row (Sen, Sel, Rab, Kam), 3 checkboxes on bottom row (Jum, Sab, Min). */ .work-settings-form__days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .work-settings-form__day { position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; } .work-settings-form__day input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .work-settings-form__day-chip { display: flex; align-items: center; justify-content: center; width: 100%; padding: 9px 4px; border-radius: 10px; border: 1.5px solid #E5E7EB; background: #fff; color: #94a3b8; font-size: 12px; font-weight: 600; transition: all 0.2s ease; user-select: none; } .work-settings-form__day:hover .work-settings-form__day-chip { border-color: #F59E0B; color: #D97706; } .work-settings-form__day input[type="checkbox"]:checked + .work-settings-form__day-chip { background: linear-gradient(135deg, #F59E0B, #D97706); border-color: #D97706; color: #fff; box-shadow: 0 3px 10px rgba(245,158,11,0.30); } /* Last row has only 3 items — center them by offsetting the 4th column. Grid auto-places: row 1 = Sen, Sel, Rab, Kam | row 2 = Jum, Sab, Min + empty cell. The empty cell is fine — 3 items on row 2 align left, which looks clean. */ /* Dark mode for checkbox grid */ [data-theme="dark"] .work-settings-form__day-chip { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #8B8BA7; } [data-theme="dark"] .work-settings-form__day:hover .work-settings-form__day-chip { border-color: #F59E0B; color: #FBBF24; } [data-theme="dark"] .work-settings-form__day input[type="checkbox"]:checked + .work-settings-form__day-chip { background: linear-gradient(135deg, #F59E0B, #D97706); border-color: #D97706; color: #fff; } /* ====================================================================== */ /* ============== SCHEDULE POPUP (Jadwal/Shift — karyawan) ============== */ /* ====================================================================== */ /* 7-day schedule list inside the admin-profile-card popup. Each row: [dot] [Day name] ........ [HH:MM — HH:MM] Today's row is highlighted with amber tint + active dot. */ .schedule-list { display: flex; flex-direction: column; gap: 4px; text-align: left; } .schedule-day { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-radius: 12px; background: #f8fafc; transition: background 0.2s ease, transform 0.2s ease; } .schedule-day:hover { background: #f1f5f9; transform: translateX(2px); } .schedule-day--today { background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(217,119,6,0.06)); border: 1px solid rgba(245,158,11,0.25); } .schedule-day--today:hover { background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(217,119,6,0.08)); } .schedule-day__name { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #1e293b; } .schedule-day__dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; flex-shrink: 0; transition: background 0.2s ease, box-shadow 0.2s ease; } .schedule-day__dot--active { background: #F59E0B; box-shadow: 0 0 0 4px rgba(245,158,11,0.20); animation: scheduleDotPulse 2s ease-in-out infinite; } @keyframes scheduleDotPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(245,158,11,0.20); } 50% { box-shadow: 0 0 0 7px rgba(245,158,11,0.10); } } .schedule-day__hours { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #475569; font-variant-numeric: tabular-nums; } .schedule-day--today .schedule-day__hours { color: #D97706; } .schedule-day__time-in, .schedule-day__time-out { min-width: 42px; text-align: center; } .schedule-day__sep { color: #94a3b8; font-weight: 400; } .schedule-day--today .schedule-day__sep { color: #F59E0B; } /* Dark mode for schedule list */ [data-theme="dark"] .schedule-day { background: rgba(255,255,255,0.04); } [data-theme="dark"] .schedule-day:hover { background: rgba(255,255,255,0.08); } [data-theme="dark"] .schedule-day--today { background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(217,119,6,0.08)); border-color: rgba(245,158,11,0.30); } [data-theme="dark"] .schedule-day--today:hover { background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(217,119,6,0.10)); } [data-theme="dark"] .schedule-day__name { color: #E8E8F0; } [data-theme="dark"] .schedule-day__dot { background: rgba(255,255,255,0.20); } [data-theme="dark"] .schedule-day__hours { color: #B8B8D0; } [data-theme="dark"] .schedule-day--today .schedule-day__hours { color: #FBBF24; } [data-theme="dark"] .schedule-day__sep { color: rgba(255,255,255,0.25); } [data-theme="dark"] .schedule-day--today .schedule-day__sep { color: #F59E0B; } /* Off-day (Libur) row — for days not in work_days */ .schedule-day--off { opacity: 0.65; } .schedule-day--off .schedule-day__name { color: #94a3b8; font-weight: 500; } .schedule-day__dot--off { background: #cbd5e1; } .schedule-day__libur { font-size: 12px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 10px; border-radius: 8px; background: #f1f5f9; } [data-theme="dark"] .schedule-day--off .schedule-day__name { color: #6B6B85; } [data-theme="dark"] .schedule-day__dot--off { background: rgba(255,255,255,0.15); } [data-theme="dark"] .schedule-day__libur { color: #8B8BA7; background: rgba(255,255,255,0.06); } /* ====================================================================== */ /* ============== THANK YOU POPUP (Absen Pulang — karyawan) ============= */ /* ====================================================================== */ /* Special popup shown after clock-out (Absen Pulang). - Title "Terimakasih" zooms in from scale(0) → scale(1) with spring overshoot - Icon is a heart with festive gold-pink gradient - Fireworks particles burst outward from the icon area (2 staggered bursts) - Salary amount displayed large below the title - Subtitle "Pendapatan Anda Pada Hari Ini" in smaller gray text */ /* Heart icon variant — festive gradient + continuous pulse */ .absen-popup-card__icon--thankyou { background: linear-gradient(135deg, #F59E0B, #EC4899); box-shadow: 0 6px 20px rgba(236, 72, 153, 0.30); /* Pulse starts after the scale-in completes (0.3s delay + 0.5s transition = 0.8s) */ animation: thankyouIconPulse 1.3s ease-in-out 0.8s infinite; } @keyframes thankyouIconPulse { 0%, 100% { transform: scale(1); box-shadow: 0 6px 20px rgba(236, 72, 153, 0.30); } 50% { transform: scale(1.12); box-shadow: 0 10px 30px rgba(236, 72, 153, 0.50); } } /* Card modifier — triggers zoom-in title animation */ .absen-popup-card--thankyou .absen-popup-card__title { transform: scale(0); opacity: 0; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s, opacity 0.3s ease 0.3s; } .absen-popup-overlay.active .absen-popup-card--thankyou .absen-popup-card__title { transform: scale(1); opacity: 1; font-size: 22px; /* slightly larger than default 18px for emphasis */ } /* Card modifier — compact for info/about popups */ .absen-popup-card--compact { width: 260px; overflow: visible; } .absen-popup-card--compact .absen-popup-card__icon-wrap { padding: 10px 0 6px; } .absen-popup-card--compact .absen-popup-card__icon { width: 44px; height: 44px; } .absen-popup-card--compact .absen-popup-card__content { padding: 8px 18px 14px; } .absen-popup-card--compact .absen-popup-card__title { font-size: 15px; margin: 0 0 2px; } .absen-popup-card--compact .absen-popup-card__desc { font-size: 11px; margin: 0 0 10px; } .absen-popup-card--compact .absen-popup-card__details { padding: 8px 10px; font-size: 11px; } .absen-popup-card--compact .absen-popup-card__actions { padding: 0 18px 12px; } .absen-popup-card--compact .absen-popup-card__btn { padding: 8px 0; font-size: 12px; border-radius: 12px; } /* Label between title and salary — smaller than title */ .absen-thankyou__label { font-size: 13px; color: #64748b; font-weight: 500; text-align: center; margin: 6px 0 8px; line-height: 1.4; } /* Salary amount — large bold green text */ .absen-thankyou__salary { font-size: 32px; font-weight: 800; color: #10B981; margin: 4px 0 6px; text-align: center; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; } .absen-thankyou__salary--loading { font-size: 16px; font-weight: 600; color: #94a3b8; } /* Motivational message below salary — small italic gray text */ .absen-thankyou__message { font-size: 11.5px; color: #94a3b8; font-weight: 400; text-align: center; margin-top: 10px; line-height: 1.55; padding: 0 6px; font-style: italic; } /* ---- FIREWORKS / PETASAN ---- */ /* z-index: 1 puts fireworks BEHIND the icon (icon-wrap is z-index: 2). Particles radiate outward beyond the icon's 60px bounds, so they remain visible around the icon edges against the white card background. */ .absen-fireworks { position: absolute; top: 58px; /* center of the 60px icon (28px padding-top + 30px radius) */ left: 50%; width: 0; height: 0; pointer-events: none; z-index: 1; /* behind icon-wrap (z-index: 2) + content (z-index: 2) */ } .absen-fireworks__particle { position: absolute; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--color, #F59E0B); /* Stronger glow to ensure visibility against white card background */ box-shadow: 0 0 12px var(--color, #F59E0B), 0 0 6px var(--color, #F59E0B), 0 0 3px var(--color, #F59E0B); transform-origin: center; animation: fireworksBurst 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s) forwards; opacity: 0; } @keyframes fireworksBurst { 0% { transform: rotate(var(--angle, 0deg)) translateY(0) scale(0); opacity: 0; } 15% { transform: rotate(var(--angle, 0deg)) translateY(-8px) scale(1.4); opacity: 1; } 100% { transform: rotate(var(--angle, 0deg)) translateY(calc(-1 * var(--distance, 65px))) scale(0.2); opacity: 0; } } /* Dark mode for thankyou popup */ [data-theme="dark"] .absen-thankyou__label { color: #8B8BA7; } [data-theme="dark"] .absen-thankyou__salary { color: #34D399; } [data-theme="dark"] .absen-thankyou__salary--loading { color: #8B8BA7; } [data-theme="dark"] .absen-thankyou__message { color: #8B8BA7; } /* ====================================================================== */ /* ============== PAYSLIP POPUP (Slip Gaji — karyawan) ================== */ /* ====================================================================== */ /* Popup shown when user clicks "Slip Gaji" on the dashboard quick-menu. Two states: - date >= 7: shows "Intip Gaji [Month]" button → click reveals salary - date < 7: shows sad emoji + "Yaahh sabar yaa belum waktunya gajian" */ /* ---- "Intip Gaji" + "Ajukan Slip Gaji" buttons (horizontal row, vertical content) ---- */ .payslip-peek { text-align: center; } /* Horizontal row — both buttons side by side, equal width */ .payslip-peek__row { display: flex; gap: 10px; align-items: stretch; } .payslip-peek__btn { flex: 1; /* VERTICAL layout: icon on top, text below */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 10px; border: none; border-radius: 16px; background: linear-gradient(135deg, #10B981, #059669); color: #fff; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 6px 20px rgba(16, 185, 129, 0.30); line-height: 1.3; text-align: center; } .payslip-peek__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(16, 185, 129, 0.40); background: linear-gradient(135deg, #34D399, #10B981); } .payslip-peek__btn:active { transform: scale(0.96); } .payslip-peek__btn svg { flex-shrink: 0; width: 26px; height: 26px; } /* "Ajukan Slip Gaji" variant — purple gradient to distinguish from green "Intip Gaji" */ .payslip-peek__btn--ajukan { background: linear-gradient(135deg, #6C63FF, #5B52F3); box-shadow: 0 6px 20px rgba(108, 99, 255, 0.30); } .payslip-peek__btn--ajukan:hover { background: linear-gradient(135deg, #8B80FF, #6C63FF); box-shadow: 0 8px 26px rgba(108, 99, 255, 0.40); } /* "Kembali" variant — orange/amber gradient, shown while viewing salary peek */ .payslip-peek__btn--kembali { background: linear-gradient(135deg, #F59E0B, #D97706); box-shadow: 0 6px 20px rgba(245, 158, 11, 0.30); } .payslip-peek__btn--kembali:hover { background: linear-gradient(135deg, #FBBF24, #F59E0B); box-shadow: 0 8px 26px rgba(245, 158, 11, 0.40); } /* ---- Success state (after clicking "Ajukan Slip Gaji") ---- */ .payslip-success { text-align: center; padding: 16px 8px 8px; animation: payslipSuccessFadeIn 0.4s ease; } @keyframes payslipSuccessFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .payslip-success__icon { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; background: linear-gradient(135deg, #10B981, #059669); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(16, 185, 129, 0.40); /* Zoom-in animation: scale(0) → scale(1) with spring overshoot */ transform: scale(0); animation: payslipSuccessIconPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards; } .payslip-success__icon svg { width: 38px; height: 38px; } @keyframes payslipSuccessIconPop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } } .payslip-success__text { font-size: 15px; font-weight: 700; color: #1e293b; line-height: 1.4; margin: 0 0 6px; padding: 0 8px; /* Fade in after icon pops */ opacity: 0; animation: payslipSuccessTextFade 0.4s ease 0.5s forwards; } .payslip-success__sub { font-size: 12px; color: #94a3b8; font-weight: 400; margin: 0; opacity: 0; animation: payslipSuccessTextFade 0.4s ease 0.65s forwards; } @keyframes payslipSuccessTextFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ---- Salary result (shown after clicking "Intip Gaji") ---- */ .payslip-result { text-align: center; animation: payslipResultFadeIn 0.4s ease; } @keyframes payslipResultFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .payslip-result__period { font-size: 12px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .payslip-result__amount { font-size: 36px; font-weight: 800; color: #10B981; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; margin-bottom: 2px; } .payslip-result__label { font-size: 11px; color: #94a3b8; font-weight: 500; margin-bottom: 16px; } .payslip-result__details { background: #f8fafc; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .payslip-result__row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; } .payslip-result__row-label { color: #64748b; font-weight: 500; } .payslip-result__row-value { color: #1e293b; font-weight: 700; font-variant-numeric: tabular-nums; } /* ---- Loading state ---- */ .payslip-loading { text-align: center; font-size: 13px; color: #94a3b8; padding: 16px 0; } /* ---- Error state ---- */ .payslip-error { text-align: center; font-size: 12px; color: #EF4444; padding: 16px 0; } /* ---- Sad state (date < 7) ---- */ .payslip-sad { text-align: center; padding: 12px 8px 4px; animation: payslipSadFadeIn 0.4s ease; } @keyframes payslipSadFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .payslip-sad__emoji { font-size: 52px; line-height: 1; margin-bottom: 14px; animation: payslipSadBounce 2s ease-in-out infinite; } @keyframes payslipSadBounce { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-4px) rotate(-3deg); } 75% { transform: translateY(-2px) rotate(3deg); } } .payslip-sad__text { font-size: 15px; font-weight: 600; color: #475569; line-height: 1.5; margin: 0 0 8px; padding: 0 8px; } .payslip-sad__sub { font-size: 11px; color: #94a3b8; font-weight: 400; margin: 0; } /* ---- Dark mode for payslip popup ---- */ [data-theme="dark"] .payslip-peek__btn { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.40); } [data-theme="dark"] .payslip-peek__btn--ajukan { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.40); } [data-theme="dark"] .payslip-peek__btn--kembali { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.40); } [data-theme="dark"] .payslip-success__text { color: #E8E8F0; } [data-theme="dark"] .payslip-success__sub { color: #8B8BA7; } [data-theme="dark"] .payslip-result__period { color: #8B8BA7; } [data-theme="dark"] .payslip-result__amount { color: #34D399; } [data-theme="dark"] .payslip-result__label { color: #8B8BA7; } [data-theme="dark"] .payslip-result__details { background: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .payslip-result__row-label { color: #8B8BA7; } [data-theme="dark"] .payslip-result__row-value { color: #E8E8F0; } [data-theme="dark"] .payslip-loading { color: #8B8BA7; } [data-theme="dark"] .payslip-sad__text { color: #B8B8D0; } [data-theme="dark"] .payslip-sad__sub { color: #6B6B85; } /* ============== MEMBER CARD (Kartu Keanggotaan) ============== */ .member-card-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 10001; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .member-card-overlay.active { opacity: 1; pointer-events: all; } .member-card-popup { background: var(--card); border-radius: 24px; padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); transform: translateY(20px) scale(0.95); opacity: 0; transition: all .5s cubic-bezier(.16,1,.3,1); max-width: 90vw; } .member-card-overlay.active .member-card-popup { transform: translateY(0) scale(1); opacity: 1; } .member-card-popup__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .member-card-popup__title { font-size: 16px; font-weight: 700; color: var(--text); } .member-card-popup__close { width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(0,0,0,0.06); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; } .member-card-popup__close:hover { background: rgba(0,0,0,0.12); } .member-card-popup__close svg { width: 16px; height: 16px; } /* Card container — perspective for 3D hover */ .member-card-wrap { perspective: 600px; display: flex; justify-content: center; } /* The ID-card-style member card */ .member-card { position: relative; overflow: visible; --card-primary: #6C63FF; --card-primary-dark: #5B52F3; background-color: var(--card-primary); background-image: radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 29.5%,hsla(0,0%,100%,0) 30%), radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 39.5%,hsla(0,0%,100%,0) 40%), radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 49.5%,hsla(0,0%,100%,0) 50%); border-radius: 12px; box-shadow: 0 4px 15px rgba(108,99,255,0.3), 0 1px 0 rgba(255,255,255,0.15) inset; color: #fff; width: 280px; padding: 18px; transform: translate3d(0,0,0); animation: memberCardRotate 3s ease-in-out infinite; } /* Shimmer texture overlay — animated sliding shimmer like credit card */ .member-card__texture { position: absolute; top: 0; left: 0; width: 200%; height: 100%; background-image: linear-gradient(-80deg,hsla(0,0%,100%,0.3) 25%,hsla(0,0%,100%,0) 45%); animation: memberCardTexture 3s ease-in-out infinite; pointer-events: none; z-index: 1; } /* Card content layout: avatar left, info right */ .member-card__info { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; } /* LEFT: Avatar / Photo box */ .member-card__avatar-wrap { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .member-card__avatar { width: 60px; height: 80px; border-radius: 6px; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: #fff; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .member-card__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* RIGHT: Details column */ .member-card__details { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; } /* "Kumbahan Group" — top */ .member-card__org { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; opacity: 0.9; white-space: nowrap; } /* ID row */ .member-card__id-row { display: flex; align-items: baseline; gap: 6px; } .member-card__id-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; opacity: 0.55; } .member-card__id-value { font-family: "Courier New", "Courier Prime", monospace; font-size: 15px; font-weight: 700; letter-spacing: 1.5px; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.75) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15)); } /* Employee name */ .member-card__name { font-size: 14px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Join date row — bottom */ .member-card__join-row { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; } .member-card__join-label { font-size: 10px; opacity: 0.55; white-space: nowrap; } .member-card__join-value { font-size: 11px; font-weight: 600; letter-spacing: 0.3px; opacity: 0.85; white-space: nowrap; } /* Card 3D rotate animation */ @keyframes memberCardRotate { from, to { animation-timing-function: ease-in; box-shadow: 0 0 0 hsl(0,0%,80%), 0.1rem 0 0 hsl(0,0%,100%), -0.2rem 0 0.75rem 0 hsla(0,0%,0%,0.3); transform: rotateY(-10deg); } 25%, 75% { animation-timing-function: ease-out; box-shadow: 0 0 0 hsl(0,0%,80%), 0 0 0 hsl(0,0%,100%), -0.25rem -0.05rem 1rem 0.15rem hsla(0,0%,0%,0.3); transform: rotateY(0deg); } 50% { animation-timing-function: ease-in; box-shadow: -0.1rem 0 0 hsl(0,0%,80%), 0 0 0 hsl(0,0%,100%), -0.3rem -0.1rem 1.5rem 0.3rem hsla(0,0%,0%,0.3); transform: rotateY(10deg); } } @keyframes memberCardTexture { from, to { transform: translate3d(0,0,0); } 50% { transform: translate3d(-50%,0,0); } } /* Dark mode for member card popup */ [data-theme="dark"] .member-card-popup { background: #1E1E2E; } [data-theme="dark"] .member-card-popup__close { background: rgba(255,255,255,0.08); color: #8B8BA7; } [data-theme="dark"] .member-card-popup__close:hover { background: rgba(255,255,255,0.14); } /* Responsive: member card on small screens */ @media (max-width: 380px) { .member-card { width: 250px; padding: 14px; } .member-card__avatar { width: 48px; height: 64px; font-size: 20px; } .member-card__info { gap: 10px; } .member-card__details { gap: 4px; } .member-card__org { font-size: 10px; } .member-card__id-value { font-size: 13px; } .member-card__name { font-size: 12px; } .member-card__join-value { font-size: 10px; } }