.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#fff;padding:20px}.login-card{width:500px;max-width:90%;padding:40px;background:#f1f3f5;border-radius:15px;box-shadow:0 10px 25px #0003}.login-title{text-align:center;font-weight:700;color:#2563eb;font-size:28px;margin-bottom:10px}.client-title{text-align:center;font-weight:500;color:#4b5563;font-size:18px;margin-bottom:30px}.login-label{font-size:16px;font-weight:500;color:#374151;margin-bottom:6px;display:block}.login-input{width:100%;padding:12px 15px;border-radius:8px;border:1px solid #d1d5db;margin-bottom:20px;font-size:14px;outline:none;transition:all .2s}.login-input:focus{border-color:#2563eb;box-shadow:0 0 0 2px #2563eb33}.input-icon-wrapper{position:relative}.input-icon-wrapper .input-icon{position:absolute;right:12px;top:35%;transform:translateY(-50%);font-size:16px;color:#9ca3af;pointer-events:none}.input-icon-wrapper .input-icon.clickable{right:12px;left:auto;pointer-events:auto;cursor:pointer}.login-input.with-icon{padding-left:35px;padding-right:35px}.remember-forget-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.remember-label{font-size:14px;color:#6b7280;padding-left:10px}.forget-button{border:none;background:transparent;color:#6b7280;font-size:14px;cursor:pointer}.login-button{width:100%;padding:12px;border-radius:8px;border:none;background-color:#0de395;color:#fff;font-size:16px;font-weight:600;transition:all .3s ease}.login-button:hover{background-color:#21a752;opacity:.95;cursor:pointer}.login-button:hover{transform:translateY(-4px);box-shadow:0 10px 22px #00000014}.underline{width:100%;height:1px;background-color:#e5e7eb;margin-top:50px}.footer-text{text-align:center;margin-top:20px;font-size:13px;color:#9ca3af}@media(max-width:480px){.login-card{padding:30px 20px}.login-title{font-size:24px}.client-title{font-size:16px}.login-input{font-size:13px;padding:10px 12px}.login-button{font-size:14px;padding:10px}}:root{--bg: #ffffff;--bg-soft: #f9fafb;--border: #e5e7eb;--text: #111827;--text-muted: #6b7280;--primary: #2563eb;--hover: #f3f4f6}.sidebar{position:relative;height:86vh;background:var(--bg);color:var(--text);display:flex;flex-direction:column;transition:width .2s ease;border-right:1px solid var(--border);overflow:hidden}.sidebar.collapsed{width:72px!important}.sidebar__sites{padding:16px;background:var(--bg)}.sidebar__sites-title{font-size:20px;font-weight:600;color:var(--text-muted);margin-bottom:10px}.sidebar__sites-list{display:flex;flex-direction:column;gap:6px}.sidebar__empty{font-size:12px;color:var(--text-muted)}.sidebar__site-item{display:flex;justify-content:space-between;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg-soft);color:var(--text);cursor:pointer;font-size:13px;transition:all .2s ease}.sidebar__site-item:hover{background:var(--hover);border-color:#d1d5db}.sidebar__site-item.active{background:#eff6ff;border-color:var(--primary);color:var(--primary)}.sidebar__site-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.sidebar__site-code{font-size:11px;color:var(--text-muted)}.sidebar__resizer{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize}.sidebar__resizer:hover{background:#e5e7eb}.sidebar__footer{margin-top:auto;padding:12px;border-top:1px solid var(--border)}.sidebar__btn{width:100%;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;font-size:14px;transition:all .2s ease}.sidebar__btn:hover{background:var(--hover)}@media(max-width:768px){.sidebar{display:none}}.header{height:14vh;background:#fff;border-bottom:1px solid #e5e7eb;box-shadow:0 4px 10px -6px #00000014;display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:1000}.header-left{display:flex;align-items:center;flex-shrink:0}.header-logo{height:10vh;max-width:20vw;object-fit:contain;padding-left:4vw}.header-center{flex:1;display:flex;justify-content:flex-end;padding-right:20px}.header-nav-pill{margin-right:20px;display:flex;gap:20px;padding:15px 14px 20px;border-radius:30px;box-shadow:0 1px 6px #00000014;background:#fff}.header-nav-item{font-size:14px;cursor:pointer;padding:6px 10px;transition:.2s;white-space:nowrap}.header-nav-item:hover{color:#2563eb}.header-nav-item.active{font-weight:100;font-size:medium}.header-site-picker{display:flex;align-items:center;gap:6px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:999px;padding:6px 10px}.header-site-picker label{font-size:12px;color:#6b7280}.header-site-picker select{background:transparent;border:none;outline:none;font-size:13px;cursor:pointer}.clear-selection-button{border:none;background:#2563eb;color:#fff;padding:5px 10px;border-radius:999px;cursor:pointer}.clear-selection-button:hover{background:#1e40af}.header-right{display:flex;align-items:center;gap:14px}.header-profile{display:flex;align-items:center;gap:6px;cursor:pointer;position:relative}.header-avatar{width:32px;height:32px;border-radius:50%}.header-username{font-size:13px;font-weight:500}.header-arrow{font-size:11px;transition:.2s}.header-arrow.rotate{transform:rotate(180deg)}.header-dropdown{position:absolute;top:42px;right:0;width:150px;background:#fff;border-radius:10px;border:1px solid #eee;box-shadow:0 8px 18px #00000014;overflow:hidden}.header-dropdown-item{padding:10px;cursor:pointer;font-size:13px}.header-dropdown-item:hover{background:#f9fafb}.logout{color:red}.menu-btn{display:none;font-size:22px;cursor:pointer}.mobile-menu{position:absolute;top:70px;left:0;width:100%;background:#fff;border-top:1px solid #eee;display:flex;flex-direction:column;z-index:999}.mobile-menu div{padding:14px 20px;border-bottom:1px solid #f1f1f1;cursor:pointer}.mobile-menu div:hover{background:#f9fafb}@media(max-width:1024px){.header{padding:0 16px}.header-nav-pill{gap:10px}.header-nav-item{font-size:13px;padding:6px 8px}.header-logo{height:48px}}@media(max-width:768px){.header{height:64px;padding:0 12px}.header-center{display:none}.menu-btn{display:block}.header-username,.header-site-picker{display:none}.header-logo{height:40px}}@media(max-width:480px){.header{height:60px}.header-avatar{width:28px;height:28px}}.main-layout{display:flex;flex-direction:column;height:100vh}.body{display:flex;flex:1;overflow:hidden}.page-content{flex:1;overflow-y:auto;padding:20px}.profile-container{display:flex;justify-content:center;padding:40px}.profile-card{width:100%;max-width:420px;background:#fff;border-radius:12px;padding:24px;box-shadow:0 8px 20px #0000000f;border:1px solid rgb(231,226,226)}.profile-header{text-align:center;margin-bottom:20px}.profile-avatar{width:90px;height:95px;border-radius:50%;border-width:1px solid hsl(216,69%,45%)}.designation{color:#6b7280;font-size:14px}.profile-info{margin-top:20px}.info-row{margin-bottom:16px}.info-row label{font-size:12px;color:#6b7280}.info-row p{font-size:14px;margin-top:4px}.input{width:100%;padding:8px;margin-top:4px;border-radius:6px;border:1px solid #ccc}.profile-actions{margin-top:20px;display:flex;justify-content:center;gap:10px}.edit-btn{background:#2563eb;color:#fff;padding:10px 16px;border:none;border-radius:6px;cursor:pointer}.save-btn{background:#16a34a;color:#fff;padding:10px 16px;border:none;border-radius:6px;cursor:pointer}.cancel-btn{background:#e5e7eb;padding:10px 16px;border:none;border-radius:6px;cursor:pointer}@media(max-width:768px){.profile-container{padding:20px 10px}.profile-card{padding:16px}.profile-avatar{width:70px;height:75px}.profile-actions{flex-direction:column;gap:8px}.edit-btn,.save-btn,.cancel-btn{width:100%;padding:12px}}.dashboard-container{padding:24px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;min-height:100vh}.dasboard-site-header-card{background:#fff;padding:20px;border-radius:12px;box-shadow:0 4px 12px #00000014;margin-bottom:20px}.dasboard-count-wrapper{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.dasboard-count-wrapper-button{background:linear-gradient(135deg,#9edce2,#4ba2a2);padding:16px;border-radius:10px;transition:.2s ease;cursor:pointer}.dasboard-countWrapper-text h3{margin-bottom:10px;font-size:16px}.dasboard-countWrapper-text p{margin:4px 0;font-size:14px}.dashboard-filter-bar-date{display:inline-flex;border:1px solid #d1d5db;border-radius:10px;overflow:hidden;background:#fff}.dashboard-filter-bar-date button{padding:8px 16px;border:none;background:transparent;cursor:pointer;font-size:14px;color:#374151;transition:all .2s ease}.dashboard-filter-bar-date button:not(:last-child){border-right:1px solid #e5e7eb}.dashboard-filter-bar-date .active-filter{background:#2563eb;color:#fff;font-weight:500}.skeleton{width:40px;height:16px;background:#ddd;border-radius:4px;animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.active-card{border:2px solid #ef4444;background:#fff1f2;transform:scale(1.02);transition:.2s ease}.chart-container{margin-top:20px}.filter-bar{padding:10px}.map-btn.view{margin-left:10px;padding:8px 14px;background:#2563eb;color:#fff;border:none;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer}@media(max-width:768px){.dashboard-container{padding:12px}.dasboard-site-header-card{padding:15px}.dasboard-count-wrapper{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.dasboard-countWrapper-text h3{font-size:14px}.dasboard-countWrapper-text p{font-size:12px}.filter-bar{padding:5px}.map-btn.view{font-size:12px;padding:6px 10px}}.map-btn.view:hover{background:#1e40af;transform:translateY(-1px)}.myTeam-team-wrapper{padding:20px}.myTeam-tree ul{padding-top:20px;position:relative;display:flex;justify-content:center}.myTeam-tree li{list-style:none;text-align:center;position:relative;padding:20px 10px 0}.myTeam-tree li:before,.myTeam-tree li:after{content:"";position:absolute;top:0;right:50%;border-top:2px solid #ccc;width:50%;height:20px}.myTeam-tree li:after{right:auto;left:50%;border-left:2px solid #ccc}.myTeam-tree li:only-child:before,.myTeam-tree li:only-child:after{display:none}.myTeam-tree li:only-child{padding-top:0}.myTeam-tree ul ul:before{content:"";position:absolute;top:0;left:50%;border-left:2px solid #ccc;height:20px}.myTeam-card{border:1px solid #ddd;padding:10px;border-radius:10px;background:#fff;min-width:150px;box-shadow:0 4px 10px rgba(0,0,0,0myTeam-05);display:flex;flex-direction:column;gap:6px}.myTeam-profile-img{width:50px;height:50px;border-radius:50%}.myTeam-call-btn{display:inline-block;margin-top:5px;color:#2563eb;text-decoration:none}.myTeam-Manager{border-left:5px solid #2563eb}.myTeam-Supervisor{border-left:5px solid #f59e0b}.myTeam-Guard{border-left:5px solid #22c55e}.split-container{display:flex;height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.left-panel{width:32%;display:flex;flex-direction:column;height:100%;min-height:0;background:#ffffffb3;border-right:1px solid rgba(0,0,0,.06)}.frozen{position:sticky;top:0;z-index:20;background:#fff;padding:12px;border-bottom:1px solid rgba(0,0,0,.06)}.list-scroll{flex:1;overflow-y:auto;padding:16px}.tabs{display:flex;gap:8px;background:#f1f5f9;padding:6px;border-radius:12px;width:fit-content}.tabs button{padding:8px 18px;border:none;border-radius:10px;background:transparent;font-size:14px;font-weight:500;color:#475569;cursor:pointer;transition:all .25s ease}.tabs button:hover{background:#0000000d}.tabs button.active{background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;box-shadow:0 4px 12px #4f46e54d;transform:translateY(-1px)}.tabs button:active{transform:scale(.97)}.search-box{position:relative;width:100%;margin-bottom:16px}.search-input{width:100%;margin-top:10px;padding:10px 14px 10px 38px;border-radius:10px;border:1px solid rgba(0,0,0,.08);background:#fff;font-size:14px;color:#1e293b;box-shadow:0 2px 6px #0000000a;outline:none;transition:all .25s ease}.search-input:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f126,0 4px 10px #0000000d}.search-input::placeholder{color:#94a3b8}.search-box:before{content:"🔍";position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.6}.date-filter{display:flex;gap:10px;margin-top:10px;align-items:center}.date-filter input{flex:1;height:40px;padding:0 12px;border-radius:8px;border:1px solid rgba(0,0,0,.08);font-size:13px;background:#fff}.clear-btn{height:40px;padding:0 14px;font-size:13px;border-radius:8px;border:1px solid #d1d5db;background:#f9fafb;color:#374151;cursor:pointer;white-space:nowrap;transition:all .2s ease}.clear-btn:hover{background:#f3f4f6;border-color:#9ca3af}.clear-btn:active{transform:scale(.97)}.date-filter input:focus{border-color:#6366f1;box-shadow:0 0 0 2px #6366f126}.right-panel{width:68%;padding:24px;height:100%;min-height:0;overflow-y:auto}.card{background:#fff;padding:14px 16px;margin-bottom:14px;border-radius:14px;border:1px solid rgba(0,0,0,.05);box-shadow:0 4px 12px #0000000d,0 2px 4px #0000000a;transition:all .25s ease;cursor:pointer}.card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 10px 25px #00000014,0 4px 10px #0000000f}.details-button{margin-top:10px;padding:8px 14px;border:none;border-radius:8px;background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;font-weight:500;font-size:13px;cursor:pointer;transition:all .25s ease}.details-button:hover{transform:translateY(-1px);box-shadow:0 6px 14px #4f46e54d}.details-view{background:#fff;padding:22px;border-radius:16px;box-shadow:0 6px 20px #0000000f,0 2px 6px #0000000a;animation:fadeIn .3s ease;display:flex;justify-content:space-between;flex-direction:column;gap:10px}.image-grid{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;padding-left:65px}.image-grid img{width:120px;height:90px;object-fit:cover;border-radius:10px;cursor:pointer;transition:all .3s ease}.image-grid img:hover{transform:scale(2.8);z-index:10;box-shadow:0 12px 25px #cfb20f40;border-width:2px solid red}.empty-state{color:#94a3b8;font-size:14px;text-align:center;margin-top:40px}.list-scroll::-webkit-scrollbar,.right-panel::-webkit-scrollbar{width:6px}.list-scroll::-webkit-scrollbar-thumb,.right-panel::-webkit-scrollbar-thumb{background:#00000026;border-radius:10px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.split-container{flex-direction:column;height:auto}.left-panel{width:100%;height:auto;max-height:50vh;border-right:none;border-bottom:1px solid rgba(0,0,0,.06)}.right-panel{width:100%;height:auto;padding:16px}.date-filter{flex-direction:row;gap:8px}.date-filter input{flex:1;min-width:120px}.clear-btn{padding:0 10px;font-size:12px}.tabs{flex-wrap:wrap;width:100%}.tabs button{padding:6px 12px;font-size:12px}.search-input{font-size:12px;padding:8px 12px 8px 32px}.image-grid{padding-left:0;gap:8px}.image-grid img{width:80px;height:60px}.image-grid img:hover{transform:scale(2)}.card{padding:10px 12px;margin-bottom:10px}.frozen{padding:8px}.list-scroll{padding:12px}}@media(max-width:480px){.left-panel{max-height:40vh}.right-panel{padding:12px}.date-filter{flex-direction:row;gap:6px}.date-filter input,.clear-btn{font-size:11px;padding:6px 8px;height:36px}.search-input{font-size:11px;padding:6px 10px 6px 28px;margin-top:8px}.search-box:before{font-size:12px;left:8px}.tabs button{padding:4px 8px;font-size:11px}.details-button{padding:6px 10px;font-size:12px}.image-grid img{width:60px;height:45px}}.viewer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000e6;display:flex;justify-content:center;align-items:center;z-index:9999}.viewer-content{position:relative;width:100vw;height:100vh;overflow:hidden;display:flex;justify-content:center;align-items:center}.preview-image{max-width:100vw;max-height:100vh;width:auto;height:auto;object-fit:contain;cursor:grab;display:block;margin:0 auto}.preview-image:active{cursor:grabbing}.close-btn{position:absolute;top:10px;right:20px;font-size:20px;background:transparent;border:none;color:#fff;cursor:pointer}.controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:10px}.controls button{padding:8px 12px;font-size:16px;cursor:pointer}@media(max-width:768px){.close-btn{top:5px;right:10px;font-size:18px}.controls{bottom:10px;gap:5px}.controls button{padding:6px 10px;font-size:14px}}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%;overflow:hidden}.main-container{height:100vh}