.employee-card{width:380px;height:300px;border-radius:8px;border:1px solid var(--border,#e2e8f0);padding:24px;box-shadow:0 2px 4px rgba(0,0,0,.05);display:flex;flex-direction:column;align-items:center;position:relative;background:var(--card-bg,#fff);transition:box-shadow .2s}.list-view .employee-card{width:90%;max-width:800px;height:auto;flex-direction:row;align-items:center;padding:16px 24px;gap:24px}.employee-avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid #10b981;position:relative}.list-view .employee-avatar{min-width:60px;width:60px;height:60px;margin:0}.employee-name{font-size:18px;font-weight:600;margin-bottom:16px}.employee-details{display:flex;flex-direction:column;justify-content:center;gap:10px;margin-top:15px}.list-view .employee-details{flex:1 1;flex-direction:row;align-items:center;justify-content:space-between;gap:16px}.employee-value{font-size:22px;margin:5px}.list-view .employee-value{font-size:16px;margin:2px 0}.employee-info{margin-bottom:10px;text-align:center;transition:all .3s ease}.list-view .employee-info{margin-bottom:0;flex:1 1;min-width:180px;text-align:left}.employee-headline{font-weight:700;text-decoration:underline;font-size:14px;color:#10b981}.list-view .employee-headline{margin-bottom:4px}.employee-icons{display:flex;justify-content:center;gap:12px}.list-view .employee-icons{display:none}.icon{cursor:pointer;transition:transform .2s ease}.icon:hover{transform:scale(1.2)}.delete-button{margin-top:12px;background-color:transparent;border:1.5px solid #dc2626;color:#dc2626;padding:6px 12px;border-radius:6px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background-color .2s ease,color .2s ease}.list-view .delete-button{margin-top:0;padding:4px 10px;font-size:14px}.delete-button:hover{background-color:#dc2626;color:white}.edit-button{background-color:transparent;margin-top:12px;border:1.5px solid #249851;color:#249851;padding:6px 12px;border-radius:6px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background-color .2s,color .2s}.list-view .edit-button{margin-top:0;padding:4px 10px;font-size:14px}.edit-button:hover{background-color:#249851;color:#fff}.list-view .card-buttons{display:flex;gap:8px;margin-left:auto;min-width:140px;justify-content:flex-end}@media (max-width:600px){.employee-card{width:100%;min-width:0;height:auto;padding:10px;margin-bottom:8px}.list-view .employee-card{flex-direction:column;gap:10px;padding:12px}.list-view .employee-details{flex-direction:column;width:100%}.list-view .employee-info{text-align:center;min-width:0}.list-view .card-buttons{margin:8px auto 0;width:100%;justify-content:center}.employee-avatar{width:56px;height:56px}.employee-name,.employee-value{font-size:1rem}.employee-details{gap:4px}.delete-button,.edit-button{padding:5px 8px;font-size:.95rem}.employee-icons{gap:8px}}.employee-directory{padding:20px 120px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.directory-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:24px}.directory-actions{display:flex;align-items:center;gap:1.25em;margin-left:auto;flex-wrap:nowrap}.filter-label{white-space:nowrap;font-size:18px;font-weight:500}.view-toggle{background-color:#f3f4f6;border-radius:6px;padding:2px}.toggle-btn,.view-toggle{display:flex;align-items:center}.toggle-btn{justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:4px;cursor:pointer;color:#6b7280;transition:all .2s}.toggle-btn.active{background-color:white;color:#10b981;box-shadow:0 1px 3px rgba(0,0,0,.1)}.add-employee-btn{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:6px;border:none;background-color:#10b981;color:white;font-weight:500;font-size:15px;cursor:pointer;transition:all .2s;white-space:nowrap;text-decoration:none;margin:0 auto}.add-employee-btn:hover{background-color:#059669}.plus-icon{font-size:18px;line-height:1}.employees-container{display:flex;flex-wrap:wrap;gap:32px}.grid-view{justify-content:center}.list-view{flex-direction:column;align-items:center;margin-right:10%}.filter-select,.filter-value-select{border-radius:8px;border:1px solid #e2e8f0;background-color:#f6fbf9;color:black;border-radius:4px;padding:8px 12px;font-size:1rem;margin:0 auto;display:block}.filter-container{display:flex;flex-direction:row;gap:1.4em;align-items:center}.search-container{position:relative;display:flex;align-items:center;max-width:100%;width:300px;margin:0 auto}.search-container:before{content:"";position:absolute;left:12px;width:16px;height:16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a0aec0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain;pointer-events:none}.search-bar{width:100%;padding:10px 12px 10px 36px;border-radius:8px;border:1px solid #e2e8f0;background-color:#f6fbf9;color:black;font-size:15px;line-height:1.5}.search-bar::placeholder{color:#a0aec0}.search-bar:focus{outline:none;border-color:transparent;box-shadow:0 0 0 2px rgba(72,187,120,.5)}.pagination{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:32px;font-size:16px;font-weight:500;color:#374151}.btn-next,.btn-previous{padding:8px 16px;border:none;border-radius:6px;background-color:#10b981;color:white;font-weight:500;cursor:pointer;transition:background-color .2s,transform .1s}.btn-next:hover:not(:disabled),.btn-previous:hover:not(:disabled){background-color:#059669;transform:translateY(-1px)}.btn-next:disabled,.btn-previous:disabled{background-color:#d1d5db;color:#6b7280;cursor:not-allowed}.loading-spinner{margin:40px 0;font-size:18px}.spinner-circle{border:4px solid #10b981;border-top-color:transparent;width:40px;height:40px;margin-bottom:8px}.reset-filters-btn{padding:8px 16px;background-color:transparent;border:2px solid #10b981;border-radius:6px;color:#10b981;font-size:15px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease;margin:0 auto;display:block}.reset-filters-btn:hover{background-color:#10b981;color:white}@media (max-width:600px){.filter-label{margin-top:4px}.employee-directory{padding:8px 1vw}.directory-title{font-size:1.2rem;margin:auto}.directory-actions,.directory-controls,.filter-container{flex-direction:row;align-items:stretch;gap:10px;width:100%;max-width:500px;margin:0 auto}.directory-actions{flex-wrap:wrap}.filter-select,.filter-value-select,.search-bar{width:100%;max-width:400px;font-size:.75rem;box-sizing:border-box}.reset-filters-btn{font-size:.75rem}.add-employee-btn{width:40%;font-size:.75rem}.search-container{max-width:340px;margin:0 auto}.employees-container{margin-top:20px;flex-direction:column!important;align-items:stretch!important;gap:12px}.view-toggle{display:none!important}.pagination{flex-direction:row;gap:8px;font-size:14px}}.loading-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;justify-content:center;align-items:center;z-index:9999}body.dark .loading-overlay{background-color:rgba(55,65,81,.85)}.loading-spinner{display:flex;flex-direction:column;align-items:center;gap:10px;color:#10b981;font-weight:600;font-size:24px}.spinner-circle{border:5px solid #10b981;border-top:4px solid transparent;border-radius:50%;width:80px;height:80px;animation:spin 1s linear infinite}.loading-text{margin:0;font-size:20px}.loading-note{margin:0;max-width:420px;padding:0 16px;text-align:center;font-size:15px;font-weight:400;line-height:1.5;color:var(--text);opacity:0;animation:fade-in .5s ease forwards}@keyframes fade-in{to{opacity:.85}}@keyframes spin{to{transform:rotate(1turn)}}