:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;color-scheme:light dark;color:#ffffffde;background-color:#242424}body{margin:0}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.app-container{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1}footer{background:#2c3e50;color:#fff;text-align:center;padding:15px 10px}.dashboard-container,.workers-container,.attendance-container,.profile-container,.report-container,.task-page,.vendor-container,.page{padding:82px 40px}.view-container{padding:82px 18px}.task-container{padding:67px 10px}h2{margin-bottom:15px;color:#fff;font-size:37px}.stats-cards{display:flex;gap:20px}.card{background:#f5f5f5;padding:15px;border-radius:8px;flex:1;text-align:center;box-shadow:0 2px 4px #0000001a}table{width:100%;border-collapse:collapse;margin-top:15px}table th,table td{border:1px solid #ccc;padding:10px;text-align:left}table th{background:#eee;color:#000}button{padding:6px 10px;margin:2px;cursor:pointer;border:none;background:#007bff;color:#fff;border-radius:4px}button:hover{background:#0056b3}.submit-btn{margin-top:20px;background:green}.profile-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;padding:20px}.profile-container h2{font-size:44px;margin-bottom:20px;color:#fbbf24;text-shadow:1px 1px 3px rgba(0,0,0,.5)}.profile-card{background:#111827;padding:30px;width:320px;border-radius:12px;box-shadow:0 8px 20px #00000080;transition:transform .3s ease,box-shadow .3s ease}.profile-card:hover{transform:translateY(-5px);box-shadow:0 12px 25px #000000b3}.profile-card p{font-size:18px;margin:12px 0;color:#e5e7eb}.profile-card strong{color:#fbbf24}.warning-message{text-align:center;font-size:22px;color:#f87171;margin-top:50px}.login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:linear-gradient(135deg,#283a53,#1e2021);font-family:Poppins,sans-serif;color:#fff}.login-container form{background:#fff;padding:40px 30px;border-radius:12px;box-shadow:0 8px 25px #0000004d;display:flex;flex-direction:column;width:350px;max-width:84%;color:#333}.login-container h2{margin-bottom:20px;font-size:34px;font-weight:600;text-align:center;color:#fff;text-shadow:1px 1px 4px rgba(0,0,0,.4)}.login-container input{padding:12px 15px;margin:10px 0;border-radius:8px;border:1px solid #ddd;outline:none;font-size:16px;transition:.3s}.login-container input:focus{border-color:#3a7bd5;box-shadow:0 0 8px #3a7bd566}.login-container button{padding:12px;margin-top:15px;background:#3a7bd5;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.login-container button:hover{background:#2f5ea4;transform:translateY(-2px)}.login-container p{margin-top:22px;text-align:center;font-size:18px;color:#333}.login-container p a{color:#3a7bd5;font-weight:600;text-decoration:none;transition:.3s;font-size:20px}.login-container p a:hover{text-decoration:underline}.register-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;font-family:Poppins,sans-serif;color:#fff}.register-container form{background:#fff;padding:40px 30px;border-radius:12px;box-shadow:0 8px 25px #0000004d;display:flex;flex-direction:column;width:370px;max-width:90%;color:#333}.register-container h2{margin-bottom:25px;font-size:30px;font-weight:600;text-align:center;color:#fff;text-shadow:1px 1px 4px rgba(0,0,0,.4)}.register-container input{padding:12px 15px;margin:10px 0;border-radius:8px;border:1px solid #ddd;outline:none;font-size:16px;transition:.3s}.register-container input:focus{border-color:#11998e;box-shadow:0 0 8px #11998e66}.register-container button{padding:12px;margin-top:15px;background:#3a7bd5;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.register-container button:hover{background:#0f8075;transform:translateY(-2px)}.register-container p{margin-top:15px;text-align:center;font-size:20px;color:#333}.register-container p a{color:#3a7bd5;font-weight:600;text-decoration:none;transition:.3s}.register-container p a:hover{text-decoration:underline}select{padding:12px 15px;margin:10px 15px 10px 0;border-radius:8px;border:1px solid #ddd;outline:none;font-size:14px;transition:.3s}.attendance-container label{font-size:22px;margin-right:28px}.attendance-container input{padding:9px 8px;margin:10px 20px 10px 0;border-radius:8px;border:1px solid #ddd;outline:none;font-size:16px;transition:.3s}.report-container label{font-size:20px;margin-left:6px}.report-container input{padding:9px 8px;margin:10px 15px 10px 0;border-radius:8px;border:1px solid #ddd;outline:none;font-size:14px;transition:.3s}.report-container button{padding:9px 10px;margin:2px;cursor:pointer;border:none;background:#007bff;color:#fff;border-radius:4px}.workers-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:20px}.workers-form input,.workers-form select,.workers-form button,.task-box input,.task-box textarea{padding:9px 12px;font-size:14px;border:1px solid #ccc;border-radius:6px}.workers-form button{background-color:#3498db;color:#fff;border:none;cursor:pointer;transition:.3s;font-weight:700}.workers-form button:hover{background-color:#2980b9}.dashboard{font-family:Poppins,sans-serif;background-color:#f4f6f9;min-height:100vh;color:#333;padding-bottom:2px}.dashboard-header{background-color:#1e293b;color:#fff;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 10px #0003}.dashboard-header h1{font-size:1.8rem;font-weight:600}.user-info{display:flex;align-items:center;gap:8px;font-weight:500}.role{color:#b0b8ff}.dashboard-hero{position:relative;margin:22px auto;max-width:100%;border-radius:0;overflow:hidden}.dashboard-image{width:100%;height:300px;object-fit:cover;filter:brightness(50%);transition:transform .6s ease,filter .3s ease}.dashboard-image:hover{transform:scale(1.05);filter:brightness(60%)}.overlay{position:absolute;inset:0;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.overlay h2{font-size:2rem;margin-bottom:10px}.overlay p{font-size:1.1rem}.stats-section{display:flex;justify-content:center;gap:30px;margin:40px auto;flex-wrap:wrap}.stat-card{background:#fff;border-radius:12px;box-shadow:0 5px 12px #0000001a;padding:25px 40px;text-align:center;width:250px;transition:transform .3s ease,box-shadow .3s ease}.stat-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px #0003}.stat-card h3{font-size:1.2rem;color:#555}.stat-card p{font-size:2rem;font-weight:700;margin-top:10px}.stat-card.blue{border-top:5px solid #3b82f6}.stat-card.green{border-top:5px solid #22c55e}.stat-card.red{border-top:5px solid #ef4444}.table-section{margin:40px auto;width:90%;background:#fff;padding:20px;border-radius:12px;box-shadow:0 5px 18px #0000001a}.table-section h2{margin-bottom:15px;color:#1e293b}.table-section table{width:100%;border-collapse:collapse}.table-section thead{background-color:#1e293b;color:#fff}.table-section th,td{padding:12px 15px;text-align:left;border-bottom:1px solid #ddd}.table-section tr:hover{background-color:#f3f4f6;transition:background-color .2s}.performance{padding:5px 10px;border-radius:8px;font-size:.9rem;font-weight:600}.performance.excellent{background-color:#d1fae5;color:#065f46}.performance.average{background-color:#fef9c3;color:#854d0e}.performance.poor{background-color:#fee2e2;color:#991b1b}@media (max-width: 768px){.stats-section{flex-direction:column;align-items:center}.dashboard-header{flex-direction:column;text-align:center}.overlay h2{font-size:1.5rem}}.login-container{height:100vh;width:100%;background-size:cover;background-position:center;display:flex;justify-content:center;align-items:center;position:relative}.login-container:before{content:"";position:absolute;inset:0;background-color:#00000080;z-index:0}.login-box{position:relative;z-index:1;width:380px;padding:40px 30px;border-radius:16px;box-shadow:0 0 20px #fff3;text-align:center;color:#fff;border:1px solid rgba(255,255,255,.3);background:#ffffff26}.login-box h1{font-size:24px;font-weight:700;margin-bottom:25px}.role-selection{display:flex;justify-content:center;gap:20px;margin-bottom:20px;font-size:16px}.role-selection label{cursor:pointer}.role-selection input{margin-right:6px;accent-color:#1e90ff}.login-box input{width:92%;padding:12px 14px;margin:10px 0;border-radius:8px;border:none;outline:none;color:#fff;font-size:15px}.login-box input::placeholder{color:#fffc}.login-box button{width:100%;padding:12px;background-color:#1e90ff;color:#fff;border:none;border-radius:8px;font-size:16px;cursor:pointer;transition:.3s ease;margin-top:10px}.login-box button:hover{background-color:#0077e6;transform:scale(1.03)}.login-box,.login-box input,.login-box button{transition:all .3s ease}.navbar{position:fixed;top:0;left:0;width:100%;background:#2c3e50;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:20px 18px;z-index:1000;box-sizing:border-box}.navbar-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}.navbar-logo img{width:44px;height:44px;object-fit:contain;border-radius:6px}.navbar-logo span{color:#f39c12;font-weight:700;font-size:22px}.navbar-links{display:flex;align-items:center;gap:18px}.nav-link{color:#fff;text-decoration:none;font-weight:500;padding:6px 8px;transition:color .2s}.nav-link:hover{color:#f39c12}.logout-btn{background:#e74c3c;color:#fff;border:none;padding:8px 12px;border-radius:6px;cursor:pointer;font-weight:600}.logout-btn:hover{background:#c0392b}.menu-toggle{display:none;background:none;border:none;color:#fff;font-size:28px;cursor:pointer}@media (max-width: 768px){.menu-toggle{display:block}.navbar{padding:20px 18px}.navbar-links{position:absolute;top:93px;left:0;background:#34495e;width:100%;flex-direction:column;align-items:center;gap:16px;padding:20px 0;display:none}.navbar-links.active{display:flex}.nav-link,.logout-btn{width:80%;text-align:center}.navbar-logo span{font-size:18px}.stat-card{width:65%}.table-section h2{font-size:20px}.table-section table{display:block;width:100%;overflow-x:auto;white-space:nowrap}.table-section tr{margin-bottom:15px;background:#fff;border:1px solid #ddd;border-radius:8px;padding:10px}.table-section td{padding:8px 10px;position:relative;justify-content:space-between}.table-section td:before{content:attr(data-label);font-weight:600;color:#2c3e50}.dashboard-container,.workers-container,.attendance-container,.profile-container,.report-container{padding:82px 15px}table{display:block;overflow-x:auto}.attendance-container h2{margin-top:40px;font-size:17px}.attendance-container input{margin-right:50px}.report-container h2{font-size:33px}.report-container input{margin-right:59px}.profile-container{min-height:50vh}.profile-card{padding:18px;width:285px}.profile-container h2{font-size:35px}.login-box{width:325px;padding:28px 18px}.login-box h1{font-size:22px}}.task-box input,.task-box textarea{margin-right:20px}.task-box{padding:15px;border-radius:6px;box-shadow:0 2px 6px #0000001a}.task-table{width:100%;border-collapse:collapse}.task-table th{background:#113f67;color:#fff;padding:10px;text-align:left}.task-box textarea{height:38px;border-radius:8px;border:1px solid var(--border);outline:none;font-size:15px;color:var(--text);margin-bottom:12px;box-sizing:border-box;vertical-align:middle;color:#000}.task-table td{padding:10px;border-bottom:1px solid #ddd}.status-chip{padding:4px 8px;background:#ffe58f;border-radius:4px;font-size:12px}.btn-view{background:#28a745;color:#fff;padding:5px 10px;border:none;margin-right:5px;border-radius:4px;cursor:pointer}.btn-delete{background:#dc3545;color:#fff;padding:5px 10px;border:none;border-radius:4px;cursor:pointer}.btn-view:hover,.btn-delete:hover{opacity:.8}.page{min-height:100vh;background:#1f1f1f;color:#fff;font-family:Segoe UI,sans-serif}.page h2{font-size:28px;margin-bottom:25px;font-weight:600}.page input[type=text],.page input[type=file],.page input{background:#2a2a2a;border:1px solid #3b3b3b;color:#fff;padding:10px 12px;border-radius:6px;font-size:14px;outline:none}.page input::placeholder{color:#aaa}.page input:focus{border-color:#1e90ff}.page>input{margin-bottom:12px}.page>input:nth-child(-n+7){width:13%;margin-right:1%}.page button{background:#1e90ff;border:none;padding:10px 18px;color:#fff;font-weight:600;border-radius:6px;cursor:pointer;transition:background .3s ease}.page button:hover{background:#0d6efd}.page hr{border:none;border-top:1px solid #333;margin:25px 0}.page>div[key]{display:flex;justify-content:space-between;align-items:center;background:#2b2b2b;padding:12px 16px;border-radius:6px;margin-bottom:10px;font-size:14px}.page>div[key] button{background:#e74c3c;padding:6px 12px;font-size:13px}.page>div[key] button:hover{background:#c0392b}@media (max-width: 1024px){.page>input:nth-child(-n+7){width:48%;margin-right:2%}}@media (max-width: 600px){.page>input:nth-child(-n+7){width:100%;margin-right:0}.page>div[key]{flex-direction:column;align-items:flex-start;gap:8px}}.calendar-dashboard{min-height:85vh;display:flex;justify-content:center;align-items:center}.admin-dashboard{padding:40px;text-align:center}.dashboard-title{margin-bottom:30px;font-size:32px;color:#2c3e50}.stats-grid{display:flex;justify-content:center;gap:25px;flex-wrap:wrap}.stat-card{width:220px;padding:25px;border-radius:12px;color:#fff;font-size:20px;font-weight:700;box-shadow:0 10px 25px #0003}.stat-card.blue{background:linear-gradient(135deg,#007bff,#0056b3)}.stat-card.green{background:linear-gradient(135deg,#28a745,#1e7e34)}.calendar-card{background:#fff;padding:35px;border-radius:16px;box-shadow:0 20px 45px #00000040;width:358px;text-align:center;transition:transform .3s ease;margin-top:89px}.calendar-card:hover{transform:translateY(-5px)}.calendar-title{margin-bottom:20px;font-size:26px;font-weight:700;color:#2c3e50}.react-calendar{width:100%;border:none;font-family:Segoe UI,sans-serif}.react-calendar__navigation button{color:#2c3e50;font-weight:700;font-size:16px}.react-calendar__tile{padding:12px 0;font-weight:500}.react-calendar__tile--active{background:#007bff!important;color:#fff!important;border-radius:8px}.react-calendar__tile:hover{background:#e6f0ff;border-radius:8px}.react-calendar,.react-calendar__month-view__days__day{color:#000!important}.react-calendar__month-view__days__day--weekend{color:red!important}.react-calendar__month-view__days__day--neighboringMonth{color:#999!important}.react-calendar__navigation button{color:#000!important;font-weight:700}.react-calendar__month-view__weekdays{font-weight:700;color:#000}.react-calendar__tile{font-size:16px;font-weight:600}.calendar-dashboard{min-height:85vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#0f2027,#203a43,#2c5364)}.calendar-title{font-size:26px;margin-bottom:20px}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center}.modal-box{background:#fff;padding:30px;border-radius:14px;text-align:center;width:300px}.modal-btn{width:100%;padding:12px;margin-top:10px;border:none;border-radius:8px;font-size:16px;cursor:pointer;color:#fff}.attendance{background:#27ae60}.report{background:#2980b9}.modal-close{margin-top:15px;background:#e74c3c;color:#fff;border:none;padding:8px 14px;border-radius:6px;cursor:pointer}.rreasign{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:9999}.reassignn{background:#1e272e;padding:25px;border-radius:12px;width:320px;display:flex;flex-direction:column;gap:12px}@media (max-width:768px){.calendar-card{width:309px;margin-top:107px}}.react-calendar{width:350px;max-width:100%;background:#fff;border:1px solid #a0a096;font-family:Arial,Helvetica,sans-serif;line-height:1.125em}.react-calendar--doubleView{width:700px}.react-calendar--doubleView .react-calendar__viewContainer{display:flex;margin:-.5em}.react-calendar--doubleView .react-calendar__viewContainer>*{width:50%;margin:.5em}.react-calendar,.react-calendar *,.react-calendar *:before,.react-calendar *:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.react-calendar button{margin:0;border:0;outline:none}.react-calendar button:enabled:hover{cursor:pointer}.react-calendar__navigation{display:flex;height:44px;margin-bottom:1em}.react-calendar__navigation button{min-width:44px;background:none}.react-calendar__navigation button:disabled{background-color:#f0f0f0}.react-calendar__navigation button:enabled:hover,.react-calendar__navigation button:enabled:focus{background-color:#e6e6e6}.react-calendar__month-view__weekdays{text-align:center;text-transform:uppercase;font:inherit;font-size:.75em;font-weight:700}.react-calendar__month-view__weekdays__weekday{padding:.5em}.react-calendar__month-view__weekNumbers .react-calendar__tile{display:flex;align-items:center;justify-content:center;font:inherit;font-size:.75em;font-weight:700}.react-calendar__month-view__days__day--weekend{color:#d10000}.react-calendar__month-view__days__day--neighboringMonth,.react-calendar__decade-view__years__year--neighboringDecade,.react-calendar__century-view__decades__decade--neighboringCentury{color:#757575}.react-calendar__year-view .react-calendar__tile,.react-calendar__decade-view .react-calendar__tile,.react-calendar__century-view .react-calendar__tile{padding:2em .5em}.react-calendar__tile{max-width:100%;padding:10px 6.6667px;background:none;text-align:center;font:inherit;font-size:.833em}.react-calendar__tile:disabled{background-color:#f0f0f0;color:#ababab}.react-calendar__month-view__days__day--neighboringMonth:disabled,.react-calendar__decade-view__years__year--neighboringDecade:disabled,.react-calendar__century-view__decades__decade--neighboringCentury:disabled{color:#cdcdcd}.react-calendar__tile:enabled:hover,.react-calendar__tile:enabled:focus{background-color:#e6e6e6}.react-calendar__tile--now{background:#ffff76}.react-calendar__tile--now:enabled:hover,.react-calendar__tile--now:enabled:focus{background:#ffffa9}.react-calendar__tile--hasActive{background:#76baff}.react-calendar__tile--hasActive:enabled:hover,.react-calendar__tile--hasActive:enabled:focus{background:#a9d4ff}.react-calendar__tile--active{background:#006edc;color:#fff}.react-calendar__tile--active:enabled:hover,.react-calendar__tile--active:enabled:focus{background:#1087ff}.react-calendar--selectRange .react-calendar__tile--hover{background-color:#e6e6e6}