@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap";.main-layout{display:flex;min-height:100vh}.sidebar{width:260px;background-color:var(--color-bg-secondary);border-right:1px solid var(--color-border);display:flex;flex-direction:column;transition:width var(--transition-base);position:fixed;left:0;top:0;bottom:0;z-index:var(--z-sticky)}.sidebar.collapsed{width:72px}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);border-bottom:1px solid var(--color-border);min-height:64px}.sidebar-logo{display:flex;align-items:center;gap:var(--space-3);overflow:hidden}.sidebar-logo img{width:36px;height:36px;border-radius:var(--radius-md);object-fit:cover}.logo-placeholder{width:36px;height:36px;background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);color:#fff;flex-shrink:0}.logo-text{font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-toggle{background:transparent;border:none;color:var(--color-text-muted);cursor:pointer;padding:var(--space-2);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.sidebar-toggle:hover{background-color:var(--color-bg-hover);color:var(--color-text-primary)}.sidebar-nav{flex:1;padding:var(--space-4);overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-2)}.nav-section{display:flex;flex-direction:column;gap:var(--space-1)}.nav-section:not(:last-child){padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border);margin-bottom:var(--space-4)}.nav-section-header{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3);background:transparent;border:none;color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:500;cursor:pointer;border-radius:var(--radius-md);transition:all var(--transition-fast)}.nav-section-header:hover{background-color:var(--color-bg-tertiary);color:var(--color-text-primary)}.nav-section-header .chevron{margin-left:auto;transition:transform var(--transition-fast)}.nav-section-header .chevron.open{transform:rotate(180deg)}.nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:500;border-radius:var(--radius-md);transition:all var(--transition-fast);text-decoration:none}.nav-item:hover:not(.disabled){background-color:var(--color-bg-tertiary);color:var(--color-text-primary)}.nav-item.active{background-color:#22c55e1a;color:var(--color-accent-primary)}.nav-item.disabled{opacity:.5;cursor:not-allowed}.nav-submenu{padding-left:var(--space-4);display:flex;flex-direction:column;gap:var(--space-1);animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.nav-item.sub-item{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}.badge-soon{margin-left:auto;padding:2px 6px;background-color:var(--color-bg-hover);color:var(--color-text-muted);font-size:10px;border-radius:var(--radius-full)}.sidebar-footer{padding:var(--space-4);border-top:1px solid var(--color-border);display:flex;flex-direction:column;gap:var(--space-3)}.user-avatar{width:36px;height:36px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--text-sm);color:#fff;flex-shrink:0}.user-details{display:flex;flex-direction:column;overflow:hidden}.user-name{font-size:var(--text-sm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-role{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:capitalize}.logout-btn{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3);background:transparent;border:1px solid var(--color-border);color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:500;cursor:pointer;border-radius:var(--radius-md);transition:all var(--transition-fast)}.logout-btn:hover{background-color:#ef44441a;border-color:var(--color-danger);color:var(--color-danger)}.main-content{flex:1;margin-left:260px;min-height:100vh;transition:margin-left var(--transition-base)}.sidebar.collapsed+.main-content,.sidebar.collapsed~.main-content{margin-left:72px}@media(max-width:768px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0);width:260px}.main-content{margin-left:0}}.auth-layout{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.auth-container{position:relative;z-index:10;width:100%;max-width:420px;padding:var(--space-6)}.auth-background{position:absolute;inset:0;z-index:0}.auth-gradient{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(34,197,94,.08) 0%,transparent 50%)}.auth-pattern{position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,var(--color-border) 1px,transparent 0);background-size:40px 40px;opacity:.3}.auth-card{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--space-10);box-shadow:var(--shadow-xl)}.auth-logo{display:flex;justify-content:center;margin-bottom:var(--space-6)}.auth-logo img{height:48px;width:auto}.auth-logo-placeholder{width:48px;height:48px;background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);color:#fff}.auth-header{text-align:center;margin-bottom:var(--space-8)}.auth-title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;margin-bottom:var(--space-2)}.auth-subtitle{color:var(--color-text-muted);font-size:var(--text-sm)}.auth-form{display:flex;flex-direction:column;gap:var(--space-4)}.auth-footer{margin-top:var(--space-6);text-align:center;font-size:var(--text-sm);color:var(--color-text-muted)}.dashboard-hero{background:linear-gradient(135deg,#22c55e1a,#3b82f61a);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);margin-bottom:var(--space-8);display:flex;align-items:center;justify-content:space-between}.hero-title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:700;margin-bottom:var(--space-2)}.hero-subtitle{color:var(--color-text-muted);font-size:var(--text-base)}.hero-time{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-2xl);font-weight:600;color:var(--color-text-secondary)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);margin-bottom:var(--space-8)}@media(max-width:1200px){.stats-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.stats-grid{grid-template-columns:1fr}}.stat-card{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);display:flex;align-items:flex-start;gap:var(--space-4);position:relative;transition:all var(--transition-fast)}.stat-card:hover{border-color:var(--color-border-hover);transform:translateY(-2px)}.stat-icon{width:48px;height:48px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}.stat-value{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:700;line-height:1}.stat-label{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-1)}.stat-badge{position:absolute;top:var(--space-4);right:var(--space-4);font-size:10px;padding:2px 8px}.dashboard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6)}@media(max-width:1024px){.dashboard-grid{grid-template-columns:1fr}}.gender-stats{display:flex;flex-direction:column;gap:var(--space-4)}.gender-bar{height:12px;background-color:var(--color-bg-tertiary);border-radius:var(--radius-full);display:flex;overflow:hidden}.gender-male{background:linear-gradient(90deg,#3b82f6,#6366f1);height:100%;transition:width var(--transition-slow)}.gender-female{background:linear-gradient(90deg,#ec4899,#f472b6);height:100%;transition:width var(--transition-slow)}.gender-legend{display:flex;gap:var(--space-6)}.legend-item{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-secondary)}.legend-color{width:12px;height:12px;border-radius:var(--radius-sm)}.legend-color.male{background:linear-gradient(135deg,#3b82f6,#6366f1)}.legend-color.female{background:linear-gradient(135deg,#ec4899,#f472b6)}.job-type-list{display:flex;flex-direction:column;gap:var(--space-3)}.job-type-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);background-color:var(--color-bg-tertiary);border-radius:var(--radius-md)}.job-type-name{font-size:var(--text-sm);color:var(--color-text-secondary)}.job-type-count{font-weight:600;color:var(--color-accent-primary)}.quick-actions{display:flex;flex-direction:column;gap:var(--space-3)}.quick-action-btn{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background-color:var(--color-bg-tertiary);border-radius:var(--radius-md);color:var(--color-text-secondary);text-decoration:none;transition:all var(--transition-fast)}.quick-action-btn:hover{background-color:var(--color-bg-hover);color:var(--color-accent-primary)}.placeholder-content{padding:var(--space-8);text-align:center;background-color:var(--color-bg-tertiary);border-radius:var(--radius-md)}.absentee-list,.top-absentees{display:flex;flex-direction:column;gap:var(--space-2)}.absentee-item,.absentee-rank-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);background-color:var(--color-bg-tertiary);border-radius:var(--radius-md)}.absentee-rank-item{gap:var(--space-3)}.rank-number{width:24px;height:24px;background-color:var(--color-bg-hover);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted)}.absentee-info{display:flex;flex-direction:column;flex:1}.absentee-name{font-size:var(--text-sm);font-weight:500}.absentee-code,.absentee-designation{font-size:var(--text-xs);color:var(--color-text-muted)}.absence-counts{display:flex;flex-direction:column;align-items:flex-end}.absence-full{font-size:var(--text-xs);color:var(--color-danger);font-weight:500}.absence-half{font-size:10px;color:var(--color-warning)}.device-status-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.device-status-item{display:flex;flex-direction:column;align-items:center;padding:var(--space-4);border-radius:var(--radius-lg);gap:var(--space-2)}.device-status-item.online{background-color:#22c55e1a;color:var(--color-success)}.device-status-item.offline{background-color:#71717a1a;color:var(--color-text-muted)}.device-count{font-size:var(--text-2xl);font-weight:700;font-family:var(--font-display)}.device-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em}.holiday-list{display:flex;flex-direction:column;gap:var(--space-2)}.holiday-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background-color:var(--color-bg-tertiary);border-radius:var(--radius-md);color:var(--color-text-secondary)}.holiday-info{display:flex;justify-content:space-between;flex:1}.holiday-name{font-size:var(--text-sm)}.holiday-date{font-size:var(--text-sm);color:var(--color-accent-primary);font-weight:500}.alert-card{display:flex;align-items:center;gap:var(--space-4);background:linear-gradient(135deg,#f59e0b1a,#ef44440d);border-color:#f59e0b4d;grid-column:1 / -1}.alert-card svg{color:var(--color-warning)}.alert-content{display:flex;flex-direction:column;flex:1}.alert-title{font-weight:600;color:var(--color-warning)}.alert-message{font-size:var(--text-sm);color:var(--color-text-muted)}.settings-layout{display:grid;grid-template-columns:240px 1fr;gap:var(--space-6);min-height:600px}@media(max-width:768px){.settings-layout{grid-template-columns:1fr}}.settings-tabs{display:flex;flex-direction:column;gap:var(--space-1);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-4);height:fit-content}.settings-tab{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:transparent;border:none;color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:500;cursor:pointer;border-radius:var(--radius-md);transition:all var(--transition-fast);text-align:left}.settings-tab:hover{background-color:var(--color-bg-tertiary);color:var(--color-text-primary)}.settings-tab.active{background-color:#22c55e1a;color:var(--color-accent-primary)}.settings-content{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8)}.settings-section{margin-bottom:var(--space-8)}.settings-section:last-child{margin-bottom:0}.logo-upload-area{display:flex;gap:var(--space-6);align-items:flex-start}.logo-preview{width:120px;height:120px;border-radius:var(--radius-lg);overflow:hidden;border:2px dashed var(--color-border);display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-tertiary)}.logo-preview img{width:100%;height:100%;object-fit:cover}.logo-placeholder-large{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);color:var(--color-text-muted);font-size:var(--text-xs);text-align:center;padding:var(--space-2)}.logo-actions{display:flex;flex-direction:column;gap:var(--space-3)}.logo-actions .btn{width:fit-content}.toggle-group{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-6)}.toggle-label input[type=checkbox]{width:20px;height:20px;margin-top:2px;accent-color:var(--color-accent-primary)}.toggle-text{display:flex;flex-direction:column;gap:var(--space-1)}.info-box.warning{background-color:#f59e0b1a;border-color:#f59e0b33}.form-actions{display:flex;gap:var(--space-4);padding-top:var(--space-6);border-top:1px solid var(--color-border);margin-top:var(--space-6)}.filters-bar{display:flex;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap}.search-box{flex:1;min-width:250px;display:flex;align-items:center;gap:var(--space-3);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:0 var(--space-4)}.search-box input{flex:1;background:transparent;border:none;padding:var(--space-3) 0}.search-box input:focus{box-shadow:none}.search-box svg{color:var(--color-text-muted)}.filter-group{display:flex;align-items:center;gap:var(--space-2);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:0 var(--space-4)}.filter-group select{background:transparent;border:none;padding:var(--space-3) var(--space-2);min-width:120px}.filter-group select:focus{box-shadow:none}.filter-group svg{color:var(--color-text-muted)}.employee-cell{display:flex;align-items:center;gap:var(--space-3)}.employee-avatar{width:40px;height:40px;border-radius:var(--radius-full);background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--text-sm);color:#fff;overflow:hidden}.employee-avatar img{width:100%;height:100%;object-fit:cover}.employee-info{display:flex;flex-direction:column}.employee-name{font-weight:500}.employee-gender{font-size:var(--text-xs);color:var(--color-text-muted)}.employee-code{background-color:var(--color-bg-tertiary);padding:2px 8px;border-radius:var(--radius-sm);font-size:var(--text-xs);font-family:monospace}.salary-display{font-weight:500;color:var(--color-success);white-space:nowrap}.salary-type{font-weight:400;color:var(--color-text-muted);margin-left:2px}.actions-cell{display:flex;gap:var(--space-1)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-16);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);text-align:center;gap:var(--space-4)}.empty-state p{color:var(--color-text-muted)}.pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-4);margin-top:var(--space-6)}.pagination-info{font-size:var(--text-sm);color:var(--color-text-muted)}.detail-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap}.detail-header-left{display:flex;align-items:center;gap:var(--space-3)}.detail-title{display:flex;align-items:center;gap:var(--space-4)}.employee-avatar-lg{width:64px;height:64px;border-radius:var(--radius-full);background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-2xl);color:#fff;overflow:hidden}.employee-avatar-lg img{width:100%;height:100%;object-fit:cover}.detail-title h1{font-size:var(--text-2xl);font-weight:600;margin:0}.detail-subtitle{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-1)}.detail-subtitle code{background-color:var(--color-bg-tertiary);padding:2px 8px;border-radius:var(--radius-sm);font-size:var(--text-sm)}.detail-header-actions{display:flex;gap:var(--space-3)}.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:var(--space-6)}@media(max-width:480px){.detail-grid{grid-template-columns:1fr}}.detail-card{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl)}.detail-card .card-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border)}.detail-card .card-header h3{font-size:var(--text-base);font-weight:600;margin:0}.detail-card .card-body{padding:var(--space-5)}.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.info-item{display:flex;flex-direction:column;gap:var(--space-1)}.info-item.full-width{grid-column:1 / -1}.info-label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.info-value{font-size:var(--text-sm);font-weight:500}.info-value code{background-color:var(--color-bg-tertiary);padding:2px 8px;border-radius:var(--radius-sm);font-family:monospace}.salary-card .salary-amount{font-size:var(--text-lg);font-weight:600;color:var(--color-success)}.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-16);text-align:center;gap:var(--space-4)}.error-state svg{color:var(--color-text-muted)}.error-state h2{font-size:var(--text-xl);margin:0}.error-state p{color:var(--color-text-muted)}@media(max-width:640px){.detail-header{flex-direction:column;align-items:flex-start}.detail-header-actions{width:100%}.detail-header-actions .btn{flex:1}.info-grid{grid-template-columns:1fr}}.employee-form{display:flex;flex-direction:column;gap:var(--space-6)}.form-section{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8)}.info-box{background-color:#3b82f61a;border:1px solid rgba(59,130,246,.2);border-radius:var(--radius-md);padding:var(--space-4);margin-top:var(--space-4)}.info-box p{font-size:var(--text-sm);color:var(--color-text-secondary);margin:0}.config-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-6)}.config-card{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);transition:all var(--transition-fast)}.config-card:hover{border-color:var(--color-border-hover)}.config-card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--space-4)}.config-icon{width:40px;height:40px;background-color:#22c55e26;color:var(--color-accent-primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}.config-actions{display:flex;gap:var(--space-1)}.config-name{font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-2)}.config-description{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-3)}.config-meta{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-3)}.modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding:var(--space-4);animation:fadeIn .2s ease-out}.modal{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;animation:slideUp .2s ease-out}.modal-header{padding:var(--space-6);border-bottom:1px solid var(--color-border)}.modal-header h3{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600}.modal-body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}.modal-footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-border);display:flex;gap:var(--space-3);justify-content:flex-end}.empty-state svg{color:var(--color-text-muted);margin-bottom:var(--space-4)}.section-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-6);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border)}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6)}@media(max-width:768px){.form-grid{grid-template-columns:1fr}}.form-group.full-width{grid-column:1 / -1}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-top:var(--space-4)}.calendar-header{text-align:center;font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);padding:var(--space-2)}.calendar-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.calendar-day:hover{background-color:var(--color-bg-hover)}.calendar-day.today{border:2px solid var(--color-accent-primary)}.calendar-day.holiday{background-color:#ef444433;color:var(--color-danger)}.calendar-day.empty{cursor:default}.calendar-day.empty:hover{background:transparent}.holidays-layout{display:grid;grid-template-columns:1fr 350px;gap:var(--space-6)}@media(max-width:1024px){.holidays-layout{grid-template-columns:1fr}}.calendar-card{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6)}.calendar-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}.calendar-month{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-header{text-align:center;font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);padding:var(--space-2);text-transform:uppercase}.calendar-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);background-color:var(--color-bg-tertiary)}.calendar-day:hover:not(.empty){background-color:var(--color-bg-hover);transform:scale(1.05)}.calendar-day.empty{background:transparent;cursor:default}.calendar-day.today{border:2px solid var(--color-accent-primary);font-weight:600}.calendar-day.holiday{background-color:#ef444433;color:var(--color-danger);font-weight:600}.calendar-legend{display:flex;gap:var(--space-6);margin-top:var(--space-6);justify-content:center}.legend-item{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted)}.legend-dot{width:12px;height:12px;border-radius:var(--radius-sm)}.legend-dot.today{border:2px solid var(--color-accent-primary);background-color:transparent}.legend-dot.holiday{background-color:#ef44444d}.holidays-list-card{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6)}.holidays-list-card h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-6)}.empty-holidays{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-8);text-align:center;color:var(--color-text-muted)}.empty-holidays p{font-weight:500;margin-top:var(--space-3)}.empty-holidays span{font-size:var(--text-xs);margin-top:var(--space-1)}.holidays-list{display:flex;flex-direction:column;gap:var(--space-3)}.holiday-item{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3);background-color:var(--color-bg-tertiary);border-radius:var(--radius-md);transition:all var(--transition-fast)}.holiday-item:hover{background-color:var(--color-bg-hover)}.holiday-date{display:flex;flex-direction:column;align-items:center;min-width:48px;padding:var(--space-2) var(--space-3);background-color:#ef444426;border-radius:var(--radius-md)}.holiday-day{font-size:var(--text-xl);font-weight:700;color:var(--color-danger);line-height:1}.holiday-weekday{font-size:var(--text-xs);color:var(--color-danger);text-transform:uppercase}.holiday-info{flex:1}.holiday-name{font-weight:500}.device-status-bar{display:flex;gap:var(--space-6);padding:var(--space-4) var(--space-6);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:var(--space-6)}.status-item{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm)}.status-dot{width:10px;height:10px;border-radius:var(--radius-full)}.status-dot.online{background-color:var(--color-success);box-shadow:0 0 8px #22c55e80}.status-dot.offline{background-color:var(--color-warning)}.status-dot.error{background-color:var(--color-danger)}.device-card{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);transition:all var(--transition-fast)}.device-card:hover{border-color:var(--color-border-hover)}.device-status-icon{width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}.device-status-icon.online{background-color:#22c55e26;color:var(--color-success)}.device-status-icon.offline{background-color:#f59e0b26;color:var(--color-warning)}.device-status-icon.error{background-color:#ef444426;color:var(--color-danger)}.device-footer{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border)}.device-actions{display:flex;gap:var(--space-1)}.btn-sm{padding:var(--space-1) var(--space-2)}.timetable-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:var(--space-6)}.timetable-card{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);transition:all var(--transition-fast)}.timetable-card:hover{border-color:var(--color-border-hover)}.timetable-card.default{border-color:var(--color-accent-primary);background:linear-gradient(135deg,rgba(34,197,94,.05) 0%,transparent 100%)}.timetable-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.timetable-title{display:flex;align-items:center;gap:var(--space-2)}.timetable-title h4{font-size:var(--text-lg);font-weight:600}.default-star{color:var(--color-accent-primary);fill:var(--color-accent-primary)}.timetable-info{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}.info-row{display:flex;justify-content:space-between;font-size:var(--text-sm)}.info-label{color:var(--color-text-muted)}.info-value{font-weight:500}.timetable-breaks{padding:var(--space-3);background-color:var(--color-bg-tertiary);border-radius:var(--radius-md);margin-bottom:var(--space-4)}.timetable-breaks h5{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:var(--space-2)}.break-item{display:flex;justify-content:space-between;font-size:var(--text-sm);padding:var(--space-1) 0}.timetable-periods{margin-top:var(--space-4)}.timetable-periods h5{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:var(--space-3)}.period-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}.period-slot{display:flex;flex-direction:column;align-items:center;padding:var(--space-2);background-color:var(--color-bg-tertiary);border-radius:var(--radius-sm)}.period-num{font-weight:600;font-size:var(--text-xs);color:var(--color-accent-primary)}.period-time{font-size:var(--text-xs);color:var(--color-text-muted)}.days-selector{display:flex;gap:var(--space-2);flex-wrap:wrap}.day-btn{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast)}.day-btn:hover{border-color:var(--color-accent-primary)}.day-btn.active{background-color:var(--color-accent-primary);border-color:var(--color-accent-primary);color:var(--color-text-primary)}.break-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);background-color:var(--color-bg-tertiary);border-radius:var(--radius-md);margin-bottom:var(--space-2)}.break-name{flex:1;font-size:var(--text-sm)}.break-time{font-size:var(--text-sm);color:var(--color-text-muted)}.add-break-row{display:flex;gap:var(--space-2);margin-top:var(--space-2)}.add-break-row input{flex:1;min-width:0}.form-section{margin-top:var(--space-6)}.form-section>label{display:block;margin-bottom:var(--space-3);font-weight:500}.attendance-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);margin-bottom:var(--space-6)}@media(max-width:768px){.attendance-stats{grid-template-columns:repeat(2,1fr)}}.stat-card{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.stat-card.success{border-left:4px solid var(--color-success)}.stat-card.success svg{color:var(--color-success)}.stat-card.danger{border-left:4px solid var(--color-danger)}.stat-card.danger svg{color:var(--color-danger)}.stat-card.warning{border-left:4px solid var(--color-warning)}.stat-card.warning svg{color:var(--color-warning)}.stat-card.info{border-left:4px solid var(--color-accent-primary)}.stat-card.info svg{color:var(--color-accent-primary)}.stat-content{display:flex;flex-direction:column}.stat-value{font-size:var(--text-2xl);font-weight:700;font-family:var(--font-display)}.stat-label{font-size:var(--text-sm);color:var(--color-text-muted)}.attendance-filters{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6);padding:var(--space-4) var(--space-5);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.month-nav h3{font-family:var(--font-display);font-size:var(--text-lg);min-width:160px;text-align:center}.filter-group{display:flex;align-items:center;gap:var(--space-3)}.filter-group select{min-width:200px}.attendance-table-wrapper{overflow-x:auto;background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.attendance-table{width:100%;border-collapse:collapse;font-size:var(--text-xs)}.attendance-table th,.attendance-table td{padding:var(--space-2);text-align:center;border-bottom:1px solid var(--color-border)}.attendance-table th{background-color:var(--color-bg-tertiary);font-weight:600;color:var(--color-text-muted);position:sticky;top:0;z-index:1}.sticky-col{position:sticky;left:0;z-index:2;background-color:var(--color-bg-secondary);min-width:150px;text-align:left!important}.sticky-col.employee-cell{display:flex;flex-direction:column;padding:var(--space-2) var(--space-3)}.emp-name{font-weight:500;white-space:nowrap}.emp-code{font-size:10px;color:var(--color-text-muted)}.day-col{min-width:28px}.day-cell{cursor:pointer;transition:all var(--transition-fast)}.day-cell:hover{background-color:var(--color-bg-hover)}.day-cell.success{background-color:#22c55e26;color:var(--color-success)}.day-cell.danger{background-color:#ef444426;color:var(--color-danger)}.day-cell.warning{background-color:#f59e0b26;color:var(--color-warning)}.day-cell.info{background-color:#3b82f626;color:var(--color-accent-primary)}.day-cell.accent{background-color:#22c55e1a;color:var(--color-accent-primary)}.day-cell.muted{color:var(--color-text-muted)}.summary-cell{font-weight:600;min-width:36px}.summary-cell.success{color:var(--color-success)}.summary-cell.danger{color:var(--color-danger)}.summary-cell.warning{color:var(--color-warning)}.top-absentees{margin-top:var(--space-6);padding:var(--space-5);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.top-absentees h3{font-size:var(--text-lg);margin-bottom:var(--space-4)}.absentee-list{display:flex;flex-direction:column;gap:var(--space-3)}.absentee-item{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3);background-color:var(--color-bg-tertiary);border-radius:var(--radius-md)}.rank{font-weight:700;color:var(--color-danger);min-width:30px}.absentee-info{flex:1;display:flex;flex-direction:column}.absentee-info .name{font-weight:500}.absentee-info .code{font-size:var(--text-xs);color:var(--color-text-muted)}.absentee-stats{display:flex;gap:var(--space-3);font-size:var(--text-sm)}.absent-count{color:var(--color-danger);font-weight:500}.halfday-count{color:var(--color-warning)}.override-info{padding:var(--space-4);background-color:var(--color-bg-tertiary);border-radius:var(--radius-md);margin-bottom:var(--space-4)}.override-info p{margin:var(--space-1) 0;font-size:var(--text-sm)}.header-actions{display:flex;gap:var(--space-3)}.payroll-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);margin-bottom:var(--space-6)}@media(max-width:768px){.payroll-summary{grid-template-columns:repeat(2,1fr)}}.summary-card{padding:var(--space-5);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--space-2)}.summary-card.highlight{background:linear-gradient(135deg,rgba(34,197,94,.1) 0%,transparent 100%);border-color:var(--color-accent-primary)}.summary-label{font-size:var(--text-sm);color:var(--color-text-muted)}.summary-value.danger{color:var(--color-danger)}.status-pills{display:flex;gap:var(--space-3);margin-bottom:var(--space-6)}.pill{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:500}.pill.muted{background-color:var(--color-bg-tertiary);color:var(--color-text-muted)}.pill.warning{background-color:#f59e0b26;color:var(--color-warning)}.pill.success{background-color:#22c55e26;color:var(--color-success)}.payroll-controls{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6);padding:var(--space-4);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.month-nav{display:flex;align-items:center;gap:var(--space-4)}.month-nav h3{min-width:160px;text-align:center;font-family:var(--font-display)}.bulk-actions{display:flex;align-items:center;gap:var(--space-4)}.payroll-table-wrapper{overflow-x:auto;background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.payroll-table{width:100%;border-collapse:collapse}.payroll-table th,.payroll-table td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--color-border)}.payroll-table th{background-color:var(--color-bg-tertiary);font-weight:600;font-size:var(--text-sm);color:var(--color-text-muted)}.payroll-table tr.selected{background-color:#22c55e0d}.checkbox-col{width:40px}.employee-cell{display:flex;flex-direction:column}.emp-name{font-weight:500}.emp-code{font-size:var(--text-xs);color:var(--color-text-muted)}.btn-success{color:var(--color-success)!important}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-bottom:var(--space-6)}.detail-section{margin-bottom:var(--space-4)}.detail-section h4{font-size:var(--text-sm);font-weight:600;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border)}.detail-section p{font-size:var(--text-sm);margin:var(--space-1) 0}.deduction-table{width:100%;font-size:var(--text-sm);border-collapse:collapse}.deduction-table th,.deduction-table td{padding:var(--space-2);text-align:left;border-bottom:1px solid var(--color-border)}.deduction-table th{font-weight:500;color:var(--color-text-muted)}.salary-breakdown{margin-top:var(--space-6);padding:var(--space-4);background-color:var(--color-bg-tertiary);border-radius:var(--radius-lg)}.breakdown-row{display:flex;justify-content:space-between;padding:var(--space-2) 0;font-size:var(--text-sm)}.breakdown-row.danger span:last-child{color:var(--color-danger)}.breakdown-row.total{border-top:2px solid var(--color-border);margin-top:var(--space-2);padding-top:var(--space-3);font-weight:700;font-size:var(--text-lg)}.report-tabs{display:flex;gap:var(--space-2);margin-bottom:var(--space-6);padding:var(--space-2);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow-x:auto}.report-tab{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:transparent;border:none;border-radius:var(--radius-md);color:var(--color-text-muted);font-size:var(--text-sm);font-weight:500;cursor:pointer;white-space:nowrap;transition:all var(--transition-fast)}.report-tab:hover{background-color:var(--color-bg-hover);color:var(--color-text-primary)}.report-tab.active{background-color:var(--color-accent-primary);color:#fff}.report-filters{display:flex;align-items:flex-end;gap:var(--space-4);margin-bottom:var(--space-6);padding:var(--space-4);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);flex-wrap:wrap}.filter-group{display:flex;flex-direction:column;gap:var(--space-1)}.filter-group label{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:500}.filter-group input,.filter-group select{min-width:160px}.filter-actions{margin-left:auto}.report-content{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5)}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-10);color:var(--color-text-muted);gap:var(--space-4)}.report-summary{display:flex;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap}.summary-item{padding:var(--space-4);background-color:var(--color-bg-tertiary);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--space-1);min-width:100px}.summary-item.success .summary-value{color:var(--color-success)}.summary-item.danger .summary-value{color:var(--color-danger)}.summary-item.warning .summary-value{color:var(--color-warning)}.summary-label{font-size:var(--text-xs);color:var(--color-text-muted)}.summary-value{font-size:var(--text-xl);font-weight:700;font-family:var(--font-display)}.report-table{width:100%;border-collapse:collapse}.report-table th,.report-table td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--color-border)}.report-table th{background-color:var(--color-bg-tertiary);font-weight:600;font-size:var(--text-sm);color:var(--color-text-muted)}.report-table .emp-name{display:block;font-weight:500}.report-table .emp-code{font-size:var(--text-xs);color:var(--color-text-muted)}.monthly-grid{overflow-x:auto}.monthly-table{width:100%;border-collapse:collapse;font-size:var(--text-xs)}.monthly-table th,.monthly-table td{padding:var(--space-2);text-align:center;border-bottom:1px solid var(--color-border)}.monthly-table th{background-color:var(--color-bg-tertiary);font-weight:600;color:var(--color-text-muted)}.monthly-table .sticky-col{position:sticky;left:0;background-color:var(--color-bg-secondary);z-index:1;text-align:left;min-width:120px}.monthly-table .day-col{min-width:28px}.monthly-table .day-cell{font-weight:500}.monthly-table .day-cell.success{background-color:#22c55e26;color:var(--color-success)}.monthly-table .day-cell.danger{background-color:#ef444426;color:var(--color-danger)}.monthly-table .day-cell.warning{background-color:#f59e0b26;color:var(--color-warning)}.monthly-table .total-col{font-weight:600}.monthly-table .total-col.success{color:var(--color-success)}.monthly-table .total-col.danger{color:var(--color-danger)}.monthly-table .total-col.warning{color:var(--color-warning)}.device-breakdown{margin-top:var(--space-6)}.device-breakdown h4{font-size:var(--text-sm);margin-bottom:var(--space-3)}.device-list{display:flex;flex-direction:column;gap:var(--space-2)}.device-item{display:flex;justify-content:space-between;padding:var(--space-3);background-color:var(--color-bg-tertiary);border-radius:var(--radius-md)}.device-name{font-weight:500}.device-count{color:var(--color-text-muted)}.teacher-card{margin-bottom:var(--space-6);padding:var(--space-4);background-color:var(--color-bg-tertiary);border-radius:var(--radius-lg)}.teacher-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}.teacher-header h4{margin:0}.teacher-type{font-size:var(--text-xs);padding:var(--space-1) var(--space-2);background-color:var(--color-bg-secondary);border-radius:var(--radius-sm)}.teacher-days{display:flex;gap:var(--space-2);flex-wrap:wrap}.day-badge{display:flex;flex-direction:column;align-items:center;padding:var(--space-2);border-radius:var(--radius-sm);min-width:40px;font-size:var(--text-xs)}.day-badge.success{background-color:#22c55e26;color:var(--color-success)}.day-badge.danger{background-color:#ef444426;color:var(--color-danger)}.day-badge.warning{background-color:#f59e0b26;color:var(--color-warning)}.day-num{font-weight:700}.periods{font-size:10px;color:var(--color-text-muted)}.text-right{text-align:right!important}.font-bold{font-weight:600}.danger{color:var(--color-danger)}.search-bar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:var(--space-6)}.search-bar svg{color:var(--color-text-muted)}.search-bar input{border:none;background:transparent;padding:0;flex:1}.search-bar input:focus{outline:none;box-shadow:none}.user-info{display:flex;align-items:center;gap:var(--space-3)}.user-avatar{width:36px;height:36px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--text-sm);color:#fff}.user-name{display:block;font-weight:500}.user-email{display:block;font-size:var(--text-xs);color:var(--color-text-muted)}.role-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:500}.role-badge.role-super-admin{background-color:#a855f726;color:#a855f7}.role-badge.role-admin{background-color:#3b82f626;color:var(--color-info)}.role-badge.role-hr-manager{background-color:#22c55e26;color:var(--color-success)}.role-badge.role-viewer{background-color:#71717a26;color:var(--color-text-muted)}.action-buttons{display:flex;gap:var(--space-1)}.password-modal{max-width:480px}.modal-description{color:var(--color-text-secondary);margin-bottom:var(--space-4)}.modal-description strong{color:var(--color-text-primary)}.password-preview{margin-bottom:var(--space-4)}.password-preview label{display:block;font-size:var(--text-sm);font-weight:500;margin-bottom:var(--space-2);color:var(--color-text-secondary)}.password-notice{color:var(--color-warning);font-size:var(--text-sm);margin-bottom:var(--space-4)}.password-notice.success{color:var(--color-success)}.password-display{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background-color:var(--color-bg-tertiary);border-radius:var(--radius-md)}.password-display .password-actions{display:flex;gap:var(--space-2)}.password-display code{flex:1;font-family:monospace;font-size:var(--text-base);color:var(--color-accent-primary);word-break:break-all}.info-box{padding:var(--space-4);background-color:#3b82f61a;border:1px solid rgba(59,130,246,.2);border-radius:var(--radius-md);margin-top:var(--space-4)}.info-box p{font-size:var(--text-sm);color:var(--color-info);margin:0}.toggle-label{display:flex;align-items:flex-start;gap:var(--space-3);cursor:pointer}.toggle-label input[type=checkbox]{width:auto;margin-top:var(--space-1)}.toggle-text{display:flex;flex-direction:column}.toggle-text strong{font-size:var(--text-sm);color:var(--color-text-primary)}.toggle-text small{font-size:var(--text-xs);color:var(--color-text-muted)}.loading-state{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-10);color:var(--color-text-muted)}.roles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-6)}.role-card{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);transition:all var(--transition-fast)}.role-card:hover{border-color:var(--color-border-hover);transform:translateY(-2px)}.role-card.system-role{background:linear-gradient(135deg,#a855f70d,#3b82f60d)}.role-card-header{display:flex;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-4)}.role-icon{width:48px;height:48px;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));display:flex;align-items:center;justify-content:center;color:#fff}.role-info{flex:1}.role-info h3{font-size:var(--text-lg);margin:0}.role-level{font-size:var(--text-xs);color:var(--color-text-muted)}.system-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);background-color:#a855f726;color:#a855f7;border-radius:var(--radius-sm);font-size:10px;font-weight:500}.role-description{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-4);min-height:40px}.role-stats{display:flex;gap:var(--space-4);margin-bottom:var(--space-4);padding:var(--space-3);background-color:var(--color-bg-tertiary);border-radius:var(--radius-md)}.role-stats .stat{font-size:var(--text-sm);color:var(--color-text-secondary)}.role-stats .stat strong{color:var(--color-accent-primary)}.role-actions{display:flex;gap:var(--space-2)}.permissions-section{margin-top:var(--space-6)}.permissions-section h4{margin-bottom:var(--space-4);font-size:var(--text-base)}.permissions-matrix{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.permission-row{display:flex;align-items:center;border-bottom:1px solid var(--color-border)}.permission-row:last-child{border-bottom:none}.module-name{width:140px;padding:var(--space-3) var(--space-4);background-color:var(--color-bg-tertiary);font-weight:500;font-size:var(--text-sm)}.toggle-all-btn{background:none;border:none;color:var(--color-text-primary);font-weight:500;font-size:var(--text-sm);cursor:pointer;text-align:left}.toggle-all-btn:hover{color:var(--color-accent-primary)}.permission-actions{flex:1;display:flex;gap:var(--space-2);padding:var(--space-3) var(--space-4);flex-wrap:wrap}.permission-checkbox{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background-color:var(--color-bg-tertiary);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.permission-checkbox:hover{background-color:var(--color-bg-hover)}.permission-checkbox.checked{background-color:#22c55e26}.permission-checkbox input{display:none}.permission-checkbox .checkmark{width:16px;height:16px;border:1px solid var(--color-border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.permission-checkbox.checked .checkmark{background-color:var(--color-success);border-color:var(--color-success);color:#fff}.permission-checkbox .action-name{font-size:var(--text-xs);text-transform:capitalize}.info-box.warning{background-color:#f59e0b1a;border-color:#f59e0b33;margin-bottom:var(--space-4)}.info-box.warning p{color:var(--color-warning)}@media(max-width:768px){.roles-grid{grid-template-columns:1fr}.permission-row{flex-direction:column;align-items:stretch}.module-name{width:100%}}:root{--color-bg-primary: #0a0a0b;--color-bg-secondary: #111113;--color-bg-tertiary: #18181b;--color-bg-elevated: #1f1f23;--color-bg-hover: #27272a;--color-accent-primary: #22c55e;--color-accent-primary-hover: #16a34a;--color-accent-secondary: #3b82f6;--color-accent-secondary-hover: #2563eb;--color-success: #22c55e;--color-warning: #f59e0b;--color-danger: #ef4444;--color-info: #3b82f6;--color-text-primary: #fafafa;--color-text-secondary: #a1a1aa;--color-text-muted: #71717a;--color-text-inverted: #09090b;--color-border: #27272a;--color-border-hover: #3f3f46;--color-border-focus: #22c55e;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-display: "Outfit", var(--font-sans);--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .3);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .4), 0 2px 4px -2px rgb(0 0 0 / .4);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .4);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .5), 0 8px 10px -6px rgb(0 0 0 / .4);--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--z-dropdown: 50;--z-sticky: 100;--z-modal: 200;--z-toast: 300}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);background-color:var(--color-bg-primary);color:var(--color-text-primary);line-height:1.6;min-height:100vh}#root{min-height:100vh}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:600;line-height:1.2;color:var(--color-text-primary)}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}h5{font-size:var(--text-lg)}h6{font-size:var(--text-base)}p{color:var(--color-text-secondary)}a{color:var(--color-accent-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-accent-primary-hover)}input,textarea,select{font-family:inherit;font-size:var(--text-sm);background-color:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);padding:var(--space-3) var(--space-4);width:100%;transition:all var(--transition-fast)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--color-border-focus);box-shadow:0 0 0 3px #22c55e26}input::placeholder,textarea::placeholder{color:var(--color-text-muted)}input:disabled,textarea:disabled,select:disabled{opacity:.5;cursor:not-allowed}label{display:block;font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary);margin-bottom:var(--space-2)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:500;padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);border:none;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--color-accent-primary);color:var(--color-text-inverted)}.btn-primary:hover:not(:disabled){background-color:var(--color-accent-primary-hover)}.btn-secondary{background-color:var(--color-bg-elevated);color:var(--color-text-primary);border:1px solid var(--color-border)}.btn-secondary:hover:not(:disabled){background-color:var(--color-bg-hover);border-color:var(--color-border-hover)}.btn-danger{background-color:var(--color-danger);color:#fff}.btn-danger:hover:not(:disabled){background-color:#dc2626}.btn-ghost{background-color:transparent;color:var(--color-text-secondary)}.btn-ghost:hover:not(:disabled){background-color:var(--color-bg-hover);color:var(--color-text-primary)}.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--text-xs)}.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--text-base)}.btn-icon{padding:var(--space-2);border-radius:var(--radius-md)}.btn-icon.btn-danger{background-color:transparent;color:var(--color-danger)}.btn-icon.btn-danger:hover:not(:disabled){background-color:#ef44441a;color:#dc2626}.btn-icon.btn-success{background-color:transparent;color:var(--color-success)}.btn-icon.btn-success:hover:not(:disabled){background-color:#22c55e1a;color:#16a34a}.card{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}.card-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600}.table-container{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--color-border)}table{width:100%;border-collapse:collapse}th{text-align:left;font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);padding:var(--space-3) var(--space-4);background-color:var(--color-bg-tertiary);border-bottom:1px solid var(--color-border)}td{padding:var(--space-4);border-bottom:1px solid var(--color-border);font-size:var(--text-sm)}tr:last-child td{border-bottom:none}tr:hover td{background-color:var(--color-bg-tertiary)}.badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-3);font-size:var(--text-xs);font-weight:500;border-radius:var(--radius-full)}.badge-success{background-color:#22c55e26;color:var(--color-success)}.badge-warning{background-color:#f59e0b26;color:var(--color-warning)}.badge-danger{background-color:#ef444426;color:var(--color-danger)}.badge-info{background-color:#3b82f626;color:var(--color-info)}.form-group{margin-bottom:var(--space-4)}.form-error{font-size:var(--text-xs);color:var(--color-danger);margin-top:var(--space-1)}.form-hint{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}.w-full{width:100%}.h-full{height:100%}.text-center{text-align:center}.text-right{text-align:right}.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-base{font-size:var(--text-base)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.text-2xl{font-size:var(--text-2xl)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-muted{color:var(--color-text-muted)}.text-secondary{color:var(--color-text-secondary)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-danger{color:var(--color-danger)}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}.p-8{padding:var(--space-8)}.rounded{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-full{border-radius:var(--radius-full)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}.animate-fade-in{animation:fadeIn var(--transition-base) ease-out}.animate-slide-up{animation:slideUp var(--transition-base) ease-out}.animate-spin{animation:spin 1s linear infinite}.loader{width:24px;height:24px;border:2px solid var(--color-border);border-top-color:var(--color-accent-primary);border-radius:50%;animation:spin .8s linear infinite}.loader-lg{width:40px;height:40px;border-width:3px}.page-container{padding:var(--space-6);max-width:1400px;margin:0 auto}.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-8)}.page-title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:700}.page-subtitle{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-1)}.grid{display:grid;gap:var(--space-6)}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}@media(max-width:1024px){.grid-cols-4,.grid-cols-3{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.grid-cols-4,.grid-cols-3,.grid-cols-2{grid-template-columns:1fr}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-secondary)}::-webkit-scrollbar-thumb{background:var(--color-border-hover);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.glass{background:#111113bf;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08)}.glass-subtle{background:#11111380;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.card-hover{transition:all var(--transition-base)}.card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--color-border-hover)}.card-glow{position:relative}.card-glow:before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,rgba(34,197,94,.2) 0%,transparent 50%,rgba(59,130,246,.1) 100%);z-index:-1;opacity:0;transition:opacity var(--transition-base)}.card-glow:hover:before{opacity:1}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg,var(--color-bg-tertiary) 0%,var(--color-bg-hover) 50%,var(--color-bg-tertiary) 100%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-md)}.skeleton-text{height:1em;margin-bottom:.5em}.skeleton-text:last-child{width:80%}.skeleton-avatar{width:40px;height:40px;border-radius:var(--radius-full)}.skeleton-card{height:120px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-bounce{animation:bounce .6s ease-in-out}.animate-scale-in{animation:scaleIn var(--transition-base) ease-out}.animate-slide-right{animation:slideInRight var(--transition-base) ease-out}.animate-slide-left{animation:slideInLeft var(--transition-base) ease-out}.stagger-1{animation-delay:50ms}.stagger-2{animation-delay:.1s}.stagger-3{animation-delay:.15s}.stagger-4{animation-delay:.2s}.stagger-5{animation-delay:.25s}.modal-overlay{position:fixed;inset:0;background-color:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);animation:fadeIn var(--transition-fast) ease-out;padding:var(--space-4)}.modal{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);width:100%;max-width:480px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;animation:scaleIn var(--transition-base) ease-out;box-shadow:var(--shadow-xl)}.modal-lg{max-width:640px}.modal-xl{max-width:800px}.modal-header{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border)}.modal-header h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;margin:0}.modal-body{padding:var(--space-6);overflow-y:auto;flex:1}.modal-footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-border);display:flex;justify-content:flex-end;gap:var(--space-3)}.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}@media(max-width:640px){.form-row{grid-template-columns:1fr}}.form-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}@media(max-width:768px){.form-row-3{grid-template-columns:1fr}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-16) var(--space-8);text-align:center;color:var(--color-text-muted);gap:var(--space-4)}.empty-state svg{opacity:.4;margin-bottom:var(--space-2)}.empty-state p{color:var(--color-text-muted);max-width:300px}@media(max-width:1024px){.page-container{padding:var(--space-4)}.page-header{flex-direction:column;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-6)}.page-title{font-size:var(--text-2xl)}}@media(max-width:640px){.page-container{padding:var(--space-3)}.page-title{font-size:var(--text-xl)}.page-subtitle{font-size:var(--text-xs)}.header-actions{flex-wrap:wrap;width:100%}.header-actions .btn{flex:1;min-width:140px}}.toast{padding:var(--space-4);border-radius:var(--radius-lg);background-color:var(--color-bg-elevated);border:1px solid var(--color-border);box-shadow:var(--shadow-lg);animation:slideInRight var(--transition-base) ease-out}.status-dot{display:inline-block;width:8px;height:8px;border-radius:var(--radius-full)}.status-dot.online{background-color:var(--color-success);box-shadow:0 0 8px var(--color-success)}.status-dot.offline{background-color:var(--color-text-muted)}.status-dot.error{background-color:var(--color-danger);box-shadow:0 0 8px var(--color-danger)}.status-dot.pulse{animation:pulse 2s ease-in-out infinite}.progress-bar{height:8px;background-color:var(--color-bg-tertiary);border-radius:var(--radius-full);overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--color-accent-primary),var(--color-accent-secondary));border-radius:var(--radius-full);transition:width var(--transition-slow) ease-out}@media(max-width:768px){.table-container{margin:0 calc(var(--space-3) * -1);border-radius:0;border-left:none;border-right:none}th,td{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}}[data-tooltip]{position:relative}[data-tooltip]:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%);padding:var(--space-2) var(--space-3);background-color:var(--color-bg-elevated);color:var(--color-text-primary);font-size:var(--text-xs);border-radius:var(--radius-md);white-space:nowrap;opacity:0;visibility:hidden;transition:all var(--transition-fast);pointer-events:none;z-index:var(--z-tooltip, 1000);box-shadow:var(--shadow-md)}[data-tooltip]:hover:after{opacity:1;visibility:visible;bottom:calc(100% + 8px)}.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--color-accent-primary);outline-offset:2px}@media print{body{background:#fff;color:#000}.no-print{display:none!important}.page-container{max-width:none;padding:0}}::selection{background-color:#22c55e4d;color:var(--color-text-primary)}.badge-muted{background-color:var(--color-bg-tertiary);color:var(--color-text-muted)}