:root{--primary:#31a8ff;--primary-hover:#0091ff;--bg-page:#f0f2f5;--bg-card:#fff;--bg-hover:#f8f9fa;--text-main:#2d3436;--text-muted:#636e72;--border-color:#eee;--shadow:0 4px 20px rgba(0,0,0,.05);--transition:all 0.3s ease}[data-theme=dark]{--bg-page:#00182d;--bg-card:#00223d;--bg-hover:#002d52;--text-main:#f5f6f7;--text-muted:#b0bbc5;--border-color:#003661;--shadow:0 4px 20px rgba(0,0,0,.2)}*{margin:0;padding:0;box-sizing:border-box}::placeholder{color:var(--text-muted);opacity:.4}.modal,.modal-overlay,[class*=modal-overlay]{display:flex!important;align-items:center!important;justify-content:center!important;position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;z-index:999999!important;background:rgba(0,0,0,.6)!important;-webkit-backdrop-filter:blur(4px)!important;backdrop-filter:blur(4px)!important;overflow-y:auto!important}.modal-content,[class*=modal-content]{margin:auto!important;position:relative!important;transform:none!important;max-height:90vh;overflow-y:auto!important}.divider{margin:20px 0 15px;text-align:center;font-size:11px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;display:flex;align-items:center;gap:12px;opacity:.8}.divider:after,.divider:before{content:"";flex:1 1;height:1px;background:var(--border-color)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background-color:var(--bg-page);color:var(--text-main);min-height:100vh;transition:background-color .3s ease,color .3s ease}.clickable,.nav-item,[role=button],button{cursor:pointer}.container{max-width:1200px;margin:0 auto;padding:20px}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:var(--bg-page)}.login-box{background:var(--bg-card);padding:40px;border-radius:12px;box-shadow:var(--shadow);width:100%;max-width:400px;border:1px solid var(--border-color);color:var(--text-main)}.form-group{margin-bottom:20px}.form-control{width:100%;padding:12px;border:1px solid var(--border-color);border-radius:8px;font-size:15px;background-color:var(--bg-page);color:var(--text-main);transition:var(--transition)}.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(49,168,255,.1)}.btn{padding:12px 24px;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:8px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.btn:active{transform:scale(.98)}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px)}.btn-success{background:#00b894;color:#fff}.btn-danger{background:#ff7675;color:#fff}.btn-warning{background:#fdcb6e;color:#2d3436}.btn-info{background:#31a8ff;color:#fff}.btn-sm{padding:8px 16px;font-size:12px}.dashboard{background:var(--bg-page);min-height:100vh;padding:20px}.header{background:var(--bg-card);padding:20px;border-radius:12px;margin-bottom:25px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow);border:1px solid var(--border-color)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-gap:20px;gap:20px;margin-bottom:30px}.card{background:var(--bg-card);padding:24px;border-radius:12px;box-shadow:var(--shadow);border:1px solid var(--border-color);transition:var(--transition)}.card:hover{transform:translateY(-4px)}.card h3{color:var(--text-muted);font-size:14px;font-weight:600;text-transform:uppercase;margin-bottom:12px;letter-spacing:.5px}.card .number{font-size:28px;font-weight:800;color:var(--text-main)}.table-wrapper{overflow-x:auto;border-radius:12px;border:1px solid var(--border-color);background:var(--bg-card)}.table{width:100%;border-collapse:collapse}.table td,.table th{padding:16px;text-align:left;border-bottom:1px solid var(--border-color);color:var(--text-main)}.table th{background:var(--bg-hover);font-weight:700;font-size:13px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.table tr:last-child td{border-bottom:none}.table tr:hover{background:var(--bg-hover)}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px}.status-dot.green{background:#00b894;box-shadow:0 0 8px rgba(0,184,148,.4)}.status-dot.red{background:#ff7675;box-shadow:0 0 8px hsla(0,100%,73%,.4)}.attendance-btns{display:flex;gap:15px;margin:25px 0}.present-btn{flex:2 1;height:60px;background:#00b894;color:#fff;border:none;border-radius:12px;font-size:18px;font-weight:700;cursor:pointer;transition:var(--transition)}.present-btn:hover{background:#00a887;transform:translateY(-2px)}.absent-btn{flex:1 1;height:60px;background:#ff7675;color:#fff;border:none;border-radius:12px;font-size:18px;font-weight:700;cursor:pointer;transition:var(--transition)}.absent-btn:hover{background:#e86b6b;transform:translateY(-2px)}.profile-pic{width:44px;height:44px;border-radius:50%;background:var(--primary);justify-content:center;color:#fff;font-weight:700}.profile-pic,.user-info{display:flex;align-items:center}.user-info{gap:15px;color:var(--text-main)}@media (max-width:768px){.cards{grid-template-columns:1fr}.header{align-items:flex-start;gap:15px}.attendance-btns,.header{flex-direction:column}}.search-group{position:relative;flex:1 1;max-width:450px;min-width:250px;transition:all .3s cubic-bezier(.4,0,.2,1)}.search-group,.search-icon{display:flex;align-items:center}.search-icon{position:absolute;left:16px;width:18px;height:18px;color:var(--text-muted);z-index:2;transition:all .3s ease;pointer-events:none;justify-content:center}.search-icon svg{width:100%;height:100%;stroke-width:2.5px}.search-input{width:100%;padding:12px 16px 12px 42px;border-radius:14px;border:1px solid rgba(0,0,0,.08);background:hsla(0,0%,100%,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text-main);font-size:14px;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px rgba(0,0,0,.02),inset 0 1px 2px hsla(0,0%,100%,.5)}.search-input::placeholder{color:var(--text-muted);opacity:.6;font-weight:400}.search-input:hover{border-color:rgba(49,168,255,.3);background:hsla(0,0%,100%,.8);box-shadow:0 4px 12px rgba(0,0,0,.04)}.search-input:focus{outline:none;border-color:var(--primary);background:var(--bg-card);box-shadow:0 0 0 4px rgba(49,168,255,.12),0 8px 16px rgba(49,168,255,.08);padding-left:45px}.search-input:focus+.search-icon{color:var(--primary);opacity:1}.no-results{text-align:center;padding:50px 20px;background:hsla(0,0%,100%,.4);border-radius:20px;border:1px dashed var(--border-color);color:var(--text-muted);width:100%;animation:fadeIn .4s ease-out}.no-results span{display:block;font-size:32px;margin-bottom:12px;filter:grayscale(.5)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.search-group{max-width:100%;order:3;margin-top:15px}.search-input{padding:10px 14px 10px 38px}}.task-card{background:var(--bg-card);border-radius:16px;padding:18px;border:1px solid var(--border-color);box-shadow:0 4px 12px rgba(0,0,0,.03);transition:all .3s ease;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px}.task-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.06);border-color:rgba(49,168,255,.3)}.task-priority-urgent{border-left:5px solid #f44}.task-priority-high{border-left:5px solid #fb3}.task-priority-medium{border-left:5px solid #33b5e5}.task-priority-low{border-left:5px solid #00c851}.priority-badge{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.priority-urgent{background:rgba(255,68,68,.1);color:#f44}.priority-high{background:rgba(255,187,51,.1);color:#fb3}.priority-medium{background:rgba(51,181,229,.1);color:#33b5e5}.priority-low{background:rgba(0,200,81,.1);color:#00c851}.task-meta{gap:15px;font-size:12px;color:var(--text-muted);border-top:1px solid var(--border-color);padding-top:12px;margin-top:5px}.task-meta,.task-meta-item{display:flex;align-items:center}.task-meta-item{gap:6px}.task-stats{background:rgba(49,168,255,.05);border-radius:10px;padding:10px 15px;display:flex;justify-content:space-between;align-items:center;font-size:13px}.task-progress-bar{height:6px;background:rgba(0,0,0,.05);border-radius:3px;flex:1 1;margin:0 10px;position:relative;overflow:hidden}.task-progress-fill{position:absolute;left:0;top:0;height:100%;background:var(--primary);border-radius:3px;transition:width .5s ease}.urgent-pulse{animation:urgent-pulse 2s infinite}@keyframes urgent-pulse{0%{box-shadow:0 0 0 0 rgba(255,68,68,.4)}70%{box-shadow:0 0 0 10px rgba(255,68,68,0)}to{box-shadow:0 0 0 0 rgba(255,68,68,0)}}.task-inbox-header{margin-bottom:25px;padding-bottom:15px;border-bottom:2px solid var(--border-color)}.task-header-modern,.task-inbox-header{display:flex;justify-content:space-between;align-items:center}.task-header-modern{background:linear-gradient(135deg,#f0f7ff,#fff);color:var(--text-main);padding:25px 30px;border-radius:20px;margin-bottom:30px;box-shadow:0 4px 20px rgba(0,0,0,.04);position:relative;overflow:hidden;border:1px solid rgba(59,130,246,.1)}.task-header-modern .subtitle-text{opacity:.6}.task-header-modern:after{content:"";position:absolute;top:-50%;right:-10%;width:300px;height:300px;background:radial-gradient(circle,rgba(49,168,255,.15) 0,transparent 70%);z-index:1}.modern-add-btn{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;padding:12px 24px;border-radius:12px;font-weight:600;display:flex;align-items:center;gap:8px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 6px -1px rgba(59,130,246,.3);z-index:2}.modern-add-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 10px 15px -3px rgba(59,130,246,.4)}.modern-add-btn:active{transform:translateY(0) scale(.98)}.modern-card-v2{background:var(--bg-card);border:1px solid hsla(0,0%,100%,.05);border-radius:20px;padding:24px;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.06);display:flex;flex-direction:column;gap:16px}.modern-card-v2:hover{border-color:rgba(59,130,246,.3);box-shadow:0 20px 25px -5px rgba(0,0,0,.05),0 10px 10px -5px rgba(0,0,0,.02);transform:translateY(-5px)}.modern-tag{font-size:11px;font-weight:700;text-transform:uppercase;padding:4px 12px;border-radius:9999px;letter-spacing:.05em}.modern-tag-urgent{background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.2)}.modern-tag-high{background:rgba(245,158,11,.1);color:#f59e0b;border:1px solid rgba(245,158,11,.2)}.modern-tag-medium{background:rgba(59,130,246,.1);color:#3b82f6;border:1px solid rgba(59,130,246,.2)}.modern-tag-low{background:rgba(16,185,129,.1);color:#10b981;border:1px solid rgba(16,185,129,.2)}.modern-task-title{font-size:18px;font-weight:700;color:var(--text-main);margin:0;line-height:1.4}.modern-task-desc{font-size:14px;color:var(--text-muted);line-height:1.6}.modern-stats-v2{background:var(--bg-page);border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:8px}.modern-progress-container{height:6px;background:rgba(0,0,0,.05);border-radius:999px;overflow:hidden}.modern-progress-fill{background:linear-gradient(90deg,#3b82f6,#60a5fa);height:100%;border-radius:999px;transition:width .8s cubic-bezier(.4,0,.2,1)}.modern-meta-v2{display:flex;flex-wrap:wrap;gap:12px;padding-top:16px;border-top:1px solid var(--border-color)}.modern-meta-pill{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.02);padding:4px 10px;border-radius:8px;font-size:12px;color:var(--text-muted);font-weight:500}.modern-input-group{display:flex;flex-direction:column;gap:8px}.modern-label{font-size:13px;font-weight:600;color:var(--text-main);opacity:.8}.modern-input-v2{background:var(--bg-page);border:1px solid var(--border-color);padding:12px 16px;border-radius:12px;font-size:14px;transition:all .3s ease;width:100%}.modern-input-v2:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(59,130,246,.1);outline:none}.load-more-container{display:flex;justify-content:center;align-items:center;padding:40px 0 20px;width:100%}.load-more-btn{background:var(--bg-card);color:var(--primary);border:2px solid var(--primary);padding:14px 45px;border-radius:50px;font-size:15px;font-weight:800;cursor:pointer;transition:all .4s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 10px 20px rgba(0,0,0,.05);display:flex;align-items:center;gap:12px;letter-spacing:.5px}.load-more-btn:hover{background:var(--primary);color:#fff;transform:translateY(-5px);box-shadow:0 15px 30px rgba(49,168,255,.3)}.load-more-btn:active{transform:translateY(-2px)}.load-more-btn .icon{font-size:20px;transition:transform .5s ease}.load-more-btn:hover .icon{transform:translateY(4px)}@media (max-width:768px){.dashboard{padding:10px!important}.cards{grid-template-columns:1fr!important;gap:10px!important}.card{padding:15px!important;margin-bottom:15px!important}.btn{padding:8px 12px!important;font-size:13px!important;margin:3px!important}.table{font-size:12px!important}.table td,.table th{padding:8px 4px!important}.form-control{font-size:14px!important;padding:8px!important}.user-header{gap:10px!important}.user-header,.user-header-info{flex-direction:column!important}.user-header-info{align-items:flex-start!important}.user-header-actions{width:100%!important;justify-content:space-between!important}.stat-card{min-width:100%!important}.nav-tabs{flex-wrap:wrap!important;gap:5px!important}.modal-content{max-width:95%!important}.recharts-wrapper{font-size:11px!important}.hide-mobile{display:none!important}.show-mobile{display:block!important}h1{font-size:24px!important}h2{font-size:20px!important}h3{font-size:18px!important}h4{font-size:16px!important}h5{font-size:14px!important}.mb-20{margin-bottom:10px!important}.mt-20{margin-top:10px!important}.p-20{padding:10px!important}.number{font-size:28px!important}.profile-pic{width:30px!important;height:30px!important;font-size:14px!important}.table-responsive{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}}@media (min-width:768px) and (max-width:1024px){.cards,[style*="grid-template-columns: repeat(auto-fit"]{grid-template-columns:repeat(2,1fr)!important}.dashboard{padding:15px!important}.card{padding:18px!important}}@media (max-width:480px){.btn{padding:6px 10px!important;font-size:12px!important}.card{padding:12px!important}h1{font-size:20px!important}h2{font-size:18px!important}h3{font-size:16px!important}.number{font-size:24px!important}.user-header-actions{flex-direction:column!important}.user-header-actions button{width:100%!important}}@media (max-height:500px) and (orientation:landscape){.user-header{padding:8px!important}.card{margin-bottom:10px!important}}@media print{.btn,.nav-tabs,.user-header-actions{display:none!important}.card{page-break-inside:avoid!important}}.btm-nav-item span,.nav-icon,.nav-item span,.side-nav-item span{position:relative;display:inline-flex}.badge-count{position:absolute;top:-8px;right:-8px;color:#ff3b30;font-size:11px;font-weight:800;text-shadow:1px 1px 0 #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff;z-index:10;pointer-events:none}