:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh;background:#f5f7fb}h1{line-height:1.1}button{border:none;font-family:inherit;cursor:pointer}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{box-sizing:border-box}#root{width:100%;margin:0;padding:0;text-align:left}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.layout{display:flex;height:100vh;overflow:hidden}.sidebar{width:220px;background:#1f2937;color:#fff;display:flex;flex-direction:column;justify-content:space-between;height:100vh;position:fixed;left:0;top:0}.sidebar-header{padding:20px}.sidebar-header h3{margin-bottom:5px}.sidebar-user{font-size:13px;color:#9ca3af}.password-field{position:relative;display:flex;align-items:center}.password-field input{width:100%;padding-right:35px}.eye-icon{position:absolute;right:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.sidebar-nav{display:flex;flex-direction:column;gap:10px;padding:0 20px}.sidebar-nav a{color:#fff;text-decoration:none;padding:8px 10px;border-radius:6px;transition:.2s}.sidebar-nav a:hover{background:#374151}.sidebar-nav a.active{background:#2563eb;color:#fff;font-weight:600}.logout-btn{margin:20px;padding:8px;border:none;border-radius:6px;background:#dc2626;color:#fff;cursor:pointer}.logout-btn:hover{background:#b91c1c}.main-content{margin-left:220px;flex:1;padding:20px;background:#f3f4f6;overflow-y:auto;height:100vh}.mobile-header{display:none;position:fixed;top:0;left:0;right:0;height:50px;background:#1f2937;color:#fff;align-items:center;padding:0 15px;z-index:1000}.menu-btn{font-size:22px;background:none;border:none;color:#fff;margin-right:10px;cursor:pointer}.close-btn{display:none;background:none;border:none;color:#fff;font-size:22px;position:absolute;right:15px;top:15px;cursor:pointer}.overlay{position:fixed;inset:0;background:#0006;z-index:998}@media(max-width:768px){.dashboard-header h1{font-size:24px}.mobile-header{display:flex}.sidebar{position:fixed;left:-220px;top:0;transition:.3s;z-index:999}.sidebar.open{left:0}.sidebar-header{padding:30px 20px 20px}.close-btn{display:block}.main-content{margin-left:0;padding-top:50px}}.dashboard-page{padding:30px}.dashboard-header{margin-bottom:30px}.dashboard-header h1{font-size:24px;margin-bottom:5px}.dashboard-header h2{font-size:24px;font-weight:500;color:#6b7280}.dashboard-role{margin-top:5px;color:#6b7280}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.dashboard-card{background:#fff;padding:20px;border-radius:10px;box-shadow:0 3px 12px #0000000f;text-align:center;transition:transform .2s}.dashboard-card:hover{transform:translateY(-3px)}.dashboard-card span{font-size:14px;color:#6b7280}.dashboard-card h3{font-size:28px;margin-top:8px}.dashboard-card.completed{border-top:4px solid #16a34a}.dashboard-card.progress{border-top:4px solid #f59e0b}.dashboard-card.pending{border-top:4px solid #2563eb}.dashboard-card.overdue{border-top:4px solid #dc2626}.tasks-card{background:#fff;padding:25px;border-radius:10px;box-shadow:0 2px 10px #0000000f}.table-wrapper{width:100%;overflow-x:auto;background:#fff;border-radius:6px}.tasks-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff}.tasks-table th,.tasks-table td{text-align:left;vertical-align:middle}.tasks-table th{text-align:left;padding:12px 14px;background:#f8fafc;border-bottom:2px solid #e5e7eb;font-weight:600;font-size:16px;letter-spacing:.3px}.tasks-table td{padding:12px 14px;border-bottom:1px solid #f1f5f9;font-size:14px}.tasks-table tbody tr:hover{background:#fafafa}.mytasks-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff}.mytasks-table th,.mytasks-table td{text-align:left;vertical-align:middle}.mytasks-table th{text-align:left;padding:12px 14px;background:#f8fafc;border-bottom:2px solid #e5e7eb;font-weight:600;font-size:16px;letter-spacing:.3px}.mytasks-table td{padding:12px 14px;border-bottom:1px solid #f1f5f9;font-size:14px}.mytasks-table tbody tr:hover{background:#fafafa}.desc{max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.users-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff}.users-table th,.users-table td{text-align:left;vertical-align:middle}.users-table th{text-align:left;padding:12px 14px;background:#f8fafc;border-bottom:2px solid #e5e7eb;font-weight:600;font-size:16px;letter-spacing:.3px}.users-table td{padding:12px 14px;border-bottom:1px solid #f1f5f9;font-size:14px}.users-table tbody tr:hover{background:#fafafa}.status{padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600}.status.Pending{background:#fff3cd;color:#856404}.status.InProgress{background:#d1ecf1;color:#0c5460}.status.Completed{background:#d4edda;color:#155724}.btn{border:none;padding:7px 14px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:.2s}.btn.start{background:#2563eb;color:#fff}.btn.start:hover{background:#1d4ed8}.btn.complete{background:#16a34a;color:#fff}.btn.complete:hover{background:#15803d}.tasks-table td:last-child{white-space:nowrap}.mytasks-table td:last-child{white-space:nowrap}.users-table td:last-child{white-space:nowrap}.login-logo{width:80px;height:auto;margin-bottom:10px}.login-card{text-align:center}@media(max-width:768px){.login-logo{width:60px}}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef2ff,#f8fafc);padding:20px}.login-card{width:100%;max-width:380px;background:#fff;padding:35px;border-radius:10px;box-shadow:0 10px 30px #00000014}.login-title{margin:0;text-align:center;font-size:22px;font-weight:700}.login-subtitle{text-align:center;color:#6b7280;margin-bottom:25px;font-size:14px}.login-form{display:flex;flex-direction:column;gap:15px}.login-input{padding:10px 12px;border-radius:6px;border:1px solid #d1d5db;font-size:14px;transition:.2s}.login-input:focus{outline:none;border-color:#2563eb}.login-btn{margin-top:10px;padding:10px;border-radius:6px;border:none;background:#2563eb;color:#fff;font-weight:600;font-size:14px;cursor:pointer;transition:.2s}.login-btn:hover{background:#1d4ed8}.login-error{margin-top:10px;color:#dc2626;text-align:center;font-size:13px}.modal{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center}.modal-content{display:flex;flex-direction:column;background-color:#fff;width:95%;max-width:500px;max-height:85vh;overflow-y:auto;padding:20px;border-radius:10px;gap:12px}.modal-content input{width:100%;padding:10px;border-radius:6px;border:1px solid #ccc}.modal-content input,.modal-content textarea,.modal-content select{width:100%;margin-bottom:10px}.modal-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}.modal-content button{padding:10px;border-radius:6px;border:none;cursor:pointer}.modal-content button:first-of-type{background:#2563eb;color:#fff}.modal-content button:last-of-type{background:#e5e7eb}.tasks-page{padding:20px}.tasks-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:15px}.tasks-filters button{padding:6px 12px;border-radius:6px;border:1px solid #e5e7eb;background:#fff;cursor:pointer}.tasks-filters button:hover{background:#f1f5f9}.tasks-search{padding:8px 10px;border-radius:6px;border:1px solid #d1d5db;width:260px;margin-bottom:20px}.task-form{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:25px;background:#fff;padding:15px;border-radius:8px;box-shadow:0 2px 10px #0000000d}.task-form input,.task-form select{padding:7px 10px;border-radius:6px;border:1px solid #d1d5db}.task-form textarea{width:220px;padding:8px;font-size:14px}.task-form textarea{width:300px;height:70px;resize:vertical}.char-count{font-size:11px;color:#888;margin-top:-6px;margin-bottom:6px}.task-form button{padding:7px 14px;border-radius:6px;border:none;background:#2563eb;color:#fff;font-weight:600;cursor:pointer}.task-form button:hover{background:#1d4ed8}.multi-select{position:relative;width:100%}.multi-select-header{padding:10px;border:1px solid #ccc;border-radius:6px;cursor:pointer;background:#fff}.multi-select-dropdown{position:absolute;width:100%;max-height:200px;overflow-y:auto;border:1px solid #ccc;background:#fff;z-index:1000;border-radius:6px;margin-top:5px}.multi-option{display:flex;gap:8px;padding:8px;cursor:pointer}.multi-option:hover{background:#f5f5f5}.priority.Low{color:#16a34a;font-weight:600}.priority.Medium{color:#f59e0b;font-weight:600}.priority.High{color:#dc2626;font-weight:600}.pagination{display:flex;justify-content:center;gap:10px;margin-top:15px}.pagination button{padding:6px 12px;cursor:pointer}.users-page{padding:25px}.users-page h2{margin-bottom:20px}.user-form{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:25px;background:#fff;padding:15px;border-radius:8px;box-shadow:0 2px 10px #0000000d}.user-form input,.user-form select{padding:8px 10px;border-radius:6px;border:1px solid #d1d5db}.user-form button{padding:8px 14px;border-radius:6px;border:none;background:#2563eb;color:#fff;font-weight:600;cursor:pointer}.user-form button:hover{background:#1d4ed8}.role{padding:4px 8px;border-radius:6px;font-size:12px;font-weight:600}.role.Admin{background:#fde68a}.role.Coordinator{background:#bfdbfe}.role.Staff{background:#e5e7eb}.user-status{padding:4px 8px;border-radius:6px;font-size:12px;font-weight:600}.user-status.active{background:#dcfce7;color:#166534}.user-status.inactive{background:#fee2e2;color:#991b1b}.btn.danger{background:#dc2626;color:#fff}.btn.danger:hover{background:#b91c1c}.timeline-page{padding:20px}.timeline-item{display:flex;gap:10px;margin-bottom:15px}.timeline-dot{width:10px;height:10px;background:#2563eb;border-radius:50%;margin-top:6px}.timeline-content{background:#fff;padding:10px;border-radius:6px;width:100%;box-shadow:0 2px 6px #0000000d}.timeline-time{font-size:12px;color:#888}.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding-bottom:15px}.filters input,.filters select{padding:8px;border:1px solid #ccc;border-radius:6px;min-width:150px}.filter-buttons{display:flex;gap:8px}.apply-btn{background-color:#2563eb;color:#fff;border:none;padding:8px 14px;border-radius:6px;cursor:pointer}.clear-btn{background-color:#e5e7eb;border:none;padding:8px 14px;border-radius:6px;cursor:pointer}@media(max-width:768px){.tasks-table tr,.mytasks-table tr,.users-table tr{padding:12px;border-radius:10px}.tasks-page{padding:15px}.task-form{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:25px;background:#fff;padding:16px;border-radius:10px}.task-form textarea,.task-form .multi-select,.task-form button{grid-column:span 1}.task-form textarea{width:250px;height:70px;resize:vertical}.tasks-filters{gap:8px}.tasks-filters button{flex:1;min-width:90px;padding:8px;font-size:13px}.tasks-search{width:100%;padding:10px;margin-bottom:15px}.tasks-table thead{display:none}.tasks-table,.tasks-table tbody,.tasks-table tr,.tasks-table td{display:block;width:100%}.tasks-table tr{box-shadow:0 2px 6px #0000000d}.tasks-table tr{margin-bottom:15px;background:#fff;border:1px solid #efb9b9;border-radius:6px;padding:10px}.tasks-table td{border:none;padding:8px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.tasks-table td:before{flex:1;min-width:40%;font-weight:600;color:#555}.tasks-table td>*{flex:1;text-align:right;word-break:break-word}.tasks-table td:nth-child(2),.tasks-table td:nth-child(3),.tasks-table td:nth-child(6){align-items:flex-start}.tasks-table td:nth-child(2)>*,.tasks-table td:nth-child(3)>*,.tasks-table td:nth-child(6)>*{max-width:60%;text-align:right}.tasks-table td:nth-child(1):before{content:"ID"}.tasks-table td:nth-child(2):before{content:"Title"}.tasks-table td:nth-child(3):before{content:"Description"}.tasks-table td:nth-child(4):before{content:"Start"}.tasks-table td:nth-child(5):before{content:"Deadline"}.tasks-table td:nth-child(6):before{content:"Days"}.tasks-table td:nth-child(7):before{content:"Priority"}.tasks-table td:nth-child(8):before{content:"Status"}.tasks-table td:nth-child(9):before{content:"Assigned To"}.tasks-table td:nth-child(10):before{content:"Action"}.modal-content{width:95%;padding:15px}.modal-actions{flex-direction:column}.modal-actions button{flex:1;height:40px;font-size:14px}.mytasks-table thead{display:none}.mytasks-table,.mytasks-table tbody,.mytasks-table tr,.mytasks-table td{display:block;width:100%}.mytasks-table tr{box-shadow:0 2px 6px #0000000d}.mytasks-table tr{margin-bottom:15px;background:#fff;border:1px solid #efb9b9;border-radius:6px;padding:10px}.mytasks-table td{border:none;padding:8px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.mytasks-table td:before{flex:1;min-width:40%;font-weight:600;color:#555}.mytasks-table td>*{flex:1;text-align:right;word-break:break-word}.mytasks-table td:nth-child(2),.mytasks-table td:nth-child(3),.mytasks-table td:nth-child(6){align-items:flex-start}.mytasks-table td:nth-child(2)>*,.mytasks-table td:nth-child(3)>*,.mytasks-table td:nth-child(6)>*{max-width:60%;text-align:right}.mytasks-table td:nth-child(1):before{content:"ID"}.mytasks-table td:nth-child(2):before{content:"Title"}.mytasks-table td:nth-child(3):before{content:"Description"}.mytasks-table td:nth-child(4):before{content:"Start"}.mytasks-table td:nth-child(5):before{content:"Deadline"}.mytasks-table td:nth-child(6):before{content:"Days"}.mytasks-table td:nth-child(7):before{content:"Priority"}.mytasks-table td:nth-child(8):before{content:"Status"}.mytasks-table td:nth-child(9):before{content:"Assigned By"}.mytasks-table td:nth-child(10):before{content:"Action"}.user-form{display:grid;grid-template-columns:1fr}.user-form button{grid-column:span 1}.users-table thead{display:none}.users-table,.users-table tbody,.users-table tr,.users-table td{display:block;width:100%}.users-table tr{margin-bottom:15px;background:#fff;border:1px solid #eee;border-radius:6px;padding:10px}.users-table td{border:none;padding:6px 0;display:flex;justify-content:space-between}.users-table td:before{font-weight:600;color:#555}.users-table td:nth-child(1):before{content:"ID"}.users-table td:nth-child(2):before{content:"Name"}.users-table td:nth-child(3):before{content:"Email"}.users-table td:nth-child(4):before{content:"Designation"}.users-table td:nth-child(5):before{content:"Role"}.users-table td:nth-child(6):before{content:"Active"}.users-table td:nth-child(7):before{content:"Action"}.filters{flex-direction:column;align-items:stretch}.filters input,.filters select,.filter-buttons,.filter-buttons button{width:100%}}@media(max-width:768px){.modal-content{width:90%;padding:15px;border-radius:0}.modal-content h3{font-size:18px}.multi-select-dropdown{max-height:150px}table{font-size:12px}}