@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.leaflet-tooltip.office-label{background:rgba(59,130,246,.9);border:2px solid #2563eb;border-radius:8px;color:#fff;font-size:11px;font-weight:600;padding:4px 8px;box-shadow:0 2px 8px rgba(0,0,0,.3);white-space:nowrap}.leaflet-tooltip.distance-label{background:rgba(59,130,246,.95)!important;border:2px solid #2563eb!important;border-radius:6px!important;color:#fff!important;font-size:11px!important;font-weight:700!important;padding:4px 8px!important;box-shadow:0 2px 8px rgba(0,0,0,.4)!important;white-space:nowrap!important;pointer-events:none!important;z-index:1000!important;opacity:1!important;position:absolute!important;visibility:visible!important;display:block!important}.home-button-control{margin:10px!important;z-index:1000!important}.home-button-control button{transition:all .2s ease!important}.distance-marker{background:transparent!important;border:none!important}.distance-marker div{transform:translate(-50%,-50%);position:relative;left:50%;top:50%}body,html{padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color:#1e293b;overflow-x:hidden}body,html{margin:0;min-height:100vh;position:relative}body{width:100%;background:linear-gradient(135deg,#f8fafc,#f1f5f9 50%,#e2e8f0);background-attachment:fixed}body:before{background:transparent}body:after,body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:0}body:after{background-image:url("data:image/svg+xml,%3Csvg width='250' height='250' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='batik-parang' x='0' y='0' width='250' height='250' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0,0 L250,0 L250,250 L0,250 Z' fill='rgba(255,255,255,0.02)'/%3E%3Cpath d='M0,0 L250,250 M125,0 L125,250 M0,125 L250,125' stroke='rgba(255,255,255,0.06)' stroke-width='1.5'/%3E%3Cpath d='M50,50 Q125,25 200,50 T350,50' stroke='rgba(255,255,255,0.05)' stroke-width='2' fill='none'/%3E%3Cpath d='M50,200 Q125,225 200,200 T350,200' stroke='rgba(255,255,255,0.05)' stroke-width='2' fill='none'/%3E%3Ccircle cx='125' cy='125' r='35' fill='rgba(255,255,255,0.03)'/%3E%3Ccircle cx='125' cy='125' r='25' fill='rgba(255,255,255,0.04)'/%3E%3Ccircle cx='125' cy='125' r='15' fill='rgba(255,255,255,0.05)'/%3E%3Cpath d='M90,90 L160,90 L160,160 L90,160 Z' fill='rgba(255,255,255,0.02)'/%3E%3Cpath d='M100,100 L150,100 L150,150 L100,150 Z' fill='rgba(255,255,255,0.03)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23batik-parang)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='logo-geometric' x='0' y='0' width='400' height='400' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='200' cy='200' r='100' fill='rgba(255,255,255,0.02)'/%3E%3Ccircle cx='200' cy='200' r='75' fill='rgba(255,255,255,0.03)'/%3E%3Ccircle cx='200' cy='200' r='50' fill='rgba(255,255,255,0.04)'/%3E%3Cpath d='M200,100 L250,200 L200,300 L150,200 Z' fill='rgba(255,255,255,0.03)'/%3E%3Cpath d='M200,100 L230,150 L200,200 L170,150 Z' fill='rgba(255,255,255,0.04)'/%3E%3Cpath d='M200,200 L230,250 L200,300 L170,250 Z' fill='rgba(255,255,255,0.04)'/%3E%3Cpath d='M100,200 L150,230 L200,200 L150,170 Z' fill='rgba(255,255,255,0.04)'/%3E%3Cpath d='M300,200 L250,230 L200,200 L250,170 Z' fill='rgba(255,255,255,0.04)'/%3E%3Cpath d='M200,100 L200,300 M100,200 L300,200' stroke='rgba(255,255,255,0.05)' stroke-width='2'/%3E%3Cpath d='M150,150 L250,250 M250,150 L150,250' stroke='rgba(255,255,255,0.04)' stroke-width='1.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23logo-geometric)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg width='180' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='batik-detail' x='0' y='0' width='180' height='180' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0,0 L180,0 L180,180 L0,180 Z' fill='rgba(255,255,255,0.01)'/%3E%3Cpath d='M45,45 Q90,20 135,45 T225,45' stroke='rgba(255,255,255,0.04)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M45,135 Q90,160 135,135 T225,135' stroke='rgba(255,255,255,0.04)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M45,45 L135,135 M135,45 L45,135' stroke='rgba(255,255,255,0.03)' stroke-width='1'/%3E%3Ccircle cx='90' cy='90' r='20' fill='rgba(255,255,255,0.03)'/%3E%3Ccircle cx='90' cy='90' r='12' fill='rgba(255,255,255,0.04)'/%3E%3Ccircle cx='90' cy='90' r='6' fill='rgba(255,255,255,0.05)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23batik-detail)'/%3E%3C/svg%3E");background-size:500px 500px,800px 800px,360px 360px;background-position:0 0,150px 150px,75px 75px;opacity:.35;mix-blend-mode:overlay;animation:backgroundMove 30s ease-in-out infinite}@keyframes backgroundMove{0%,to{background-position:0 0,150px 150px,75px 75px}50%{background-position:50px 50px,200px 200px,125px 125px}}@keyframes gradientShift{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.app-shell{min-height:100vh;display:flex;width:100%}.app-shell,.app-shell.desktop-layout{flex-direction:row}.app-header{padding:12px 20px;display:flex;align-items:center;justify-content:space-between;background:#fff;color:#1e293b;box-shadow:0 2px 8px rgba(0,0,0,.1);position:fixed;top:0;left:0;right:0;z-index:1000;height:56px;border-bottom:1px solid rgba(0,0,0,.08)}.app-shell.desktop-layout .app-header{left:0}.app-header-title{font-size:14px;font-weight:600;color:#1e293b;letter-spacing:-.2px}@media (min-width:768px){.app-header-title{font-size:16px}}.app-content{flex:1 1;padding:40px 12px 100px;margin-top:56px;margin-left:0;overflow-x:hidden;background:transparent;position:relative;z-index:1;min-height:calc(100vh - 56px)}.app-content,.app-content section{width:100%;max-width:100%;box-sizing:border-box}.app-shell.desktop-layout .app-content{margin-left:0;padding:40px 16px 100px}@media (min-width:768px){.app-content{padding:40px 20px 100px}.app-shell.desktop-layout .app-content{padding:40px 24px 100px;max-width:1200px;margin-left:auto;margin-right:auto}}.card{background:hsla(0,0%,100%,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:12px;padding:14px;box-shadow:0 2px 8px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.1);margin-bottom:10px;border:1px solid hsla(0,0%,100%,.3);transition:all .2s ease;position:relative;overflow:hidden;z-index:1;color:#1e293b}@media (min-width:768px){.card{padding:16px;margin-bottom:16px}}.card:hover{box-shadow:0 4px 8px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.06)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.card-title{font-size:13px;font-weight:600;color:#1e293b;letter-spacing:-.1px}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:2px 8px;font-size:10px;font-weight:500}.badge-green{background:#d1fae5;color:#065f46}.badge-green,.badge-red{font-weight:600;border:none}.badge-red{background:#fee2e2;color:#991b1b}.badge-blue{background:#dbeafe;color:#1e40af}.badge-blue,.badge-orange{font-weight:600;border:none}.badge-orange{background:#fed7aa;color:#9a3412}.text-center{text-align:center}.btn{border:none;border-radius:12px;padding:8px 14px;font-size:12px;font-weight:600;cursor:pointer}.btn-primary{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;box-shadow:0 2px 8px rgba(220,38,38,.25);border:none;transition:all .2s ease;font-weight:600}.btn-primary:hover{background:linear-gradient(135deg,#b91c1c,#991b1b);box-shadow:0 4px 12px rgba(220,38,38,.35);transform:translateY(-1px)}.btn-secondary{background:linear-gradient(135deg,#e0f2fe,#dcfce7);color:#0f172a;border:2px solid rgba(6,182,212,.3)}.btn-full{width:100%}.form-group{display:flex;flex-direction:column;margin-bottom:10px}.form-label{font-size:11px;margin-bottom:4px;color:#475569;font-weight:500}.form-control,.form-select{border-radius:12px;border:1px solid hsla(0,0%,100%,.6);padding:8px 12px;font-size:12px;background:hsla(0,0%,100%,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#1e293b;transition:all .2s ease;width:100%;max-width:100%;box-sizing:border-box}input[type=date],input[type=time]{position:relative}input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;opacity:0;width:20px;height:20px;z-index:1}.form-control:focus,.form-select:focus{outline:none;border-color:#06b6d4;box-shadow:0 0 0 3px rgba(6,182,212,.2);background:hsla(0,0%,100%,.9)}.input-inline{display:flex;gap:8px}.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:12px;gap:12px}@media (min-width:640px){.kpi-grid{grid-template-columns:repeat(3,1fr);gap:16px}}@media (min-width:1024px){.kpi-grid{grid-template-columns:repeat(3,1fr);gap:16px}}.kpi-tile{background:hsla(0,0%,100%,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#1e293b;border-radius:16px;padding:16px 14px;text-align:center;border:1px solid hsla(0,0%,100%,.6);box-shadow:0 4px 16px rgba(0,0,0,.1),inset 0 1px 0 hsla(0,0%,100%,.8);transition:all .3s ease;position:relative;overflow:hidden;min-height:120px;display:flex;align-items:center;justify-content:center}.kpi-tile:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.15),0 4px 8px rgba(0,0,0,.1)}.kpi-tile button{background:transparent;border:none;width:100%;padding:0;cursor:pointer;text-align:left}.kpi-label{font-size:10px;color:#64748b;margin-bottom:4px;letter-spacing:.3px;text-transform:uppercase;font-weight:600}.kpi-value{font-size:16px;font-weight:700;line-height:1.2;margin-top:2px;color:#1e293b}.bottom-nav{position:fixed;bottom:0;left:0;right:0;width:100%;display:flex;align-items:center;justify-content:space-between;background:hsla(0,0%,100%,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid hsla(0,0%,100%,.6);box-shadow:0 -2px 10px rgba(0,0,0,.15),0 -4px 20px rgba(0,0,0,.1);padding:8px 4px;z-index:1000;height:64px;box-sizing:border-box;margin:0}.sidebar-nav{display:none}.bottom-nav button{background:transparent;border:none;font-size:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#64748b;padding:6px 4px;border-radius:8px;transition:all .2s ease;font-weight:500;cursor:pointer;flex:1 1;width:100%;position:relative;margin:0}.bottom-nav button:hover{background:hsla(0,0%,100%,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.bottom-nav button[data-active=true]{color:#dc2626;font-weight:600}.bottom-nav button[data-active=true]:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:32px;height:3px;background:#dc2626;border-radius:0 0 2px 2px}.bottom-nav button svg{width:22px;height:22px;flex-shrink:0;stroke-width:2}.bottom-nav button[data-active=true] svg{stroke-width:2.5;color:#dc2626}.bottom-nav button span{font-size:10px;line-height:1.2;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-top:2px}.status-pill{border-radius:999px;padding:4px 8px;font-size:11px;font-weight:500}.status-wfo{background:#e0f2fe;color:#1d4ed8}.status-wfh{background:#fef3c7;color:#92400e}.status-wfa{background:#ecfdf3;color:#15803d}.status-late{background:#fee2e2;color:#b91c1c}.table{width:100%;border-collapse:collapse;font-size:11px;background:hsla(0,0%,100%,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:16px;border:1px solid hsla(0,0%,100%,.8);overflow:hidden;color:#1e293b}.table td,.table th{padding:14px 12px;border-bottom:1px solid rgba(0,0,0,.1);color:#1e293b}.table th{text-align:left;font-weight:600;background:rgba(243,244,246,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#1e293b;text-transform:uppercase;font-size:10px;letter-spacing:.3px}.table tbody tr:hover{background:hsla(0,0%,100%,.9)}.table tbody tr:last-child td{border-bottom:none}@media (max-width:768px){.table{font-size:11px}.table td,.table th{padding:8px 6px}}body{background:#f5f7fa;color:#1a1a1a}.late-banner{margin-bottom:12px;padding:12px 14px;border-radius:8px;background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;font-size:13px;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.1)}.chip{border-radius:999px;border:1px solid #e5e7eb;padding:2px 8px;font-size:11px}.card-strip{display:flex;gap:8px;padding:4px 0 8px;margin:-4px 0 8px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}.card-strip::-webkit-scrollbar{display:none}.profile-card{padding-top:20px;padding-bottom:20px;background:hsla(0,0%,100%,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.6);box-shadow:0 4px 20px rgba(0,0,0,.1),inset 0 1px 0 hsla(0,0%,100%,.8);color:#1e293b}.profile-main{gap:12px;margin-bottom:10px}.profile-avatar,.profile-main{display:flex;align-items:center}.profile-avatar{width:48px;height:48px;border-radius:999px;background:#2563eb;justify-content:center;color:#fff;font-weight:600;font-size:20px;box-shadow:0 2px 4px rgba(0,0,0,.1);border:2px solid #fff}.profile-name{font-size:14px;font-weight:600;color:#1a1a1a;letter-spacing:-.2px}.profile-email{font-size:11px;color:#64748b;font-weight:500;margin-top:2px}.profile-badge{margin-left:auto;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;background:#10b981;color:#fff;border:none;box-shadow:0 1px 2px rgba(0,0,0,.1);text-transform:uppercase;letter-spacing:.3px}.profile-meta{display:flex;justify-content:space-between;gap:8px;margin-top:4px}.profile-meta>div{flex:1 1}.meta-label{font-size:11px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.meta-value{font-size:12px;font-weight:600;margin-top:2px;color:#1a1a1a}.status-ontime{color:#22c55e}.status-overtime{color:#f59e0b}.status-late{color:#ef4444}.skeleton{background:linear-gradient(90deg,hsla(0,0%,100%,.05) 25%,hsla(0,0%,100%,.1) 50%,hsla(0,0%,100%,.05) 75%);background-size:200% 100%;animation:loading 1.5s infinite}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.empty-state{text-align:center;padding:32px 16px;opacity:.6}.empty-state-icon{font-size:48px;margin-bottom:12px;opacity:.5}*{transition:background-color .2s ease,color .2s ease,border-color .2s ease}button.kpi-tile{cursor:pointer}button.kpi-tile:active{transform:scale(.98)}@media (min-width:1200px){.app-content{max-width:1400px;margin-left:240px;margin-right:auto}.card{margin-bottom:24px}.kpi-tile{padding:16px 14px}.kpi-value{font-size:18px}.profile-card{padding:24px 32px}.profile-avatar{width:56px;height:56px;font-size:26px}.profile-name{font-size:20px}}.quick-actions-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:12px;gap:12px}@media (min-width:640px){.quick-actions-grid{grid-template-columns:repeat(4,1fr);gap:12px}}@media (min-width:768px){.card-grid-2{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:20px;gap:20px}.card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:20px;gap:20px}}@media (min-width:1200px){.card-grid-2,.card-grid-3{gap:24px}}