/* ============================================================ MODULE POLISH LAYER (User/Pegawai Frontend) Tujuan: konsistensi UI/UX, tipografi, spacing, badge, responsivitas, loading & empty state. Bersifat ADDITIF — tidak mengubah markup / logika bisnis. Dimuat PALING AKHIR agar dapat menyelaraskan komponen. ============================================================ */ :root{ --mp-radius: 18px; --mp-radius-lg: 24px; --mp-gap: 14px; --mp-pad: 18px; --mp-primary: #7c5cff; --mp-secondary: #00d1ff; --mp-success: #22c55e; --mp-warning: #f59e0b; --mp-danger: #ff4d6d; --mp-info: #3b82f6; --mp-text: #f4f7ff; --mp-muted: rgba(255,255,255,.6); --mp-border: rgba(255,255,255,.08); } /* ---------- 1. GLOBAL: cegah overflow horizontal ---------- */ html, body { max-width: 100%; overflow-x: hidden; } *, *::before, *::after { min-width: 0; } img, video, canvas, svg { max-width: 100%; height: auto; } /* ---------- 1b. GRID BACKGROUND (theme-aware, global) ---------- Pola kotak halus seperti referensi. Berlaku di seluruh halaman module (Izin, Cuti, Kunjungan, Overtime, Laporan, Setting, dst), untuk Dark & Light mode. Diterapkan langsung sebagai background-image pada agar selalu tampil di atas warna dasar (pseudo z-index:-1 akan tertutup oleh background body yang opaque). Halaman Home & Login punya grid sendiri (style inline) sehingga tidak terpengaruh. */ /* Pakai selektor html body agar menang spesifisitas atas light-theme.css yang memakai body.light-mode {background:...!important} */ html body{ background-color: #0a0e1a !important; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) !important; background-size: 46px 46px !important; background-position: center center !important; background-attachment: fixed !important; background-repeat: repeat !important; } html body.light-mode{ background-color: #eef2f7 !important; background-image: linear-gradient(rgba(15,23,42,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.10) 1px, transparent 1px) !important; background-size: 46px 46px !important; background-position: center center !important; background-attachment: fixed !important; background-repeat: repeat !important; } /* Pseudo-overlay light-theme.css (warna solid) dimatikan agar grid terlihat */ html body.light-mode::before, html body.light-mode::after{ background: transparent !important; opacity: 0 !important; } /* Buat container utama transparan agar grid body terlihat tembus di seluruh halaman module (Izin, Cuti, dst), Dark & Light. */ html body .main, html body .main.has-footer, html body .main .main-container, html body main.has-footer{ background: transparent !important; background-color: transparent !important; } /* ---------- 2. TIPOGRAFI YANG KONSISTEN ---------- */ body, .main, .card, .modal-content { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .main h1, .main h2, .main h3, .main h4, .main h5, .main h6 { line-height: 1.3; } .main p { line-height: 1.55; } small, .text-sm { line-height: 1.4; } /* ---------- 3. HEADING SECTION (subtitle) konsisten ---------- */ .subtitle { letter-spacing: .2px; } /* ---------- 4. CARD: ritme spacing & hover halus ---------- */ .main .card { transition: transform .25s ease, box-shadow .25s ease; } .main .card:hover { box-shadow: 0 12px 36px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06); } .main .card + .card { margin-top: var(--mp-gap); } /* List cards: spacing internal lebih lega & rata */ .postList .card .card-body, .load-izin .card .card-body, .load-cuty .card .card-body, .load-overtime .card .card-body, .load-histori .card .card-body, .load-kerja .card .card-body, .load-kunjungan .card .card-body { padding: 16px !important; } /* ---------- 5. BADGE: bentuk & ukuran seragam ---------- */ .badge { border-radius: 999px !important; padding: .32em .7em !important; font-size: .72rem !important; font-weight: 600 !important; letter-spacing: .2px; vertical-align: middle; } /* ---------- 6. TOMBOL: state disabled & fokus aksesibel ---------- */ .btn { transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .btn:active { transform: translateY(1px); } .btn:focus-visible, .form-control:focus-visible, a:focus-visible { outline: 2px solid rgba(0,209,255,.6) !important; outline-offset: 2px; } .btn:disabled, .btn.disabled { opacity: .55 !important; cursor: not-allowed !important; } /* ---------- 7. FORM: label & spacing seragam ---------- */ .form-group label:not(.custom-control-label) { color: var(--mp-muted); font-size: .85rem; margin-bottom: 6px; display: inline-block; } .input-group .form-control { min-height: 50px; } /* ---------- 8. TABEL: rapi & responsif ---------- */ .main .table-responsive { -webkit-overflow-scrolling: touch; } .main table.table th, .main table.table td { vertical-align: middle !important; padding: 10px 12px !important; } .main table.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; color: var(--mp-muted) !important; border-bottom: 1px solid var(--mp-border) !important; } /* ---------- 9. AVATAR / THUMBNAIL proporsional ---------- */ .imaged, .avatar img, .rounded.imaged { object-fit: cover; } /* ---------- 10. LOADING SPINNER (utility) ---------- */ .mp-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 36px 16px; width: 100%; color: var(--mp-muted); } .mp-spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--mp-secondary); animation: mp-spin .8s linear infinite; } @keyframes mp-spin { to { transform: rotate(360deg); } } /* Skeleton shimmer (utility) */ .mp-skeleton { position: relative; overflow: hidden; background: rgba(255,255,255,.05); border-radius: 12px; min-height: 16px; } .mp-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); transform: translateX(-100%); animation: mp-shimmer 1.3s infinite; } @keyframes mp-shimmer { 100% { transform: translateX(100%); } } /* ---------- 11. EMPTY STATE (utility) ---------- */ .mp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 40px 20px; color: var(--mp-muted); } .mp-empty .material-icons, .mp-empty i { font-size: 46px; opacity: .45; } .mp-empty h6 { color: var(--mp-text); margin: 6px 0 0; font-weight: 600; } .mp-empty p { font-size: .85rem; margin: 0; } /* ---------- 12. SCROLLBAR halus & konsisten ---------- */ .main *::-webkit-scrollbar { width: 6px; height: 6px; } .main *::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 20px; } .main *::-webkit-scrollbar-track { background: transparent; } /* ---------- 13. RESPONSIVE HARDENING ---------- */ /* Tablet & bawah: pastikan grid bootstrap tidak memicu overflow */ @media (max-width: 991px) { .main .row { margin-left: -8px; margin-right: -8px; } .main .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; } } /* Mobile: target sentuh nyaman & teks tidak terlalu kecil */ @media (max-width: 767px) { .main .btn { min-height: 46px; } .floating-action small { white-space: nowrap; } /* Stack kolom-kolom yang dipaksa inline agar tidak berdesakan */ .main .card .row.no-gutters > [class*="col-"] { min-width: 0; } /* Tabel lebar: beri petunjuk gulir & jaga radius */ .main .table-responsive { border-radius: 12px; } .main table.table th, .main table.table td { padding: 8px 10px !important; } /* Judul kartu/section jangan terpotong */ .subtitle, .floating-title { overflow: hidden; text-overflow: ellipsis; } } /* Mobile kecil: rapatkan sedikit, jaga keterbacaan */ @media (max-width: 380px) { .badge { font-size: .68rem !important; padding: .3em .6em !important; } .main table.table th, .main table.table td { padding: 7px 8px !important; } } /* ---------- 14. ANIMASI: hormati preferensi reduce-motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ---------- 15. LIGHT MODE: jaga keterbacaan utility baru ---------- */ body.light-mode .mp-loading, body.light-mode .mp-empty { color: rgba(0,0,0,.55); } body.light-mode .mp-empty h6 { color: rgba(0,0,0,.85); } body.light-mode .mp-skeleton { background: rgba(0,0,0,.06); } body.light-mode .mp-spinner { border-color: rgba(0,0,0,.12); border-top-color: var(--mp-primary); } /* ============================================================ X-ABSEN DESIGN SYSTEM v2 — 9router-inspired (sisi user) Token sentral senada dengan sisi admin (--ds-*) agar bahasa visual konsisten lintas aplikasi. Presentasi saja. ============================================================ */ :root{ --ds-radius-sm: 10px; --ds-radius: 14px; --ds-radius-lg: 18px; --ds-radius-xl: 22px; --ds-radius-pill: 999px; --ds-shadow-sm: 0 2px 8px rgba(0,0,0,.20); --ds-shadow: 0 8px 28px rgba(0,0,0,.30); --ds-shadow-lg: 0 18px 48px rgba(0,0,0,.40); --ds-ease: cubic-bezier(.4,0,.2,1); --ds-t-fast: .15s var(--ds-ease); --ds-t: .25s var(--ds-ease); --ds-accent: var(--mp-primary); --ds-accent-2: var(--mp-secondary); --ds-border: rgba(255,255,255,.08); --ds-surface: rgba(255,255,255,.03); --ds-surface-2: rgba(255,255,255,.06); } body.light-mode{ --ds-border: rgba(15,23,42,.08); --ds-surface: rgba(15,23,42,.02); --ds-surface-2: rgba(15,23,42,.05); --ds-shadow-sm: 0 2px 8px rgba(15,23,42,.06); --ds-shadow: 0 8px 28px rgba(15,23,42,.10); --ds-shadow-lg: 0 18px 48px rgba(15,23,42,.14); } /* Transisi tema halus pada permukaan utama */ body, .main, .card, .modal-content, .btn, .form-control, select, textarea, .badge{ transition: background-color var(--ds-t), border-color var(--ds-t), color var(--ds-t), box-shadow var(--ds-t), transform var(--ds-t-fast); } /* Button: radius & hover konsisten */ .main .btn{ border-radius: var(--ds-radius) !important; transition: transform var(--ds-t-fast), filter var(--ds-t), box-shadow var(--ds-t) !important; } .main .btn:not(:disabled):hover{ transform: translateY(-1px); filter: brightness(1.05); } .main .btn:not(:disabled):active{ transform: translateY(0) scale(.98); } /* Input focus ring konsisten */ .main .form-control:focus, .main select.form-control:focus, .main textarea.form-control:focus{ box-shadow: 0 0 0 3px rgba(124,92,255,.16) !important; border-color: var(--mp-primary) !important; } /* Badge pill konsisten */ .main .badge{ border-radius: var(--ds-radius-pill) !important; letter-spacing:.2px; } /* Skeleton reusable (selaras admin) */ .ds-skeleton{ position: relative; overflow: hidden; background: var(--ds-surface-2); border-radius: var(--ds-radius-sm); } .ds-skeleton::after{ content:""; position:absolute; inset:0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); animation: dsShimmer 1.3s infinite; } body.light-mode .ds-skeleton::after{ background: linear-gradient(90deg, transparent, rgba(15,23,42,.06), transparent); } @keyframes dsShimmer{ 100%{ transform: translateX(100%); } } /* Image fade-in reusable */ img.ds-fade{ opacity:0; transition: opacity .4s var(--ds-ease); } img.ds-fade.ds-loaded{ opacity:1; } /* Utility reusable */ .ds-elevate{ box-shadow: var(--ds-shadow) !important; } .ds-glass{ background: var(--ds-surface) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; border: 1px solid var(--ds-border) !important; border-radius: var(--ds-radius-lg) !important; } /* Scrollbar modern */ .main ::-webkit-scrollbar{ width: 9px; height: 9px; } .main ::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: var(--ds-radius-pill); border: 2px solid transparent; background-clip: padding-box; } body.light-mode .main ::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.18); background-clip: padding-box; } /* ============================================================ FASE 5 — MODAL & DROPDOWN (sisi user) 9router-style ============================================================ */ .modal-content{ border-radius: var(--ds-radius-xl) !important; box-shadow: var(--ds-shadow-lg) !important; } .modal.fade .modal-dialog{ transition: transform var(--ds-t), opacity var(--ds-t) !important; transform: translateY(8px) scale(.98); } .modal.show .modal-dialog{ transform: none; } .modal-dialog{ display: flex; align-items: center; min-height: calc(100% - 1rem); } .dropdown-menu{ border-radius: var(--ds-radius) !important; box-shadow: var(--ds-shadow) !important; border: 1px solid var(--ds-border) !important; padding: 6px !important; } .dropdown-menu .dropdown-item{ border-radius: var(--ds-radius-sm) !important; transition: background var(--ds-t-fast) !important; } /* ============================================================ FASE 6 — HOME / ABSEN (kartu & quick action lebih modular) ============================================================ */ .main .card{ border-radius: var(--ds-radius-xl) !important; } .main .card .card-body{ border-radius: inherit; } /* Tombol aksi mengambang / FAB konsisten */ .btn-floating, .floating-action .btn{ border-radius: var(--ds-radius-pill) !important; box-shadow: var(--ds-shadow) !important; transition: transform var(--ds-t-fast), box-shadow var(--ds-t) !important; } .btn-floating:hover, .floating-action .btn:hover{ transform: translateY(-2px) scale(1.03); } /* ============================================================ FASE 7 — CHAT (bubble & input lebih modern) ============================================================ */ .chatbox{ border-radius: var(--ds-radius-xl) !important; box-shadow: var(--ds-shadow-lg) !important; } .chatbox .chat-messages .message .bubble{ border-radius: var(--ds-radius-lg) !important; box-shadow: var(--ds-shadow-sm); } .chatbox .chat-messages .message.right .bubble{ border-bottom-right-radius: 6px !important; } .chatbox .chat-messages .message.left .bubble{ border-bottom-left-radius: 6px !important; } .chatbox .form-add-chat .chat-input-msg{ border-radius: var(--ds-radius-pill) !important; } .chatbox .form-add-chat .button{ border-radius: var(--ds-radius-pill) !important; transition: transform var(--ds-t-fast) !important; } .chatbox .form-add-chat .button:hover{ transform: scale(1.06); } .chatbox .friend ul li{ border-radius: var(--ds-radius) !important; transition: background var(--ds-t-fast) !important; } /* ============================================================ FASE 8 — BLOG & ARTIKEL (kartu, chip kategori, thumbnail) ============================================================ */ .blog-card{ border-radius: var(--ds-radius-lg) !important; overflow: hidden; } .blog-card .card-body.h-150{ border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0; } .blog-cat-badge{ border-radius: var(--ds-radius-pill) !important; } .blog-card .blog-card-title{ transition: color var(--ds-t-fast); } .blog-card:hover .blog-card-title{ color: var(--mp-secondary) !important; } /* ============================================================ FASE 9 — LOGIN / REGISTER (kartu auth + input) ============================================================ */ .login-card, .auth-card, .signup-card, .forgot-card{ border-radius: var(--ds-radius-xl) !important; box-shadow: var(--ds-shadow-lg) !important; } .login-logo img, .auth-logo img{ transition: transform var(--ds-t); } .login-logo img:hover, .auth-logo img:hover{ transform: scale(1.04); } /* ============================================================ THEME TOKENS — Semantic color system (sisi user) Sumber kebenaran tunggal warna agar Dark/Light konsisten & mudah dirawat. Selaras dgn token sisi admin (--c-*). Komponen baru cukup memakai var(--c-*) tanpa override .light-mode. ============================================================ */ :root{ --c-bg: #0a0e1a; --c-surface: rgba(255,255,255,.04); --c-surface-2: rgba(255,255,255,.07); --c-border: rgba(255,255,255,.08); --c-border-2: rgba(255,255,255,.14); --c-text: #f4f7ff; --c-text-2: rgba(255,255,255,.78); --c-muted: rgba(255,255,255,.6); --c-faint: rgba(255,255,255,.4); --c-primary: #7c5cff; --c-primary-ink: #ffffff; --c-secondary: #00d1ff; --c-success: #22c55e; --c-warning: #f59e0b; --c-danger: #ff4d6d; --c-info: #3b82f6; --c-primary-soft: rgba(124,92,255,.14); --c-success-soft: rgba(34,197,94,.14); --c-warning-soft: rgba(245,158,11,.14); --c-danger-soft: rgba(255,77,109,.14); --c-ring: rgba(124,92,255,.3); } body.light-mode{ --c-bg: #f0f4f8; --c-surface: rgba(15,23,42,.02); --c-surface-2: rgba(15,23,42,.05); --c-border: rgba(15,23,42,.08); --c-border-2: rgba(15,23,42,.14); --c-text: #0f172a; --c-text-2: #334155; --c-muted: #64748b; --c-faint: #94a3b8; --c-primary: #5b4cff; --c-secondary: #0891b2; --c-success: #16a34a; --c-warning: #d97706; --c-danger: #e11d48; --c-info: #2563eb; --c-primary-soft: rgba(91,76,255,.1); --c-success-soft: rgba(22,163,74,.1); --c-warning-soft: rgba(217,119,6,.1); --c-danger-soft: rgba(225,29,72,.1); --c-ring: rgba(91,76,255,.25); } /* Utility class berbasis token (sisi user) */ .u-surface{ background: var(--c-surface) !important; border:1px solid var(--c-border) !important; } .u-text{ color: var(--c-text) !important; } .u-muted{ color: var(--c-muted) !important; } .u-border{ border-color: var(--c-border) !important; } .u-primary{ color: var(--c-primary) !important; } .u-bg-primary-soft{ background: var(--c-primary-soft) !important; } .u-bg-success-soft{ background: var(--c-success-soft) !important; } .u-bg-warning-soft{ background: var(--c-warning-soft) !important; } .u-bg-danger-soft{ background: var(--c-danger-soft) !important; } .badge-token-success{ background: var(--c-success-soft) !important; color: var(--c-success) !important; } .badge-token-warning{ background: var(--c-warning-soft) !important; color: var(--c-warning) !important; } .badge-token-danger{ background: var(--c-danger-soft) !important; color: var(--c-danger) !important; } .badge-token-primary{ background: var(--c-primary-soft) !important; color: var(--c-primary) !important; } /* ============================================================ REKAP CARD — komponen daftar standar (acuan: Rekap Absensi) Dipakai konsisten di Izin, Cuti, Kunjungan, Overtime, Laporan Kerja. Token-based → konsisten Dark/Light. ============================================================ */ .rk-card{ position:relative; display:flex; background:var(--c-surface); border:1px solid var(--c-border); border-radius:18px; overflow:hidden; margin-bottom:12px; transition:transform .25s var(--ds-ease), box-shadow .25s var(--ds-ease), border-color .25s var(--ds-ease); } .rk-card:hover{ transform:translateY(-3px); box-shadow:var(--ds-shadow); border-color:var(--c-primary); } /* ---- Section header standar: ikon + judul + deskripsi ---- */ .rk-section{ display:flex; align-items:center; gap:12px; margin-bottom:14px; } .rk-section-ico{ width:42px; height:42px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--c-primary-soft); } .rk-section-ico .material-icons{ font-size:22px; color:var(--c-primary); } .rk-section-text{ min-width:0; } .rk-section-text h6{ margin:0; font-size:.95rem; font-weight:700; line-height:1.3; color:var(--c-text); } .rk-section-text p{ margin:2px 0 0; font-size:.78rem; line-height:1.4; color:var(--c-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; } .rk-accent{ width:4px; flex-shrink:0; background:var(--c-primary); } .rk-card.ac-green .rk-accent{ background:#22c55e; } .rk-card.ac-red .rk-accent{ background:#ef4444; } .rk-card.ac-orange .rk-accent{ background:#f59e0b; } .rk-card.ac-blue .rk-accent{ background:#3b82f6; } .rk-card.ac-purple .rk-accent{ background:#7c5cff; } .rk-card.ac-cyan .rk-accent{ background:#00b8d9; } .rk-body{ flex:1; min-width:0; padding:14px 16px; } .rk-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; } .rk-head{ display:flex; align-items:center; gap:10px; min-width:0; } .rk-ico{ width:38px; height:38px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--c-surface-2); } .rk-ico .material-icons{ font-size:20px; color:var(--c-primary); } .rk-card.ac-green .rk-ico .material-icons{ color:#22c55e; } .rk-card.ac-red .rk-ico .material-icons{ color:#ef4444; } .rk-card.ac-orange .rk-ico .material-icons{ color:#f59e0b; } .rk-card.ac-blue .rk-ico .material-icons{ color:#3b82f6; } .rk-card.ac-purple .rk-ico .material-icons{ color:#7c5cff; } .rk-card.ac-cyan .rk-ico .material-icons{ color:#00b8d9; } .rk-title{ min-width:0; } .rk-title strong{ display:block; font-size:.86rem; color:var(--c-text); font-weight:700; line-height:1.25; } .rk-title small{ font-size:.68rem; color:var(--c-muted); } .rk-badge{ font-size:.66rem; font-weight:700; letter-spacing:.2px; padding:5px 10px; border-radius:999px; white-space:nowrap; flex-shrink:0; } .rk-badge.b-green{ background:rgba(34,197,94,.14); color:#22c55e; } .rk-badge.b-red{ background:rgba(239,68,68,.14); color:#ef4444; } .rk-badge.b-orange{ background:rgba(245,158,11,.16); color:#f59e0b; } .rk-badge.b-blue{ background:rgba(59,130,246,.16); color:#3b82f6; } .rk-badge.b-purple{ background:rgba(124,92,255,.14); color:#7c5cff; } .rk-badge.b-muted{ background:var(--c-surface-2); color:var(--c-muted); } /* baris info key→value */ .rk-rows{ display:flex; flex-wrap:wrap; gap:8px 16px; } .rk-row{ min-width:0; } .rk-row small{ display:block; font-size:.62rem; color:var(--c-muted); letter-spacing:.3px; text-transform:uppercase; } .rk-row strong{ font-size:.84rem; color:var(--c-text); font-weight:600; } .rk-note{ font-size:.8rem; color:var(--c-text-2); line-height:1.55; margin:10px 0 0; } .rk-note.empty{ color:var(--c-faint); font-style:italic; } /* aksi (collapse / inline) */ .rk-expand{ width:36px; height:36px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:11px; cursor:pointer; background:var(--c-surface-2); border:1px solid var(--c-border); color:var(--c-muted); transition:all .2s ease; } .rk-expand:hover{ color:var(--c-primary); border-color:var(--c-primary); } .rk-expand .material-icons{ font-size:20px; transition:transform .25s ease; } .rk-expand[aria-expanded="true"] .material-icons{ transform:rotate(180deg); } .rk-detail{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--c-border); } .rk-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; } .rk-act{ display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:600; padding:7px 12px; border-radius:10px; border:1px solid var(--c-border); background:var(--c-surface-2); color:var(--c-text-2); text-decoration:none !important; cursor:pointer; transition:all .2s ease; } .rk-act:hover{ transform:translateY(-1px); border-color:var(--c-primary); color:var(--c-text); } .rk-act .material-icons,.rk-act i{ font-size:15px; } /* empty state daftar */ .rk-empty{ text-align:center; padding:44px 20px; color:var(--c-muted); } .rk-empty .material-icons{ font-size:50px; opacity:.35; display:block; margin-bottom:10px; } .rk-empty p{ font-size:.88rem; margin:0; } /* tombol load more standar */ .rk-loadmore{ display:inline-flex; align-items:center; gap:6px; border-radius:14px !important; padding:10px 24px !important; font-size:.84rem; font-weight:600; background:var(--c-surface-2) !important; color:var(--c-text) !important; border:1px solid var(--c-border) !important; transition:all .2s ease; } .rk-loadmore:hover{ border-color:var(--c-primary) !important; transform:translateY(-1px); } /* ============================================================ FILTER PERIODE — komponen filter standar (acuan: Rekap Absensi) ============================================================ */ .rk-filter{ background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--ds-radius-xl,22px); box-shadow:var(--ds-shadow-sm); padding:16px; margin-bottom:18px; } .rk-filter-head{ display:flex; align-items:center; gap:8px; margin-bottom:14px; } .rk-filter-head .material-icons{ font-size:18px; color:var(--c-primary); } .rk-filter-head strong{ font-size:.9rem; color:var(--c-text); font-weight:700; } .rk-filter-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .rk-field label{ display:block; font-size:.7rem; font-weight:600; letter-spacing:.3px; text-transform:uppercase; color:var(--c-muted); margin-bottom:6px; } .rk-field-input{ position:relative; display:flex; align-items:center; } .rk-field-input .form-control{ width:100%; min-height:46px; font-size:.84rem !important; padding:10px 40px 10px 14px !important; border-radius:14px !important; border:1px solid var(--c-border) !important; background:var(--c-surface-2) !important; color:var(--c-text) !important; transition:border-color .2s ease, box-shadow .2s ease; } .rk-field-input .form-control:focus{ border-color:var(--c-primary) !important; box-shadow:0 0 0 3px var(--c-ring) !important; } .rk-field-input .material-icons{ position:absolute; right:12px; font-size:18px; color:var(--c-primary); pointer-events:none; }