:root{--green:#61c554;--yellow:#f59e0b;--grey:#e3e3e3;--blue:#3b82f6;--red:#ef4444;--card-radius:10px;--border-card:1px solid #e3e3e3;--masuk:#13a100;--belum-absen:#8b8a8d;--telat:#f5c54d;--izin:#dc2626;--cuti:#1d4ed8;--accent:#1a56db;--accent-light:#eff4ff;--bg-page:#e8edf5;--bg-sheet:#ffffff;--bg-overlay:rgba(15, 23, 42, 0.45);--text-primary:#111827;--text-secondary:#4b5563;--text-muted:#9ca3af;--border:#f0f0f0;--radius-sheet:24px;--radius-chip:999px;--shadow-sheet:0 -8px 40px rgba(0, 0, 0, 0.12);--bg-card:#f6f8fa}.header-section{display:flex;justify-content:space-between;align-items:center;margin-top:20px;margin-bottom:20px;padding:0 27px}.header-section .header-title{font-weight:500;line-height:100%;letter-spacing:0;color:var(--text-primary)}.header-section .date-combobox{position:relative;display:inline-block;user-select:none}.header-section .date-trigger{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid #000;border-radius:4px;padding:9px 14px;font-family:"DM Sans",sans-serif;font-size:14px;font-weight:500;color:#1a1a2e;cursor:pointer;white-space:nowrap;transition:border-color .2s,box-shadow .2s;min-width:200px}.header-section .date-trigger:hover{border-color:#4f7df3;box-shadow:0 2px 8px rgba(79,125,243,.12)}.header-section .date-trigger.open{border-color:#4f7df3;box-shadow:0 0 0 3px rgba(79,125,243,.15)}.header-section .trigger-label{color:#1a1d23;font-weight:500}.header-section .trigger-value{font-weight:700;color:#1a1d23;flex:1}.header-section .trigger-arrow{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:#7c8499;transition:transform .25s cubic-bezier(.4,0,.2,1)}.header-section .date-trigger.open .trigger-arrow{transform:rotate(180deg)}.header-section .date-dropdown{display:none;position:absolute;top:calc(16% + 8px);right:16px;left:auto;background:#fff;border:1.5px solid #e2e6ea;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.12);width:300px;z-index:9999;overflow:hidden;animation:dropIn .2s cubic-bezier(.4,0,.2,1)}@keyframes dropIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.header-section .cal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid #f0f2f5}.header-section .cal-nav{background:0 0;border:none;cursor:pointer;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#7c8499;transition:background .15s,color .15s;font-size:15px}.header-section .cal-nav:hover{background:#f0f4ff;color:#4f7df3}.header-section .cal-month-year{font-size:14px;font-weight:600;color:#1a1a2e;cursor:pointer;padding:4px 10px;border-radius:8px;transition:background .15s}.header-section .cal-month-year:hover{background:#f0f4ff;color:#4f7df3}.header-section .cal-days-label{display:grid;grid-template-columns:repeat(7,1fr);padding:8px 12px 4px;gap:2px}.header-section .day-label{text-align:center;font-size:11px;font-weight:600;color:#b0b8cc;text-transform:uppercase;letter-spacing:.04em}.header-section .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);padding:4px 12px 12px;gap:2px}.header-section .cal-day{text-align:center;padding:7px 0;font-size:13px;font-weight:500;color:#374151;border-radius:8px;cursor:pointer;transition:background .12s,color .12s;line-height:1}.header-section .cal-day:hover:not(.empty):not(.selected):not(.other-month){background:#eef2ff;color:#4f7df3}.header-section .cal-day.today:not(.selected){color:#4f7df3;font-weight:700;background:#f0f4ff}.header-section .cal-day.selected{background:#4f7df3;color:#fff;font-weight:600;box-shadow:0 2px 6px rgba(79,125,243,.35)}.header-section .cal-day.other-month{color:#c8cdd8;cursor:default}.header-section .cal-presets{border-top:1px solid #f0f2f5;padding:10px 12px;display:flex;flex-wrap:wrap;gap:6px}.header-section .preset-btn{font-family:"DM Sans",sans-serif;font-size:12px;font-weight:500;padding:5px 11px;border:1.5px solid #e2e6ea;border-radius:20px;background:#fff;color:#4a5568;cursor:pointer;transition:all .15s}.header-section .preset-btn.active,.header-section .preset-btn:hover{background:#4f7df3;border-color:#4f7df3;color:#fff}.section-content{padding:0 12px}.section-content .card{border-radius:var(--card-radius)!important;border:var(--border-card)}.section-content .card-title{font-weight:600;font-size:14px!important;line-height:18px;letter-spacing:0}.section-content .stat-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}.section-content .stat-label{font-weight:400;font-size:12.8px!important;line-height:18px;letter-spacing:0;color:#1a1d23}.section-content .stat-pct{font-size:12.8px;font-weight:700;color:#1e293b;min-width:36px;text-align:right}.section-content .seg-bar{display:flex;gap:3px;align-items:center}.section-content .seg-bar .seg{width:18px;height:8px;background:var(--grey);transition:background .2s}.section-content .seg-bar .seg.filled-green{background:var(--green)}.section-content .table thead th{font-weight:400;font-size:12.8px;leading-trim:NONE;line-height:18px;letter-spacing:0;vertical-align:middle;color:#6b6c6e}.section-content .table tbody td{font-weight:400;font-size:12.8px;leading-trim:NONE;line-height:18px;letter-spacing:0;vertical-align:middle;color:#1a1a2e}.section-content .table tbody tr:hover{background:#f8fafc}.section-content .table .avatar{width:26px;height:26px;border-radius:50%;background:#e2e8f0;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:#64748b;flex-shrink:0}.section-content .table .badge-pill{font-weight:400;height:26px;width:fit-content;display:flex;align-items:center;gap:8px;border-radius:2px;background-color:#fff;border-width:1px;border-style:solid;padding:4px;padding-bottom:0}.section-content .table .badge-pill::before{content:"";width:10px;height:10px;transform:translateY(-2px);border-radius:50%;flex-shrink:0;display:inline-block}.section-content .table .badge-hadir{border-color:var(--masuk);color:var(--masuk)}.section-content .table .badge-hadir::before{background:var(--masuk)}.section-content .table .badge-telat{border-color:var(--telat);color:var(--telat)}.section-content .table .badge-telat::before{background:var(--telat)}.section-content .table .badge-pending{border-color:var(--belum-absen);color:var(--belum-absen)}.section-content .table .badge-pending::before{background:var(--belum-absen)}.section-content .table .badge-absen{border-color:var(--izin);color:var(--izin)}.section-content .table .badge-absen::before{background:var(--izin)}.section-content .table .badge-cuti{border-color:var(--cuti);color:var(--cuti)}.section-content .table .badge-cuti::before{background:var(--cuti)}.section-content .table .btn-action{width:22px;height:22px;border-radius:4px;border:1px solid #e3e3e3;background:#fff;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:all .15s;cursor:pointer}.section-content .btn-action:hover{border-color:#3b82f6;background:#eff6ff}.section-content .card-header-main .search-wrap{position:relative}.section-content .card-header-main .search-wrap .form-control{padding-left:2.2rem;border-radius:8px;border:1px solid #8b8a8d;font-size:.83rem;height:36px}.section-content .card-header-main .search-wrap .search-icon{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:.85rem}.section-content .card-header-main .filter-select{height:36px;padding:0 .75rem}.section-content .card-header-main .selectize-control{display:inline-block!important;min-width:180px!important}.section-content .card-header-main .selectize-control.single .selectize-input{border-radius:4px!important;border:1px solid #8b8a8d!important;font-size:.83rem!important;min-height:36px!important;height:36px!important;min-width:180px!important;padding:0 2rem 0 .75rem!important;color:#334155!important;background:#fff!important;box-shadow:none!important;display:flex!important;align-items:center!important;cursor:pointer!important;line-height:36px!important}.section-content .card-header-main .selectize-control.single .selectize-input::after{content:""!important;display:block!important;position:absolute!important;right:10px!important;top:50%!important;transform:translateY(-30%)!important;width:0!important;height:0!important;border-left:4px solid transparent!important;border-right:4px solid transparent!important;border-top:5px solid #334155!important;margin-top:0!important}.section-content .card-header-main .selectize-control.single .selectize-input input{color:#334155!important;font-size:.83rem!important;margin:0!important;padding:0!important;height:100%!important;line-height:36px!important}.section-content .card-header-main .selectize-dropdown{border-radius:4px!important;border:1px solid #8b8a8d!important;font-size:.83rem!important;color:#334155!important;background:#fff!important;box-shadow:0 4px 8px rgba(0,0,0,.08)!important;margin-top:2px!important}.section-content .card-header-main .selectize-dropdown .option{padding:8px .75rem!important;color:#334155!important;font-size:.83rem!important}.section-content .card-header-main .selectize-dropdown .option.active,.section-content .card-header-main .selectize-dropdown .option:hover{background-color:#f1f5f9!important;color:#334155!important}.section-content .card-header-main .selectize-dropdown .option.selected{background-color:#e2e8f0!important}.section-content .card-header-main{padding:1.15rem 1.5rem .5rem;background:0 0;border-bottom:none}.section-content .card-header-main .section-title{font-weight:600;leading-trim:NONE;line-height:18px;letter-spacing:0;vertical-align:middle}.section-content .card-header-main #btn-refresh{width:36px;height:36px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;color:#64748b;font-size:.9rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}.section-content .card-header-main #btn-refresh:hover{border-color:#3b82f6;background-color:#eff6ff}.section-content .card-header-main #btn-refresh:disabled{opacity:.5;cursor:not-allowed}.section-content .skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:6px}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.section-content .skeleton-row td{padding-top:.85rem;padding-bottom:.85rem}.section-content .skel-box{height:14px;border-radius:6px}.section-content .skel-avatar{width:26px;height:26px;border-radius:50%}.section-content .skel-badge{height:22px;width:60px;border-radius:99px}.section-content .card-footer-main{padding:.85rem 1.5rem;border-top:1px solid #f1f5f9;background:0 0;display:flex;align-items:center;justify-content:space-between}.section-content .page-info{font-size:.78rem;color:#94a3b8}.section-content .page-info strong{color:#334155}#pagination-container{margin:0}#pagination-container .pagination{margin:0;gap:3px}#pagination-container .page-item .page-link{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px!important;border:1px solid #e2e8f0;font-size:.78rem;font-weight:600;color:#64748b;padding:0;line-height:1;transition:all .15s}#pagination-container .page-item .page-link:hover{background:#eff6ff;border-color:#3b82f6;color:#3b82f6}#pagination-container .page-item.active .page-link{background:#3b82f6;border-color:#3b82f6;color:#fff}#pagination-container .page-item.disabled .page-link{background:#f8fafc;color:#cbd5e1;border-color:#f1f5f9}.sb-overlay{position:fixed;inset:0;background:var(--bg-overlay);opacity:0!important;pointer-events:none;transition:opacity .3s ease;z-index:100}.sb-overlay.open{opacity:1!important;pointer-events:all}.sb-sheet{position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);width:calc(100% - 80px);max-width:680px;background:var(--bg-sheet);border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;box-shadow:var(--shadow-sheet);z-index:101;transition:transform .38s cubic-bezier(.32,.72,0,1);max-height:88vh;display:flex;flex-direction:column;overflow:hidden}.sb-sheet.open{transform:translateX(-50%) translateY(0)}.sb-sheet .sb-sheet-handle{flex-shrink:0;display:flex;justify-content:center;padding:12px 0 4px;cursor:grab}.sb-sheet .sb-sheet-handle span{width:36px;height:4px;background:#d1d5db;border-radius:999px}.sb-sheet .sb-sheet-body{overflow-y:auto;padding:0 20px 32px;flex:1}.sb-sheet .sb-sheet-body::-webkit-scrollbar{width:4px}.sb-sheet .sb-sheet-body::-webkit-scrollbar-track{background:0 0}.sb-sheet .sb-sheet-body::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:999px}.sb-sheet .sb-sheet-body::-webkit-scrollbar-thumb:hover{background:#9ca3af}.sb-sheet .sb-sheet-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 0 20px}.sb-sheet .sb-sheet-org{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}.sb-sheet .sb-sheet-title{font-size:17px;font-weight:600;color:var(--accent);margin-top:3px;letter-spacing:-.2px}.sb-sheet .date-range-section{padding:12px 0 16px}.sb-sheet .date-range-box{display:inline-flex;align-items:center;gap:6px;background:#f0f4ff;border:1px solid #c7d2fe;border-radius:8px;padding:6px 12px}.sb-sheet .date-range-box .form-group{position:relative;display:flex;align-items:center;gap:6px;margin:0}.sb-sheet .date-range-box .form-control{border:none;background:0 0;font-size:13px;font-weight:500;color:#374151;outline:0;cursor:pointer;padding:0;width:90px;box-shadow:none}.sb-sheet .date-range-box .form-control:focus{box-shadow:none;border:none}.sb-sheet .date-range-box svg{flex-shrink:0;color:#6b7280}.sb-sheet .datepicker-custom{position:absolute;top:100%;left:0;z-index:999}.sb-sheet .date-sep{font-size:13px;color:#9ca3af;padding:0 2px}.sb-sheet .range-info{font-size:12px;color:#6b7280;margin-top:6px;padding-left:2px}.sb-sheet .sb-date-error{font-size:11.5px;color:#dc2626;margin-top:5px;padding-left:2px;display:flex;align-items:center;gap:4px}.sb-sheet .sb-date-error::before{content:"";display:inline-block;width:13px;height:13px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.2' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") no-repeat center/contain;flex-shrink:0}.datepicker{font-size:13px}.datepicker table tr td span.active,.datepicker table tr td.active,.datepicker table tr td.active:hover{background:#3b5fc0!important;border-color:#3b5fc0!important}.datepicker table tr td:hover{background:#e0e7ff}.sb-sheet .datepicker-dropdown{border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.12);border:1px solid #e5e7eb;left:15px!important;top:300px!important}.sb-sheet .sb-close-btn{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:none;background:#f3f4f6;color:#6b7280;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;margin-top:2px}.sb-sheet .sb-close-btn:hover{background:#e5e7eb;color:#111}.sb-sheet .sb-section-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}.sb-sheet .sb-identity-card{background:#f9fafb;border-radius:14px;overflow:hidden;margin-bottom:20px}.sb-sheet .sb-id-row{display:flex;align-items:baseline;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border)}.sb-sheet .sb-id-row:last-child{border-bottom:none}.sb-sheet .sb-id-key{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);width:120px;flex-shrink:0}.sb-sheet .sb-id-val{font-size:13px;font-weight:500;color:var(--text-primary);line-height:1.45}.sb-sheet .sb-id-val.mono{font-family:"DM Mono",monospace;font-size:12.5px;color:var(--accent)}.sb-sheet .sb-id-val.chip{display:inline-flex;align-items:center;gap:4px;background:var(--accent-light);color:var(--accent);padding:3px 9px;border-radius:var(--radius-chip);font-size:12px;font-weight:600}.sb-sheet .sb-att-grid{display:flex;justify-content:space-between;margin-bottom:18px}.sb-sheet .sb-att-cell{background:#f9fafb;border-radius:12px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:6px;transition:background .15s;flex:1}.sb-sheet .sb-att-cell:hover{background:var(--accent-light)}.sb-sheet .sb-att-key{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.sb-sheet .sb-att-num{font-family:"DM Mono",monospace;font-size:20px;font-weight:400;color:#d1d5db;line-height:1}.sb-sheet .sb-att-num.nonzero{color:var(--text-primary)}.sb-sheet .sb-sheet-handle{touch-action:none}.sb-sheet .sb-table-wrap{border-radius:14px;overflow:hidden;border:1px solid var(--border)}.sb-sheet .sb-table{width:100%;border-collapse:collapse;table-layout:fixed}.sb-sheet .sb-table thead tr{background:var(--bg-card)}.sb-sheet .sb-table thead th{font-size:9.5px!important;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);padding:9px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}.sb-sheet .sb-table tbody tr{border-bottom:1px solid var(--border);transition:background .12s}.sb-sheet .sb-table tbody tr:last-child{border-bottom:none}.sb-sheet .sb-table tbody tr:hover{background:#f9fafb}.sb-sheet .sb-table tbody td{padding:9px 12px;vertical-align:middle;font-size:11px!important}.sb-sheet .sb-table tbody td.date{font-family:"DM Mono",monospace;font-size:11px;color:var(--text-primary);font-weight:500}.sb-sheet .sb-table tbody td.mono{font-family:"DM Mono",monospace;font-size:11.5px;color:var(--text-muted)}.sb-sheet .sb-table tbody td.sb-keterangan{font-weight:600;white-space:nowrap}.sb-sheet .sb-table tbody td.sb-keterangan.ket-masuk{color:#1d4ed8}.sb-sheet .sb-table tbody td.sb-keterangan.ket-telat{color:#854d0e}.sb-sheet .sb-table tbody td.sb-keterangan.ket-sakit{color:#9d174d}.sb-sheet .sb-table tbody td.sb-keterangan.ket-izin{color:#9a3412}.sb-sheet .sb-table tbody td.sb-keterangan.ket-cuti{color:#15803d}.sb-sheet .sb-table tbody td.sb-keterangan.ket-alpha{color:#991b1b}.sb-sheet .sb-table .sb-state-row td{text-align:center;padding:24px 12px!important;color:var(--text-muted);font-size:12px}.sb-sheet .sb-table .sb-state-row .state-icon{display:block;margin:0 auto 8px;opacity:.35}.sb-sheet .sb-table .sb-state-row.error-row td{color:#dc2626}.sb-sheet .sb-table .sb-retry-btn{margin-top:8px;display:inline-flex;align-items:center;gap:5px;background:#fee2e2;color:#dc2626;border:none;border-radius:8px;padding:5px 12px;font-family:"Plus Jakarta Sans",sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:background .15s}.sb-sheet .sb-table .sb-retry-btn:hover{background:#fecaca}@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}.sb-sheet .skel{display:inline-block;height:10px;border-radius:6px;background:linear-gradient(90deg,#e5e7eb 25%,#f3f4f6 50%,#e5e7eb 75%);background-size:800px 100%;animation:shimmer 1.4s infinite}.sb-sheet .skel-sm{width:64px}.sb-sheet .skel-md{width:90px}.sb-sheet .skel-lg{width:120px}.sb-sheet .skel-badge{width:56px;height:18px;border-radius:999px}.sb-sheet .sb-retry-btn{margin-top:8px;display:inline-flex;align-items:center;gap:5px;background:#fee2e2;color:#dc2626;border:none;border-radius:8px;padding:5px 12px;font-family:"Plus Jakarta Sans",sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:background .15s}.sb-sheet .sb-retry-btn:hover{background:#fecaca}.sb-sheet .sb-pagination{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:8px}.sb-sheet .sb-page-info{font-size:11px;color:var(--text-muted);font-weight:500;white-space:nowrap;flex-shrink:0}.sb-sheet .sb-page-info span{font-weight:700;color:var(--text-primary)}.sb-sheet #sb-page-btns{margin:0}.sb-sheet #sb-page-btns .pagination{margin:0;display:flex;gap:3px;list-style:none;padding:0;flex-wrap:nowrap;align-items:center}.sb-sheet #sb-page-btns .pagination li a,.sb-sheet #sb-page-btns .pagination li span{display:flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 6px;border-radius:7px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-family:"Plus Jakarta Sans",sans-serif;font-size:11.5px;font-weight:600;cursor:pointer;text-decoration:none;transition:background .12s,border-color .12s,color .12s;line-height:1;white-space:nowrap}.sb-sheet #sb-page-btns .pagination li:not(.active):not(.disabled) a:hover{background:var(--accent-light);border-color:#b5d4f4;color:var(--accent)}.sb-sheet #sb-page-btns .pagination li.active a,.sb-sheet #sb-page-btns .pagination li.active span{background:var(--accent);border-color:var(--accent);color:#fff;cursor:default}.sb-sheet #sb-page-btns .pagination li.disabled a,.sb-sheet #sb-page-btns .pagination li.disabled span{opacity:.3;cursor:not-allowed;pointer-events:none}#sb-sheet-foto #preview-foto-absensi{display:flex;flex:1;justify-content:center}#sb-sheet-foto #preview-foto-absensi img{max-width:100%;max-height:100%;object-fit:contain;object-position:center;border-radius:12px}