@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap";.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;position:relative;overflow:hidden;background:var(--bg-main)}.auth-blur-bg{position:absolute;width:500px;height:500px;background:var(--primary-color);filter:blur(150px);opacity:.15;border-radius:50%;top:-100px;right:-100px;z-index:0}.auth-card{width:100%;max-width:420px;padding:2.5rem;border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);position:relative;z-index:1}.auth-header{text-align:center;margin-bottom:2rem}.logo-container{width:80px;height:80px;background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;color:#fff;box-shadow:0 10px 20px #6366f14d}.auth-header h1{font-size:1.75rem;margin-bottom:.5rem}.auth-header p{color:var(--text-muted);font-size:.9375rem}.input-with-icon{position:relative}.field-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted)}.input-with-icon .input-field{padding-left:2.5rem}.auth-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;font-size:.875rem}.remember-me{display:flex;align-items:center;gap:.5rem;cursor:pointer;color:var(--text-muted)}.forgot-password{color:var(--primary-color);font-weight:500}.w-full{width:100%}.auth-footer{margin-top:2rem;text-align:center;font-size:.875rem;color:var(--text-muted)}.auth-footer a{color:var(--primary-color);font-weight:600}.auth-error{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;border-radius:var(--radius-md);margin-bottom:1.5rem;background:#f43f5e1a!important;color:#e11d48;font-size:.875rem;font-weight:500;border:1px solid rgba(244,63,94,.2)!important}.auth-success{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;border-radius:var(--radius-md);margin-bottom:1.5rem;background:#10b9811a!important;color:#059669;font-size:.875rem;font-weight:500;border:1px solid rgba(16,185,129,.2)!important}.back-link{display:flex;align-items:center;justify-content:center;gap:.5rem;color:var(--text-muted);font-size:.875rem;transition:color .2s}.back-link:hover{color:var(--primary-color)}.spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.sidebar{width:260px;height:100vh;background:var(--bg-sidebar);color:var(--text-on-dark);display:flex;flex-direction:column;position:fixed;left:0;top:0;z-index:1000;box-shadow:4px 0 10px #0000001a;transition:transform .3s cubic-bezier(.4,0,.2,1)}.sidebar-header{padding:2rem 1.5rem;display:flex;align-items:center;gap:.75rem}.sidebar-logo-img{width:32px;height:32px;object-fit:contain;flex-shrink:0}.logo-text{font-family:Outfit,sans-serif;font-size:1.5rem;font-weight:700;letter-spacing:-.5px}.sidebar-nav{flex:1;padding:0 .75rem;overflow-y:auto}.nav-item{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;border-radius:var(--radius-md);margin-bottom:.25rem;transition:all var(--transition-fast);color:#f8fafcb3;font-weight:500}.nav-item:last-child{margin-bottom:0}.nav-item:hover{background:#ffffff0d;color:#fff}.nav-item.active{background:var(--primary-color);color:#fff;box-shadow:0 4px 12px #6366f14d}.sidebar-footer{padding:1.5rem;border-top:1px solid rgba(255,255,255,.1)}.sidebar-group-divider{height:1px;background:#ffffff12;margin:.5rem 1rem}.user-profile{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem}.user-avatar{width:40px;height:40px;background:linear-gradient(135deg,var(--secondary-color),#059669);border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}.user-info{display:flex;flex-direction:column}.user-name{font-size:.9375rem;font-weight:600}.user-role{font-size:.75rem;color:#f8fafc80;text-transform:capitalize}.logout-btn{width:100%;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:var(--radius-md);color:#fca5a5;font-weight:500;margin-top:.5rem}.logout-btn:hover{background:#ef44441a}.sidebar-group{margin-bottom:.5rem}.group-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:transparent;border:none;color:#f8fafc66;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all .2s;border-radius:var(--radius-md)}.group-header:hover{color:#f8fafce6;background:#ffffff08}.group-header.open{color:var(--primary-color)}.group-title{display:flex;align-items:center;gap:.75rem}.chevron{transition:transform .3s ease}.group-header.open .chevron{transform:rotate(180deg)}.group-items{margin-top:.25rem;animation:slideDownNav .3s ease-out}@keyframes slideDownNav{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.sub-item{margin-left:.5rem;font-size:.875rem;color:#fff9}.sub-item.active{background:#6366f126!important;color:var(--primary-color)!important;box-shadow:none!important}.sidebar-divider{height:1px;background:#ffffff1a;margin:1rem 0}@media(max-width:1024px){.sidebar{transform:translate(-100%)}.sidebar.mobile-open{transform:translate(0)}}@media(max-width:768px){.sidebar{width:280px}.sidebar-header{padding:1.5rem 1rem}.logo-text{font-size:1.25rem}.nav-item{padding:.75rem .875rem}}@media(max-width:480px){.sidebar{width:100%;max-width:320px}}.dashboard-container{display:flex;min-height:100vh}.main-content{flex:1;margin-left:260px;background-color:var(--bg-main);display:flex;flex-direction:column;transition:margin-left .3s cubic-bezier(.4,0,.2,1)}.main-header{height:70px;background-color:var(--bg-card);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 2rem;position:sticky;top:0;z-index:90;gap:1rem}.mobile-menu-btn{display:none;padding:.5rem;border-radius:var(--radius-md);color:var(--text-main);background:transparent;border:none;cursor:pointer}.mobile-menu-btn:hover{background:var(--bg-main)}.mobile-overlay{display:none;position:fixed;inset:0;background:#00000080;z-index:999;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.search-bar{position:relative;flex:1;max-width:400px}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted)}.search-bar input{width:100%;padding:.625rem 1rem .625rem 2.5rem;border-radius:var(--radius-md);border:1px solid var(--border-color);background:var(--bg-main);font-size:.875rem}.header-actions{display:flex;align-items:center;gap:1.5rem}.icon-btn{position:relative;color:var(--text-muted);padding:.5rem;border-radius:var(--radius-md)}.icon-btn:hover{background:var(--bg-main);color:var(--primary-color)}.notification-badge{position:absolute;top:6px;right:6px;width:8px;height:8px;background-color:var(--accent-color);border-radius:50%;border:2px solid var(--bg-card)}.date-display{font-size:.875rem;font-weight:500;color:var(--text-muted);white-space:nowrap}.page-content{padding:2rem;flex:1}@media(max-width:1024px){.main-content{margin-left:0}.mobile-menu-btn{display:flex}.mobile-overlay{display:block}.search-bar{max-width:250px}.page-content{padding:1.5rem}}@media(max-width:768px){.main-header{padding:0 1rem;height:60px}.search-bar{max-width:180px}.search-bar input{font-size:.8125rem;padding:.5rem .875rem .5rem 2.25rem}.date-display{display:none}.header-actions{gap:.75rem}.page-content{padding:1rem}}@media(max-width:480px){.main-header{padding:0 .75rem}.search-bar{display:none}.header-actions{gap:.5rem}.icon-btn{padding:.375rem}.page-content{padding:.75rem}}.user-profile-btn{display:flex;align-items:center;gap:.75rem;padding:.25rem .5rem .25rem .25rem;border-radius:var(--radius-full, 9999px);background:transparent;border:1px solid transparent;transition:all var(--transition-fast, .2s)}.user-profile-btn:hover{background:var(--bg-main, #f8fafc);border-color:var(--border-color, #e2e8f0)}.user-avatar-small{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--secondary-color, #10b981),#059669);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1rem}.user-info-small{display:flex;flex-direction:column;align-items:flex-start}.user-name-small{font-size:.875rem;font-weight:600;color:var(--text-main, #1e293b)}.user-role-small{font-size:.75rem;color:var(--text-muted, #64748b);text-transform:capitalize}.user-dropdown{position:absolute;top:calc(100% + 10px);right:0;width:220px;background:var(--bg-card, #ffffff);border:1px solid var(--border-color, #e2e8f0);border-radius:var(--radius-lg, .75rem);box-shadow:var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1));z-index:100;overflow:hidden;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dropdown-header{padding:1rem;background:var(--bg-main, #f8fafc)}.dropdown-name{font-weight:600;color:var(--text-main, #1e293b);font-size:.9375rem;margin-bottom:.25rem}.dropdown-email{font-size:.75rem;color:var(--text-muted, #64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-divider{height:1px;background:var(--border-color, #e2e8f0);width:100%}.dropdown-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem;background:transparent;border:none;text-align:left;font-size:.875rem;font-weight:500;color:var(--text-main, #1e293b);transition:background .15s;cursor:pointer}.dropdown-item:hover{background:var(--bg-main, #f8fafc)}.dropdown-item.text-red-600{color:var(--accent-color, #ef4444)}.dropdown-item.text-red-600:hover{background:#fef2f2}.employees-container{display:flex;flex-direction:column;gap:2rem}.page-header{display:flex;justify-content:space-between;align-items:center}.page-header h1{font-size:1.875rem;font-weight:700;margin-bottom:.25rem}.table-actions{display:flex;justify-content:space-between;align-items:center;gap:1rem}.search-box{position:relative;width:350px}.search-box .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted)}.search-box input{width:100%;padding:.75rem 1rem .75rem 2.5rem;border-radius:var(--radius-md);border:1px solid var(--border-color);background:var(--bg-card);font-size:.875rem;transition:all var(--transition-fast)}.search-box input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f11a}.table-card{padding:0;overflow:hidden}.data-table{width:100%;border-collapse:collapse;text-align:left}.data-table th{background:var(--bg-main);padding:1rem 1.5rem;font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border-color)}.data-table td{padding:1rem 1.5rem;border-bottom:1px solid var(--border-color);font-size:.9375rem}.data-table tr:last-child td{border-bottom:none}.user-cell{display:flex;align-items:center;gap:1rem}.user-avatar-sm{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem}.user-meta{display:flex;flex-direction:column}.user-name{font-weight:600;color:var(--text-main)}.user-email{font-size:.8125rem;color:var(--text-muted)}.role-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:6px;background:#6366f11a;color:var(--primary-color);font-size:.75rem;font-weight:600;text-transform:capitalize}.action-btns{display:flex;justify-content:flex-end;gap:.5rem}.icon-btn{padding:.5rem;border-radius:8px;color:var(--text-muted);transition:all var(--transition-fast)}.icon-btn:hover{background:var(--bg-main);color:var(--text-main)}.icon-btn.text-danger:hover{background:#ef44441a;color:#ef4444}.table-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem;gap:1rem;color:var(--text-muted)}.empty-state{text-align:center;padding:3rem;color:var(--text-muted)}.modal-overlay{position:fixed;inset:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.modal-card{width:100%;max-width:600px;max-height:90vh;padding:0;background:var(--bg-card);display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:1px solid var(--border-color);background:var(--bg-card)}.modal-header h2{font-size:1.25rem;font-weight:700}.modal-form{padding:2rem;display:flex;flex-direction:column;gap:1.5rem;overflow-y:auto;flex:1}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}@media(max-width:640px){.form-grid{grid-template-columns:1fr}}.modal-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:1rem}.text-danger{color:#ef4444}.shift-chips-container{display:flex;flex-wrap:wrap;gap:.25rem}.shift-chip{font-size:.75rem;background-color:var(--bg-main);padding:.25rem .5rem;border-radius:4px;color:var(--text-main);border:1px solid var(--border-color);white-space:nowrap;font-weight:500}.shift-chip.default{color:var(--text-muted);background:transparent;border:1px dashed var(--border-color);font-style:italic}.leaves-container{display:flex;flex-direction:column;gap:1.5rem}.workflow-controls{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem!important;background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color)}.tabs{display:flex;gap:.5rem;background:var(--bg-main);padding:.25rem;border-radius:var(--radius-md)}.tab-item{padding:.5rem 1.25rem;font-size:.875rem;font-weight:500;color:var(--text-muted);border-radius:var(--radius-sm);transition:all .2s;cursor:pointer}.tab-item:hover{color:var(--text-main)}.tab-item.active{background:var(--bg-card);color:var(--primary-color);box-shadow:var(--shadow-sm)}.search-bar{display:flex;align-items:center;gap:.75rem;background:var(--bg-main);padding:.5rem 1rem;border-radius:var(--radius-md);width:350px}.search-bar input{background:transparent;border:none;outline:none;font-size:.875rem;color:var(--text-main);width:100%}.employee-cell{display:flex;align-items:center;gap:.75rem}.avatar-sm{width:32px;height:32px;background:var(--primary-color);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem}.emp-info{display:flex;flex-direction:column}.leave-type-pill{padding:.25rem .75rem;background:#6366f11a;color:var(--primary-color);border-radius:99px;font-size:.75rem;font-weight:600}.date-workflow-cell{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-main)}.reason-text-workflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px;font-size:.875rem;color:var(--text-muted)}.modal-actions-workflow{display:flex;justify-content:flex-end;gap:1rem;padding-top:1.5rem;border-top:1px solid var(--border-color)}.review-modal{max-width:500px!important}.review-content{display:flex;flex-direction:column;gap:1.5rem;padding-bottom:1.5rem}.review-section{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.review-info-item{display:flex;gap:.75rem;align-items:flex-start}.review-info-item svg{margin-top:.25rem;color:var(--primary-color)}.review-info-item label{display:block;font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:.25rem}.review-info-item p{font-size:.9375rem;font-weight:500;color:var(--text-main)}.review-reason label,.review-action-section label{display:block;font-size:.875rem;font-weight:600;margin-bottom:.75rem;color:var(--text-main)}.reason-bubble{background:var(--bg-main);padding:1rem;border-radius:var(--radius-md);font-size:.875rem;line-height:1.5;color:var(--text-muted);border-left:4px solid var(--primary-color)}.modal-footer-workflow{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding-top:1.5rem;border-top:1px solid var(--border-color)}.btn-danger-outline{border:1px solid #fee2e2;background:#fef2f2;color:#dc2626;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;border-radius:var(--radius-md);font-weight:600;transition:all .2s}.btn-danger-outline:hover{background:#fee2e2;border-color:#fca5a5}.btn-success{background:#059669;color:#fff;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;border-radius:var(--radius-md);font-weight:600;transition:all .2s}.btn-success:hover{background:#047857;transform:translateY(-1px);box-shadow:0 4px 12px #10b98133}.icon-btn-muted{padding:.5rem;color:var(--text-muted);border-radius:50%;transition:background .2s}.icon-btn-muted:hover{background:var(--bg-main);color:var(--text-main)}@media(max-width:768px){.workflow-controls{flex-direction:column;gap:1rem}.search-bar{width:100%}.review-section{grid-template-columns:1fr}}.status-banner{display:flex;justify-content:center;margin-bottom:1.5rem}.large-badge{padding:.5rem 1.5rem;font-size:.875rem;letter-spacing:.05em;border-radius:99px;font-weight:700}.border-indigo-100{border:1px solid #e0e7ff}.payroll-container{display:flex;flex-direction:column;gap:1.5rem}.payroll-stats-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.payroll-stat{padding:1.5rem!important}.payroll-stat label{font-size:.875rem;color:var(--text-muted);font-weight:500}.payroll-stat h3{font-size:2rem;font-weight:700;margin:.5rem 0;color:var(--text-main)}.trend{display:flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:600}.trend.up{color:#059669}.trend.down{color:#dc2626}.payroll-controls{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem!important}.search-bar{display:flex;align-items:center;gap:.75rem;background:var(--bg-main);padding:.5rem 1rem;border-radius:var(--radius-md);width:320px}.search-bar input{background:transparent;border:none;outline:none;font-size:.875rem;width:100%}.select-sm{padding:.375rem .75rem;font-size:.875rem}.month-year{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500}.month-year svg{color:var(--primary-color)}.action-btns{display:flex;gap:.5rem;justify-content:flex-end}.info-banner{display:flex;gap:1rem;padding:1rem;background:#eff6ff;color:#1e40af;border-radius:var(--radius-md);font-size:.875rem;margin-bottom:2rem}.gen-modal-content{padding:1.5rem 0}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.avatar-sm img{width:100%;height:100%;border-radius:50%;object-fit:cover}.components-groups{display:flex;flex-direction:column;gap:1.5rem}.component-group h4{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem}.shift-card{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center;transition:all .2s}.shift-card:hover{border-color:var(--primary-color);box-shadow:var(--shadow-sm)}.shift-name{font-weight:600;font-size:.875rem;color:var(--text-main)}.shift-actions{display:flex;gap:.25rem}.icon-btn{width:28px;height:28px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;transition:background .2s}.icon-btn:hover{background:var(--bg-hover)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-card{width:100%;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}.modal-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.modal-header h2{font-size:1.25rem;font-weight:700;margin:0}.modal-form{padding:1.5rem}.modal-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:2rem}.input-with-icon{position:relative;display:flex;align-items:center}.field-icon{position:absolute;left:12px;color:var(--text-muted)}.input-with-icon .input-field{padding-left:36px}.settings-container{display:flex;flex-direction:column;gap:2rem}.settings-grid{display:grid;grid-template-columns:1fr 300px;gap:2rem}.settings-card{padding:2.5rem;display:flex;flex-direction:column;gap:2.5rem}.settings-section h3{display:flex;align-items:center;gap:.75rem;font-size:1.125rem;font-weight:700;margin-bottom:1.25rem;color:var(--text-main)}.section-desc{font-size:.875rem;color:var(--text-muted);margin-bottom:1.5rem}.branding-form-grid{display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:flex-start}.logo-upload{display:flex;flex-direction:column;gap:.75rem}.logo-preview-container{position:relative;width:120px;height:120px;border-radius:var(--radius-lg);border:2px dashed var(--border-color);background:var(--bg-main);display:flex;align-items:center;justify-content:center;overflow:hidden}.logo-preview-container img{max-width:100%;max-height:100%;object-fit:contain}.logo-placeholder{font-size:.75rem;color:var(--text-muted);font-weight:600}.logo-upload-btn{position:absolute;bottom:8px;right:8px;width:32px;height:32px;border-radius:50%;background:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-md);transition:transform .2s}.logo-upload-btn:hover{transform:scale(1.1)}.color-input-wrapper{display:flex;gap:.5rem;margin-top:.5rem}.color-input-wrapper input[type=color]{width:44px;height:44px;padding:0;border:none;border-radius:var(--radius-md);background:none;cursor:pointer}.color-input-wrapper .input-field{flex:1}.location-controls{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}.input-tip{display:block;margin-top:.5rem;font-size:.75rem;color:var(--text-muted)}.btn-sm{padding:.5rem 1rem;font-size:.8125rem}.settings-footer{display:flex;justify-content:flex-end;padding-top:1.5rem;border-top:1px solid var(--border-color)}.message-banner{display:flex;align-items:center;gap:.75rem;padding:1rem;border-radius:var(--radius-md);font-size:.875rem;font-weight:500}.message-banner.success{background:#10b9811a;color:#059669;border:1px solid rgba(16,185,129,.2)}.message-banner.error{background:#ef44441a;color:#dc2626;border:1px solid rgba(239,68,68,.2)}.plan-card{padding:1.5rem}.plan-badge{display:inline-block;padding:.25rem .75rem;background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));color:#fff;border-radius:99px;font-size:.75rem;font-weight:700;margin:1rem 0}.plan-stats{margin-bottom:1.5rem}.plan-stat{display:flex;justify-content:space-between;font-size:.875rem;color:var(--text-muted);padding:.5rem 0;border-bottom:1px solid var(--border-color)}.settings-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5rem;gap:1rem}.shift-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.shift-card{background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;padding:.75rem 1rem;display:flex;flex-direction:column;gap:.75rem;transition:all .2s ease;position:relative;overflow:hidden}.salary-comp-card{flex-direction:row!important;justify-content:space-between!important;align-items:center!important;padding:.75rem 1rem!important}.salary-comp-card .shift-info{flex-direction:column!important;gap:.25rem!important}.salary-comp-card .shift-name{display:flex;align-items:center;gap:8px}.earning-border{border-left:4px solid #10b981!important}.deduction-border{border-left:4px solid #ef4444!important}.statutory-badge{font-size:9px;background:#f1f5f9;color:#64748b;padding:2px 6px;border-radius:4px;font-weight:700;letter-spacing:.02em}.shift-card:hover{border-color:#cbd5e1;box-shadow:0 4px 6px -1px #0000000d;transform:translateY(-2px)}.shift-info{display:flex;flex-direction:column;gap:.5rem}.shift-name{font-weight:600;font-size:.875rem;color:#1e293b}.shift-time{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#64748b;background:#f8fafc;padding:.375rem .75rem;border-radius:.5rem;width:fit-content}.shift-meta{display:flex;gap:.5rem}.badge-gray{background:#f1f5f9;color:#475569;font-size:.75rem;font-weight:500;padding:.25rem .625rem;border-radius:9999px;border:1px solid #e2e8f0}.shift-actions{display:flex;justify-content:flex-end;gap:.25rem;margin-top:auto;padding-top:.75rem;border-top:1px solid #f1f5f9}.icon-btn{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;transition:all .15s;color:#64748b}.icon-btn:hover{background-color:#f1f5f9;color:#475569}.icon-btn.text-blue-600:hover{background-color:#eff6ff;color:#2563eb}.icon-btn.text-red-600:hover{background-color:#fef2f2;color:#dc2626}.empty-state-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;background:#f8fafc;border:2px dashed #e2e8f0;border-radius:1rem;gap:1rem;text-align:center}@media(max-width:1024px){.settings-grid{grid-template-columns:1fr}}.profile-container{display:flex;flex-direction:column;gap:1.5rem}.profile-header{display:flex;justify-content:space-between;align-items:center}.back-nav{display:flex;align-items:center;gap:.5rem;color:var(--text-muted);cursor:pointer;font-size:.875rem;font-weight:500;transition:color .2s}.back-nav:hover{color:var(--primary-color)}.header-actions .edit-actions{display:flex;gap:.75rem}.profile-grid{display:grid;grid-template-columns:320px 1fr;gap:2rem}.profile-info-card{padding:2rem!important;text-align:center}.avatar-section{display:flex;flex-direction:column;align-items:center;margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--border-color)}.profile-avatar-wrapper{position:relative;width:120px;height:120px;margin-bottom:1.5rem}.profile-avatar-img,.profile-avatar-placeholder{width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 8px 16px #0000001a}.profile-avatar-placeholder{background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));color:#fff;display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:700}.avatar-edit-overlay{position:absolute;bottom:0;right:0;width:36px;height:36px;background:var(--primary-color);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:3px solid white;box-shadow:0 4px 6px #0000001a}.profile-name{font-size:1.25rem;font-weight:700;margin-bottom:.25rem}.profile-role{color:var(--text-muted);font-size:.875rem;margin-bottom:1rem}.role-badge{padding:.25rem .75rem;border-radius:99px;font-size:.75rem;font-weight:700;text-transform:capitalize}.role-badge.org_admin{background:#fee2e2;color:#ef4444}.role-badge.employee{background:#dcfce7;color:#22c55e}.role-badge.manager{background:#fef9c3;color:#ca8a04}.profile-details-list{text-align:left;display:flex;flex-direction:column;gap:1.25rem}.detail-item{display:flex;gap:1rem;align-items:flex-start}.detail-item svg{margin-top:.25rem;color:var(--primary-color);opacity:.7}.detail-item label{display:block;font-size:.75rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.125rem}.detail-item span{font-size:.9375rem;font-weight:500;color:var(--text-main)}.payroll-info-card{margin-top:1.5rem;padding:1.5rem}.salary-box{margin-top:1rem;background:var(--bg-main);padding:1rem;border-radius:var(--radius-md)}.salary-value{font-size:1.5rem;font-weight:700;color:var(--primary-color);margin-top:.25rem}.stats-header-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2rem}.stat-widget{display:flex;align-items:center;gap:1.25rem;padding:1.5rem!important}.stat-icon-wrapper{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center}.stat-icon-wrapper.attendance{background:#e0e7ff;color:#4338ca}.stat-icon-wrapper.presents{background:#d1fae5;color:#059669}.stat-icon-wrapper.leaves{background:#fef3c7;color:#d97706}.stat-icon-wrapper.absents{background:#fee2e2;color:#ef4444}.attendance-logs-table{width:100%;border-collapse:collapse;margin-top:1rem}.attendance-logs-table th{text-align:left;font-size:.75rem;color:var(--text-muted);font-weight:700;text-transform:uppercase;padding:1rem;border-bottom:2px solid var(--border-color)}.attendance-logs-table td{padding:1rem;border-bottom:1px solid var(--border-color);font-size:.875rem;color:var(--text-main)}.attendance-logs-table tr:last-child td{border-bottom:none}.status-row-badge{padding:.25rem .625rem;border-radius:99px;font-size:.75rem;font-weight:700;text-transform:capitalize}.status-row-badge.present{background:#dcfce7;color:#166534}.status-row-badge.late{background:#fef3c7;color:#92400e}.status-row-badge.absent{background:#fee2e2;color:#991b1b}.log-time{display:flex;align-items:center;gap:.5rem;font-weight:500}.empty-logs{padding:3rem;text-align:center;color:var(--text-muted)}.stat-content label{font-size:.75rem;color:var(--text-muted);font-weight:600}.stat-content h3{font-size:1.25rem;font-weight:700}.experience-card,.upcoming-events{margin-bottom:1.5rem}.section-header h3{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem}.text-display{font-size:1rem;color:var(--text-main);padding:.75rem;background:var(--bg-main);border-radius:var(--radius-md)}.profile-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60vh;gap:1rem}@media(max-width:1024px){.profile-grid{grid-template-columns:1fr}}.subscription-wrapper{max-width:1200px;margin:0 auto;padding-bottom:4rem}.current-status-banner{background:linear-gradient(135deg,#1e293b,#0f172a);color:#fff;border-radius:24px;padding:2.5rem;position:relative;overflow:hidden;box-shadow:0 20px 40px #0000001a}.status-glow{position:absolute;top:-50px;right:-50px;width:200px;height:200px;background:radial-gradient(circle,rgba(59,130,246,.2) 0%,transparent 70%);filter:blur(40px)}.plan-info h2,.current-status-banner h2{font-size:2.5rem;font-weight:800;letter-spacing:-1px;margin:.5rem 0;background:linear-gradient(to right,#fff,#f1f5f9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.badge-premium{background:#3b82f633;border:none;color:#60a5fa;padding:6px 16px;border-radius:99px;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.active-subscription-box{width:100%;border:1px solid rgba(255,255,255,.4);border-radius:9999px;padding:12px 24px;display:flex;align-items:center}.cycle-toggle-container{display:flex;justify-content:center;margin:4rem 0 3rem}.cycle-toggle{background:#f1f5f9;padding:6px;border-radius:16px;display:flex;gap:4px;width:fit-content;box-shadow:inset 0 2px 4px #0000000d}.cycle-btn{padding:10px 24px;border-radius:12px;border:none;font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);color:#64748b;background:transparent;display:flex;align-items:center;gap:8px}.cycle-btn.active{background:#fff;color:#0f172a;box-shadow:0 4px 12px #0000001a}.savings-tag{background:#ecfdf5;color:#10b981;font-size:.7rem;padding:2px 8px;border-radius:6px;font-weight:800;text-transform:uppercase}.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem}.pricing-card{background:#fff;border-radius:24px;padding:2.5rem;border:1px solid #e2e8f0;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;display:flex;flex-direction:column}.pricing-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px -12px #0000001a;border-color:#3b82f6}.pricing-card.is-current{border:2px solid #3b82f6;background:linear-gradient(to bottom,#fff,#f8faff)}.popular-ribbon{position:absolute;top:20px;right:20px;background:#3b82f6;color:#fff;padding:4px 12px;border-radius:99px;font-size:.75rem;font-weight:800;box-shadow:0 4px 12px #3b82f64d}.card-header h3{font-size:1.5rem;font-weight:800;margin-bottom:1.5rem}.price-box{margin-bottom:2rem}.price-amount{font-size:3rem;font-weight:800;letter-spacing:-2px}.price-period{color:#64748b;font-weight:500;margin-left:4px}.feature-list{margin-bottom:3rem;flex:1}.feature-item{display:flex;align-items:center;gap:12px;margin-bottom:1rem;color:#475569;font-size:.9375rem;font-weight:500}.check-icon{width:20px;height:20px;border-radius:50%;background:#dcfce7;color:#10b981;display:flex;align-items:center;justify-content:center;flex-shrink:0}.upgrade-btn{width:100%;padding:1rem;border-radius:16px;border:none;font-weight:700;font-size:1rem;cursor:pointer;transition:all .2s}.btn-active{background:#f1f5f9;color:#94a3b8;cursor:default}.btn-action{background:#0f172a;color:#fff}.btn-action:hover{background:#334155;transform:scale(1.02)}.btn-popular{background:#3b82f6;box-shadow:0 10px 20px -5px #3b82f666}.btn-popular:hover{background:#2563eb;box-shadow:0 15px 30px -5px #3b82f680}.upgrade-confirm-modal{max-width:450px;padding:2.5rem;text-align:center}.modal-icon-l{width:64px;height:64px;background:#eff6ff;color:#3b82f6;border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem}.admin-portal{--primary-color: #ef4444;--primary-hover: #dc2626;--primary-light: rgba(239, 68, 68, .1);--primary-shadow: rgba(239, 68, 68, .3)}.admin-portal .sidebar{border-right:1px solid rgba(255,255,255,.05)}.admin-portal .nav-item.active{background:var(--primary-color)!important;box-shadow:0 4px 12px var(--primary-shadow)!important}.admin-portal .user-avatar{background:linear-gradient(135deg,#ef4444,#991b1b)!important}.admin-dashboard .stat-card .stat-header{margin-bottom:1.5rem}.admin-dashboard .stat-value{font-size:2.5rem;font-weight:800;letter-spacing:-1px}.admin-theme .auth-card{border-top:5px solid #ef4444}.modal-overlay{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1.5rem}.modal-container{width:100%;border-radius:var(--radius-xl);box-shadow:0 25px 50px -12px #00000040;background:#fff;overflow:hidden}.modal-content{width:100%;max-width:600px;border-radius:20px;box-shadow:0 25px 50px -12px #00000040;background:#fff;overflow:hidden}.modal-header{padding:1.5rem;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.modal-header h2{font-size:1.5rem;font-weight:700;margin:0}.modal-body{padding:1.5rem;max-height:70vh;overflow-y:auto}.modal-footer{padding:1.5rem;border-top:1px solid var(--border-color);display:flex;justify-content:flex-end;gap:1rem;background:var(--bg-main)}.form-grid{display:grid;gap:1.5rem}.form-group label{display:block;font-size:.875rem;font-weight:600;margin-bottom:.5rem;color:var(--text-main)}.tooltip{position:relative}.tooltip:hover:after{content:attr(title);position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:#1e293b;color:#fff;padding:4px 8px;border-radius:4px;font-size:10px;white-space:nowrap;z-index:10}.plan-badge{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase}.plan-badge.basic{background:#e2e8f0;color:#475569}.plan-badge.professional{background:#dbeafe;color:#2563eb}.plan-badge.enterprise{background:#fef3c7;color:#d97706}.sticky-footer{position:sticky;bottom:1.5rem;z-index:10;margin-top:2rem;box-shadow:0 -10px 20px #0000000d}.section-header{display:flex;align-items:center;gap:.75rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color);margin-bottom:1.5rem}.section-header h2{font-size:1.125rem;margin:0}.plan-card .pricing{padding:1rem 0;border-bottom:1px solid var(--border-color)}.plan-card .current-label{position:absolute;top:0;right:0;background:#10b981;color:#fff;padding:4px 12px;font-size:10px;font-weight:700;border-bottom-left-radius:12px;text-transform:uppercase}.revenue-value{color:#10b981;font-family:Outfit;font-weight:700}.premium-modal{background:linear-gradient(to bottom right,#fff,#f8fafc)!important;border:1px solid rgba(255,255,255,.5)!important;box-shadow:0 30px 60px -12px #0003,0 18px 36px -18px #00000038!important;overflow:hidden!important}.modal-header-premium{background:linear-gradient(to right,#fff,#f1f5f9)!important;padding:1.75rem 2rem!important;border-bottom:1px solid #e2e8f0!important}.modal-title-area{display:flex;align-items:center;gap:1rem}.modal-icon-wrapper{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 16px #ef444433}.premium-input-group{margin-bottom:1.5rem}.premium-input-group label{display:block!important;font-size:.8125rem!important;font-weight:700!important;color:#475569!important;margin-bottom:.625rem!important;text-transform:uppercase!important;letter-spacing:.05em!important}.premium-input-wrapper{position:relative;display:flex;align-items:center}.premium-input-icon{position:absolute;left:1rem;color:#94a3b8;z-index:10}.premium-input{width:100%!important;padding:.75rem 1rem .75rem 2.85rem!important;border:2px solid #e2e8f0!important;border-radius:12px!important;font-size:.9375rem!important;font-weight:500!important;transition:all .2s cubic-bezier(.4,0,.2,1)!important;background:#fff!important}.premium-input:focus{outline:none!important;border-color:#ef4444!important;box-shadow:0 0 0 4px #ef44441a!important;transform:translateY(-1px)}.feature-selection-box{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:1.5rem}.feature-tag-pill{padding:.5rem 1.125rem;border-radius:12px;font-size:.8125rem;font-weight:600;border:1px solid #e2e8f0;transition:all .2s;background:#fff;cursor:pointer;color:#64748b}.feature-tag-pill:hover{border-color:#ef4444;color:#ef4444;transform:translateY(-2px);box-shadow:0 4px 12px #0000000d}.feature-tag-pill.selected{background:#ef4444;color:#fff;border-color:#ef4444;box-shadow:0 4px 12px #ef44444d}.selected-feature-badge{background:#f1f5f9;color:#1e293b;padding:.5rem .75rem;border-radius:8px;font-size:.75rem;font-weight:800;display:flex;align-items:center;gap:.5rem;border:1px solid #e2e8f0;text-transform:uppercase}.selected-feature-badge button{color:#94a3b8;display:flex;align-items:center;justify-content:center;border:none;background:none;padding:0;cursor:pointer}.selected-feature-badge button:hover{color:#ef4444}.btn-premium-action{padding:.75rem 1.75rem!important;border-radius:12px!important;font-weight:700!important;font-size:.9375rem!important;transition:all .2s!important;display:flex!important;align-items:center!important;gap:.625rem!important;cursor:pointer}.btn-premium-primary{background:linear-gradient(135deg,#ef4444,#dc2626)!important;color:#fff!important;box-shadow:0 8px 20px -6px #ef444480!important;border:none!important}.btn-premium-primary:hover{transform:translateY(-2px)!important;box-shadow:0 12px 24px -6px #ef444499!important}.btn-premium-secondary{background:#fff!important;color:#64748b!important;border:2px solid #e2e8f0!important}.btn-premium-secondary:hover{background:#f8fafc!important;border-color:#cbd5e1!important;color:#1e293b!important}.dashboard-filters{padding:1.25rem;display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-end;background:#f8fafc;border-radius:20px;border:1px solid #f1f5f9}.filter-group{display:flex;flex-direction:column;gap:.4rem}@media(max-width:768px){.dashboard-filters{flex-direction:column;align-items:stretch;gap:1rem}.filter-group select{width:100%!important;min-width:unset!important}}.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;margin-top:2rem}@media(max-width:1200px){.dashboard-grid{grid-template-columns:1fr}}.chart-card{padding:2rem;background:#fff;border-radius:24px;box-shadow:0 10px 25px -5px #0000000d,0 8px 10px -6px #0000000d;border:1px solid #f1f5f9;transition:transform .3s ease,box-shadow .3s ease;display:flex;flex-direction:column}.chart-card:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.simple-bar-chart{height:320px;display:flex;align-items:flex-end;gap:.75rem;padding:2rem .5rem 1.5rem;position:relative;border-bottom:2px solid #f1f5f9;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#e2e8f0 transparent}.chart-grid-lines{position:absolute;top:2rem;left:0;right:0;bottom:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;z-index:0}.chart-grid-line{width:100%;height:1px;background:#f1f5f9}.simple-bar-chart::-webkit-scrollbar{height:6px}.simple-bar-chart::-webkit-scrollbar-track{background:transparent}.simple-bar-chart::-webkit-scrollbar-thumb{background-color:#e2e8f0;border-radius:20px}.bar-wrapper{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.75rem;height:100%;justify-content:flex-end;min-width:45px}.bar{width:24px;border-top-left-radius:8px;border-top-right-radius:8px;background:linear-gradient(to top,var(--primary-color, #ef4444),#f87171);transition:all .4s cubic-bezier(.34,1.56,.64,1);cursor:pointer;position:relative;box-shadow:0 4px 12px #ef444426;z-index:1}.bar:hover{filter:brightness(1.05);transform:scaleX(1.15) translateY(-2px);box-shadow:0 8px 20px #ef444440}.bar:hover{filter:brightness(1.1);transform:scaleX(1.1)}.bar-label{font-size:.75rem;font-weight:700;color:#64748b}.bar-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-10px);background:#1e293b;color:#fff;padding:4px 8px;border-radius:6px;font-size:10px;white-space:nowrap;opacity:0;visibility:hidden;transition:.2s}.bar:hover .bar-tooltip{opacity:1;visibility:visible;transform:translate(-50%) translateY(-5px)}.pie-simulation{width:100%;aspect-ratio:1;border-radius:50%;background:conic-gradient(#ef4444 0% 25%,#3b82f6 25% 60%,#10b981 60% 100%);position:relative;margin:2rem auto}.pie-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60%;height:60%;background:#fff;border-radius:50%}.legend{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem}.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:600;color:#475569}.legend-color{width:12px;height:12px;border-radius:4px}.activity-list{display:flex;flex-direction:column;gap:1rem}.activity-item{display:flex;align-items:center;gap:1rem;padding:.75rem;border-radius:12px;border:1px solid transparent;transition:.2s}.activity-item:hover{background:#f8fafc;border-color:#cbd5e1;transform:translate(4px);box-shadow:0 2px 8px #0000000d}.spin{animation:spin 1s linear infinite}:root{--primary-color: #6366f1;--primary-hover: #4f46e5;--secondary-color: #10b981;--accent-color: #f43f5e;--bg-main: #f8fafc;--bg-card: #ffffff;--bg-sidebar: #1e293b;--text-main: #1e293b;--text-muted: #64748b;--text-on-dark: #f8fafc;--border-color: #e2e8f0;--input-bg: #ffffff;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-premium: 0 20px 25px -5px rgba(0, 0, 0, .05), 0 8px 10px -6px rgba(0, 0, 0, .05);--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .3s cubic-bezier(.4, 0, .2, 1)}[data-theme=dark]{--bg-main: #0f172a;--bg-card: #1e293b;--text-main: #f1f5f9;--text-muted: #94a3b8;--border-color: #334155;--input-bg: #0f172a}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--bg-main);color:var(--text-main);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-family:Outfit,sans-serif;font-weight:600;color:var(--text-main)}a{text-decoration:none;color:inherit;transition:var(--transition-fast)}button{cursor:pointer;border:none;background:none;font-family:inherit;transition:var(--transition-fast)}.glass{background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2)}[data-theme=dark] .glass{background:#1e293bb3;border:1px solid rgba(255,255,255,.1)}.card{background:var(--bg-card);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-premium);border:1px solid var(--border-color);transition:transform var(--transition-base),box-shadow var(--transition-base)}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.container{max-width:1280px;margin:0 auto;padding:0 1.5rem}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-main)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.hidden-mobile{display:block}.show-mobile{display:none}.stats-grid,.dashboard-grid{display:grid;gap:1.5rem}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.table-card{overflow-x:auto}.data-table{min-width:800px}@media(max-width:1024px){.stats-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.dashboard-grid{grid-template-columns:1fr}.card{padding:1.25rem}h1{font-size:1.75rem}h2{font-size:1.5rem}}@media(max-width:768px){.hidden-mobile{display:none}.show-mobile{display:block}.stats-grid{grid-template-columns:1fr;gap:1rem}.card{padding:1rem;border-radius:var(--radius-md)}.container{padding:0 1rem}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}.page-header{flex-direction:column;align-items:flex-start!important;gap:1rem}.header-actions{width:100%;flex-direction:column}.header-actions button{width:100%}}@media(max-width:480px){body{font-size:14px}.card{padding:.875rem}.btn{padding:.625rem 1rem;font-size:.875rem}h1{font-size:1.375rem}.stats-grid{gap:.75rem}}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1 1 0%}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}@media(min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}.p-0{padding:0}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-6{padding-left:1.5rem}.pl-8{padding-left:2rem}.pr-2{padding-right:.5rem}.m-0{margin:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-4xl{font-size:2.25rem}.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-extrabold{font-weight:800}.uppercase{text-transform:uppercase}.tracking-wider{letter-spacing:.05em}.tracking-tighter{letter-spacing:-.05em}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-white{color:#fff}.text-gray-400{color:#94a3b8}.text-gray-500{color:#64748b}.text-gray-600{color:#475569}.text-gray-700{color:#334155}.text-gray-800{color:#1e293b}.text-indigo-100{color:#e0e7ff}.text-indigo-400{color:#818cf8}.text-indigo-600{color:#4f46e5}.text-green-600{color:#16a34a}.text-green-700{color:#15803d}.text-red-600{color:#dc2626}.text-red-700{color:#b91c1c}.text-amber-700{color:#b45309}.bg-white{background-color:#fff}.bg-gray-50{background-color:#f8fafc}.bg-gray-100{background-color:#f1f5f9}.bg-indigo-50{background-color:#eef2ff}.bg-indigo-600{background-color:#4f46e5}.bg-green-50{background-color:#f0fdf4}.bg-green-100{background-color:#dcfce7}.bg-red-50{background-color:#fef2f2}.bg-red-100{background-color:#fee2e2}.bg-amber-100{background-color:#fef3c7}.border{border:1px solid var(--border-color)}.border-b{border-bottom:1px solid var(--border-color)}.border-b-2{border-bottom-width:2px}.border-t{border-top:1px solid var(--border-color)}.border-l{border-left:1px solid var(--border-color)}.border-transparent{border-color:transparent}.border-gray-100{border-color:#f1f5f9}.border-gray-200{border-color:#e2e8f0}.border-indigo-100{border-color:#e0e7ff}.border-indigo-200{border-color:#c7d2fe}.border-green-100{border-color:#dcfce7}.border-red-100{border-color:#fee2e2}.rounded{border-radius:var(--radius-sm)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-full{border-radius:9999px}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-lg{box-shadow:var(--shadow-lg)}.sticky{position:sticky}.top-0{top:0}.z-10{z-index:10}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.animate-spin{animation:spin 1s linear infinite}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.625rem 1.25rem;border-radius:var(--radius-md);font-weight:500;font-size:.875rem;transition:all var(--transition-fast);gap:.5rem}.btn-primary{background-color:var(--primary-color);color:#fff;box-shadow:0 4px 14px #6366f163}.btn-primary:hover{background-color:var(--primary-hover);transform:translateY(-1px);box-shadow:0 6px 20px #6366f13b}.btn-secondary{background-color:var(--bg-card);color:var(--text-main);border:1px solid var(--border-color)}.btn-secondary:hover{background-color:var(--bg-main);border-color:var(--text-muted)}.input-group{margin-bottom:1.25rem}.input-group label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:var(--text-main)}.input-field{width:100%;padding:.625rem .875rem;border-radius:var(--radius-md);border:1px solid var(--border-color);background-color:var(--input-bg);color:var(--text-main);font-family:inherit;transition:all var(--transition-fast)}.input-field:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f11a}.badge{padding:.25rem .625rem;border-radius:9999px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em}.badge-success{background:#10b9811a;color:#059669}.badge-warning{background:#f59e0b1a;color:#d97706}.badge-danger{background:#f43f5e1a;color:#e11d48}.badge-info{background:#3b82f61a;color:#2563eb}.overview-container{display:flex;flex-direction:column;gap:2rem}.welcome-section h1{font-size:1.875rem;margin-bottom:.25rem}.welcome-section .text-muted{font-size:1rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}.stat-card{display:flex;flex-direction:column;gap:1rem}.stat-header{display:flex;justify-content:space-between;align-items:flex-start}.stat-body h3{font-size:.875rem;color:var(--text-muted);font-weight:500;margin-bottom:.25rem}.stat-value{font-size:1.5rem;font-weight:700;color:var(--text-main);font-family:Outfit,sans-serif}.text-3xl{font-size:1.875rem}.font-bold{font-weight:700}.text-muted{color:var(--text-muted)}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.punch-compact-container{width:100%;max-width:600px;margin:0 auto}.punch-compact-card{background:linear-gradient(135deg,#fff,#f8fafc);border:1px solid #e2e8f0;border-radius:20px;padding:1.5rem;box-shadow:0 4px 12px #0000000d}.punch-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #f1f5f9}.punch-time-display{display:flex;align-items:center;gap:.5rem}.time-icon{color:#64748b}.current-time{font-size:1.5rem;font-weight:800;letter-spacing:-.5px;color:#0f172a}.punch-status-badge{padding:6px 14px;border-radius:99px;font-size:.8125rem;font-weight:700}.status-inactive{background:#f1f5f9;color:#64748b}.status-active{background:#dcfce7;color:#16a34a;display:flex;align-items:center;gap:6px}.punch-action-row{display:flex;justify-content:space-between;align-items:center;gap:2rem}.punch-info-col{flex:1}.shift-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;margin-bottom:.25rem}.shift-time{font-size:1rem;font-weight:700;color:#1e293b;margin:0}.clocked-in-time{font-size:.8125rem;color:#16a34a;margin-top:.5rem;font-weight:600}.punch-btn-compact{padding:1rem 2rem;border-radius:16px;border:none;font-weight:800;font-size:1rem;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 8px 20px -6px #0003}.punch-in-btn{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.punch-in-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -6px #3b82f666}.punch-out-btn{background:linear-gradient(135deg,#f43f5e,#e11d48);color:#fff}.punch-out-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -6px #f43f5e66}.btn-glow{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 70%);opacity:0;transition:opacity .3s}.punch-btn-compact:hover .btn-glow{opacity:1}.punch-loading-compact,.punch-camera-compact,.punch-success-compact,.punch-error-compact{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:2rem;text-align:center;box-shadow:0 4px 12px #0000000d}.punch-loading-compact{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:3rem 2rem}.spinning-icon{animation:spin 1s linear infinite;color:#3b82f6}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.camera-preview-compact{width:200px;height:260px;background:#000;border-radius:16px;margin:0 auto 1.5rem;position:relative;overflow:hidden}.camera-video{width:100%;height:100%;object-fit:cover}.face-guide-compact{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140px;height:180px;border:2px dashed rgba(255,255,255,.6);border-radius:80px}.camera-instructions{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1rem;color:#64748b;font-size:.875rem;font-weight:600}.success-icon{color:#10b981;margin-bottom:1rem}.punch-success-compact h3{font-size:1.5rem;font-weight:800;margin-bottom:.5rem;color:#0f172a}.success-time{font-size:1.25rem;font-weight:700;color:#3b82f6;margin:.5rem 0}.success-meta{display:flex;align-items:center;justify-content:center;gap:.5rem;color:#64748b;font-size:.875rem;margin-top:1rem}.error-icon{color:#ef4444;margin-bottom:1rem}.punch-error-compact h3{font-size:1.25rem;font-weight:800;margin-bottom:.5rem;color:#ef4444}.error-message{color:#64748b;font-size:.9375rem;margin:0}.btn-sm{padding:.625rem 1.5rem;font-size:.875rem}.mt-3{margin-top:1rem}@media(max-width:640px){.punch-action-row{flex-direction:column;align-items:stretch;gap:1.5rem}.punch-btn-compact{width:100%}.current-time{font-size:1.25rem}}.help-docs-container.detail-view{animation:slideInHelp .4s cubic-bezier(.16,1,.3,1)}@keyframes slideInHelp{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.back-btn{display:flex;align-items:center;gap:.5rem;background:none;border:none;color:#64748b;font-weight:600;font-size:.875rem;padding:0;margin-bottom:2rem;cursor:pointer;transition:all .2s}.back-btn:hover{color:#ef4444;transform:translate(-4px)}.detail-header{margin-bottom:2rem;padding:3rem;border-radius:24px;display:flex;align-items:center;gap:2rem;color:#fff}.detail-header.blue{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}.detail-header.orange{background:linear-gradient(135deg,#f97316,#ea580c)}.detail-header.emerald{background:linear-gradient(135deg,#10b981,#047857)}.detail-header.purple{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}.header-icon-large{width:80px;height:80px;background:#fff3;border-radius:24px;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 16px #0000001a}.detail-header h1{font-size:2.5rem;font-weight:800;font-family:Outfit;letter-spacing:-1px}.detail-content{padding:3rem;border-radius:24px;border:1px solid #f1f5f9}.doc-content section{margin-bottom:3rem}.doc-content h3{font-size:1.25rem;font-weight:700;margin-bottom:1rem;color:#1e293b;display:flex;align-items:center;gap:.75rem}.doc-content p{color:#475569;line-height:1.8;font-size:1.05rem;margin-bottom:1.5rem}.doc-content ul{list-style:none;padding-left:1rem}.doc-content li{position:relative;padding-left:1.75rem;margin-bottom:.75rem;color:#64748b;font-weight:500}.doc-content li:before{content:"→";position:absolute;left:0;color:#ef4444;font-weight:900}.logic-box{background:#1e293b;color:#e2e8f0;padding:1.5rem 2rem;border-radius:16px;font-family:JetBrains Mono,monospace;font-size:.9375rem;border-left:4px solid #ef4444}.info-list{background:#f8fafc;padding:1.25rem 1.5rem!important;border-radius:12px;border-left:4px solid #3b82f6;display:flex;align-items:center;gap:.75rem}.doc-footer{margin-top:4rem;padding-top:2rem;border-top:1px solid #f1f5f9}.was-helpful{display:flex;align-items:center;justify-content:space-between}.action-btns{display:flex;gap:1rem}@media(max-width:768px){.detail-header{flex-direction:column;text-align:center;padding:2rem}.detail-header h1{font-size:1.75rem}}.help-content-grid{display:grid;grid-template-columns:2fr 1fr;gap:2rem}.help-section-card{margin-bottom:2rem;padding:2.5rem;border-radius:24px;border:1px solid #f1f5f9;transition:all .3s ease}.help-section-card:hover{box-shadow:0 20px 40px -10px #0000000d}.section-header-row{display:flex;gap:1.5rem;margin-bottom:2rem}.section-icon-box{width:60px;height:60px;border-radius:20px;background:#f8fafc;display:flex;align-items:center;justify-content:center;flex-shrink:0}.section-title-info h2{font-size:1.5rem;font-weight:700;margin-bottom:.25rem}.section-title-info p{color:#64748b;font-size:.9375rem}.section-body{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.content-item h3{font-size:1.125rem;font-weight:700;margin-bottom:.75rem;color:#1e293b}.content-item p{font-size:.9375rem;line-height:1.6;color:#64748b;margin-bottom:1rem}.item-footer .text-btn{background:none;border:none;padding:0;color:#ef4444;font-weight:600;font-size:.875rem;display:flex;align-items:center;gap:.25rem;cursor:pointer}.help-sidebar{display:flex;flex-direction:column;gap:1.5rem}.promo-card{background:linear-gradient(135deg,#fff1f2,#fff);border:1px solid #fee2e2;padding:2.5rem;border-radius:24px;text-align:center}.promo-icon{width:64px;height:64px;background:#fff;border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;box-shadow:0 8px 20px #ef44441a}.promo-card h3{font-size:1.25rem;font-weight:700;margin-bottom:.75rem}.promo-card p{font-size:.9375rem;color:#64748b;margin-bottom:1.5rem;line-height:1.5}.categories-card{padding:2rem;border-radius:24px}.categories-card h3{font-size:1rem;font-weight:700;margin-bottom:1.5rem;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8}.category-list{list-style:none;padding:0;margin:0}.category-list li{padding:1rem 0;border-bottom:1px solid #f1f5f9;font-weight:600;font-size:.9375rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s}.category-list li:hover{color:#ef4444;padding-left:.5rem}.category-list li:last-child{border-bottom:none}.tag{background:#ef4444;color:#fff;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:800}@media(max-width:1024px){.help-content-grid,.section-body{grid-template-columns:1fr}}