:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background-color:#f0f2f5;color:#333;overflow-x:hidden}a{font-weight:500;color:#1890ff;text-decoration:none}a:hover{color:#40a9ff}.app-layout{min-height:100vh;overflow:hidden}.header-container{position:fixed;width:100%;z-index:1000;padding:0;background:#fff;box-shadow:0 2px 8px #0000001a}.header-content{display:flex;justify-content:space-between;align-items:center;padding:0 24px;height:64px}.header-mobile-menu{display:none;background:#fff;padding:12px 0;border-top:1px solid #f0f0f0}.mobile-menu-trigger{display:none!important}.header-welcome{margin-right:16px}@media (max-width: 768px){.header-mobile-menu{display:none}.header-mobile-menu.active{display:block}.mobile-menu-trigger{display:inline-flex!important}.app-sider{display:none!important}.header-welcome{display:none}}.app-sider{background:#2f3349!important;position:fixed;left:0;top:64px;bottom:0;z-index:1000;width:250px;height:calc(100vh - 64px);overflow-y:auto;border-right:none;box-shadow:2px 0 6px #0000001a}.sidebar-brand{display:flex;align-items:center;padding:20px 16px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1)}.brand-icon{width:32px;height:32px;background:#4ade80;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;margin-right:12px}.brand-text{color:#fff;font-size:16px;font-weight:600}.desktop-sider{display:block}.app-menu{height:100%;border-right:0;background:#2f3349!important;padding-top:10px}.app-menu .ant-menu-item{background:transparent!important;color:#a8b2c8!important;margin:4px 16px!important;border-radius:8px!important;padding:12px 16px!important;height:48px!important;line-height:24px!important;font-size:14px!important;font-weight:500!important;display:flex!important;align-items:center!important;position:relative!important;transition:all .3s ease!important;width:auto!important}.app-menu .ant-menu-item:hover{background:#ffffff14!important;color:#fff!important}.app-menu .ant-menu-item-selected{background:#4ade80!important;color:#fff!important;border-left:4px solid #22c55e!important;border-radius:0 8px 8px 0!important;margin-left:0!important;padding-left:20px!important}.app-menu .ant-menu-item-selected:after{display:none!important}.app-menu .ant-menu-item-icon{font-size:18px!important;margin-right:12px!important;color:inherit!important}.app-menu .ant-menu-item:after{content:"›";position:absolute;right:16px;font-size:16px;color:#6b7280;transition:all .3s ease}.app-menu .ant-menu-item:hover:after{color:#fff;transform:translate(2px)}.app-menu .ant-menu-item-selected:after{color:#fff}.app-content-layout{margin-left:250px;padding:64px 0 0;min-height:calc(100vh - 64px);background:#f0f2f5;overflow-y:auto;transition:padding-top .3s ease-in-out}.app-content-layout.header-menu-open{padding-top:calc(64px + var(--header-menu-height, 0px))}.layout-content{padding:24px;background:#f0f2f5;min-height:calc(100vh - 64px);width:100%;max-width:100%}.modern-login-container{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);position:relative;overflow:hidden}.login-background-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 80%,rgba(120,119,198,.3) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,255,255,.1) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(120,119,198,.2) 0%,transparent 50%);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.modern-login-content{display:flex;min-height:100vh;position:relative;z-index:2}.login-branding-panel{flex:1;display:flex;flex-direction:column;justify-content:center;padding:80px 60px;background:#ffffff1a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid rgba(255,255,255,.2)}.brand-section{text-align:center;margin-bottom:60px}.brand-logo{width:80px;height:80px;background:linear-gradient(135deg,#4ade80,#22c55e);border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;box-shadow:0 10px 30px #4ade804d}.brand-icon{font-size:36px!important;color:#fff!important}.brand-title{color:#fff!important;font-size:36px!important;font-weight:700!important;margin-bottom:12px!important;text-shadow:0 2px 10px rgba(0,0,0,.2)}.brand-subtitle{color:#fffc!important;font-size:18px!important;font-weight:400!important;line-height:1.6}.feature-highlights{display:flex;flex-direction:column;gap:24px}.feature-item{display:flex;align-items:center;gap:16px;padding:20px;background:#ffffff1a;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.feature-icon{font-size:24px!important;color:#4ade80!important}.feature-title{color:#fff!important;font-size:16px!important;font-weight:600!important;display:block!important;margin-bottom:4px!important}.feature-desc{color:#ffffffb3!important;font-size:14px!important;display:block!important}.login-form-panel{flex:1;display:flex;align-items:center;justify-content:center;padding:40px;background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.login-form-container{width:100%;max-width:420px}.login-header{text-align:center;margin-bottom:40px}.login-title{color:#1a202c!important;font-size:32px!important;font-weight:700!important;margin-bottom:8px!important}.login-subtitle{color:#718096!important;font-size:16px!important;font-weight:400!important}.modern-login-form{margin-bottom:32px}.form-item-modern .ant-form-item-label>label{color:#2d3748!important;font-weight:600!important;font-size:14px!important}.modern-input{height:52px!important;border-radius:12px!important;border:2px solid #e2e8f0!important;background:#f8fafc!important;transition:all .3s ease!important;padding:0 16px 0 48px!important}.modern-input:hover{border-color:#cbd5e0!important;background:#fff!important}.modern-input:focus,.modern-input.ant-input-focused{border-color:#4ade80!important;background:#fff!important;box-shadow:0 0 0 3px #4ade801a!important}.input-icon{color:#718096!important;font-size:16px!important;left:16px!important;position:absolute!important}.modern-login-button{width:100%!important;height:52px!important;border-radius:12px!important;background:linear-gradient(135deg,#4ade80,#22c55e)!important;border:none!important;font-size:16px!important;font-weight:600!important;box-shadow:0 4px 14px #4ade8066!important;transition:all .3s ease!important}.modern-login-button:hover{transform:translateY(-2px)!important;box-shadow:0 6px 20px #4ade8080!important;background:linear-gradient(135deg,#22c55e,#16a34a)!important}.login-button-container{margin-top:32px!important;margin-bottom:0!important}.login-divider{border-color:#e2e8f0!important;margin:32px 0 24px!important}.login-footer{text-align:center}.login-help-text{color:#718096!important;font-size:14px!important}.login-support-text{color:#a0aec0!important;font-size:13px!important}.mobile-login-container{display:none;padding:40px 24px;min-height:100vh;align-items:center;justify-content:center;flex-direction:column;position:relative;z-index:2}.mobile-brand-section{text-align:center;margin-bottom:40px}.mobile-brand-logo{width:64px;height:64px;background:linear-gradient(135deg,#4ade80,#22c55e);border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:28px;color:#fff;box-shadow:0 8px 25px #4ade804d}.mobile-brand-title{color:#fff!important;font-size:24px!important;font-weight:700!important;margin-bottom:8px!important;text-shadow:0 2px 8px rgba(0,0,0,.2)}.mobile-brand-subtitle{color:#fffc!important;font-size:16px!important}.mobile-login-form{width:100%;max-width:320px;background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;padding:32px 24px;border:1px solid rgba(255,255,255,.3);box-shadow:0 20px 40px #0000001a}.mobile-input{height:48px!important;border-radius:12px!important;border:2px solid #e2e8f0!important;background:#f8fafc!important;transition:all .3s ease!important}.mobile-input:focus,.mobile-input.ant-input-focused{border-color:#4ade80!important;background:#fff!important;box-shadow:0 0 0 3px #4ade801a!important}.mobile-login-button{height:48px!important;border-radius:12px!important;background:linear-gradient(135deg,#4ade80,#22c55e)!important;border:none!important;font-size:16px!important;font-weight:600!important;box-shadow:0 4px 14px #4ade8066!important;margin-top:16px!important}@media (max-width: 1200px){.login-branding-panel{padding:60px 40px}.brand-title{font-size:30px!important}}@media (max-width: 992px){.modern-login-content{display:none}.mobile-login-container{display:flex}}@media (max-width: 768px){.mobile-login-container{padding:24px 16px}.mobile-login-form{padding:24px 20px;max-width:100%}.mobile-brand-title{font-size:20px!important}.mobile-brand-subtitle{font-size:14px!important}}@media (max-width: 480px){.mobile-brand-logo{width:56px;height:56px;font-size:24px}.mobile-login-form{padding:20px 16px;border-radius:16px}}.attendance-container{padding:0;max-width:100%;margin:0;width:100%}.icon-success{color:#52c41a}.icon-primary{color:#1890ff}.icon-danger{color:#ff4d4f}.text-small{font-size:12px}.text-margin-left{margin-left:8px}.full-width{width:100%}.location-loading{text-align:center;padding:20px}.location-text{display:block;margin-top:8px}.time-text{margin-left:8px}.header-container{display:flex;flex-direction:column;align-items:stretch;background:#2f3349;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:1010;height:64px;transition:height .3s ease-in-out,transform .3s ease-in-out,opacity .3s ease-in-out;box-shadow:0 2px 8px #00000026;overflow:hidden}.header-container.header-expanded{height:auto;min-height:64px}.header-content{display:flex;align-items:center;justify-content:space-between;width:100%;height:64px;flex-shrink:0}.header-mobile-menu{display:none;background:#2f3349;border-top:1px solid rgba(255,255,255,.1);padding:0}.header-menu-items{background:#2f3349!important;border:none!important}.header-menu-items .ant-menu-item{color:#a8b2c8!important;margin:4px 16px!important;padding:12px 16px!important;height:48px!important;line-height:24px!important;border-radius:8px!important;font-weight:500!important}.header-menu-items .ant-menu-item:hover{background:#ffffff14!important;color:#fff!important}.header-menu-items .ant-menu-item-selected{background:#4ade80!important;color:#fff!important}.header-menu-items .ant-menu-item-icon{color:inherit!important;font-size:18px!important}.header-left{display:flex;align-items:center;gap:16px;flex:1}.header-brand{display:flex;align-items:center}.header-title{color:#fff!important;margin:0!important;font-size:20px!important;font-weight:600!important;line-height:1!important}.header-right{display:flex;align-items:center}.header-welcome{color:#ffffffd9;font-size:14px;white-space:nowrap}.user-menu-button{border:none!important;background:transparent!important;padding:4px 8px!important;height:auto!important;display:flex!important;align-items:center!important}.user-menu-button:hover{background:#ffffff1a!important;border-radius:6px}.user-avatar{background-color:#1890ff!important;cursor:pointer;padding-left:5px}.mobile-menu-trigger{position:absolute!important;width:0!important;height:0!important;padding:0!important;margin:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;opacity:0!important;pointer-events:none!important;display:none!important;visibility:hidden!important;transform:scale(0)!important;flex:0 0 0px!important;min-width:0!important;max-width:0!important}@media (max-width: 990px){.mobile-menu-trigger{position:relative!important;width:40px!important;height:40px!important;padding:4px!important;margin:0!important;clip:auto!important;white-space:normal!important;opacity:1!important;pointer-events:auto!important;display:inline-flex!important;color:#fff!important;background:none!important;font-size:18px!important;border-radius:4px!important;overflow:visible!important;visibility:visible!important;transform:none!important;flex:0 0 40px!important;min-width:40px!important;max-width:40px!important}.mobile-menu-trigger:hover,.mobile-menu-trigger:focus{background:#ffffff1a!important}}.desktop-menu{background:transparent!important;border:none!important;margin-left:24px}.desktop-menu .ant-menu-item{color:#ffffffd9!important;border-bottom:2px solid transparent!important}.desktop-menu .ant-menu-item:hover{color:#fff!important;background:#ffffff1a!important}.desktop-menu .ant-menu-item-selected{color:#fff!important;background:#ffffff1a!important;border-bottom:2px solid #1890ff!important}@media (max-width: 990px){.mobile-menu-trigger{display:inline-flex!important;visibility:visible!important}.desktop-sider{display:none!important}.app-content-layout{margin-left:0!important}.header-mobile-menu.active{display:block!important}}@media (min-width: 991px){.mobile-menu-trigger{display:none!important;visibility:hidden!important}.desktop-sider{display:block!important}.app-content-layout{margin-left:250px!important}.header-mobile-menu{display:none!important}}.header-container.header-hidden{transform:translateY(-100%);opacity:0}.header-container.header-visible{transform:translateY(0);opacity:1}@media (max-width: 990px){.header-container{padding:0 16px;gap:0;height:64px;flex-direction:column;min-width:0}.header-container.header-expanded{height:auto}.header-content{width:100%;display:flex;align-items:center;justify-content:space-between;min-width:0;padding:0 8px}.header-mobile-menu{width:100%}.header-mobile-menu.active{display:block!important}.header-left{flex:1;justify-content:flex-start;gap:12px;min-width:0}.header-brand{flex:1;min-width:0}.header-title{font-size:18px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-right{flex-shrink:0}.header-welcome{display:none}.user-menu-button{padding:4px!important;min-width:auto!important}.app-content-layout{padding-top:64px!important;margin-left:0!important}.desktop-sider{display:none!important}}@media (max-width: 480px){.header-container{padding:0 12px}.header-content{padding:0 4px}.header-title{font-size:16px!important}.header-left{gap:8px}}@media (max-width: 990px){.app-sider{display:none!important}.app-content-layout{margin-left:0!important}}@media (min-width: 991px){.app-sider{width:250px!important;display:block!important}.app-content-layout{margin-left:250px!important}}.header-title{color:#fff;font-size:18px;font-weight:700}@media (max-width: 480px){.header-title{font-size:16px}}.header-user{display:flex;align-items:center;gap:16px;flex-wrap:wrap}@media (max-width: 480px){.header-user{gap:12px}}.header-welcome{color:#fff}@media (max-width: 480px){.header-welcome{font-size:14px}}.mobile-menu-drawer .ant-drawer-content{background:#fff}.mobile-menu-drawer .ant-drawer-header{background:#001529;color:#fff;border-bottom:1px solid #f0f0f0;padding:16px 24px}.mobile-menu-drawer .ant-drawer-title{color:#fff!important;font-weight:600!important;font-size:16px!important}.mobile-menu-drawer .ant-drawer-close{color:#fff!important;font-size:16px!important}.mobile-menu-drawer .ant-drawer-close:hover{background:#ffffff1a!important;border-radius:4px}.drawer-header{display:flex;align-items:center;font-weight:600;font-size:16px}.mobile-menu{border-right:none!important;background:#fff!important}.mobile-menu .ant-menu-item{margin:0!important;border-radius:0!important;padding:16px 24px!important;height:auto!important;line-height:1.5!important;font-size:14px!important}.mobile-menu .ant-menu-item-selected{background-color:#e6f7ff!important;color:#1890ff!important;border-right:3px solid #1890ff!important}.mobile-menu .ant-menu-item:hover{background-color:#f5f5f5!important}.mobile-menu .ant-menu-item-icon{font-size:16px!important}@media (max-width: 768px){.app-sider{display:none!important}}@media (max-width: 991px){.ant-layout-sider-collapsed{width:0!important}}@media (min-width: 992px){.ant-layout-sider{width:250px!important}}.ant-card{margin-bottom:24px;width:100%}@media (max-width: 768px){.ant-card{margin:0 0 16px}}.ant-table-wrapper{overflow-x:auto;margin-top:0;background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a}.ant-space{flex-wrap:wrap}.user-management-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;margin-top:0;flex-wrap:wrap;gap:16px}@media (max-width: 768px){.user-management-header{flex-direction:column;align-items:flex-start}.user-management-header .ant-btn{width:100%}}.ant-form{max-width:100%}.ant-modal{margin:20px;padding:10px}.ant-modal-content{border-radius:12px;overflow:hidden;box-shadow:0 12px 48px #00000026;border:none}.ant-modal-mask{z-index:1020!important}.ant-modal-wrap{z-index:1021!important}@media (max-width: 768px){.ant-modal{margin:5px;max-width:calc(100vw - 10px);width:calc(100vw - 10px)!important}.ant-modal-content{border-radius:12px;margin:0;box-shadow:0 8px 32px #0003;padding:0!important}.modern-modal .ant-modal-body{padding:16px}.modern-modal .ant-modal-header{padding:16px 20px}.details-modal .ant-modal-body{padding:12px}.details-modal .ant-modal-title{font-size:16px;padding-right:50px}.details-modal .ant-modal-close{top:12px;right:12px;width:28px;height:28px}.details-modal .ant-modal-close .ant-modal-close-x{font-size:14px}.modern-modal .ant-modal-footer{padding:12px 16px;text-align:center}.modal-footer-right{text-align:center}}.attendance-card{background:#fff;border-radius:8px;padding:24px;box-shadow:0 2px 8px #0000001a;margin:0 0 24px;width:100%}@media (max-width: 768px){.attendance-card{padding:16px;margin:0 0 16px}}.attendance-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}@media (max-width: 480px){.attendance-actions{flex-direction:column}.attendance-actions .ant-btn{width:100%}}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-bottom:24px}@media (max-width: 768px){.dashboard-grid{grid-template-columns:1fr;gap:16px}}.stats-card{text-align:center;padding:24px;background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a}@media (max-width: 480px){.stats-card{padding:16px}}.loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:50vh;gap:16px}.text-center{text-align:center}.w-full{width:100%}.flex-wrap{flex-wrap:wrap}.gap-16{gap:16px}@media print{.no-print,.header-container,.ant-layout-sider{display:none!important}.layout-content{background:#fff!important}}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}@media (max-width: 768px){.form-grid{grid-template-columns:1fr;gap:12px}}.form-full-width{margin-top:16px}.modern-modal{z-index:1020}.modern-modal .ant-modal-mask{z-index:1020;-webkit-backdrop-filter:none;backdrop-filter:none}.modern-modal .ant-modal-wrap{z-index:1021}.modern-modal .ant-modal-header{background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:none;padding:24px 32px;border-radius:12px 12px 0 0;position:relative}.modern-modal .ant-modal-title{color:#fff;font-size:20px;font-weight:600;margin:0;padding-right:40px}.modern-modal .ant-modal-close{position:absolute;top:16px;right:16px;color:#fff;font-size:16px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ffffff26;border:1px solid rgba(255,255,255,.25);transition:all .3s ease;z-index:10}.modern-modal .ant-modal-close:hover{color:#fff;background:#ffffff40;border-color:#fff6;transform:scale(1.05)}.modern-modal .ant-modal-close .ant-modal-close-x{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:16px}.modern-modal .ant-modal-body{padding:32px;background:#f5f5f5}.modern-modal .ant-modal-content{border-radius:12px;overflow:hidden;box-shadow:0 12px 48px #00000026;border:none;padding:0!important}.modern-modal .ant-modal-footer{background:#fff;border-top:1px solid #f0f0f0;padding:16px 24px;text-align:center;border-radius:0 0 12px 12px}.modern-form .ant-form-item-label>label{font-weight:500;color:#2c3e50}.modern-form .ant-input,.modern-form .ant-input-password,.modern-form .ant-select-selector,.modern-form .ant-input-textarea{border-radius:8px;border:1px solid #e1e8ed;padding:10px 12px;font-size:14px;transition:all .3s ease}.modern-form .ant-input:focus,.modern-form .ant-input-password:focus,.modern-form .ant-select-focused .ant-select-selector,.modern-form .ant-input-textarea:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.modern-form .ant-input:hover,.modern-form .ant-input-password:hover,.modern-form .ant-select:hover .ant-select-selector,.modern-form .ant-input-textarea:hover{border-color:#667eea}.modern-form .ant-form-item{margin-bottom:20px}.modern-form .ant-form-item-required:before{display:none}.modern-form .ant-form-item-required:after{content:"*";color:#ef4444;margin-left:4px}.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid #e1e8ed}.attendance-modal .modal-actions{margin-top:0;padding-top:0;border-top:none}.settings-container{padding:24px}.settings-header{margin-bottom:24px}.settings-table-header{margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}.settings-tabs .ant-tabs-content-holder{padding-top:16px}@media (max-width: 480px){.modal-actions{flex-direction:column}.modal-actions .ant-btn{width:100%}}.ant-btn{border-radius:8px!important;height:40px!important;padding:0 24px!important;font-weight:500!important;font-size:14px!important;transition:all .3s ease!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;box-shadow:none!important}.ant-btn-primary{background:linear-gradient(135deg,#667eea,#764ba2)!important;border:none!important;color:#fff!important;box-shadow:0 4px 12px #667eea4d!important}.ant-btn-primary:hover{transform:translateY(-1px)!important;box-shadow:0 6px 16px #667eea66!important;background:linear-gradient(135deg,#5a6fd8,#6b4190)!important}.ant-btn-primary:active{transform:translateY(0)!important;box-shadow:0 2px 8px #667eea4d!important}.ant-btn-default{background:#fff!important;color:#64748b!important;border:1px solid #e1e8ed!important}.ant-btn-default:hover{border-color:#667eea!important;color:#667eea!important;background:#f8fafc!important}.ant-btn-default:active{background:#f1f5f9!important}.ant-btn-link{color:#667eea!important;border:none!important;padding:0 12px!important;height:32px!important;background:transparent!important}.ant-btn-link:hover{color:#5a6fd8!important;background:#667eea14!important}.ant-btn-dangerous,.ant-btn-link.ant-btn-dangerous{color:#ef4444!important}.ant-btn-dangerous:hover,.ant-btn-link.ant-btn-dangerous:hover{color:#dc2626!important;border-color:#dc2626!important;background:#ef444414!important}.ant-btn .anticon{margin-right:6px!important}.ant-btn.ant-btn-icon-only{width:40px!important;padding:0!important}.ant-btn-sm{height:32px!important;padding:0 16px!important;font-size:13px!important}.ant-btn-lg{height:48px!important;padding:0 32px!important;font-size:16px!important}.ant-btn-loading{opacity:.8!important;pointer-events:none!important}.ant-btn[disabled]{opacity:.5!important;cursor:not-allowed!important;transform:none!important;box-shadow:none!important}.ant-btn-group .ant-btn{border-radius:0!important}.ant-btn-group .ant-btn:first-child{border-radius:8px 0 0 8px!important}.ant-btn-group .ant-btn:last-child{border-radius:0 8px 8px 0!important}.ant-btn-group .ant-btn:only-child{border-radius:8px!important}.attendance-container{padding:24px;max-width:1200px;margin:0 auto}.attendance-header{margin-bottom:32px;text-align:center}.attendance-welcome{color:#8c8c8c;font-size:16px;margin-top:8px}.attendance-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:32px}@media (max-width: 768px){.attendance-grid{grid-template-columns:1fr}}.status-card{border-radius:12px;box-shadow:0 2px 8px #00000014;border:1px solid #f0f0f0}.check-in-card{background:linear-gradient(135deg,#e6f7ff,#f6ffed);border-color:#52c41a}.check-out-card{background:linear-gradient(135deg,#fff2e8,#fff7e6);border-color:#fa8c16}.status-card-title{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:600;margin-bottom:16px}.status-info{margin-bottom:20px}.status-time{font-size:24px;font-weight:700;color:#262626;margin-bottom:4px}.status-date{color:#8c8c8c;font-size:14px}.status-location{color:#595959;font-size:12px;margin-top:8px;display:flex;align-items:flex-start;gap:4px}.status-actions{display:flex;justify-content:center}.check-in-btn{background:linear-gradient(135deg,#52c41a,#389e0d);border:none;height:48px;font-size:16px;font-weight:600;border-radius:8px;box-shadow:0 2px 4px #52c41a33}.check-in-btn:hover{background:linear-gradient(135deg,#389e0d,#237804);box-shadow:0 4px 8px #52c41a4d}.check-out-btn{background:linear-gradient(135deg,#fa8c16,#d46b08);border:none;height:48px;font-size:16px;font-weight:600;border-radius:8px;box-shadow:0 2px 4px #fa8c1633}.check-out-btn:hover{background:linear-gradient(135deg,#d46b08,#ad4e00);box-shadow:0 4px 8px #fa8c164d}.summary-card{border-radius:12px;box-shadow:0 2px 8px #00000014}.summary-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px}.summary-stat{text-align:center;padding:16px;background:#fafafa;border-radius:8px}.summary-stat-value{font-size:24px;font-weight:700;color:#1890ff;margin-bottom:4px}.summary-stat-label{color:#8c8c8c;font-size:12px}.attendance-modal .ant-modal-content{border-radius:12px}.attendance-modal .ant-modal-header{border-radius:12px 12px 0 0}.attendance-modal .ant-modal-body{padding:20px;display:flex;flex-direction:column}.attendance-modal .ant-modal-content{max-width:min(90vw,600px);width:100%;margin:auto}.modal-step{padding:20px 0;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.modal-step-title{font-size:20px;font-weight:600;margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;line-height:1.3}.modal-step-description{color:#8c8c8c;margin-bottom:24px;font-size:15px;max-width:80%;line-height:1.5}.location-status{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px;background:#f6ffed;border:1px solid #b7eb8f;border-radius:8px;margin-bottom:18px;font-size:14px;max-width:90%;text-align:center;flex-wrap:wrap}.location-status.loading{background:#e6f7ff;border-color:#91d5ff}.location-status.error{background:#fff2f0;border-color:#ffccc7}.selfie-container{position:relative;margin-bottom:20px;display:flex;flex-direction:column;align-items:center}.selfie-preview{width:200px;height:200px;margin:0 auto;border-radius:50%;overflow:hidden;border:3px solid #1890ff;display:flex;align-items:center;justify-content:center;background:#fafafa;position:relative}.selfie-preview img{width:100%;height:100%;object-fit:cover}.selfie-capture-btn{position:absolute;bottom:-10px;right:-30px;width:48px;height:48px;border-radius:50%;background:#1890ff;border:3px solid white;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #0003;font-size:18px;cursor:pointer;transition:all .3s ease}.selfie-capture-btn:hover{transform:scale(1.1);background:#40a9ff}.modal-actions{display:flex;gap:14px;justify-content:center;margin-top:26px;padding-top:20px;border-top:1px solid #f0f0f0;flex-wrap:wrap}.modal-actions .ant-btn{height:42px!important;padding:0 24px!important;font-size:15px!important;font-weight:500!important;min-width:110px;flex:0 1 auto}.completed-status{text-align:center;padding:26px;background:linear-gradient(135deg,#f6ffed,#f0f9ff);border-radius:12px;border:1px solid #52c41a;margin:0 auto;max-width:90%}.auto-location-info{margin-top:8px;font-size:12px;color:#666}.retry-location-btn{margin-top:12px!important}.completed-icon{font-size:clamp(36px,8vw,48px);color:#52c41a;margin-bottom:clamp(12px,3vw,16px)}.completed-title{font-size:clamp(20px,4vw,24px);font-weight:600;color:#389e0d;margin-bottom:clamp(6px,2vw,8px);line-height:1.3}.completed-message{color:#8c8c8c;font-size:clamp(14px,3vw,16px);line-height:1.5}.modal-location-details{font-size:clamp(11px,2.5vw,12px);color:#8c8c8c;margin-top:clamp(3px,1vw,4px);line-height:1.4;max-width:90%}.location-details-margin{margin-bottom:12px}.modal-video{width:100%;height:100%;object-fit:cover;border-radius:8px}.modal-canvas-hidden{display:none}.modal-confirmation-details{font-size:clamp(11px,2.5vw,12px);color:#8c8c8c;line-height:1.4;margin-top:clamp(4px,1vw,6px)}.modal-selfie-center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,3vw,16px)}.modal-selfie-preview{width:clamp(80px,15vw,100px);height:clamp(80px,15vw,100px);border-radius:50%;object-fit:cover;border:2px solid #1890ff;flex-shrink:0}.modal-step-icon{margin-right:clamp(6px,2vw,8px);font-size:clamp(18px,3.5vw,20px);flex-shrink:0}.status-success-icon{color:#52c41a;margin-right:clamp(6px,2vw,8px);flex-shrink:0}.confirmation-space{width:100%;max-width:90%;margin:0 auto}.modal-steps{margin-bottom:24px}.modal-steps .ant-steps{display:flex!important}.modal-steps .ant-steps-item{flex:1!important;text-align:center;max-width:none!important}.modal-steps .ant-steps-item-tail{display:none}.description-textarea-container{text-align:left;margin-bottom:clamp(20px,4vw,24px);width:100%;max-width:90%}.description-textarea-container .ant-input{border-radius:8px;font-size:clamp(14px,3vw,16px);padding:clamp(8px,2vw,12px);line-height:1.5}.description-inline-container{width:100%;max-width:90%}.description-inline-title{margin-bottom:clamp(6px,2vw,8px);font-weight:500;font-size:clamp(14px,3vw,16px);color:#333}.page-container{padding:24px}.page-header{margin-bottom:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}@media (max-width: 768px){.page-header{flex-direction:column;align-items:flex-start}.page-header .ant-btn{width:100%}}.time-management-container{padding:24px}.time-management-header{margin-bottom:24px}.employee-name{font-weight:500}.employee-details{font-size:12px}.employee-email{display:block}.location-details,.week-period{font-size:12px}.week-badge-container{padding:2px 0}.description-textarea-container{text-align:left;margin-bottom:24px}.description-textarea-container .ant-input{border-radius:8px}.description-inline-container{width:100%}.description-inline-title{margin-bottom:8px;font-weight:500}.time-check-item{display:flex;align-items:center;gap:8px}.view-details-btn{padding:2px 4px;min-width:auto}.details-modal-section{margin-bottom:24px;text-align:center}.details-modal-item{margin-bottom:12px;text-align:center}.comment-box-checkin{margin-top:4px;padding:8px;background-color:#f6ffed;border-radius:6px;border:1px solid #b7eb8f}.comment-box-checkout{margin-top:4px;padding:8px;background-color:#fff2e8;border-radius:6px;border:1px solid #ffb37d}.photo-container{margin-top:8px;text-align:center}.photo-preview{max-width:200px;border-radius:8px}.location-info{margin-top:4px;text-align:center}.work-hours-summary{text-align:center;padding:16px;background-color:#f0f9ff;border-radius:8px}.work-hours-text{font-size:16px}.section-title-checkin{margin-bottom:12px;color:#52c41a;text-align:center}.section-title-checkout{margin-bottom:12px;color:#ff7a45;text-align:center}.icon-spacing{margin-right:8px}.modal-footer-right{text-align:right}.modal-footer-right .ant-btn{min-width:80px;height:36px;border-radius:6px;font-weight:500}.details-modal{max-width:900px}.details-modal .ant-modal-body{padding:24px;text-align:center}.details-modal .ant-row{justify-content:center}@media (max-width: 576px){.time-check-item{flex-direction:column;align-items:flex-start;gap:4px}.view-details-btn{align-self:flex-end;margin-top:4px}.details-modal{max-width:95vw}.details-modal .ant-modal-body{padding:16px;text-align:center}.photo-preview{max-width:100%;width:150px}.details-modal-section{margin-bottom:16px;text-align:center}.details-modal-item{margin-bottom:8px;text-align:center}.section-title-checkin,.section-title-checkout{font-size:16px}.comment-box-checkin,.comment-box-checkout{padding:6px;font-size:14px}}.user-modal{max-width:800px}.selfie-preview-compact{text-align:center;margin:24px 0}.selfie-thumbnail{width:150px;height:150px;border-radius:50%;object-fit:cover;border:3px solid #52c41a;box-shadow:0 2px 8px #0000001a}.description-section{margin-top:20px}.description-label{display:block;margin-bottom:8px;font-weight:500;color:#595959}.description-input{border-radius:6px}.confirmation-space{width:100%;padding-top:8px}.modal-steps .ant-steps-item-finish .ant-steps-item-icon{border-color:#d9d9d9;background-color:transparent}.modal-steps .ant-steps-item-finish .ant-steps-item-icon .ant-steps-icon,.modal-steps .ant-steps-item-finish .ant-steps-item-icon .anticon{color:#52c41a!important}.modal-steps .ant-steps-item-process .ant-steps-item-icon,.modal-steps .ant-steps-item-process .ant-steps-item-icon .ant-steps-icon,.modal-steps .ant-steps-item-process .ant-steps-item-icon .anticon{color:#1890ff!important}.modal-steps .ant-steps-item-wait .ant-steps-item-icon{border-color:#d9d9d9;background-color:transparent}.modal-steps .ant-steps-item-wait .ant-steps-item-icon .ant-steps-icon,.modal-steps .ant-steps-item-wait .ant-steps-item-icon .anticon{color:#d9d9d9!important}@media (max-width: 768px){.selfie-thumbnail{width:110px;height:110px}.modal-steps{margin-bottom:16px}}.dashboard-container{padding:24px;max-width:1200px;margin:0 auto}.page-container .ant-card>.ant-card-body{padding:24px}.dashboard-profile-card{box-shadow:0 2px 8px #00000014;border-radius:12px;border:1px solid #f0f0f0}.dashboard-profile-card .ant-card-head{background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:none;border-radius:12px 12px 0 0}.dashboard-profile-card .ant-card-head-title{color:#fff;font-weight:600}.dashboard-profile-card .ant-card-head .anticon{color:#fff}.dashboard-actions-card{box-shadow:0 2px 8px #00000014;border-radius:12px;border:1px solid #f0f0f0}.dashboard-actions-card .ant-card-body{display:flex;justify-content:center;align-items:center;padding:24px}.dashboard-actions-card .ant-space{width:100%;max-width:400px;margin:0 auto;display:flex!important;flex-direction:column!important;align-items:center!important}.dashboard-actions-card .ant-space-item{width:100%!important;display:flex!important;justify-content:center!important}.dashboard-attendance-card{box-shadow:0 2px 8px #00000014;border-radius:12px;border:1px solid #f0f0f0}.dashboard-attendance-card .ant-card-head{background:linear-gradient(135deg,#52c41a,#73d13d);border-bottom:none;border-radius:12px 12px 0 0}.dashboard-attendance-card .ant-card-head-title{color:#fff;font-weight:600}.dashboard-attendance-card .ant-card-head .anticon{color:#fff}.dashboard-attendance-item{margin-bottom:16px}.dashboard-attendance-status-empty{text-align:center;padding:20px}.dashboard-attendance-status-empty .anticon{font-size:24px;color:#ccc;margin-bottom:8px}.dashboard-profile-item{margin-bottom:16px}.dashboard-profile-label{font-weight:600;color:#2c3e50;font-size:14px}.dashboard-profile-value{color:#64748b;font-size:14px;margin-top:2px}.dashboard-action-btn{height:48px!important;font-size:16px!important;font-weight:600!important;border-radius:10px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;transition:all .3s ease!important}.dashboard-action-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.dashboard-primary-btn{background:linear-gradient(135deg,#52c41a,#389e0d)!important;border:none!important;color:#fff!important}.dashboard-primary-btn:hover{background:linear-gradient(135deg,#389e0d,#237804)!important}.dashboard-secondary-btn{background:linear-gradient(135deg,#1890ff,#096dd9)!important;border:none!important;color:#fff!important}.dashboard-secondary-btn:hover{background:linear-gradient(135deg,#096dd9,#0050b3)!important}.dashboard-danger-btn{background:linear-gradient(135deg,#ff4d4f,#cf1322)!important;border:none!important;color:#fff!important}.dashboard-danger-btn:hover{background:linear-gradient(135deg,#cf1322,#a8071a)!important}.dashboard-divider{margin:24px 0;border-color:#f0f0f0}@media (max-width: 768px){.dashboard-container{padding:16px}.page-container .ant-card>.ant-card-body{padding:16px}.dashboard-actions-card .ant-card-body{padding:20px 16px}.dashboard-actions-card .ant-space{max-width:100%}.dashboard-action-btn{height:44px!important;font-size:15px!important}.dashboard-profile-item,.dashboard-attendance-item{margin-bottom:12px}.dashboard-attendance-status-empty{padding:16px}}@media (max-width: 576px){.dashboard-container{padding:12px}.page-container .ant-card>.ant-card-body{padding:12px}.dashboard-actions-card .ant-card-body{padding:16px 12px}.dashboard-action-btn{height:42px!important;font-size:14px!important}.dashboard-actions-card .ant-space{gap:16px!important}.dashboard-profile-item,.dashboard-attendance-item{margin-bottom:10px}.dashboard-attendance-status-empty{padding:12px}}@media (max-width: 480px){.dashboard-actions-card .ant-card-body{padding:14px 10px}.page-container .ant-card>.ant-card-body{padding:10px}.dashboard-action-btn{height:40px!important;font-size:13px!important;padding:0 16px!important}.dashboard-actions-card .ant-space{gap:12px!important}.dashboard-profile-item,.dashboard-attendance-item{margin-bottom:8px}.dashboard-attendance-status-empty{padding:10px}}.environment-error-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px;background:linear-gradient(135deg,#ff6b6b,#ee5a24)}.environment-error-card{width:100%;max-width:600px;box-shadow:0 10px 30px #0000004d}.environment-error-content{text-align:center;margin-bottom:30px}.environment-error-icon{font-size:48px;color:#ff4d4f;margin-bottom:16px}.environment-error-title{margin:0;color:#ff4d4f}.environment-error-subtitle{font-size:16px}.environment-error-alert{margin-bottom:20px}.environment-error-actions{text-align:center;margin-top:20px}.environment-error-footer{display:block;text-align:center;margin-top:15px;font-size:12px}.setup-loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;gap:20px}.setup-loading-text{font-size:16px}.setup-error-container,.setup-required-container{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}.initial-setup-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px;background:linear-gradient(135deg,#667eea,#764ba2)}.initial-setup-card{width:100%;max-width:500px;box-shadow:0 10px 30px #0000004d}.initial-setup-header{text-align:center;margin-bottom:30px}.initial-setup-icon{font-size:48px;color:#1890ff;margin-bottom:16px}.initial-setup-title{margin:0;color:#1890ff}.initial-setup-subtitle{font-size:16px}.initial-setup-form .ant-form-item{margin-bottom:20px}.initial-setup-submit-button{width:100%;height:50px;font-size:16px;background:linear-gradient(135deg,#667eea,#764ba2);border:none}.initial-setup-form-actions{width:100%;margin-top:30px}.initial-setup-footer-text{text-align:center;display:block;font-size:12px}@media (max-width: 768px){.environment-error-container,.initial-setup-container{padding:10px}.environment-error-card,.initial-setup-card{margin:0}.environment-error-icon,.initial-setup-icon{font-size:36px}}