:root{--bg-primary:#fff;--bg-card:#fff;--text-primary:#000;--text-secondary:#6b7280;--border-color:#f3f4f6;--color-primary:#2563eb;--color-primary-hover:#1d4ed8;--color-primary-light:#eff6ff;--color-success:#10b981;--color-success-hover:#059669;--color-success-light:#f0fdf4;--color-danger:#ef4444;--color-danger-hover:#dc2626;--color-danger-light:#fef2f2;--color-warning:#f59e0b;--color-warning-light:#fffbeb;--color-info:#0ea5e9;--color-info-light:#f0f9ff;--color-muted:#d1d5db;--color-muted-light:#f9fafb;--shadow-sm:none;--shadow-md:none;--shadow-lg:none;--shadow-bottom-nav:none;--border-radius-sm:16px;--border-radius-md:24px;--border-radius-lg:30px;--border-radius-full:9999px;--transition-fast:.1s ease;--transition-normal:.2s ease}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;font-family:Poppins,system-ui,-apple-system,sans-serif}body{background-color:var(--bg-primary);color:var(--text-primary);-webkit-user-select:none;user-select:none;flex-direction:column;min-height:100vh;line-height:1.6;display:flex}input,textarea,[contenteditable=true]{-webkit-user-select:text;user-select:text}#root{flex-direction:column;width:100%;min-height:100vh;display:flex}h1,h2,h3,h4{color:var(--text-primary);font-weight:600;line-height:1.25}h1{letter-spacing:-.025em;font-size:1.875rem}h2{letter-spacing:-.02em;font-size:1.375rem}h3{font-size:1.125rem}.app-container{flex:1;justify-content:center;align-items:center;height:100vh;padding:1.5rem;display:flex;overflow:hidden}.dashboard-layout{flex-direction:column;gap:1.5rem;width:100%;max-width:600px;height:auto;min-height:auto;margin:0 auto;padding:0 1.25rem 180px;display:flex}.flat-card{background:var(--bg-card);border-radius:var(--border-radius-lg);box-shadow:none;border:none;padding:1.25rem;transition:none}.flat-card-title{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:.875rem;display:flex}.form-group{flex-direction:column;gap:.375rem;margin-bottom:1.25rem;display:flex}.form-label{color:var(--text-secondary);text-transform:capitalize;letter-spacing:.01em;font-size:.8125rem;font-weight:500}.flat-input{width:100%;color:var(--text-primary);background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:var(--border-radius-md);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none;padding:.6875rem 1rem;font-size:16px}.flat-input:focus{border-color:var(--color-primary);box-shadow:none}.flat-input:disabled{background-color:var(--color-muted-light);color:var(--text-secondary);cursor:not-allowed;border-color:var(--border-color)}.date-input-wrapper{align-items:center;width:100%;display:flex;position:relative}.date-input-wrapper .flat-input{appearance:none;padding-left:2.75rem;position:relative}.date-input-wrapper:before{content:"";pointer-events:none;z-index:10;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' x2='16' y1='2' y2='6'%3E%3C/line%3E%3Cline x1='8' x2='8' y1='2' y2='6'%3E%3C/line%3E%3Cline x1='3' x2='21' y1='10' y2='10'%3E%3C/line%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain;width:18px;height:18px;position:absolute;left:14px}.date-input-wrapper input[type=date]::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.flat-btn{color:#fff;background-color:var(--color-primary);border-radius:var(--border-radius-md);cursor:pointer;box-shadow:none;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.9375rem;font-weight:600;display:inline-flex}.flat-btn:hover:not(:disabled){background-color:var(--color-primary-hover);box-shadow:none;transform:none}.flat-btn:active:not(:disabled){transform:translateY(0)}.flat-btn:disabled{background-color:var(--color-muted);color:#fff;cursor:not-allowed;box-shadow:none}.flat-btn-success{background-color:var(--color-success);box-shadow:none}.flat-btn-success:hover:not(:disabled){background-color:var(--color-success-hover);box-shadow:none}.flat-btn-danger{background-color:var(--color-danger);box-shadow:none}.flat-btn-danger:hover:not(:disabled){background-color:var(--color-danger-hover);box-shadow:none}.flat-btn-block{width:100%}.flat-btn-outline{color:var(--text-primary);border:1.5px solid var(--border-color);box-shadow:none;background-color:#0000}.flat-btn-outline:hover:not(:disabled){background-color:var(--color-muted-light);border-color:var(--text-primary);box-shadow:none;transform:none}.flat-badge{border-radius:var(--border-radius-full);background:var(--color-muted-light);color:var(--text-secondary);align-items:center;padding:.25rem .625rem;font-size:.75rem;font-weight:600;display:inline-flex}.flat-badge-success{background-color:var(--color-success-light);color:var(--color-success)}.flat-badge-danger{background-color:var(--color-danger-light);color:var(--color-danger)}.flat-badge-warning{background-color:var(--color-warning-light);color:var(--color-warning)}.flat-alert{border-radius:var(--border-radius-md);align-items:flex-start;gap:.625rem;margin-bottom:1.25rem;padding:.875rem 1.125rem;font-size:.875rem;font-weight:500;display:flex}.flat-alert-danger{background-color:var(--color-danger-light);color:var(--color-danger);border:1px solid #ef444426}.flat-alert-success{background-color:var(--color-success-light);color:var(--color-success);border:1px solid #10b98126}.flat-alert-warning{background-color:var(--color-warning-light);color:var(--color-warning);border:1px solid #f59e0b26}.flat-alert-info{background-color:var(--color-info-light);color:var(--color-info);border:1px solid #0ea5e926}.auth-card{background:var(--bg-card);border-radius:var(--border-radius-lg);width:410px;max-width:100%;box-shadow:none;padding:2.25rem 1.5rem}.auth-header{text-align:center;margin-bottom:1.75rem}.auth-title{margin-bottom:.375rem;font-size:1.625rem}.auth-subtitle{color:var(--text-secondary);font-size:.875rem}.auth-footer{text-align:center;color:var(--text-secondary);margin-top:1.5rem;font-size:.875rem}.flat-link{color:var(--color-primary);cursor:pointer;transition:color var(--transition-fast);font-weight:600;text-decoration:none}.flat-link:hover{color:var(--color-primary-hover);text-decoration:none}.checkin-panel{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:2.5rem 2rem;display:flex}.attendance-toggle-wrapper{flex-direction:column;align-items:center;width:100%;max-width:320px;margin:1.5rem 0;display:flex}.attendance-toggle-container{background-color:var(--color-muted-light);border-radius:var(--border-radius-full);border:1px solid var(--border-color);z-index:1;width:100%;height:52px;transition:all var(--transition-normal);padding:4px;display:flex;position:relative;overflow:hidden}.attendance-toggle-option{text-transform:uppercase;letter-spacing:.03em;color:var(--text-secondary);cursor:pointer;z-index:3;transition:color var(--transition-normal);-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:none;flex:1;justify-content:center;align-items:center;gap:.5rem;font-size:.875rem;font-weight:700;display:flex}.attendance-toggle-option.active{color:#fff}.attendance-toggle-slider{border-radius:var(--border-radius-full);z-index:2;width:calc(50% - 4px);height:calc(100% - 8px);transition:transform var(--transition-normal), background-color var(--transition-normal), box-shadow var(--transition-normal);position:absolute;top:4px;left:4px}.attendance-toggle-container.checked-out .attendance-toggle-slider{background-color:var(--color-danger);transform:translate(0)}.attendance-toggle-container.checked-in .attendance-toggle-slider{background-color:var(--color-success);transform:translate(100%)}.attendance-toggle-container.locked{background-color:var(--color-muted-light);border:1.5px solid var(--border-color);cursor:not-allowed;opacity:.7}.attendance-toggle-container.locked .attendance-toggle-option{cursor:not-allowed;color:var(--text-secondary)}.attendance-toggle-container.locked .attendance-toggle-slider{background-color:var(--color-muted);box-shadow:none;transform:translate(0)}.flat-header{z-index:999;border-bottom:1px solid var(--border-color);background:#fff;justify-content:space-between;align-items:center;width:100%;padding:.875rem 1.5rem;display:flex;position:sticky;top:0}.user-avatar{border-radius:var(--border-radius-md);background-color:var(--color-primary-light);width:38px;height:38px;color:var(--color-primary);text-transform:uppercase;border:1.5px solid var(--color-primary);justify-content:center;align-items:center;font-size:.875rem;font-weight:600;display:flex}.logo-group{align-items:center;gap:.5rem;display:flex}.logo-text{letter-spacing:-.01em;font-size:1.125rem;font-weight:700}.user-info{align-items:center;gap:.75rem;display:flex}.leave-item-container{flex-direction:column;gap:.75rem;margin-top:1rem;display:flex}.leave-item-card{border:1px solid var(--border-color);border-radius:var(--border-radius-md);background:var(--bg-card);transition:transform var(--transition-fast);justify-content:space-between;align-items:center;padding:1rem 1.25rem;display:flex}.leave-item-card:hover{transform:translateY(-1px)}.simulator-panel{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);box-shadow:none;padding:1.5rem}.simulator-title{align-items:center;gap:.5rem;margin-bottom:.875rem;font-size:.9375rem;font-weight:600;display:flex}.simulator-options{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.5rem;display:grid}.simulator-btn{color:var(--text-secondary);background-color:var(--bg-card);border:1.5px solid var(--border-color);border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--transition-fast);padding:.5rem .75rem;font-size:.8125rem;font-weight:500}.simulator-btn:hover{background-color:var(--color-muted-light);border-color:var(--color-muted)}.simulator-btn.active{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.bottom-nav-bar{-webkit-backdrop-filter:blur(20px);z-index:1000;height:68px;box-shadow:none;background:#ffffffd9;border-top:1px solid #0000000d;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0}.bottom-nav-item{color:var(--text-secondary);cursor:pointer;border-radius:var(--border-radius-md);width:64px;height:52px;transition:all var(--transition-fast);background:0 0;border:none;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;font-size:.75rem;font-weight:500;display:flex;position:relative}.bottom-nav-item:hover{color:var(--text-primary)}.bottom-nav-item.active{color:var(--color-primary);font-weight:600}.bottom-nav-item.active:after{content:"";background-color:var(--color-primary);border-radius:0 0 4px 4px;width:16px;height:3px;position:absolute;top:0}.tab-content-wrapper{animation:tabFadeIn var(--transition-normal) forwards;flex-direction:column;gap:.875rem;display:flex}@keyframes tabFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.metrics-grid{grid-template-columns:repeat(3,1fr);gap:1rem;width:100%;display:grid}.metric-card{background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:var(--border-radius-md);text-align:center;box-shadow:none;flex-direction:column;justify-content:center;align-items:center;padding:1rem .5rem;display:flex}.metric-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem;font-size:.6875rem;font-weight:600}.metric-value{color:var(--text-primary);font-size:.9375rem;font-weight:700}.live-clock-widget{flex-direction:column;align-items:center;width:100%;margin-bottom:1rem;display:flex}.live-time-string{color:var(--text-primary);letter-spacing:-.01em;font-family:Poppins,sans-serif;font-size:2rem;font-weight:700}.live-date-string{color:var(--text-secondary);margin-top:.125rem;font-size:.8125rem;font-weight:500}.pulse-indicator-container{align-items:center;gap:.375rem;margin-top:.5rem;display:flex}.pulse-dot{border-radius:50%;width:7px;height:7px}.pulse-dot.active{background-color:var(--color-success)}.pulse-dot.inactive{background-color:var(--text-secondary)}.pulse-text{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;font-size:.6875rem;font-weight:600}.weekly-tracker-strip{justify-content:space-between;gap:.375rem;width:100%;display:flex}.weekly-day-col{flex-direction:column;flex:1;align-items:center;gap:.375rem;display:flex}.day-name-lbl{color:var(--text-secondary);text-transform:uppercase;font-size:.6875rem;font-weight:600}.day-num-circle{border-radius:var(--border-radius-sm);border:1.5px solid var(--border-color);width:34px;height:34px;color:var(--text-secondary);justify-content:center;align-items:center;font-size:.8125rem;font-weight:600;display:flex}.weekly-day-col.today .day-num-circle{border-color:var(--text-primary);color:var(--text-primary);font-weight:700}.weekly-day-col.present .day-num-circle{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}.punch-timeline{flex-direction:column;gap:1rem;padding-left:1.5rem;display:flex;position:relative}.punch-timeline:before{content:"";background-color:var(--border-color);width:1.5px;position:absolute;top:4px;bottom:4px;left:7px}.timeline-item{align-items:flex-start;width:100%;display:flex;position:relative}.timeline-marker{background-color:var(--color-success-light);z-index:2;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;display:flex;position:absolute;left:-1.5rem;transform:translate(-4px)}.timeline-content{background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:var(--border-radius-md);flex-direction:column;gap:.125rem;width:100%;padding:.5rem .75rem;display:flex}.network-status-dot{border-radius:50%;width:7px;height:7px;display:inline-block}.network-status-dot.online{background-color:var(--color-success)}.network-status-dot.offline{background-color:var(--color-warning);animation:2s infinite activePulse}.offline-banner{background-color:var(--color-warning-light);color:var(--color-warning);border-radius:var(--border-radius-md);text-align:center;border:1.5px solid #f59e0b26;margin-bottom:.25rem;padding:.625rem 1rem;font-size:.8125rem;font-weight:600}.timeline-offline-tag{background-color:var(--color-warning-light);color:var(--color-warning);text-transform:uppercase;letter-spacing:.02em;border:1px solid #f59e0b26;border-radius:4px;padding:1px 5px;font-size:.5625rem;font-weight:700}@media (width<=600px){.app-container{height:100vh;padding:0;overflow:hidden}.auth-card{border-radius:0;flex-direction:column;justify-content:center;width:100%;height:100vh;padding:2.25rem 1.25rem;display:flex;overflow:hidden}.dashboard-layout{gap:1.25rem;height:auto;min-height:auto;margin:0;padding:0 1rem 160px}.flat-card{padding:1.5rem 1.25rem}.offline-banner{border-top:none;border-left:none;border-right:none;border-radius:0;margin-bottom:0}}.sticky-dashboard-header{border-bottom:1px solid var(--border-color);z-index:100;background-color:var(--bg-primary);justify-content:space-between;align-items:center;margin-left:-1.25rem;margin-right:-1.25rem;padding:.75rem 1.25rem;display:flex;position:sticky;top:0}@media (width<=600px){.sticky-dashboard-header{margin-left:-1rem;margin-right:-1rem;padding-top:.75rem;padding-left:1rem;padding-right:1rem}}.fixed-bottom-bar{background-color:var(--bg-primary);border-top:1px solid var(--border-color);z-index:100;max-width:600px;margin:0 auto;padding:1rem 1.25rem;position:fixed;bottom:0;left:0;right:0}@media (width<=600px){.fixed-bottom-bar{padding:1rem}}