@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap";:root{--background:#f5f7f9;--surface:#f5f7f9;--surface-container-low:#eef1f3;--surface-container-lowest:#fff;--primary:#0284c7;--primary-container:#7dd3fc;--on-surface:#0f172a;--on-surface-variant:#64748b;--outline-variant:#e2e8f0;--primary-gradient:linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);--shadow:0 20px 40px #2c2f310d;--font-display:"Manrope", sans-serif;--font-body:"Inter", sans-serif;font-family:var(--font-body);background-color:var(--background);color:var(--on-surface);min-width:320px;min-height:100vh;margin:0;display:flex}body{place-items:center;width:100%;min-width:320px;min-height:100vh;margin:0;display:flex}#root{width:100%;margin:0 auto}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3{font-family:var(--font-display);margin:0;font-weight:700}button{cursor:pointer;font-family:var(--font-body);border:none;transition:all .3s}input{font-family:var(--font-body);outline:none;transition:all .3s}.login-container{background-color:var(--background);justify-content:center;align-items:center;width:100%;min-height:100vh;padding:20px;display:flex}.login-card{background-color:var(--surface-container-lowest);box-shadow:var(--shadow);text-align:center;border-radius:24px;width:100%;max-width:440px;padding:40px;animation:.6s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.login-header{margin-bottom:32px}.logo-area{justify-content:center;align-items:center;gap:12px;margin-bottom:8px;display:flex}.login-header h1{color:var(--on-surface);letter-spacing:-.02em;font-size:28px}.subtitle{color:var(--on-surface-variant);font-size:14px}.login-tabs{background-color:var(--surface-container-low);border-radius:14px;margin-bottom:32px;padding:4px;display:flex}.tab-btn{color:var(--on-surface-variant);background:0 0;border-radius:12px;flex:1;padding:10px;font-size:14px;font-weight:600;transition:all .2s}.tab-btn.active{background-color:var(--surface-container-lowest);color:var(--primary);box-shadow:0 4px 12px #0000000d}.login-form{text-align:left}.form-group{margin-bottom:20px}.form-group label{color:var(--on-surface-variant);margin-bottom:8px;margin-left:4px;font-size:13px;font-weight:600;display:block}.form-group input{border:1px solid var(--outline-variant);background-color:var(--surface-container-lowest);width:100%;color:var(--on-surface);border-radius:14px;padding:14px 16px;font-size:15px}.form-group input:focus{border-color:var(--primary);box-shadow:0 0 0 4px #0065731a}.form-options{justify-content:space-between;align-items:center;margin-bottom:24px;font-size:13px;display:flex}.checkbox-container{cursor:pointer;color:var(--on-surface-variant);align-items:center;display:flex}.forgot-password{color:var(--primary);font-weight:600;text-decoration:none}.login-submit-btn{background:var(--primary-gradient);color:#fff;border-radius:50px;width:100%;margin-bottom:24px;padding:16px;font-size:16px;font-weight:700;box-shadow:0 10px 20px #00657333}.login-submit-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px #0065734d}.login-footer{color:var(--on-surface-variant);font-size:14px}.login-footer a{color:var(--primary);font-weight:600;text-decoration:none}.dashboard-container{background-color:var(--background);background-image:radial-gradient(at 0 0,#50e1f90d 0,#0000 50%),radial-gradient(at 100% 100%,#0065730d 0,#0000 50%);min-height:100vh}.dashboard-header{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);z-index:100;background:#ffffffd9;border-bottom:1px solid #0065730d;justify-content:space-between;align-items:center;padding:12px 40px;display:flex;position:sticky;top:0;box-shadow:0 4px 30px #00000008,inset 0 -1px #ffffff1a}.logo-area{align-items:center;gap:16px;transition:transform .3s;display:flex}.logo-area:hover{transform:scale(1.02)}.logo-img{object-fit:contain;border-radius:12px;width:auto;height:44px}.primary-btn{background:var(--primary-gradient);color:#fff;white-space:nowrap;border:1px solid #ffffff1a;border-radius:12px;justify-content:center;align-items:center;gap:8px;min-width:140px;padding:12px 24px;font-size:14px;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex;box-shadow:0 4px 12px #0284c733}.primary-btn:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 8px 20px #0284c74d}.primary-btn:active{transform:translateY(0)}.secondary-btn{color:var(--on-surface-variant);border:1px solid var(--outline-variant);background:#fff;border-radius:12px;justify-content:center;align-items:center;min-width:120px;padding:12px 24px;font-size:14px;font-weight:600;transition:all .3s;display:inline-flex}.secondary-btn:hover{background:var(--surface-container-low);color:var(--primary);border-color:var(--primary)}.dashboard-main{max-width:1400px;margin:0 auto;padding:40px}.stats-section{flex-wrap:wrap;align-items:stretch;gap:24px;margin-bottom:48px;display:flex}.stat-card{border:1px solid var(--outline-variant);background:#fff;border-radius:20px;flex:1;min-width:240px;padding:24px 30px;transition:all .3s;box-shadow:0 10px 30px #00000005}.stat-card:hover{border-color:var(--primary-container);transform:translateY(-5px);box-shadow:0 20px 40px #0065730d}.header-actions{align-items:center;gap:20px;display:flex}.welcome-text{color:var(--on-surface-variant);margin-right:8px;font-size:14px}.welcome-text strong{color:var(--primary);font-weight:700}.logout-btn{border-radius:10px!important;min-width:auto!important;height:40px!important;padding:8px 20px!important;font-size:13px!important}.notification-bell{border:1px solid var(--outline-variant);cursor:pointer;background:#fff;border-radius:10px;justify-content:center;align-items:center;width:44px;height:44px;font-size:18px;transition:all .2s;display:flex;position:relative;box-shadow:0 4px 10px #00000005}.notification-bell:hover{border-color:var(--primary);background:var(--surface-container-low);transform:scale(1.05)}.badge{color:#fff;background:#ef4444;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;min-width:18px;height:18px;font-size:10px;font-weight:700;display:flex;position:absolute;top:-6px;right:-6px}.stat-card h3{text-transform:uppercase;letter-spacing:.8px;color:var(--on-surface-variant);margin-bottom:12px;font-size:13px;font-weight:600}.stat-value{background:var(--primary-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:40px;font-weight:800;line-height:1}.add-btn{align-self:flex-start;margin-left:auto}.list-section h2{color:var(--on-surface);align-items:center;gap:12px;margin-bottom:32px;font-size:26px;display:flex}.list-section h2:before{content:"";background:var(--primary-gradient);border-radius:4px;width:4px;height:24px}.employee-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:30px;display:grid}.employee-card{background:#fff;border:1px solid #0000;border-radius:28px;align-items:center;gap:24px;padding:28px;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex;box-shadow:0 10px 40px #00000008}.employee-card:hover{border-color:var(--primary-container);transform:translateY(-8px)scale(1.02);box-shadow:0 20px 50px #00657314}.photo-placeholder{background:linear-gradient(135deg, var(--surface-container-low) 0%, #fff 100%);width:72px;height:72px;color:var(--primary);border-radius:20px;justify-content:center;align-items:center;font-size:28px;font-weight:800;display:flex;box-shadow:inset 0 2px 5px #0000000d}.emp-photo img{object-fit:cover;border-radius:20px;width:72px;height:72px;box-shadow:0 4px 10px #0000001a}.emp-info h3{color:var(--on-surface);margin-bottom:6px;font-size:20px}.emp-info p{color:var(--on-surface-variant);margin-bottom:4px;font-size:14px}.role-tag{text-transform:uppercase;letter-spacing:.5px;color:var(--primary);background:#50e1f926;border-radius:50px;margin-top:10px;padding:4px 12px;font-size:11px;font-weight:800;display:inline-flex}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2000;background:#0f172a66;justify-content:center;align-items:center;padding:40px;display:flex;position:fixed;inset:0}.modal-content{background:#fff;border:1px solid #fff3;border-radius:32px;width:100%;max-width:700px;max-height:90vh;padding:48px;animation:.4s cubic-bezier(.16,1,.3,1) modalIn;position:relative;overflow-y:auto;box-shadow:0 32px 64px #0003}@keyframes modalIn{0%{opacity:0;transform:scale(.95)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.close-btn{background:var(--surface-container-low);cursor:pointer;width:44px;height:44px;color:var(--on-surface-variant);z-index:10;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:24px;transition:all .2s;display:flex;position:absolute;top:24px;right:24px}.close-btn:hover{color:#ef4444;background:#fee2e2;transform:rotate(90deg)}.add-employee-form input,.add-employee-form select,.add-employee-form textarea{background:var(--background);border:1px solid var(--outline-variant);border-radius:16px;width:100%;padding:14px 18px;font-size:15px;transition:all .3s}.add-employee-form input:focus,.add-employee-form select:focus,.add-employee-form textarea:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px #0065731a}.add-employee-form label{color:var(--on-surface);margin-bottom:8px;font-size:14px;font-weight:700}.data-table-container{background:#fff;border:1px solid #00000003;border-radius:28px;padding:10px;box-shadow:0 10px 40px #00000008}.data-table th{text-transform:uppercase;letter-spacing:1px;color:var(--on-surface-variant);border-bottom:2px solid var(--surface-container-low);background:0 0;padding:24px;font-size:12px}.data-table td{vertical-align:middle;border-bottom:1px solid #00000005;padding:24px;transition:background .2s}.data-table tbody tr:hover td{background:#50e1f908}.data-table tbody tr:last-child td{border-bottom:none}select{appearance:none;background-image:url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23595c5e%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E);background-position:right 18px center;background-repeat:no-repeat;background-size:16px;padding-right:48px!important}.nested-row td{padding:0 32px 32px!important}.history-card{background:linear-gradient(to bottom, #fff, var(--background));border:1px solid #0065731a;border-radius:20px;padding:24px;box-shadow:inset 0 2px 10px #00000005}.history-card h4{color:var(--primary);align-items:center;gap:10px;margin-bottom:16px;font-size:15px;display:flex}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--surface-container-low);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--on-surface-variant)}.badge-success{color:#166534;background:#dcfce7;border-radius:10px;padding:4px 12px;font-size:12px;font-weight:700}.badge-info{color:#075985;background:#e0f2fe;border-radius:10px;padding:4px 12px;font-size:12px;font-weight:700}.notification-sidebar{background-color:var(--surface-container-lowest);z-index:1001;flex-direction:column;width:360px;height:100vh;animation:.3s ease-out slideIn;display:flex;position:fixed;top:0;right:0;box-shadow:-4px 0 20px #0000001a}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.notification-header{border-bottom:1px solid var(--outline-variant);justify-content:space-between;align-items:center;padding:24px;display:flex}.notification-header h2{color:var(--on-surface);font-size:18px;font-weight:700}.close-sidebar-btn{color:var(--on-surface-variant);cursor:pointer;background:0 0;padding:4px;font-size:28px}.notification-actions{justify-content:flex-end;padding:12px 24px;display:flex}.close-all-btn{color:var(--primary);cursor:pointer;background:0 0;font-size:13px;font-weight:600}.notification-list{flex:1;padding:0 16px 24px;overflow-y:auto}.notification-item{background-color:var(--surface-container-low);border-radius:16px;margin-bottom:12px;padding:16px;transition:background-color .2s;position:relative}.notification-item:hover{background-color:var(--surface-container-high)}.item-header{justify-content:space-between;margin-bottom:6px;display:flex}.item-header strong{color:var(--on-surface);font-size:14px}.item-time{color:var(--on-surface-variant);font-size:11px}.item-msg{color:var(--on-surface-variant);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:8px;font-size:13px;display:-webkit-box;overflow:hidden}.item-contact{color:var(--primary);flex-direction:column;gap:2px;font-size:11px;font-weight:500;display:flex}.mark-closed-btn{background-color:var(--primary);color:#fff;opacity:0;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:700;transition:opacity .2s;position:absolute;top:16px;right:16px}.notification-item:hover .mark-closed-btn{opacity:1}.notification-empty{text-align:center;color:var(--on-surface-variant);padding:40px 0;font-size:14px}#root{width:100%}.solar-page{color:#1a202c;scroll-behavior:smooth;background:#f8f9fa;min-height:100vh;font-family:Plus Jakarta Sans,sans-serif}.solar-navbar{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);z-index:1000;background:#ffffffd9;border-bottom:1px solid #e2e8f080;justify-content:space-between;align-items:center;padding:1.5rem 8%;display:flex;position:sticky;top:0}.solar-navbar .logo{color:#003f87;font-family:Manrope,sans-serif;font-size:1.6rem;font-weight:800}.logo-img{object-fit:contain;width:auto;height:48px}.nav-links{align-items:center;gap:2.5rem;display:flex}.nav-links a{color:#4a5568;font-weight:600;text-decoration:none;transition:color .3s}.nav-links a:hover{color:#003f87}.login-btn-nav{background:#003f87;border-radius:50px;padding:.7rem 1.8rem;font-weight:700;transition:all .3s;color:#fff!important}.login-btn-nav:hover{background:#002b5c;transform:translateY(-2px);box-shadow:0 4px 15px #003f8733}.solar-hero{background:radial-gradient(circle at 10% 20%,#d7e2ff4d 0%,#f8f9fa 90%);align-items:center;gap:4rem;padding:6rem 8%;display:flex}.hero-content{flex:1}.hero-content h1{color:#1a202c;margin-bottom:1.5rem;font-family:Manrope,sans-serif;font-size:4rem;line-height:1.1}.hero-content h1 span{background:linear-gradient(135deg,#003f87 0%,#0056b3 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;display:block}.hero-content p{color:#4a5568;margin-bottom:3rem;font-size:1.25rem;line-height:1.7}.hero-actions{gap:1.2rem;display:flex}.solar-btn{border-radius:12px;padding:1rem 2.2rem;font-size:1.1rem;font-weight:700;text-decoration:none;transition:all .3s cubic-bezier(.165,.84,.44,1)}.solar-btn.primary{color:#fff;background:linear-gradient(135deg,#003f87 0%,#0056b3 100%);box-shadow:0 10px 20px #003f8726}.solar-btn.secondary{color:#281900;background:#feb300}.solar-btn:hover{transform:scale(1.05)}.hero-image{flex:1;position:relative}.hero-image img{border-radius:30px;width:100%;box-shadow:0 30px 60px #0000001a}.solar-benefits{text-align:center;background:#fff;padding:8rem 8%}.benefit-header h2{margin-bottom:1rem;font-family:Manrope,sans-serif;font-size:3rem}.benefit-header h2 span{color:#003f87}.benefit-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:3rem;margin-top:5rem;display:grid}.benefit-card{background:#f8fafc;border:1px solid #edf2f7;border-radius:24px;padding:3rem 2rem;transition:all .3s}.benefit-card:hover{background:#fff;transform:translateY(-15px);box-shadow:0 25px 50px -12px #00000014}.benefit-icon{margin-bottom:2rem;font-size:3rem}.benefit-card h3{color:#1a365d;margin-bottom:1rem;font-size:1.5rem}.solar-contact{color:#fff;background:#003f87;gap:5rem;padding:8rem 8%;display:flex}.contact-info-panel{flex:1}.contact-info-panel h2{margin-bottom:1.5rem;font-family:Manrope,sans-serif;font-size:3rem}.contact-info-panel h2 span{color:#feb300}.contact-details{margin-top:3rem}.detail{margin-bottom:1rem;font-size:1.1rem}.detail a{color:#feb300;text-decoration:none}.contact-form-panel{color:#1a202c;background:#fff;border-radius:30px;flex:1;padding:4rem}.contact-form-panel input,.contact-form-panel textarea{border:1.5px solid #e2e8f0;border-radius:12px;outline:none;width:100%;margin-bottom:1.5rem;padding:1.2rem;font-size:1rem;transition:border-color .3s}.contact-form-panel input:focus,.contact-form-panel textarea:focus{border-color:#003f87}.solar-submit{color:#fff;cursor:pointer;background:#003f87;border:none;border-radius:12px;width:100%;padding:1.2rem;font-size:1.1rem;font-weight:700;transition:all .3s}.solar-submit:hover{background:#002b5c}.status-msg{text-align:center;color:#003f87;margin-top:1.5rem;font-weight:600}.solar-footer{text-align:center;color:#fff9;background:#001a40;padding:4rem 0}@media (width<=968px){.solar-hero,.solar-contact{text-align:center;flex-direction:column}.hero-actions{justify-content:center}}