:root{font-family:Inter,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px}*{margin:0;padding:0}.app-header,.auth-header{position:sticky;top:0;z-index:1000;display:flex;justify-content:space-between;align-items:center;background-color:#fff;box-shadow:0 2px 4px #0000001a;height:60px;width:100%}.header-left{display:flex;align-items:center;gap:1rem}.header-right{display:flex;gap:1.5rem}.menu-toggle{display:none;font-size:2rem;background:none;border:none;cursor:pointer}@media (max-width: 768px){.header-right{position:absolute;top:60px;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:1rem;display:none;box-shadow:0 4px 8px #0000001a}.header-right.open{display:flex}.menu-toggle{display:block;padding-right:10px}.header-button{width:90px;text-align:left}}.app-title{font-size:1.5rem;font-weight:600;margin:0;color:#333}.logo{padding-left:30px;height:40px;width:auto}.header-button{padding:.5rem 1rem;border:none;border-radius:4px;font-weight:500;cursor:pointer;transition:all .2s ease;background:none}.header-button.active{background:#94e4f1;color:#fff;border:none;outline:none}.login-container,.signup-container{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:92vh;background:linear-gradient(90deg,#737cde,#706cc8,#6f60b8);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;gap:1rem}.login,.signup{background-color:#fff;border-radius:10px;box-shadow:0 4px 12px #00000026;width:100%;max-width:400px;padding:30px;box-sizing:border-box}.title{font-size:28px;color:#2c3e50;margin-bottom:5px;font-weight:600;text-align:center}.bg-text{color:#687071;font-size:15px;margin:25px 0 0;text-align:center}.bg-text a{color:#737cde;text-decoration:none;font-weight:500}.bg-text a:hover{text-decoration:underline}.side-title{color:#2c3e50;font-size:14px;margin:15px 0 5px;font-weight:500}.login input,.signup input{width:100%;padding:12px 15px;border:1px solid #ddd;border-radius:5px;font-size:14px;box-sizing:border-box;margin-bottom:5px;margin-top:5px}.login input:focus,.signup input:focus{outline:none;border-color:#737cde}.password-wrapper{display:flex;align-items:center;border:1px solid #ccc;border-radius:6px;height:40px;width:100%;overflow:hidden;background-color:#fff}.signup .password-wrapper{display:flex;align-items:center;border:1px solid #ccc;border-radius:6px;height:40px;width:100%;overflow:hidden;background-color:#fff;margin-top:15px}.password-input{margin-top:-10px;flex:1;height:100%}.password-input input{width:100%;height:100%;border:none;outline:none;font-size:14px;padding:0 12px;background-color:#fff;color:#333}.toggle-password{margin-top:-20px;display:flex;align-items:center;justify-content:center;height:100%;background:transparent}.toggle-password button{border:none;outline:none;cursor:pointer;height:100%;display:flex;align-items:center;justify-content:center;padding:0 12px;background-color:#fff!important;color:#737cde!important}.toggle-password button:hover{box-shadow:none!important;outline:none!important;background:transparent!important}.toggle-password button svg{width:18px;height:18px;stroke-width:2}.login button,.signup button{width:100%;padding:12px;background-color:#737cde;color:#fff;border:none;border-radius:5px;font-size:16px;font-weight:600;cursor:pointer;margin-top:20px;transition:all .3s}.login button:hover{background-color:#5f6bc7;box-shadow:0 2px 8px #0000001a}.error{color:#e74c3c;font-size:14px;margin:10px 0 0;text-align:center}.auth-header{justify-content:center}.auth-header .header-center,.auth-header .header-right{display:none}.dashboard-button{color:#2563eb}.dashboard-button:hover{background-color:#dbeafe}.list-button{color:#059669}.list-button:hover{background-color:#d1fae5}.danger-button{color:#dc2626}.danger-button:hover{background-color:#fee2e2}.logout-button{color:#6b7280;border:0px solid #e5e7eb}.logout-button:hover{background-color:#f3f4f6}.employee-list-container{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem;box-sizing:border-box}.employee-list-container h1{color:#333;text-align:center}.search-container{position:relative;margin:20px 0;display:flex;align-items:center;flex:1}.search-container input{flex:1;padding:8px;font-size:16px;border:1px solid #ddd;border-radius:4px}.clear-btn{position:absolute;right:35px;background:none;border:none;font-size:18px;color:#000;cursor:pointer;padding:0;line-height:1}.top-container{display:flex;align-items:center;gap:20px}.search-container,.filter-container{display:flex;gap:10px;align-items:center}.reset-container button{padding:8px 16px;background:#f44336;color:#fff;border:none;border-radius:4px;cursor:pointer}.filter-container select{padding:8px;font-size:16px;min-width:180px;border:1px solid #ddd;border-radius:4px;background:#fff;cursor:pointer;font-family:Roboto,sans-serif}.filter-container{display:flex;align-items:center;gap:10px}.search-container svg{cursor:pointer}@media (max-width: 768px){.top-container{display:flex;flex-direction:column;width:40vh;gap:.05rem}.search-container{display:flex}.filter-container{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:10px}}.table-responsive{align-items:center;width:80%;overflow-x:auto;margin:20px 0;box-shadow:0 2px 4px #0000001a}@media (max-width: 768px){.table-responsive{width:100%}}table{width:100%;border-collapse:collapse}th,td{padding:12px;text-align:left;border-bottom:1px solid #ddd}th{position:sticky;top:0;color:#717372}td{font-weight:500}tr:hover{background-color:#f5f5f5}.dept-label{padding:4px 10px;border-radius:20px;display:inline-block;text-align:center;font-size:.9rem;font-weight:500;color:#333}.dept-label.sales{background-color:#edafaf}.dept-label.r-d{background-color:#afd3f3}.dept-label.hr{background-color:#bffbbf}.role-label{padding:4px 10px;border-radius:20px;display:inline-block;font-size:.85rem;font-weight:500;color:#333}.role-label.healthcare-rep{background-color:#d1f0ff}.role-label.human-resources{background-color:#ffe0f0}.role-label.lab-tech{background-color:#e0e0ff}.role-label.manager{background-color:#d9ffd9}.role-label.manufacturing-director{background-color:#fff0cc}.role-label.research-director{background-color:#e5e5e5}.role-label.research-scientist{background-color:#e6ffea}.role-label.sales-executive{background-color:#ffe0b3}.role-label.sales-rep{background-color:#fcc}.search-container{width:80%}.emp-actions{align-items:center;width:50px;padding-right:50px;padding-left:20px}.emp-dash{width:30px;display:flex;justify-content:center;align-items:center;gap:1.4rem}button{background:none;border:none;padding:0;cursor:pointer;outline:none}.icon{font-size:18px;color:#75e0dd;transition:opacity .3s ease}.icon-wrapper{width:18px;height:18px;transition:all .3s ease;display:flex;justify-content:center;align-items:center;position:relative;font-size:18px;color:#374151}.icon-wrapper:hover{width:22px;height:18px;background-color:#f0f0f0}.icon-label{opacity:0;position:absolute;font-size:12px;color:#1e40af;pointer-events:none}.icon-wrapper:hover .icon-label{opacity:1;padding:4px 10px;border-radius:20px;display:inline-block;text-align:center;font-size:.9rem;font-weight:600;color:#fff;background-color:#7ae0cf}.emp-dash:hover .icon-wrapper:not(:hover){transform:scale(.9);opacity:.7}.pagination-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px;flex-wrap:wrap}.pagination-button{border:none;background-color:#8bb2d9;color:#fff;font-size:18px;padding:8px 12px;border-radius:6px;cursor:pointer;transition:background-color .2s ease}.pagination-button:hover{background-color:#76b0ea}.pagination-button:disabled{background-color:#ccc;cursor:not-allowed}.page-indicator{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background-color:#ce93d8;color:#fff;border-radius:50%;font-weight:700;font-size:16px}.loading-indicator{margin-left:10px;font-size:14px;color:#999}.dashboard{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem;box-sizing:border-box}.dash-title{background:linear-gradient(90deg,#f7bfd4,#ffeee5 50.81%,#c1ecf3);width:92%;padding:48px 36px;display:flex;flex-direction:column;height:100%;justify-content:center;border-radius:10px}.monitor-header{display:flex;text-align:center;height:80px;align-items:center;justify-content:center}.profile-header{display:flex;align-items:center;margin-bottom:32px;border-bottom:1px solid #ddd;padding-bottom:16px}.profile-avatar{width:90px;height:90px;background:#f0f0f0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:42px;margin-right:20px}.profile-info h1{margin:0;font-size:28px}.profile-info p{margin:6px 0 0;color:#777}.profile-section{margin-bottom:32px}.profile-section h2{font-size:20px;margin-bottom:16px;border-bottom:1px solid #eee;padding-bottom:4px}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px}.profile-field{display:flex;flex-direction:column}.profile-field label{font-size:12px;color:#666;margin-bottom:4px}.profile-field input{padding:8px;border:1px solid #bbb;border-radius:4px}.profile-field span{padding:8px 0}.profile-actions{text-align:right}.btn{padding:10px 20px;margin-left:8px;border:none;border-radius:4px;cursor:pointer}.btn.edit{background-color:#007bff;color:#fff}.btn.save{background-color:#28a745;color:#fff}.btn.cancel{background-color:#6c757d;color:#fff}.profile-container{position:relative;max-width:700px;margin:40px auto;padding:32px;background:#fff;border:1px solid #ddd;border-radius:10px;box-shadow:0 4px 12px #0000001a;font-family:Arial,sans-serif}.left-stamp{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-20deg);font-size:180px;color:#dc354533;font-weight:700;letter-spacing:5px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:10;border:8px solid rgba(220,53,69,.2)}.dashboard{display:flex;flex-direction:column;gap:2rem;padding:2rem}.dash-title{text-align:center}.chart-grid{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center}.chart-container1,.chart-container1x{background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;padding:1rem;flex:1 1 40%;min-width:300px;max-width:600px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:2rem}.chart-container2{background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;padding:1rem;width:100%}.chart-container3{background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;padding:1rem;width:370px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:2rem}.chart-container4{background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;padding:1.5rem;width:45%;align-items:center;justify-content:center}.chart-container5{background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;height:230px;width:300px;display:flex;padding:1rem;flex-direction:column}.chart-container2 select{padding:.5rem;margin-bottom:1rem;border-radius:4px;border:1px solid #ccc}.update-metrics-btn{margin:2rem auto;display:block;padding:.75rem 1.5rem;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.update-metrics-btn:hover{background:#0056b3}.kpicardsholder{display:flex;flex-direction:column;flex:1 1 40%;width:600px}.kpi-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:2rem 0}.kpi-cards{display:grid;gap:1rem}.kpi-card{background:#fff;border-radius:12px;padding:1.2rem;box-shadow:0 4px 10px #0000001a;transition:transform .2s;max-height:150px}.kpi-card-attrition{width:100%}.kpi-card:hover{transform:translateY(-3px)}@media (max-width: 768px){.chart-grid{width:100vw}.chart-container1,.chart-container3{margin-left:15px;margin-right:15px}.chart-container2{width:90%!important;margin-left:15px;margin-right:15px}.kpicardsholder{width:100%;display:flex;flex-direction:column;align-items:center}.kpi-card-attrition{width:90vw;padding:0;margin:0}.kpi-card{width:auto!important;min-width:80%}.kpi-cards-grid{width:100vw;display:flex;flex-direction:column;align-items:center}}.kpi-header{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}.kpi-card h4{margin:0;font-size:1rem;color:#333}.kpi-value{font-size:1.8rem;font-weight:700;margin:.4rem 0}.kpi-description{font-size:.85rem;color:#666}.kpi-card.negative .kpi-value{color:#ffc61a}.kpi-card.positive .kpi-value{color:#43a047}.back-button-container{display:flex;justify-content:center;margin-top:40px;margin-bottom:40px}.back-button{padding:12px 24px;font-size:16px;background-color:#ffc107;color:#000;border:none;border-radius:8px;cursor:pointer;transition:background-color .2s ease}.back-button:hover{background-color:#c0e2f4}.bad-negative{color:#e24646;font-weight:500}.signup-inline-group{display:flex;gap:10px;width:100%}.signup-inline-group .inline-input,.signup-inline-group .inline-select{flex:1;padding:12px 15px;border:1px solid #ddd;border-radius:5px;font-size:14px;box-sizing:border-box;margin:5px 0}.signup-inline-group .inline-input:focus,.signup-inline-group .inline-select:focus{outline:none;border-color:#737cde}.signup-inline-group .inline-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url('data:image/svg+xml;utf8,<svg fill="%23737CDE" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 10px center;background-color:#fff;background-size:16px}.kpi-card.manager-card{margin-top:20px}.manager-card-header{display:flex;align-items:center}.kpi-card.good{border-left:5px solid #28a745}.kpi-card.good h2{color:#28a745}.kpi-card.warn{border-left:5px solid #fd7e14}.kpi-card.warn h2{color:#fd7e14}.kpi-card.bad{border-left:5px solid #dc3545}.kpi-card.bad h2{color:#dc3545}.kpi-card-content{margin:8px 0}.kpi-card-content h2{margin:0;font-size:1.6rem}.kpi-card-caption{font-size:.85rem;color:#555}.white-conatainer{display:flex;flex-direction:column;align-items:center;margin-top:20px;border:2px solid white;width:400px;border-radius:8px;height:120px;justify-content:center}.demo-section{display:flex;flex-direction:column;align-items:center}.demo-button{background-color:transparent;border:2px solid white;color:#fff;padding:10px 20px;font-size:16px;cursor:pointer;border-radius:4px;transition:background-color .3s ease,color .3s ease;width:350px;margin-top:10px;font-weight:750}.demo-button:hover{background-color:#fff;color:#505aa5}.demo-text{color:#fff;font-size:14px;font-weight:500}