html,
body {
    overscroll-behavior-y: none;
    overscroll-behavior: none;
}

:root {
    --employee-bg: #f2fbff;
    --employee-bg-soft: #f9feff;
    --employee-primary: #0aa7a0;
    --employee-primary-dark: #0a6c77;
    --employee-secondary: #ff9f4f;
    --employee-accent: #ffe28e;
    --employee-text: #194d5c;
    --employee-display-font: "Kanit", "Sarabun", sans-serif;
}

body.user-mobile-mode {
    background:
        radial-gradient(circle at 10% -6%, rgba(255, 204, 145, 0.46), transparent 36%),
        radial-gradient(circle at 92% -10%, rgba(87, 222, 212, 0.4), transparent 42%),
        linear-gradient(180deg, #f8fdff 0%, #f2fbf8 50%, #eef7ff 100%);
    position: relative;
    min-height: 100vh;
    color: var(--employee-text);
}

body.user-mobile-mode::before,
body.user-mobile-mode::after {
    content: "";
    position: fixed;
    z-index: 0;
    pointer-events: none;
    filter: blur(2px);
}

body.user-mobile-mode::before {
    width: 280px;
    height: 280px;
    left: -95px;
    top: 88px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(84, 220, 211, 0.34) 0%, rgba(84, 220, 211, 0.08) 58%, transparent 100%);
}

body.user-mobile-mode::after {
    width: 235px;
    height: 235px;
    right: -86px;
    bottom: 112px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 181, 117, 0.34) 0%, rgba(255, 181, 117, 0.08) 60%, transparent 100%);
}

body.user-mobile-mode #appContainer {
    background: transparent;
    position: relative;
    z-index: 1;
    min-height: 100dvh;
}

body.user-mobile-mode #appTopbar {
    display: none;
}

body.user-mobile-mode #mainContentArea {
    padding: 0 0.9rem calc(6.45rem + env(safe-area-inset-bottom));
    background: transparent;
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0 auto;
}

body.user-mobile-mode .tab-content {
    position: relative;
    z-index: 1;
}

#appSidebar {
    background:
        radial-gradient(circle at 12% -6%, rgba(255, 204, 145, 0.36), transparent 34%),
        radial-gradient(circle at 90% -10%, rgba(87, 222, 212, 0.34), transparent 44%),
        linear-gradient(180deg, #f8fdff 0%, #f2fbf8 50%, #eef7ff 100%);
    border-right: 1px solid rgba(111, 164, 172, 0.3);
    box-shadow: 0 16px 34px rgba(48, 111, 123, 0.16);
}

#sidebarBrandBar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 253, 252, 0.84));
    border-bottom-color: rgba(120, 182, 188, 0.22);
}

#sidebarBrandBar i {
    color: #0da6a6;
}

#sidebarBrandText,
#sidebarUserName {
    color: #184f5b;
}

#sidebarUserRole {
    color: rgba(53, 99, 108, 0.8);
}

#sidebarUserInitial {
    background: linear-gradient(145deg, rgba(194, 247, 239, 0.95), rgba(255, 223, 185, 0.9));
    color: #0e666e;
    box-shadow: 0 8px 16px rgba(61, 131, 136, 0.2);
}

#sidebarAccountPanel {
    border-top-color: rgba(115, 176, 182, 0.24);
    background: linear-gradient(180deg, rgba(248, 253, 255, 0.88), rgba(241, 250, 252, 0.86));
}

.sidebar-section-label {
    color: rgba(59, 102, 111, 0.76) !important;
}

.nav-btn {
    border: 1px solid rgba(109, 166, 173, 0.22);
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.86), rgba(242, 251, 249, 0.8));
    color: rgba(28, 86, 98, 0.9) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.nav-btn:hover {
    background: linear-gradient(145deg, rgba(225, 247, 243, 0.92), rgba(255, 240, 219, 0.88));
    border-color: rgba(63, 156, 160, 0.36);
    color: #0f5965 !important;
}

.nav-btn.bg-slate-700,
.nav-btn.text-white.font-medium {
    background: linear-gradient(140deg, rgba(124, 233, 221, 0.96), rgba(173, 239, 226, 0.96), rgba(255, 213, 166, 0.92)) !important;
    border-color: rgba(72, 152, 154, 0.48) !important;
    color: #0b505b !important;
    box-shadow: 0 8px 16px rgba(77, 149, 155, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.employee-display {
    font-family: var(--employee-display-font);
    letter-spacing: -0.02em;
}

#employeeBottomNav {
    backdrop-filter: blur(14px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(244, 253, 252, 0.95));
    border-top: 1px solid rgba(45, 133, 136, 0.18);
    box-shadow: 0 -10px 34px rgba(32, 117, 123, 0.14);
    border-radius: 26px 26px 0 0;
}

#employeeBottomNav .employee-bottom-nav-btn {
    color: #5f7680;
    transition: color 0.2s ease, transform 0.2s ease;
    font-weight: 600;
}

#employeeBottomNav .employee-bottom-nav-btn i {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(238, 249, 255, 0.9));
    border: 1px solid rgba(88, 146, 157, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 12px rgba(64, 121, 130, 0.1);
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

#employeeBottomNav .employee-bottom-nav-btn.active {
    color: var(--employee-primary-dark);
    transform: translateY(-2px);
}

#employeeBottomNav .employee-bottom-nav-btn.active i {
    transform: translateY(-2px);
    color: #eaffff;
    border-color: rgba(12, 129, 130, 0.4);
    background: linear-gradient(140deg, #0db0a8 0%, #10a8bf 58%, #30b99e 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 9px 16px rgba(10, 127, 137, 0.26);
}

body.employee-mobile-sidebar-mode #mobileSidebarOverlay {
    display: block !important;
    background: rgba(8, 51, 60, 0.34);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
}

body.employee-mobile-sidebar-mode #mobileSidebarOverlay.hidden {
    opacity: 0;
    pointer-events: none;
}

body.employee-mobile-sidebar-mode #mobileSidebarOverlay:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

body.employee-mobile-sidebar-mode #appSidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    height: 100dvh;
    width: min(20rem, calc(100vw - 1.25rem));
    transform: translate3d(-100%, 0, 0) !important;
    will-change: transform;
    backface-visibility: hidden;
    contain: layout paint;
    background: linear-gradient(180deg, #18b8b0 0%, #149e96 44%, #0d7f84 78%, #0a6675 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 40px rgba(8, 88, 97, 0.28);
}

body.employee-mobile-sidebar-mode #appSidebar:not(.-translate-x-full) {
    transform: translate3d(0, 0, 0) !important;
}

body.employee-mobile-sidebar-mode #appSidebar.-translate-x-full {
    transform: translate3d(-100%, 0, 0) !important;
}

body.employee-mobile-sidebar-mode #sidebarBrandBar {
    background: linear-gradient(180deg, rgba(5, 73, 83, 0.28), rgba(5, 73, 83, 0.04));
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

body.employee-mobile-sidebar-mode #sidebarBrandBar i,
body.employee-mobile-sidebar-mode #sidebarBrandText,
body.employee-mobile-sidebar-mode #sidebarUserName {
    color: #f4ffff;
}

body.employee-mobile-sidebar-mode #sidebarNavMenu {
    order: 3;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    max-height: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

body.employee-mobile-sidebar-mode .sidebar-section-label,
body.employee-mobile-sidebar-mode .employee-mobile-sidebar-hidden {
    display: none !important;
}

body.employee-mobile-sidebar-mode #sidebarAccountPanel {
    order: 2;
    margin-top: 0;
    border-top-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(7, 89, 97, 0.16), rgba(6, 62, 74, 0.28));
}

body.employee-mobile-sidebar-mode #sidebarEmployeeLogoutPanel {
    order: 4;
    border-top-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(7, 89, 97, 0.16), rgba(6, 62, 74, 0.28));
}

body.employee-mobile-sidebar-mode #sidebarUserInitial {
    background: linear-gradient(145deg, rgba(244, 255, 255, 0.92), rgba(218, 250, 250, 0.78));
    color: #0e7278;
    box-shadow: 0 10px 18px rgba(5, 76, 88, 0.22);
}

body.employee-mobile-sidebar-mode #sidebarUserRole {
    color: rgba(236, 255, 255, 0.78);
}

body.employee-mobile-sidebar-mode #sidebarQuickActions {
    display: grid;
}

body.employee-mobile-sidebar-mode .sidebar-quick-action {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12);
    color: #efffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.employee-mobile-sidebar-mode .sidebar-quick-action:hover {
    background: rgba(255, 255, 255, 0.18);
}

.payroll-zero-placeholder::placeholder {
    color: #94a3b8;
    opacity: 1;
}

body.employee-mobile-sidebar-mode .nav-btn {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
    color: rgba(236, 253, 252, 0.9) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.employee-mobile-sidebar-mode .nav-btn:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.05));
    border-color: rgba(185, 255, 245, 0.28);
    color: #ffffff !important;
}

body.employee-mobile-sidebar-mode .nav-btn.bg-slate-700,
body.employee-mobile-sidebar-mode .nav-btn.text-white.font-medium {
    background: linear-gradient(140deg, rgba(45, 212, 191, 0.96), rgba(34, 211, 238, 0.84), rgba(16, 185, 129, 0.86)) !important;
    border-color: rgba(236, 253, 245, 0.68) !important;
    color: #042f2e !important;
    box-shadow: 0 10px 18px rgba(6, 116, 111, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.employee-soft-surface {
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.93) 0%, rgba(252, 245, 235, 0.86) 100%);
    box-shadow: 0 12px 30px rgba(62, 112, 116, 0.13);
}

.employee-icon-badge {
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(20, 158, 150, 0.18), rgba(245, 138, 70, 0.2));
    color: #0c6f72;
    border: 1px solid rgba(15, 126, 128, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.employee-stat-card {
    border-radius: 16px;
    padding: 0.75rem;
    border: 1px solid rgba(20, 122, 124, 0.16);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(240, 249, 248, 0.82));
    box-shadow: 0 8px 20px rgba(41, 99, 107, 0.1);
}

.employee-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #356365;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(101, 148, 150, 0.22);
    white-space: nowrap;
}

.employee-hero {
    position: relative;
    background: linear-gradient(160deg, #18b8b0 0%, #149e96 40%, #0d7f84 68%, #f58a46 100%);
    color: #f2fbff;
    border-radius: 0 0 36px 36px;
    box-shadow: 0 15px 30px rgba(14, 86, 96, 0.23);
    overflow: hidden;
}

.checkin-hero-panel {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.96), rgba(246, 253, 252, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 14px 34px rgba(28, 83, 89, 0.16);
}

.checkin-hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 12% -18%, rgba(85, 217, 207, 0.4), transparent 44%), radial-gradient(circle at 100% 100%, rgba(255, 171, 95, 0.35), transparent 44%);
    pointer-events: none;
}

.checkin-hero-timebox {
    border-radius: 20px;
    border: 1px solid rgba(93, 177, 184, 0.32);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.95), rgba(234, 250, 252, 0.9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 14px 26px rgba(18, 118, 124, 0.18);
    color: #0e5f6f;
}

.checkin-hero-timebox-label {
    color: #0f6f76;
    border: 1px solid rgba(121, 194, 201, 0.35);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.checkin-hero-action {
    border-radius: 999px;
    background: linear-gradient(100deg, #15bcb3 0%, #19aec2 44%, #2ebf9c 100%);
    color: #ecffff;
    box-shadow: 0 14px 26px rgba(9, 138, 147, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.checkin-hero-action:active {
    transform: translateY(1px) scale(0.99);
    box-shadow: 0 10px 20px rgba(9, 120, 129, 0.2);
}

.checkin-hero-camera-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 999px;
    border: 1px solid #d6e4e6;
    background: rgba(255, 255, 255, 0.92);
    color: #5c6f72;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.18rem;
    box-shadow: 0 10px 18px rgba(28, 83, 89, 0.11);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.checkin-hero-camera-btn:not(:disabled):active {
    transform: translateY(calc(-50% + 1px)) scale(0.98);
    box-shadow: 0 7px 14px rgba(20, 84, 90, 0.18);
}

.checkin-hero-camera-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: translateY(-50%);
}

.checkin-hero-camera-btn-inline {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    border: 1px solid #d6e4e6;
    background: rgba(255, 255, 255, 0.92);
    color: #5c6f72;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 8px 14px rgba(28, 83, 89, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.checkin-hero-camera-btn-inline:not(:disabled):active {
    transform: scale(0.97);
    box-shadow: 0 6px 10px rgba(20, 84, 90, 0.2);
}

.checkin-hero-camera-btn-inline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.online-punch-launch-btn {
    border-radius: 999px;
    border: 1px solid rgba(14, 165, 233, 0.35);
    background: linear-gradient(140deg, #0ea5e9 0%, #0284c7 100%);
    color: #f0f9ff;
    box-shadow: 0 12px 22px rgba(2, 132, 199, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.26);
    transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.2s ease;
}

.online-punch-launch-btn:not(:disabled):active {
    transform: scale(0.98);
    box-shadow: 0 8px 18px rgba(2, 132, 199, 0.28);
}

.online-punch-launch-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
}

.online-punch-capture-btn {
    border-radius: 999px;
    border: 1px solid rgba(14, 165, 233, 0.38);
    background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
    color: #f8fdff;
    box-shadow: 0 14px 26px rgba(3, 105, 161, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.online-punch-capture-btn:not(:disabled):active {
    transform: translateY(1px) scale(0.985);
    box-shadow: 0 9px 18px rgba(3, 105, 161, 0.3);
}

.online-punch-subtle-btn {
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(255, 255, 255, 0.9);
    color: #334155;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.online-punch-subtle-btn:not(:disabled):active {
    transform: translateY(1px) scale(0.985);
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.1);
}

#onlinePunchCameraCard,
#onlinePunchActionSection,
#onlinePunchLocationCard {
    position: relative;
    isolation: isolate;
}

#onlinePunchCameraCard {
    z-index: 3;
}

#onlinePunchActionSection,
#onlinePunchLocationCard {
    z-index: 1;
}

#onlinePunchCameraCard > .p-6 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
}

#onlinePunchCameraViewport {
    width: min(100%, 22rem);
    aspect-ratio: 4 / 3;
    margin-inline: auto;
}

#onlinePunchCameraPlaceholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    z-index: 3;
}

#startOnlinePunchCameraBtn {
    margin-inline: auto;
}

#onlinePunchCameraViewport > video,
#onlinePunchCameraViewport > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
    z-index: 1;
}

#onlinePunchCameraViewport #retakeOnlinePunchPhotoBtn {
    position: absolute;
    left: 50%;
    bottom: 0.55rem;
    transform: translateX(-50%);
    z-index: 4;
    min-width: 0;
    padding: 0.35rem 0.72rem;
    font-size: 0.78rem;
    line-height: 1.1;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(255, 255, 255, 0.92);
    color: #1e293b;
    box-shadow: 0 8px 15px rgba(15, 23, 42, 0.15);
    backdrop-filter: blur(6px);
}

#onlinePunchVideo {
    background: transparent;
    object-fit: contain;
}

#onlinePunchVideo.online-punch-video-mirrored {
    transform: scaleX(-1);
}

#onlinePunchCameraControls,
#onlinePunchCaptureHint {
    width: min(100%, 36rem);
    margin-inline: auto;
}

#onlinePunchActionSection {
    width: min(100%, 36rem);
    margin-inline: auto;
}

#onlinePunchCaptureHint {
    text-align: center;
}

#onlinePunchLocationMap {
    width: 100%;
    min-height: 14rem;
    height: 15rem;
    border-radius: 0.95rem;
    overflow: hidden;
    border: 1px solid rgba(167, 243, 208, 0.55);
    background: #f8fafc;
}

#onlinePunchLocationMap .leaflet-control-attribution {
    font-size: 10px;
}

#refreshOnlinePunchLocationBtn {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

#refreshOnlinePunchLocationBtn.refreshing-location {
    background: rgba(2, 132, 199, 0.08);
    border-color: rgba(2, 132, 199, 0.42);
    color: #0369a1;
    box-shadow: 0 10px 20px rgba(14, 116, 144, 0.2);
}

#refreshOnlinePunchLocationBtn.refreshing-location i {
    animation: onlinePunchRefreshSpin 0.9s linear infinite;
}

@keyframes onlinePunchRefreshSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.online-punch-security-alert {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(220, 38, 38, 0.28);
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.95), rgba(254, 226, 226, 0.92));
    color: #991b1b;
    box-shadow: 0 10px 20px rgba(153, 27, 27, 0.12);
}

.online-punch-security-alert.online-punch-security-alert-gps::before {
    content: "";
    position: absolute;
    right: -0.35rem;
    bottom: -0.3rem;
    width: 5.75rem;
    height: 5.75rem;
    background-image: url("/icons/browser-tab-logo.png?v=20260319-1306");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.1;
    filter: grayscale(100%) saturate(0);
    pointer-events: none;
}

.online-punch-security-alert__title {
    position: relative;
    z-index: 1;
    font-weight: 700;
    color: #b91c1c;
}

.online-punch-security-alert__desc {
    position: relative;
    z-index: 1;
    margin-top: 0.2rem;
    color: #991b1b;
}

.online-punch-security-alert__action {
    position: relative;
    z-index: 1;
    margin-top: 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(185, 28, 28, 0.3);
    background: rgba(255, 255, 255, 0.9);
    color: #b91c1c;
    font-weight: 700;
    font-size: 0.74rem;
    padding: 0.32rem 0.78rem;
    transition: transform 0.15s ease, background-color 0.2s ease;
}

.online-punch-security-alert__action:hover {
    background: rgba(255, 255, 255, 1);
}

.online-punch-security-alert__action:active {
    transform: translateY(1px);
}

.online-punch-security-alert__action.online-punch-security-alert__action-animated {
    animation: onlinePunchSecurityAlertActionPulse 1.35s ease-in-out infinite;
}

.online-punch-security-alert__action.online-punch-security-alert__action-animated i {
    animation: onlinePunchSecurityAlertActionNudge 1.35s ease-in-out infinite;
    transform-origin: 50% 60%;
}

@keyframes onlinePunchSecurityAlertActionPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.14);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(185, 28, 28, 0);
    }
}

@keyframes onlinePunchSecurityAlertActionNudge {

    0%,
    100% {
        transform: rotate(0deg);
    }

    30% {
        transform: rotate(-12deg);
    }

    62% {
        transform: rotate(10deg);
    }
}

#onlinePunchLocationCard.online-punch-location-card-danger {
    border-color: rgba(248, 113, 113, 0.55);
    box-shadow: 0 12px 24px rgba(220, 38, 38, 0.1);
}

#onlinePunchLocationCard.online-punch-location-card-danger h3 {
    color: #b91c1c;
}

#onlinePunchLocationCard.online-punch-location-card-danger h3 i {
    color: #dc2626 !important;
}

#onlinePunchCameraCard:not(.camera-expanded):not(.camera-captured) #onlinePunchCameraViewport {
    width: min(100%, 18.25rem);
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(248, 250, 252, 0.9);
    box-shadow: none;
}

.checkin-hero-stat-card {
    position: relative;
    border-radius: 18px;
    padding: 1rem 1rem 0.9rem 1.3rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(28, 83, 89, 0.07), inset 0 1px 0 rgba(255,255,255,0.95);
}

.checkin-hero-stat-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    bottom: 0.55rem;
    width: 4px;
    border-radius: 0 3px 3px 0;
}

.checkin-hero-stat-card.emerald {
    background: linear-gradient(140deg, rgba(255,255,255,0.9) 0%, rgba(236,253,245,0.65) 100%);
    border: 1px solid rgba(110, 231, 183, 0.35);
}
.checkin-hero-stat-card.emerald::before {
    background: linear-gradient(to bottom, rgba(52,211,153,0.65), rgba(16,185,129,0.45));
}

.checkin-hero-stat-card.amber {
    background: linear-gradient(140deg, rgba(255,255,255,0.9) 0%, rgba(255,251,235,0.65) 100%);
    border: 1px solid rgba(253, 211, 77, 0.35);
}
.checkin-hero-stat-card.amber::before {
    background: linear-gradient(to bottom, rgba(251,191,36,0.65), rgba(245,158,11,0.45));
}

.checkin-hero-stat-card.sky {
    background: linear-gradient(140deg, rgba(255,255,255,0.9) 0%, rgba(240,249,255,0.65) 100%);
    border: 1px solid rgba(125, 211, 252, 0.35);
}
.checkin-hero-stat-card.sky::before {
    background: linear-gradient(to bottom, rgba(56,189,248,0.65), rgba(14,165,233,0.45));
}

.employee-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.25), transparent 34%), radial-gradient(circle at 85% 0%, rgba(255, 255, 255, 0.26), transparent 42%), linear-gradient(120deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.employee-chip {
    border-radius: 13px;
    padding: 0.55rem 0.85rem;
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.employee-chip.active {
    background: linear-gradient(135deg, rgba(20, 158, 150, 0.18), rgba(245, 138, 70, 0.22));
    color: #0f6666;
    border: 1px solid rgba(23, 141, 136, 0.34);
    box-shadow: 0 8px 16px rgba(17, 118, 120, 0.1);
}

.employee-chip.muted {
    background: rgba(255, 255, 255, 0.8);
    color: #4f6467;
    border: 1px solid rgba(121, 155, 158, 0.27);
}

.employee-chip:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

.employee-glass-card {
    border-radius: 22px;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.94), rgba(250, 245, 238, 0.84));
    border: 1px solid rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 30px rgba(32, 90, 93, 0.11);
}

.employee-panel-card {
    position: relative;
    overflow: hidden;
}

.employee-panel-card::after {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 999px;
    right: -70px;
    top: -74px;
    background: radial-gradient(circle, rgba(20, 158, 150, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.leave-balance-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(148deg, rgba(255, 255, 255, 0.98), rgba(245, 251, 250, 0.9));
    border: 1px solid rgba(101, 173, 170, 0.3);
    box-shadow: 0 8px 18px rgba(19, 99, 103, 0.1);
}

.leave-balance-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--employee-primary), var(--employee-secondary));
    opacity: 0.65;
}

.leave-mobile-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(120, 164, 169, 0.2);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 253, 252, 0.96) 62%, rgba(242, 250, 255, 0.92) 100%);
    box-shadow: 0 8px 18px rgba(36, 104, 109, 0.09);
}

.leave-mobile-card::after {
    content: "";
    position: absolute;
    width: 92px;
    height: 92px;
    right: -46px;
    top: -40px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(92, 204, 221, 0.2) 0%, transparent 74%);
    pointer-events: none;
}

.payslip-mobile-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(119, 162, 167, 0.26);
    background: linear-gradient(152deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 251, 252, 0.92) 54%, rgba(255, 248, 237, 0.94) 100%);
    box-shadow: 0 14px 28px rgba(34, 96, 103, 0.12);
}

.payslip-mobile-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, #149e96 0%, #24b8aa 52%, #f59c4f 100%);
    opacity: 0.74;
}

#employeeDetailView {
    background:
        radial-gradient(circle at 8% 12%, rgba(45, 212, 191, 0.13), transparent 35%),
        radial-gradient(circle at 88% 16%, rgba(251, 191, 36, 0.12), transparent 30%),
        linear-gradient(180deg, #f8fcff 0%, #edf7f4 48%, #f6f8fb 100%);
}

#employeeDetailView .ed-shell {
    max-width: 1380px;
    margin: 0 auto;
}

#employeeDetailView .ed-header-card {
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(8px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

#employeeDetailView .ed-header-title {
    letter-spacing: -0.015em;
    color: #0f172a;
}

#employeeDetailView .ed-layout {
    display: grid;
    gap: 1rem;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1200px) {
    #employeeDetailView .ed-layout {
        grid-template-columns: 300px minmax(0, 1fr);
    }
}

#employeeDetailView .ed-layout .bg-white.rounded-lg.border.border-gray-200,
#employeeDetailView .ed-layout .bg-white.border.border-gray-200.rounded-lg,
#employeeDetailView .ed-layout .bg-white.border.border-gray-200.rounded-xl {
    border-radius: 16px;
    border-color: rgba(148, 163, 184, 0.24);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.9);
}

#employeeDetailView .emp-dtab-btn {
    font-size: 0.78rem;
    letter-spacing: 0.01em;
}

#employeeDetailView .emp-accordion {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(250, 252, 255, 0.8));
}

.worktime-mobile-cell {
    min-height: 64px;
    min-width: 0;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.24rem;
    text-align: left;
    position: relative;
    overflow: hidden;
    border-radius: 13px;
    border: 1px solid rgba(24, 121, 123, 0.16);
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.84), rgba(248, 255, 252, 0.7));
    transition: transform 0.17s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    box-shadow: 0 6px 16px rgba(23, 94, 98, 0.07);
}

.worktime-mobile-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.22rem;
    width: 100%;
}

.worktime-mobile-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-height: 10px;
}

.worktime-mobile-today-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin-top: 0.08rem;
    padding: 0.08rem 0.34rem;
    border-radius: 999px;
    font-size: 0.52rem;
    line-height: 1.15;
    font-weight: 700;
    white-space: nowrap;
}

.worktime-mobile-tags {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.14rem;
    min-height: 12px;
}

.worktime-mobile-tag {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.12rem 0.32rem;
    border-radius: 999px;
    font-size: 0.5rem;
    line-height: 1.1;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.worktime-mobile-cell:active {
    transform: scale(0.98);
}

.worktime-mobile-cell.today {
    border-color: rgba(168, 139, 250, 0.52);
    background: linear-gradient(160deg, rgba(245, 241, 255, 0.96), rgba(239, 246, 255, 0.9));
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.18), 0 10px 18px rgba(125, 90, 210, 0.11);
}

.worktime-mobile-cell.selected {
    border-color: rgba(5, 118, 111, 0.47);
    box-shadow: 0 10px 25px rgba(15, 130, 120, 0.16);
    background: linear-gradient(165deg, rgba(215, 247, 243, 0.88), rgba(250, 255, 255, 0.82));
}

.worktime-mobile-cell.has-holiday {
    border-color: rgba(16, 185, 129, 0.38);
    background: linear-gradient(180deg, rgba(209, 250, 229, 0.98), rgba(240, 253, 244, 0.96) 42%, rgba(255, 255, 255, 0.92));
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.1), 0 7px 16px rgba(16, 185, 129, 0.12);
}

.worktime-mobile-cell.has-holiday::before,
.worktime-mobile-cell.has-public-holiday::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    opacity: 0.95;
}

.worktime-mobile-cell.has-holiday::before {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.9), rgba(52, 211, 153, 0.8));
}

.worktime-mobile-cell.has-public-holiday {
    border-color: rgba(245, 158, 11, 0.42);
    background: linear-gradient(180deg, rgba(254, 243, 199, 0.98), rgba(255, 251, 235, 0.96) 42%, rgba(255, 255, 255, 0.92));
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.1), 0 7px 16px rgba(217, 149, 39, 0.13);
}

.worktime-mobile-cell.has-public-holiday::before {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.92), rgba(251, 191, 36, 0.82));
}

.worktime-mobile-cell.has-weekend {
    border-color: rgba(99, 102, 241, 0.25);
    background: linear-gradient(180deg, rgba(238, 242, 255, 0.97), rgba(245, 247, 255, 0.94) 42%, rgba(255, 255, 255, 0.9));
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.07), 0 5px 14px rgba(99, 102, 241, 0.09);
}

.worktime-mobile-cell.has-weekend::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    opacity: 0.9;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.75), rgba(167, 139, 250, 0.65));
}

.worktime-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    display: inline-block;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65);
}

.worktime-dot-pair {
    display: inline-flex;
    align-items: center;
    gap: 0.24rem;
    padding: 0.1rem 0.22rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(21, 124, 121, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.worktime-dot-muted {
    background: #cbd5e1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}

.worktime-dot-caption {
    display: none;
}

.worktime-mobile-cell.has-warning {
    border-color: rgba(239, 68, 68, 0.42);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.16), 0 8px 20px rgba(220, 91, 59, 0.14);
}

.worktime-mobile-cell.has-ot {
    border-color: rgba(245, 138, 70, 0.4);
    box-shadow: 0 0 0 1px rgba(245, 138, 70, 0.2), 0 9px 20px rgba(217, 126, 56, 0.13);
}

body.user-mobile-mode #scheduleCalendarWrapper,
body.user-mobile-mode #otCalendarWrapper {
    border-radius: 24px;
    border: 1px solid rgba(18, 123, 117, 0.18);
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 14px 32px rgba(9, 95, 93, 0.12);
    overflow: hidden;
}

body.user-mobile-mode #scheduleCalendarWrapper > div:first-child,
body.user-mobile-mode #otCalendarWrapper > div:first-child {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(250, 255, 255, 0.72));
    border-bottom-color: rgba(19, 130, 122, 0.14);
}

body.user-mobile-mode #calMonthDisplay,
body.user-mobile-mode #otMonthDisplay {
    font-family: var(--employee-display-font);
    font-size: 1.02rem;
    color: #106b6c;
}

body.user-mobile-mode #calCurrentShiftName,
body.user-mobile-mode #otCurrentShiftName {
    color: #457576;
    font-weight: 600;
    font-size: 0.82rem;
}

body.user-mobile-mode #scheduleWeekdayHeader,
body.user-mobile-mode #otWeekdayHeader {
    border-bottom-color: rgba(19, 130, 122, 0.12);
    background: rgba(255, 255, 255, 0.46);
}

body.user-mobile-mode #calGridBody,
body.user-mobile-mode #otGridBody {
    gap: 0.36rem;
    padding: 0.35rem;
    background: rgba(255, 255, 255, 0.36);
    grid-template-rows: repeat(6, minmax(64px, auto));
    align-content: start;
}

body.user-mobile-mode #scheduleGridInner,
body.user-mobile-mode #otGridInner {
    min-width: 0;
    width: 100%;
}

body.user-mobile-mode #scheduleWeekdayHeader > div,
body.user-mobile-mode #otWeekdayHeader > div {
    border-right-color: rgba(19, 130, 122, 0.08);
    text-align: center;
    font-size: 0.74rem;
    font-weight: 700;
    color: #497072;
}

body.user-mobile-mode #leaveUserFabBtn {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 9.6rem);
    right: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

body.user-mobile-mode #onlinePunchWorkArea {
    gap: 1rem;
}

body.user-mobile-mode #onlinePunchCameraCard,
body.user-mobile-mode #onlinePunchLocationCard {
    border-radius: 20px;
    overflow: hidden;
}

body.user-mobile-mode #onlinePunchCameraCard .online-punch-card-head {
    flex-wrap: wrap;
    align-items: flex-start;
}

body.user-mobile-mode #onlinePunchEmployeeLabel {
    width: 100%;
    text-align: left;
    margin-top: 0.2rem;
}

body.user-mobile-mode #onlinePunchCameraControls {
    gap: 0.55rem;
    justify-content: center;
}

body.user-mobile-mode #onlinePunchCameraControls button {
    flex: 1 1 calc(50% - 0.55rem);
    min-width: 9.5rem;
}

body.user-mobile-mode #onlinePunchCameraCard.online-punch-camera-card #onlinePunchCameraViewport {
    transform-origin: top center;
    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        min-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.26s ease,
        box-shadow 0.26s ease;
    will-change: width, min-height, max-height;
}

body.user-mobile-mode #onlinePunchCameraCard.online-punch-camera-card.camera-expanded #onlinePunchCameraViewport {
    border-color: rgba(14, 165, 233, 0.5);
    box-shadow: 0 14px 28px rgba(14, 116, 144, 0.24);
}

body.user-mobile-mode #onlinePunchCameraCard.online-punch-camera-card.camera-captured #onlinePunchCameraViewport {
    border-color: rgba(16, 185, 129, 0.55);
    box-shadow: 0 11px 22px rgba(5, 150, 105, 0.2);
}

body.user-mobile-mode #onlinePunchActionSection .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.user-mobile-mode #onlinePunchLocationMap {
    min-height: 12.5rem;
    height: 13.5rem;
}

body.user-mobile-mode #tab-checkin {
    min-height: calc(100dvh - 6.45rem - env(safe-area-inset-bottom));
}

body.user-mobile-mode #checkinUserHero {
    margin: 0 -0.9rem 0.75rem;
    padding: 0;
}

body.user-mobile-mode #checkinUserHero .checkin-hero-panel {
    min-height: min(35rem, calc(100dvh - 10.5rem - env(safe-area-inset-bottom)));
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1rem 1rem 1.05rem;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0 0 32px 32px;
    box-shadow: 0 18px 34px rgba(19, 96, 104, 0.18);
}

body.user-mobile-mode #checkinUserHero .checkin-hero-timebox {
    margin-top: 0.15rem;
}

body.user-mobile-mode #checkinHeroPosition {
    align-self: flex-end;
}

body.user-mobile-mode #leaveUserMobileView .employee-soft-surface {
    border-radius: 18px;
}

@media (max-width: 767px) {
    body.user-mobile-mode #tab-employee {
        padding-top: 0.7rem;
    }

    body.user-mobile-mode #onlinePunchWorkArea {
        display: none;
    }

    body.user-mobile-mode.mobile-modal-scroll-lock {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    body.user-mobile-mode.online-punch-popup-open {
        overflow: hidden;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchPopupOverlay {
        display: block !important;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.24s ease;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchPopupCloseBtn {
        display: inline-flex !important;
        top: 0.72rem;
        right: 0.72rem;
        z-index: 85;
        width: 2.1rem;
        height: 2.1rem;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #111827;
        box-shadow: none;
        backdrop-filter: none;
        opacity: 0;
        transform: translateY(-6px) scale(0.96);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.22s ease;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchPopupCloseBtn i {
        font-size: 1.45rem;
        font-weight: 900;
        color: #111827;
        text-shadow: none;
        pointer-events: none;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchWorkArea {
        position: fixed;
        left: 0.72rem;
        right: 0.72rem;
        top: 0.8rem;
        bottom: calc(0.8rem + env(safe-area-inset-bottom));
        z-index: 70;
        display: grid !important;
        grid-template-columns: 1fr;
        justify-items: center;
        align-items: start;
        align-content: start;
        grid-auto-rows: max-content;
        gap: 0.55rem;
        overflow-y: auto;
        padding: 0.55rem;
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(245, 253, 253, 0.98), rgba(237, 249, 250, 0.98));
        box-shadow: 0 24px 44px rgba(8, 70, 82, 0.3);
        opacity: 0;
        transform: translateY(18px) scale(0.985);
        pointer-events: none;
        transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), left 0.3s cubic-bezier(0.22, 1, 0.36, 1), right 0.3s cubic-bezier(0.22, 1, 0.36, 1), top 0.3s cubic-bezier(0.22, 1, 0.36, 1), bottom 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.28s ease, padding 0.24s ease;
    }

    body.user-mobile-mode.online-punch-popup-open #employeeBottomNav {
        opacity: 0;
        pointer-events: none;
        transform: translateY(120%);
        transition: opacity 0.2s ease, transform 0.24s ease;
    }

    body.user-mobile-mode.online-punch-popup-open.online-punch-popup-visible #onlinePunchPopupOverlay {
        opacity: 1;
        pointer-events: auto;
    }

    body.user-mobile-mode.online-punch-popup-open.online-punch-popup-visible #onlinePunchPopupCloseBtn {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    body.user-mobile-mode.online-punch-popup-open.online-punch-popup-visible #onlinePunchWorkArea {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchWorkArea > .space-y-6 {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 38rem;
        gap: 0.42rem;
        max-height: none;
        overflow: visible;
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.2s ease, transform 0.22s ease, max-height 0.24s ease, margin 0.2s ease;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchWorkArea > .space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0 !important;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchWorkArea > .space-y-6 > :not(#onlinePunchLocationCard) {
        display: none;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchActionSection {
        display: block !important;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchActionSection.hidden {
        display: none !important;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard,
    body.user-mobile-mode.online-punch-popup-open #onlinePunchLocationCard {
        width: 100%;
        max-width: 38rem;
        border-radius: 18px;
        box-shadow: 0 8px 20px rgba(24, 87, 95, 0.12);
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard > .p-6 {
        gap: 0.55rem;
        padding: 1rem;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard {
        z-index: 6;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchLocationCard {
        z-index: 2;
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 0.58rem 0.62rem;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchLocationCard .mb-4 {
        margin-bottom: 0.45rem;
        gap: 0.45rem;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchLocationCard h3 {
        font-size: 1rem;
        line-height: 1.2;
    }

    body.user-mobile-mode.online-punch-popup-open #refreshOnlinePunchLocationBtn {
        padding: 0.26rem 0.52rem;
        font-size: 0.7rem;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchLocationMap {
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard.online-punch-camera-card #onlinePunchCameraViewport {
        width: min(100%, 18.5rem);
        min-height: 0;
        max-height: none;
        height: auto;
        aspect-ratio: 4 / 3;
        opacity: 1;
        transform: none;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard.online-punch-camera-card.camera-expanded #onlinePunchCameraViewport {
        width: min(100%, 22rem);
        min-height: 0;
        max-height: none;
        height: auto;
        aspect-ratio: 4 / 3;
        opacity: 1;
        transform: none;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard.online-punch-camera-card.camera-expanded.camera-portrait #onlinePunchCameraViewport {
        width: min(100%, 22rem);
        aspect-ratio: 4 / 3;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard.online-punch-camera-card.camera-expanded #onlinePunchCameraViewport > video,
    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard.online-punch-camera-card.camera-expanded #onlinePunchCameraViewport > img {
        object-fit: cover;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard.online-punch-camera-card.camera-expanded ~ .space-y-6 {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        max-height: none;
        margin-top: 0.1rem;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard:not(.camera-expanded):not(.camera-captured) .online-punch-card-head {
        padding: 0.62rem 0.92rem;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard:not(.camera-expanded):not(.camera-captured) > .p-6 {
        padding: 0.45rem 0.65rem 0.55rem;
        gap: 0.28rem;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard:not(.camera-expanded):not(.camera-captured) #onlinePunchCameraViewport {
        width: min(100%, 11.8rem);
        aspect-ratio: 16 / 9;
        border-color: rgba(148, 163, 184, 0.24);
        border-radius: 1rem;
        background: rgba(248, 250, 252, 0.95);
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard:not(.camera-expanded):not(.camera-captured) #onlinePunchCameraControls {
        display: none;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard:not(.camera-expanded):not(.camera-captured) #startOnlinePunchCameraBtn {
        min-width: 8.7rem;
        padding: 0.46rem 0.92rem;
        font-size: 0.84rem;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard:not(.camera-expanded):not(.camera-captured) ~ .space-y-6 #onlinePunchLocationMap {
        min-height: clamp(18rem, calc(100dvh - 18.5rem - env(safe-area-inset-bottom)), 32rem);
        height: clamp(18.5rem, calc(100dvh - 17.8rem - env(safe-area-inset-bottom)), 33rem);
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard.online-punch-camera-card.camera-captured #onlinePunchCameraViewport {
        width: min(100%, 17.8rem);
        min-height: 0;
        max-height: none;
        height: auto;
        aspect-ratio: 4 / 3;
        opacity: 1;
        transform: none;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard.online-punch-camera-card.camera-captured > .p-6 {
        padding: 0.46rem 0.6rem 0.5rem;
        gap: 0.28rem;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard.online-punch-camera-card.camera-captured #onlinePunchCameraControls {
        display: none;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard.online-punch-camera-card.camera-captured ~ .space-y-6 {
        display: flex;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        max-height: none;
        margin-top: 0.12rem;
        gap: 0.45rem;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard.online-punch-camera-card.camera-captured #onlinePunchActionSection {
        margin-top: 0.04rem;
        padding: 0.46rem 0.56rem;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard.online-punch-camera-card.camera-captured #onlinePunchActionSection .grid {
        margin-top: 0.38rem;
        gap: 0.44rem;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard.online-punch-camera-card.camera-captured #onlinePunchActionSection .grid > button {
        padding-top: 0.52rem;
        padding-bottom: 0.52rem;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard.online-punch-camera-card.camera-captured ~ .space-y-6 #onlinePunchLocationCard {
        padding: 0.52rem 0.56rem;
        border-radius: 14px;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard.online-punch-camera-card.camera-captured ~ .space-y-6 #onlinePunchLocationCard .mb-4 {
        margin-bottom: 0.42rem;
        gap: 0.38rem;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard.online-punch-camera-card.camera-captured ~ .space-y-6 #onlinePunchLocationCard h3 {
        font-size: 1rem;
        line-height: 1.2;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard.online-punch-camera-card.camera-captured ~ .space-y-6 #refreshOnlinePunchLocationBtn {
        padding: 0.24rem 0.5rem;
        font-size: 0.7rem;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraCard.online-punch-camera-card.camera-captured ~ .space-y-6 #onlinePunchLocationMap {
        min-height: clamp(14rem, calc(100dvh - 27.2rem - env(safe-area-inset-bottom)), 22rem);
        height: clamp(14.5rem, calc(100dvh - 26.4rem - env(safe-area-inset-bottom)), 23rem);
        border-radius: 0.75rem;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraControls {
        position: static;
        bottom: auto;
        z-index: 1;
        padding-top: 0.7rem;
        padding-bottom: 0;
        background: transparent;
        backdrop-filter: none;
    }

    body.user-mobile-mode.online-punch-popup-open #onlinePunchCameraPlaceholder {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.user-mobile-mode.online-punch-popup-open #startOnlinePunchCameraBtn {
        margin-inline: auto;
    }

    body.user-mobile-mode.online-punch-popup-open.online-punch-camera-focus #onlinePunchWorkArea {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border-radius: 0;
        padding: 0;
        background: linear-gradient(180deg, rgba(246, 253, 255, 0.98), rgba(236, 247, 250, 0.98));
    }

    body.user-mobile-mode.online-punch-popup-open.online-punch-camera-focus #onlinePunchCameraCard {
        max-width: none;
        border-radius: 0;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
    }

    body.user-mobile-mode.online-punch-popup-open.online-punch-camera-focus #onlinePunchCameraCard .online-punch-card-head {
        display: none;
    }

    body.user-mobile-mode.online-punch-popup-open.online-punch-camera-focus #onlinePunchWorkArea > .space-y-6 {
        display: none;
    }

    body.user-mobile-mode.online-punch-popup-open.online-punch-camera-focus #onlinePunchActionSection {
        display: none !important;
    }

    body.user-mobile-mode.online-punch-popup-open.online-punch-camera-focus #onlinePunchCameraCard > .p-6 {
        padding: calc(0.5rem + env(safe-area-inset-top)) 0.65rem calc(0.45rem + env(safe-area-inset-bottom));
        min-height: 100dvh;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    body.user-mobile-mode.online-punch-popup-open.online-punch-camera-focus #onlinePunchCameraCard.online-punch-camera-card #onlinePunchCameraViewport {
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        max-height: none;
        height: auto;
        aspect-ratio: auto;
        margin-inline: auto;
        border-radius: 14px;
        border-color: rgba(148, 163, 184, 0.32);
        background: #f8fafc;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
        opacity: 1;
        transform: none;
    }

    body.user-mobile-mode.online-punch-popup-open.online-punch-camera-focus #onlinePunchCameraCard.online-punch-camera-card #onlinePunchCameraViewport > video,
    body.user-mobile-mode.online-punch-popup-open.online-punch-camera-focus #onlinePunchCameraCard.online-punch-camera-card #onlinePunchCameraViewport > img {
        object-fit: cover;
    }

    body.user-mobile-mode.online-punch-popup-open.online-punch-camera-focus #onlinePunchCameraControls {
        position: static;
        bottom: auto;
        width: 100%;
        margin-inline: auto;
        padding-top: 0.45rem;
        padding-bottom: calc(0.2rem + env(safe-area-inset-bottom));
        background: transparent;
        backdrop-filter: none;
    }

    body.user-mobile-mode.online-punch-popup-open.online-punch-camera-focus #onlinePunchCameraControls button {
        min-height: 3.1rem;
    }

    body.user-mobile-mode.online-punch-popup-open.online-punch-camera-focus #onlinePunchCameraCard.online-punch-camera-card.camera-captured #onlinePunchCameraControls {
        position: static;
        bottom: auto;
        padding-top: 0.35rem;
        background: none;
    }

    body.user-mobile-mode.online-punch-popup-open.online-punch-camera-focus #onlinePunchPopupCloseBtn {
        top: calc(0.6rem + env(safe-area-inset-top));
        right: 0.65rem;
    }
}

@media (min-width: 430px) {
    body.user-mobile-mode #onlinePunchActionSection .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body.user-mobile-mode #addLeaveModal {
    align-items: center;
    justify-content: center;
    padding: calc(0.75rem + env(safe-area-inset-top)) 0.75rem calc(0.95rem + env(safe-area-inset-bottom));
    background:
        radial-gradient(circle at 16% 12%, rgba(20, 184, 166, 0.2), rgba(20, 184, 166, 0) 45%),
        radial-gradient(circle at 88% 84%, rgba(251, 146, 60, 0.2), rgba(251, 146, 60, 0) 40%),
        rgba(15, 23, 42, 0.5);
}

body.user-mobile-mode #addLeaveModal > div {
    margin: 0;
    width: min(100%, 27rem);
    max-width: 27rem;
    min-height: auto;
    max-height: min(92vh, 46rem);
    border-radius: 1.45rem;
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 26px 62px rgba(15, 23, 42, 0.34), 0 12px 24px rgba(13, 148, 136, 0.16);
    overflow: hidden;
}

body.user-mobile-mode #addLeaveModal #addLeaveForm {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: linear-gradient(180deg, rgba(244, 255, 253, 0.88) 0%, rgba(255, 249, 243, 0.94) 100%);
}

body.user-mobile-mode #addLeaveModal #addLeaveForm>div:first-child {
    padding: 0.95rem;
    gap: 0.8rem;
    background: transparent;
}

body.user-mobile-mode #addLeaveModal #addLeaveForm>div:first-child>div {
    border-radius: 0.95rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9));
    box-shadow: 0 7px 20px rgba(15, 23, 42, 0.06);
    padding: 0.7rem 0.78rem;
}

body.user-mobile-mode #addLeaveModal #addLeaveForm>div:first-child .grid {
    gap: 0.72rem;
}

body.user-mobile-mode #addLeaveModal #addLeaveForm .leave-date-range-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 0.52rem;
    row-gap: 0.52rem;
}

body.user-mobile-mode #addLeaveModal #addLeaveForm .leave-date-range-grid > div {
    min-width: 0;
    overflow: hidden;
}

body.user-mobile-mode #addLeaveModal #addLeaveForm .leave-date-range-grid input[type="date"] {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: clamp(0.7rem, 2.75vw, 0.82rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
}

body.user-mobile-mode #addLeaveModal #addLeaveForm .leave-date-range-grid input[type="date"]::-webkit-datetime-edit {
    padding: 0;
}

@media (max-width: 640px) {
    #addLeaveModal #addLeaveForm .leave-date-range-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 0.5rem;
        row-gap: 0.5rem;
    }

    #addLeaveModal #addLeaveForm .leave-date-range-grid > div {
        min-width: 0;
        overflow: hidden;
    }

    #addLeaveModal #addLeaveForm .leave-date-range-grid input[type="date"] {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        padding-left: 0.45rem;
        padding-right: 0.45rem;
        font-size: clamp(0.68rem, 2.9vw, 0.78rem);
        line-height: 1.15;
        letter-spacing: -0.01em;
    }

    #addLeaveModal #addLeaveForm .leave-date-range-grid input[type="date"]::-webkit-datetime-edit {
        padding: 0;
    }
}

body.user-mobile-mode #addLeaveModal #addLeaveForm label {
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0f766e;
    font-weight: 700;
    margin-bottom: 0.32rem;
}

body.user-mobile-mode #addLeaveModal #addLeaveForm select,
body.user-mobile-mode #addLeaveModal #addLeaveForm input[type="date"],
body.user-mobile-mode #addLeaveModal #addLeaveForm textarea,
body.user-mobile-mode #addLeaveModal #addLeaveForm input[type="file"] {
    border-radius: 0.75rem;
    border-color: rgba(15, 118, 110, 0.22);
    font-size: 0.92rem;
    background-color: rgba(255, 255, 255, 0.98);
}

body.user-mobile-mode #addLeaveModal #addLeaveForm textarea {
    min-height: 5.2rem;
    resize: vertical;
}

body.user-mobile-mode #addLeaveModal #addLeaveForm>div:last-child {
    margin-top: auto;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(244, 247, 250, 0.96));
    padding: 0.8rem 0.95rem calc(0.82rem + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.58rem;
}

body.user-mobile-mode #addLeaveModal #addLeaveForm>div:last-child button {
    width: 100%;
    margin: 0;
    min-height: 2.85rem;
    border-radius: 0.82rem;
    font-size: 0.87rem;
    justify-content: center;
}

body.user-mobile-mode #addLeaveModal #addLeaveForm>div:last-child #submitLeaveBtn {
    background: linear-gradient(135deg, #0f766e 0%, #0ea5a0 48%, #f97316 100%);
    border: 0;
    box-shadow: 0 14px 24px rgba(13, 148, 136, 0.28);
}

body.user-mobile-mode #addLeaveModal #addLeaveForm>div:last-child #submitLeaveBtn:hover {
    filter: brightness(1.03);
}

body.user-mobile-mode #addLeaveModal #addLeaveModalTitle {
    font-size: 1rem;
    color: #0f172a;
    letter-spacing: 0.01em;
}

body.user-mobile-mode #addLeaveModal>div>div:first-child {
    background: linear-gradient(120deg, rgba(204, 251, 241, 0.82), rgba(254, 243, 199, 0.72));
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    padding: 0.95rem 1rem;
}

@keyframes employeeRise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.user-mobile-mode .tab-content:not(.hidden) .employee-soft-surface,
body.user-mobile-mode .tab-content:not(.hidden) .employee-glass-card,
body.user-mobile-mode .tab-content:not(.hidden) .leave-balance-card,
body.user-mobile-mode .tab-content:not(.hidden) .worktime-mobile-cell {
    animation: employeeRise 0.38s ease both;
}

@media (prefers-reduced-motion: reduce) {
    body.user-mobile-mode .tab-content:not(.hidden) .employee-soft-surface,
    body.user-mobile-mode .tab-content:not(.hidden) .employee-glass-card,
    body.user-mobile-mode .tab-content:not(.hidden) .leave-balance-card,
    body.user-mobile-mode .tab-content:not(.hidden) .worktime-mobile-cell {
        animation: none;
    }
}

@media (min-width: 768px) {
    body.user-mobile-mode::before,
    body.user-mobile-mode::after {
        display: none;
    }

    body.user-mobile-mode #appTopbar {
        display: none !important;
    }

    body.user-mobile-mode #mainContentArea {
        padding: 0 1.35rem calc(7rem + env(safe-area-inset-bottom));
        max-width: min(980px, 100%);
    }

    body.user-mobile-mode #employeeBottomNav {
        display: block !important;
        max-width: 44rem;
        width: calc(100% - 2rem);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        border-radius: 28px;
    }
}

#tab-employee {
    min-width: 0;
    overflow-x: hidden;
}

#tab-employee #employeeAdminPanel {
    min-width: 0;
}

#mainContentArea {
    overflow-x: hidden;
}

#employeeTableScrollWrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #e2e8f0;
}

#employeeTableScrollWrap::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

#employeeTableScrollWrap::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 9999px;
}

#employeeTableScrollWrap::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 9999px;
}

#employeeTableStickyScrollbarTrack {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #e2e8f0;
}

#employeeTableStickyScrollbarTrack::-webkit-scrollbar {
    height: 10px;
}

#employeeTableStickyScrollbarTrack::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 9999px;
}

#employeeTableStickyScrollbarTrack::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 9999px;
}

@media print {
    /* 1. Hide general navigation and UI components */
    #appSidebar,
    #appTopbar,
    #floatingRefreshBtn,
    #mobileSidebarOverlay,
    .login-identity-loading-overlay,
    #globalDataLoadingOverlay {
        display: none !important;
    }

    /* 2. Format container to fill page width */
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }

    #appContainer {
        height: auto !important;
        overflow: visible !important;
        display: block !important;
        background: transparent !important;
    }

    #mainContentArea {
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        height: auto !important;
    }

    /* 3. Specifically for Vehicle Inspection (tab-car) */
    /* Hide the sub-tabs navigation header bar */
    #tab-car > div > .border-b.border-slate-100.mb-6.flex.gap-6 {
        display: none !important;
    }

    /* Reset card styling and margins */
    #tab-car > div {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    /* 4. Specifically for the Reports Sub-tab content */
    /* Hide sub-tab title header ('สร้างรายงานการตรวจรถและค่าปรับ') */
    #car-subtab-reports > div:first-child {
        display: none !important;
    }

    /* Hide the Filter Bar */
    #car-subtab-reports > .bg-slate-50\/50,
    #car-subtab-reports > div[class*="bg-slate-50"] {
        display: none !important;
    }

    /* Reset shadow and borders on the report area card wrapper */
    #car-subtab-reports > .bg-white {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    #carReportTableContainer {
        padding: 0 !important;
        margin-top: 15px !important;
        overflow: visible !important;
    }

    /* Format table styling during printing */
    #carReportTableContainer table {
        width: 100% !important;
        border-collapse: collapse !important;
    }

    #carReportTableContainer th, 
    #carReportTableContainer td {
        border: 1px solid #cbd5e1 !important;
        padding: 6px 10px !important;
        color: #000000 !important;
        background: transparent !important;
    }
}

/* ==================== OT Detail Bottom Sheet ==================== */

/* Compact list row tap feedback */
.ot-list-row {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* Bottom Sheet backdrop + panel */
#otDetailBottomSheet {
    transition: opacity 0.25s ease;
}
#otDetailBottomSheet.sheet-visible {
    opacity: 1;
}

#otDetailBottomSheetPanel {
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
#otDetailBottomSheetPanel.sheet-open {
    transform: translateY(0);
}

/* Safe area padding for iOS home indicator */
.ot-sheet-safe-bottom {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}