@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #0a0f0d;--bg-secondary: #111a16;--bg-card: #141e19;--bg-input: #1a2620;--bg-sidebar: #0d1411;--bg-sidebar-hover: rgba(34, 197, 94, .08);--bg-sidebar-active: rgba(34, 197, 94, .15);--border: #1e2e25;--border-strong: #2a3d32;--border-focus: #22c55e;--text-primary: #e8f5ec;--text-secondary: #9cb8a5;--text-muted: #5a7464;--text-sidebar: #7a9d88;--text-sidebar-active: #e8f5ec;--accent: #22c55e;--accent-hover: #16a34a;--accent-subtle: rgba(34, 197, 94, .1);--success: #22c55e;--success-bg: rgba(34, 197, 94, .12);--warning: #f59e0b;--warning-bg: rgba(245, 158, 11, .12);--danger: #ef4444;--danger-hover: #f87171;--danger-bg: rgba(239, 68, 68, .12);--radius: 10px;--radius-sm: 8px;--shadow: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.4);--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.3);--transition: .15s ease;--sidebar-width: 250px;--sidebar-collapsed: 64px;--header-height: 60px}html{font-size:16px}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.layout{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);background:var(--bg-sidebar);display:flex;flex-direction:column;transition:width var(--transition);position:fixed;top:0;left:0;bottom:0;z-index:100;overflow:hidden}.sidebar.collapsed{width:var(--sidebar-collapsed)}.sidebar-brand{display:flex;align-items:center;gap:.75rem;padding:1.125rem 1rem;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}.brand-icon{width:34px;height:34px;background:var(--accent);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.brand-text{font-size:1.0625rem;font-weight:700;letter-spacing:.04em;color:#fff;white-space:nowrap}.sidebar-nav{flex:1;overflow-y:auto;padding:.75rem 0}.nav-section{margin-bottom:1.25rem}.nav-section-label{padding:0 1rem;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#94a3b899;margin-bottom:.375rem}.nav-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .875rem;margin:0 .5rem;border-radius:var(--radius-sm);color:var(--text-sidebar);text-decoration:none;font-size:.8125rem;font-weight:500;transition:all var(--transition);cursor:pointer}.nav-item:hover{background:var(--bg-sidebar-hover);color:var(--text-sidebar-active)}.nav-item.active{background:var(--bg-sidebar-active);color:#fff}.nav-item.disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.nav-icon{width:18px;height:18px;flex-shrink:0}.nav-icon svg{width:100%;height:100%}.nav-label{white-space:nowrap;flex:1}.nav-badge{font-size:.625rem;font-weight:600;padding:.125rem .5rem;background:#ffffff1a;border-radius:9999px;color:#94a3b8cc}.sidebar-toggle{display:flex;align-items:center;justify-content:center;width:100%;padding:.75rem;background:transparent;border:none;border-top:1px solid rgba(255,255,255,.08);color:#94a3b899;cursor:pointer;transition:all var(--transition);flex-shrink:0}.sidebar-toggle:hover{color:var(--text-sidebar-active);background:var(--bg-sidebar-hover)}.layout-main{flex:1;margin-left:var(--sidebar-width);transition:margin-left var(--transition);display:flex;flex-direction:column;min-width:0}.sidebar.collapsed~.layout-main{margin-left:var(--sidebar-collapsed)}.top-header{height:var(--header-height);display:flex;align-items:center;justify-content:space-between;padding:0 2rem;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0}.page-title{font-size:1.125rem;font-weight:600;color:var(--text-primary)}.header-right{display:flex;align-items:center;gap:1.25rem}.header-date{font-size:.8125rem;color:var(--text-muted)}.user-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-subtle);color:var(--accent);display:flex;align-items:center;justify-content:center}.layout-content{flex:1;padding:1.75rem 2rem}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.card-header{padding:1rem 1.25rem;border-bottom:1px solid var(--border)}.card-header h2{font-size:1rem;font-weight:600}.card-header p{font-size:.8125rem;color:var(--text-secondary);margin-top:.125rem}.card-body{padding:1.25rem}.form-group{margin-bottom:1rem}.form-group:last-child{margin-bottom:0}.form-label{display:block;font-size:.8125rem;font-weight:500;color:var(--text-secondary);margin-bottom:.375rem}.form-input,.form-select,.form-textarea{width:100%;padding:.5rem .75rem;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.875rem;font-family:inherit;transition:border-color var(--transition),box-shadow var(--transition)}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-subtle)}.form-input::placeholder,.form-textarea::placeholder{color:var(--text-muted)}.form-select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2rem}.form-textarea{resize:vertical;min-height:80px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.875rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;font-size:.8125rem;font-weight:500;font-family:inherit;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);white-space:nowrap}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-success{background:var(--success);color:#fff}.btn-success:hover{background:#15803d}.btn-danger{background:transparent;color:var(--danger);padding:.375rem .625rem;font-size:.8125rem}.btn-danger:hover{background:var(--danger-bg)}.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}.btn-ghost:hover{background:var(--bg-primary);color:var(--text-primary)}.btn-sm{padding:.3125rem .625rem;font-size:.75rem}.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.1875rem .625rem;font-size:.6875rem;font-weight:600;border-radius:9999px;letter-spacing:.02em}.badge-pending{background:var(--warning-bg);color:var(--warning)}.badge-in_progress{background:var(--accent-subtle);color:var(--accent)}.badge-completed,.badge-approved{background:var(--success-bg);color:var(--success)}.badge-rejected{background:var(--danger-bg);color:var(--danger)}.badge-present{background:var(--success-bg);color:var(--success)}.badge-absent{background:var(--danger-bg);color:var(--danger)}.badge-late{background:var(--warning-bg);color:var(--warning)}.badge-half-day{background:var(--accent-subtle);color:var(--accent)}.badge-on-leave{background:#f3e8ff;color:#9333ea}.table-wrapper{overflow-x:auto}.table{width:100%;border-collapse:collapse}.table th{text-align:left;padding:.625rem 1rem;font-size:.6875rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border)}.table td{padding:.75rem 1rem;font-size:.8125rem;border-bottom:1px solid var(--border);vertical-align:middle}.table tbody tr{transition:background var(--transition)}.table tbody tr:hover{background:#22c55e0a}.table tbody tr:last-child td{border-bottom:none}.task-item{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;cursor:pointer;font-size:.8125rem;color:var(--text-secondary);transition:color var(--transition)}.task-item:hover{color:var(--text-primary)}.task-item.completed{color:var(--text-muted);text-decoration:line-through}.task-check{width:16px;height:16px;border:2px solid var(--border-strong);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--transition)}.task-item.completed .task-check{background:var(--success);border-color:var(--success)}.task-check svg{width:10px;height:10px;color:#fff;opacity:0}.task-item.completed .task-check svg{opacity:1}.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-muted)}.empty-state svg{margin-bottom:1rem;opacity:.25}.empty-state p{font-size:.875rem}.filter-btn{padding:.3125rem .75rem;font-size:.8125rem;font-weight:500;font-family:inherit;background:transparent;color:var(--text-secondary);border:1px solid var(--border);border-radius:9999px;cursor:pointer;transition:all var(--transition)}.filter-btn:hover{color:var(--text-primary);border-color:var(--border-strong)}.filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.75rem}.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.125rem 1.25rem}.stat-card .stat-value{font-size:1.625rem;font-weight:700}.stat-card .stat-label{font-size:.8125rem;color:var(--text-secondary);margin-top:.125rem}.clock-card{text-align:center;padding:2rem}.clock-time{font-size:2.75rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.05em;color:var(--text-primary)}.clock-date{color:var(--text-secondary);font-size:.875rem;margin-top:.375rem}.clock-actions{display:flex;gap:.75rem;justify-content:center;margin-top:1.25rem}.clock-actions .btn{min-width:130px}@media (max-width: 1024px){.sidebar{width:var(--sidebar-collapsed)}.sidebar .brand-text,.sidebar .nav-label,.sidebar .nav-section-label,.sidebar .nav-badge{display:none}.layout-main{margin-left:var(--sidebar-collapsed)!important}.nav-item{justify-content:center;padding:.625rem}}@media (max-width: 640px){.layout-content{padding:1rem}.top-header{padding:0 1rem}.header-date{display:none}.form-row{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr 1fr}}@keyframes slideIn{0%{transform:translateY(1rem);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}