body {
    margin: 0;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    background: #f5f7fb;
    color: #333;
}

.nav {
    background: linear-gradient(90deg, #1d4ed8, #2563eb);
    padding: 16px 30px;
    box-shadow: 0 4px 12px rgba(37,99,235,.2);
}

.nav a, .nav-user {
    color: white;
    text-decoration: none;
    margin-right: 22px;
    font-weight: bold;
}

.container {
    padding: 28px;
}

h1 {
    margin-top: 0;
}

.alert {
    background: #fff7ed;
    color: #c2410c;
    padding: 14px 18px;
    margin-bottom: 18px;
    border-left: 5px solid #fb923c;
    border-radius: 8px;
}

.card {
    background: white;
    padding: 22px;
    margin-bottom: 20px;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.login-page {
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    width: 420px;
    background: white;
    border-radius: 22px;
    padding: 38px;
    box-shadow: 0 18px 50px rgba(0,0,0,.15);
    text-align: center;
}

.login-card h1 {
    color: #2563eb;
}

.login-card input {
    width: 100%;
    box-sizing: border-box;
}

.hint {
    margin-top: 16px;
    color: #888;
    font-size: 14px;
}

input, select {
    padding: 12px;
    margin: 6px;
    width: 220px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: white;
    font-size: 15px;
}

button {
    padding: 12px 22px;
    background: #2563eb;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 10px;
    font-weight: bold;
}

button:hover {
    background: #1d4ed8;
}

button:disabled,
.disabled-btn {
    background: #cbd5e1 !important;
    color: #64748b !important;
    cursor: not-allowed !important;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

th, td {
    padding: 14px;
    border-bottom: 1px solid #edf0f5;
    text-align: left;
}

th {
    background: #e0f2fe;
    color: #475569;
}

.grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-card {
    width: 180px;
    text-align: center;
    text-decoration: none;
    color: #111827;
    font-size: 20px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 10px;
}

.form-grid button {
    width: 220px;
    margin: 6px;
}

.hidden {
    display: none;
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filter-bar {
    background: white;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.filter-bar a {
    display: inline-block;
    padding: 10px 14px;
    margin-right: 8px;
    text-decoration: none;
    color: #374151;
    border-radius: 8px;
    background: #f3f4f6;
}

.filter-bar a.active {
    background: #2563eb;
    color: white;
}

.stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}

.stat-card {
    background: white;
    border-radius: 16px;
    padding: 22px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.stat-card b {
    font-size: 34px;
    display: block;
    color: #2563eb;
}

.stat-card span {
    color: #64748b;
}

.employee-info {
    background: white;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.notice {
    background: #e0f2fe;
    color: #0369a1;
    font-weight: bold;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 18px;
}

.action-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.action-card {
    background: white;
    border: none;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    text-align: center;
}

.action-card .icon {
    font-size: 34px;
}

.action-card h2 {
    color: #2563eb;
    margin-bottom: 8px;
}

.action-card p {
    color: #16a34a;
    font-size: 20px;
    font-weight: bold;
}

.action-card button {
    width: 100%;
}

.back-card h2 {
    color: #16a34a;
}

.badge {
    padding: 6px 10px;
    border-radius: 999px;
    color: white;
    font-size: 13px;
    font-weight: bold;
}

.green { background: #16a34a; }
.orange { background: #f97316; }
.blue { background: #0ea5e9; }
.purple { background: #8b5cf6; }
.gray { background: #64748b; }
.red { background: #dc2626; }

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

@media (max-width: 900px) {
    .stats, .action-cards, .form-grid, .settings-grid {
        grid-template-columns: 1fr;
    }

    input, select, .form-grid button {
        width: 100%;
        box-sizing: border-box;
    }

    .container {
        padding: 14px;
    }

    table {
        font-size: 13px;
    }
}


.checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 18px 0;
}

.checkbox-item {
    background: #f1f5f9;
    padding: 10px 14px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.checkbox-item input {
    width: auto;
    margin: 0;
}

.position-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.form-grid label {
    display: block;
    font-weight: bold;
    margin-left: 8px;
    color: #475569;
}


.search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.search-form input {
    margin: 0;
}

.form-tip {
    color: #64748b;
    font-weight: bold;
}

.reset-link {
    display: inline-block;
    padding: 10px 14px;
    background: #e5e7eb;
    color: #374151;
    text-decoration: none;
    border-radius: 10px;
    font-weight: bold;
}

.hint {
    margin-top: 10px;
    color: #64748b;
    font-size: 14px;
}


.dashboard-stats {
    grid-template-columns: repeat(5, 1fr);
}

.white-card {
    background: #fff;
    color: #0f172a;
    text-align: left;
    position: relative;
    min-height: 130px;
}

.white-card b {
    color: #0f172a;
    font-size: 34px;
}

.white-card small {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-weight: bold;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    margin-bottom: 8px;
}

.blue-icon { background: linear-gradient(135deg, #2563eb, #60a5fa); }
.green-icon { background: linear-gradient(135deg, #16a34a, #86efac); }
.purple-icon { background: linear-gradient(135deg, #7c3aed, #c084fc); }
.orange-icon { background: linear-gradient(135deg, #f97316, #fdba74); }
.red-icon { background: linear-gradient(135deg, #dc2626, #fca5a5); }

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 22px;
}

.mini-progress {
    width: 120px;
    height: 6px;
    background: #e5e7eb;
    border-radius: 999px;
    display: inline-block;
    margin-right: 8px;
    overflow: hidden;
    vertical-align: middle;
}

.mini-progress span {
    height: 100%;
    background: #2563eb;
    display: block;
    border-radius: 999px;
}

.red-progress span {
    background: #ef4444;
}

.center-link {
    display: block;
    text-align: center;
    color: #2563eb;
    text-decoration: none;
    font-weight: bold;
    margin-top: 14px;
}

.stat-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-side b {
    font-size: 42px;
    color: #7c3aed;
}

.stat-side span {
    color: #64748b;
    font-weight: bold;
}

.resign-side b {
    color: #dc2626;
}

.danger-btn {
    background: #ef4444;
}

.danger-btn:hover {
    background: #dc2626;
}

@media (max-width: 900px) {
    .dashboard-stats,
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}


/* ===== v3.9 Sidebar UI Upgrade ===== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    background: #f4f7fb;
    color: #172033;
}

.app-layout {
    min-height: 100vh;
    display: flex;
}

.sidebar {
    width: 260px;
    min-height: 100vh;
    background: linear-gradient(180deg, #0f5bff 0%, #185adb 100%);
    color: #fff;
    padding: 18px 14px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    box-shadow: 12px 0 30px rgba(37, 99, 235, .18);
    z-index: 20;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px 22px;
    border-bottom: 1px solid rgba(255,255,255,.18);
    margin-bottom: 18px;
}

.brand-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.brand-title {
    font-size: 19px;
    font-weight: 900;
    letter-spacing: .5px;
}

.brand-sub {
    font-size: 10px;
    opacity: .75;
    margin-top: 4px;
}

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.side-link {
    color: rgba(255,255,255,.92);
    text-decoration: none;
    padding: 13px 14px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    transition: .18s;
}

.side-link:hover {
    background: rgba(255,255,255,.18);
    transform: translateX(3px);
}

.side-user {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 18px;
    background: rgba(255,255,255,.16);
    border-radius: 18px;
    padding: 12px;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 10px;
}

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(255,255,255,.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.username {
    font-weight: 900;
}

.user-role {
    font-size: 12px;
    opacity: .75;
    margin-top: 3px;
}

.logout {
    color: white;
    text-decoration: none;
    font-weight: 900;
    font-size: 13px;
}

.main-content {
    margin-left: 260px;
    width: calc(100% - 260px);
    min-height: 100vh;
}

.login-main {
    width: 100%;
    min-height: 100vh;
}

.topbar {
    height: 76px;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e8eef7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 34px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.page-welcome {
    font-size: 18px;
    font-weight: 900;
}

.page-subtitle {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
}

.topbar-right {
    display: flex;
    gap: 16px;
    color: #475569;
    font-weight: 800;
}

.container {
    padding: 30px 34px;
}

.page-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 22px;
}

.page-title-row h1,
.container > h1 {
    margin: 0 0 8px;
    font-size: 34px;
    letter-spacing: -1px;
    color: #111827;
}

.page-title-row p {
    color: #64748b;
    margin: 0;
    font-weight: 700;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin-bottom: 22px;
}

.kpi-card {
    background: #fff;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 134px;
    border: 1px solid #eef2f7;
}

.kpi-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    flex: none;
}

.kpi-label {
    font-weight: 900;
    color: #334155;
    margin-bottom: 6px;
}

.kpi-value {
    font-size: 34px;
    font-weight: 950;
    color: #0f172a;
}

.kpi-value span {
    font-size: 16px;
    color: #64748b;
}

.kpi-small {
    margin-top: 6px;
    font-size: 13px;
    color: #64748b;
    font-weight: 800;
}

.blue-icon { background: linear-gradient(135deg, #2563eb, #60a5fa); }
.green-icon { background: linear-gradient(135deg, #16a34a, #86efac); }
.purple-icon { background: linear-gradient(135deg, #7c3aed, #c084fc); }
.orange-icon { background: linear-gradient(135deg, #f97316, #fdba74); }
.red-icon { background: linear-gradient(135deg, #dc2626, #fca5a5); }

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 22px;
}

.card,
.modern-card {
    background: #fff;
    border-radius: 22px;
    padding: 22px;
    border: 1px solid #eef2f7;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
}

.card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.card-head h2,
.card h2 {
    margin: 0;
    font-size: 20px;
    color: #111827;
}

.card-head span,
.card-head small {
    color: #64748b;
    font-weight: 800;
}

.card-head a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 900;
}

table,
.modern-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

th {
    background: #f3f7fb;
    color: #64748b;
    font-weight: 900;
    padding: 13px 12px;
    border: 0;
}

td {
    padding: 14px 12px;
    border-bottom: 1px solid #edf2f7;
    color: #1f2937;
    font-weight: 700;
}

tr:hover td {
    background: #fafcff;
}

.dept-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2563eb;
    display: inline-block;
    margin-right: 8px;
}

.rate-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mini-progress {
    width: 110px;
    height: 7px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.mini-progress span {
    display: block;
    height: 100%;
    background: #2563eb;
    border-radius: 999px;
}

.red-progress span {
    background: #ef4444;
}

.rank-badge {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.soft-badge {
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
}

.purple-soft {
    background: #ede9fe;
    color: #7c3aed;
}

.quick-grid,
.grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.quick-grid a,
.btn-card {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 20px;
    text-decoration: none;
    color: #111827;
    font-size: 18px;
    font-weight: 900;
    text-align: center;
    padding: 26px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
    transition: .18s;
}

.quick-grid a:hover,
.btn-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, .1);
}

input,
select,
textarea {
    border: 1px solid #d9e2ef;
    border-radius: 13px;
    padding: 12px 14px;
    background: #fff;
    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .1);
}

button {
    border-radius: 13px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .18);
}

.alert {
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(249, 115, 22, .08);
}

.login-page {
    min-height: 100vh;
    background: radial-gradient(circle at top left, #dbeafe, transparent 34%),
                linear-gradient(135deg, #f8fbff, #eef5ff);
}

.login-card {
    border-radius: 26px;
    border: 1px solid #e8eef7;
}

.login-card h1 {
    font-size: 28px;
}

@media (max-width: 1100px) {
    .kpi-grid,
    .dashboard-grid,
    .quick-grid,
    .grid {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: relative;
        width: 100%;
        min-height: auto;
    }

    .side-user {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: 18px;
    }

    .app-layout {
        flex-direction: column;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
    }

    .topbar {
        position: relative;
    }
}


.danger-link {
    color: #dc2626 !important;
    font-weight: 900;
}

.shift-tag {
    display: inline-block;
    padding: 5px 10px;
    background: #e0f2fe;
    color: #0369a1;
    border-radius: 999px;
    font-weight: 900;
}

.pagination {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}
.pagination a,
.pagination span {
    padding: 9px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #2563eb;
    text-decoration: none;
}
.pagination .disabled {
    color: #94a3b8;
    background: #f8fafc;
}


.checkin-disabled-btn {
    background: #94a3b8 !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    opacity: 0.85;
    box-shadow: none !important;
}

/* ===== v4 Four-card punch UI + employee filter/batch shift ===== */
.employee-dashboard-v2 {
    background: radial-gradient(circle at top left, #eff6ff 0, #f8fafc 42%, #ffffff 100%);
    border-radius: 24px;
    padding: 22px;
    margin-bottom: 28px;
}

.employee-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.employee-hero h1 {
    font-size: 34px;
    margin: 0 0 8px 0;
    color: #0f172a;
}

.employee-hero p {
    margin: 0;
    color: #64748b;
    font-weight: bold;
}

.state-pill {
    color: #fff;
    border-radius: 999px;
    padding: 12px 20px;
    font-weight: bold;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
    white-space: nowrap;
}

.modern-notice {
    background: linear-gradient(90deg, #e0f2fe, #eef2ff);
    border: 1px solid #bfdbfe;
    color: #075985;
}

.modern-info {
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}

.four-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 18px;
    margin: 22px 0;
}

.punch-card {
    position: relative;
    min-height: 260px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 24px 18px;
    text-align: center;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .08);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    overflow: hidden;
}

.punch-card.available:hover,
.punch-card.active {
    transform: translateY(-3px);
    box-shadow: 0 22px 56px rgba(37, 99, 235, .14);
    border-color: #93c5fd;
}

.punch-card.locked {
    opacity: .55;
    filter: grayscale(.25);
}

.punch-card.active.eating { border-color: #fb923c; background: linear-gradient(180deg, #fff7ed, #ffffff); }
.punch-card.active.toilet { border-color: #a78bfa; background: linear-gradient(180deg, #f5f3ff, #ffffff); }
.punch-card.active.smoking { border-color: #2dd4bf; background: linear-gradient(180deg, #ecfeff, #ffffff); }

.punch-icon {
    width: 62px;
    height: 62px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    margin-bottom: 14px;
    box-shadow: 0 12px 26px rgba(37, 99, 235, .22);
}

.punch-card h2 {
    margin: 8px 0;
    color: #2563eb;
    font-size: 24px;
}

.punch-desc {
    color: #16a34a;
    font-weight: bold;
    margin: 8px 0;
}

.time-line {
    color: #64748b;
    font-weight: bold;
    min-height: 24px;
    margin: 12px 0 18px;
}

.punch-card button {
    width: 100%;
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 16px;
}

.checkout-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    background: linear-gradient(90deg, #dcfce7, #f0fdf4);
    border: 1px solid #bbf7d0;
    border-radius: 20px;
    padding: 18px 20px;
    box-shadow: 0 12px 32px rgba(22, 163, 74, .09);
    margin-bottom: 20px;
}

.checkout-strip b {
    display: block;
    color: #166534;
    font-size: 20px;
    margin-bottom: 6px;
}

.checkout-strip span {
    color: #64748b;
    font-weight: bold;
}

.locked-strip {
    background: linear-gradient(90deg, #fff7ed, #fff);
    border-color: #fed7aa;
}

.status-help {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    color: #475569;
}

.status-help span {
    background: #f1f5f9;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: bold;
}

.employee-filter-card {
    border: 1px solid #e2e8f0;
}

.employee-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.employee-filter-form input,
.employee-filter-form select,
.batch-card select {
    margin: 0;
}

.employee-filter-form input {
    min-width: 340px;
    flex: 1;
}

.batch-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border: 1px solid #dbeafe;
    background: linear-gradient(90deg, #eff6ff, #ffffff);
}

#checkAll,
.row-check {
    width: auto;
    margin: 0;
    transform: scale(1.15);
}

@media (max-width: 1100px) {
    .four-card-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 700px) {
    .four-card-grid,
    .employee-filter-form {
        grid-template-columns: 1fr;
        display: grid;
    }

    .employee-filter-form input,
    .employee-filter-form select,
    .employee-filter-form button,
    .employee-filter-form .reset-link,
    .batch-card select,
    .batch-card button {
        width: 100%;
        min-width: 0;
    }

    .employee-hero,
    .checkout-strip {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ===== UI V4.2 forced four-card employee dashboard ===== */
.employee-v42-page { max-width: 1480px; margin: 0 auto; }
.employee-v42-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 28px; border-radius:28px; background:linear-gradient(135deg,#eef6ff,#ffffff); box-shadow:0 18px 45px rgba(15,23,42,.08); margin-bottom:18px; border:1px solid rgba(37,99,235,.10); }
.employee-v42-hero h1 { margin:6px 0 8px; font-size:34px; color:#0f172a; }
.employee-v42-hero p { margin:0; color:#64748b; font-weight:700; }
.version-mark { display:inline-flex; padding:6px 12px; border-radius:999px; background:#dbeafe; color:#1d4ed8; font-weight:900; font-size:13px; }
.v42-status { padding:12px 22px; border-radius:999px; color:white; font-size:18px; font-weight:900; box-shadow:0 12px 28px rgba(0,0,0,.12); }
.v42-status.ok { background:linear-gradient(135deg,#16a34a,#22c55e); }
.v42-status.busy { background:linear-gradient(135deg,#f97316,#fb923c); }
.v42-status.off { background:linear-gradient(135deg,#64748b,#94a3b8); }
.v42-info-card { display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; padding:18px 24px; border-radius:22px; background:#fff; box-shadow:0 14px 40px rgba(15,23,42,.07); margin-bottom:16px; color:#0f172a; font-size:17px; }
.v42-tip { padding:18px 22px; border-radius:20px; background:linear-gradient(135deg,#e0f2fe,#eff6ff); color:#0369a1; font-weight:900; margin-bottom:20px; }
.v42-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-bottom:20px; }
.v42-card { border:0; text-align:center; min-height:285px; padding:28px 20px; border-radius:28px; background:#fff; box-shadow:0 18px 45px rgba(15,23,42,.09); transition:.2s; cursor:pointer; border:1px solid rgba(148,163,184,.18); }
.v42-card:hover { transform:translateY(-3px); box-shadow:0 24px 60px rgba(15,23,42,.13); }
.v42-card.locked { opacity:.55; cursor:not-allowed; filter:grayscale(.55); }
.v42-card.active { background:linear-gradient(135deg,#fff7ed,#fff); border-color:#fdba74; }
.v42-card.active.toilet { background:linear-gradient(135deg,#f5f3ff,#fff); border-color:#c4b5fd; }
.v42-card.active.smoke { background:linear-gradient(135deg,#ecfeff,#fff); border-color:#67e8f9; }
.v42-card.checkout { background:linear-gradient(135deg,#ecfdf5,#fff); border-color:#86efac; }
.v42-card.primary { background:linear-gradient(135deg,#eff6ff,#fff); border-color:#93c5fd; }
.v42-icon { width:70px; height:70px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; border-radius:24px; font-size:38px; background:#eff6ff; box-shadow:inset 0 0 0 1px rgba(37,99,235,.08); }
.v42-card h2 { margin:0 0 10px; font-size:28px; color:#2563eb; }
.v42-card p { margin:0 0 16px; color:#16a34a; font-size:18px; font-weight:900; }
.v42-time { min-height:24px; margin-bottom:20px; color:#475569; font-weight:800; }
.v42-card button { width:100%; height:48px; border-radius:14px; border:0; background:linear-gradient(135deg,#2563eb,#1d4ed8); color:white; font-size:17px; font-weight:900; cursor:pointer; }
.v42-card.checkout button { background:linear-gradient(135deg,#16a34a,#22c55e); }
.v42-card.active button { background:linear-gradient(135deg,#f97316,#fb923c); }
.v42-card.active.toilet button { background:linear-gradient(135deg,#7c3aed,#8b5cf6); }
.v42-card.active.smoke button { background:linear-gradient(135deg,#0891b2,#14b8a6); }
.v42-card button:disabled { background:#cbd5e1; color:#64748b; cursor:not-allowed; }
.v42-rule-card { display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center; padding:16px 20px; border-radius:18px; background:#fff7ed; color:#9a3412; font-weight:800; margin-bottom:20px; }
.v42-two-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:1200px){ .v42-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .v42-two-col{grid-template-columns:1fr;} }
@media (max-width:720px){ .employee-v42-hero{display:block;} .v42-status{display:inline-flex;margin-top:14px;} .v42-grid{grid-template-columns:1fr;} .v42-card{min-height:auto;} }

/* ===== UI V4.2 employee management filter forced styles ===== */
.employee-filter-card { border-radius:22px; background:#fff; box-shadow:0 16px 40px rgba(15,23,42,.08); margin-bottom:16px; }
.employee-filter-form { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr auto auto; gap:12px; align-items:center; }
.employee-filter-form input,.employee-filter-form select,.batch-card select { height:42px; border:1px solid #dbe3ef; border-radius:12px; padding:0 12px; background:#f8fafc; }
.employee-filter-form button,.batch-card button { height:42px; border:0; border-radius:12px; padding:0 18px; background:#2563eb; color:#fff; font-weight:900; cursor:pointer; }
.reset-link { display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 14px; border-radius:12px; background:#f1f5f9; color:#334155; font-weight:800; text-decoration:none; }
.batch-card { display:flex; flex-wrap:wrap; gap:12px; align-items:center; border-radius:20px; background:#f8fafc; }
@media (max-width:1100px){ .employee-filter-form{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .employee-filter-form{grid-template-columns:1fr;} }


/* ===== V4.4 employee management layout fix: prevent page overflow ===== */
.main-content {
    max-width: calc(100vw - 260px);
    overflow-x: hidden;
}
.container {
    max-width: 100%;
    overflow-x: hidden;
}
.admin-employees-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
.admin-employees-page .page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.admin-employees-page .page-head h1 {
    margin: 0;
}
.employee-filter-card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
.employee-filter-form {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(130px, 1fr)) 110px 90px !important;
    gap: 10px !important;
    align-items: center;
}
.employee-filter-form input,
.employee-filter-form select,
.employee-filter-form button,
.employee-filter-form .reset-link {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
    white-space: nowrap;
}
.employee-filter-form button {
    line-height: 1.15;
    padding: 0 10px !important;
}
.batch-card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
.batch-card select {
    width: min(360px, 100%) !important;
    min-width: 180px !important;
}
.employee-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .07);
}
.employee-table-wrap table,
.employee-table {
    width: 100%;
    min-width: 1080px;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.employee-table th,
.employee-table td {
    vertical-align: middle;
    white-space: nowrap;
}
.employee-table td:last-child {
    min-width: 210px;
}
.employee-table td:last-child a {
    display: inline-block;
    margin: 0 2px;
}
@media (max-width: 1300px) {
    .employee-filter-form {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
}
@media (max-width: 1100px) {
    .main-content {
        max-width: 100vw;
    }
}
@media (max-width: 760px) {
    .employee-filter-form {
        grid-template-columns: 1fr !important;
    }
    .admin-employees-page .page-head button,
    .batch-card button,
    .batch-card select {
        width: 100% !important;
    }
}

/* =====================================================================
   V5 BLUE ULTIMATE UI - final override
   后台整体蓝色高级风格 + 员工管理筛选不超行修复
   ===================================================================== */
:root{
    --v5-blue:#2563eb;
    --v5-blue-dark:#1d4ed8;
    --v5-blue-soft:#eff6ff;
    --v5-sky:#38bdf8;
    --v5-bg:#f5f8ff;
    --v5-card:#ffffff;
    --v5-line:#dbe6f6;
    --v5-text:#102033;
    --v5-muted:#64748b;
    --v5-shadow:0 18px 48px rgba(37,99,235,.10);
    --v5-shadow-soft:0 10px 28px rgba(15,23,42,.06);
}
html,body{max-width:100%;overflow-x:hidden;}
body{
    background:
      radial-gradient(circle at 20% 0%, rgba(59,130,246,.12), transparent 26%),
      radial-gradient(circle at 85% 12%, rgba(56,189,248,.10), transparent 28%),
      linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%) !important;
    color:var(--v5-text) !important;
}
.sidebar{
    background:linear-gradient(180deg,#0b5cff 0%,#1d4ed8 48%,#143fb8 100%) !important;
    box-shadow:16px 0 42px rgba(37,99,235,.20) !important;
}
.brand{border-bottom:1px solid rgba(255,255,255,.20) !important;}
.brand-icon{background:rgba(255,255,255,.20) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);}
.side-link{border:1px solid transparent;}
.side-link:hover,
.side-link.active{
    background:rgba(255,255,255,.18) !important;
    border-color:rgba(255,255,255,.16);
    box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.side-user{background:rgba(255,255,255,.16) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);}
.main-content{max-width:calc(100vw - 260px) !important;overflow-x:hidden !important;}
.topbar{
    background:rgba(255,255,255,.88) !important;
    border-bottom:1px solid #e6eefb !important;
    box-shadow:0 10px 30px rgba(37,99,235,.06);
}
.container{padding:32px 34px !important;max-width:100% !important;overflow-x:hidden !important;}
.container > h1,.page-head h1,.page-title-row h1{
    font-size:34px !important;
    letter-spacing:-.8px;
    color:#0f172a !important;
}
.card,.modern-card,.stat-card,.kpi-card,.employee-filter-card,.batch-card,.employee-table-wrap{
    background:rgba(255,255,255,.92) !important;
    border:1px solid rgba(203,213,225,.75) !important;
    border-radius:24px !important;
    box-shadow:var(--v5-shadow-soft) !important;
    backdrop-filter:blur(10px);
}
.card:hover,.modern-card:hover,.kpi-card:hover{
    box-shadow:var(--v5-shadow) !important;
}
button,.btn-primary,.page-head button{
    background:linear-gradient(135deg,var(--v5-blue),var(--v5-blue-dark)) !important;
    color:#fff !important;
    border:0 !important;
    border-radius:14px !important;
    box-shadow:0 12px 24px rgba(37,99,235,.22) !important;
    white-space:nowrap;
}
button:hover,.page-head button:hover{filter:brightness(.98);transform:translateY(-1px);}
button:disabled,.disabled-btn,.checkin-disabled-btn{
    background:#cbd5e1 !important;color:#64748b !important;box-shadow:none !important;transform:none !important;
}
input,select,textarea{
    border:1px solid #dbe6f6 !important;
    background:#f8fbff !important;
    color:#0f172a !important;
    border-radius:14px !important;
    box-shadow:none !important;
}
input:focus,select:focus,textarea:focus{
    border-color:#60a5fa !important;
    box-shadow:0 0 0 4px rgba(37,99,235,.10) !important;
    background:#fff !important;
}
.alert{border-radius:18px !important;border-left:5px solid #fb923c !important;}
.notice,.modern-notice{
    background:linear-gradient(90deg,#dff4ff,#eef5ff) !important;
    border:1px solid #bfdbfe !important;
    color:#075985 !important;
    border-radius:18px !important;
}
/* employee management page */
.admin-employees-page{width:100%;max-width:100%;overflow-x:hidden !important;}
.admin-employees-page .page-head{
    display:flex !important;align-items:center !important;justify-content:space-between !important;
    gap:16px !important;flex-wrap:wrap !important;margin-bottom:20px !important;
}
.admin-employees-page .page-head button{height:50px;padding:0 26px;font-size:16px;}
.employee-filter-card{padding:22px 24px !important;margin-bottom:18px !important;overflow:hidden !important;}
.employee-filter-form{
    width:100% !important;
    display:grid !important;
    grid-template-columns:minmax(260px,2.2fr) repeat(4,minmax(135px,1fr)) 112px 92px !important;
    gap:12px !important;
    align-items:center !important;
}
.employee-filter-form input,
.employee-filter-form select,
.employee-filter-form button,
.employee-filter-form .reset-link{
    width:100% !important;min-width:0 !important;max-width:100% !important;margin:0 !important;
    box-sizing:border-box !important;height:48px !important;font-size:15px !important;
}
.employee-filter-form button{padding:0 10px !important;line-height:1.15 !important;white-space:normal !important;}
.reset-link{
    display:inline-flex !important;align-items:center !important;justify-content:center !important;
    background:#edf2f7 !important;color:#334155 !important;text-decoration:none !important;
    border-radius:14px !important;font-weight:900 !important;border:1px solid #dbe6f6;
}
.hint{color:#64748b !important;font-weight:700;}
.batch-card{
    display:flex !important;align-items:center !important;flex-wrap:wrap !important;gap:12px !important;
    padding:18px 22px !important;margin-bottom:18px !important;background:linear-gradient(90deg,#eff6ff,#fff) !important;
    overflow:hidden !important;
}
.batch-card b{font-size:16px;color:#0f172a;}
.batch-card select{width:min(320px,100%) !important;min-width:180px !important;height:46px !important;margin:0 !important;}
.batch-card button{height:46px !important;margin:0 !important;}
.employee-table-wrap{
    width:100% !important;max-width:100% !important;overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;border-radius:24px !important;
}
.employee-table-wrap table,.employee-table{
    width:100% !important;min-width:1120px !important;border-collapse:separate !important;border-spacing:0 !important;
    background:transparent !important;box-shadow:none !important;border-radius:0 !important;
}
.employee-table th{
    background:#f3f7ff !important;color:#64748b !important;font-size:14px !important;
    padding:15px 13px !important;border-bottom:1px solid #e6eefb !important;
    white-space:nowrap !important;
}
.employee-table td{
    padding:15px 13px !important;border-bottom:1px solid #eef3fb !important;
    white-space:nowrap !important;font-weight:800 !important;
}
.employee-table tbody tr:hover td{background:#f8fbff !important;}
.employee-table td:last-child{min-width:220px !important;}
.employee-table td:last-child a{display:inline-block;margin:0 3px;font-weight:900;}
.danger-link{color:#ef4444 !important;}
.badge{box-shadow:0 8px 16px rgba(15,23,42,.10);}
.green{background:linear-gradient(135deg,#16a34a,#22c55e) !important;}
.orange{background:linear-gradient(135deg,#f97316,#fb923c) !important;}
.blue{background:linear-gradient(135deg,#2563eb,#60a5fa) !important;}
.purple{background:linear-gradient(135deg,#7c3aed,#a78bfa) !important;}
.gray{background:linear-gradient(135deg,#64748b,#94a3b8) !important;}
/* dashboard cards */
.kpi-card{border-radius:26px !important;}
.kpi-value{color:#0f172a !important;}
.kpi-icon,.stat-icon{box-shadow:0 14px 28px rgba(37,99,235,.18);}
/* employee punch page keep blue four cards */
.employee-v42-hero{
    background:linear-gradient(135deg,#eff6ff,#ffffff) !important;
    border:1px solid rgba(37,99,235,.12) !important;
    box-shadow:0 18px 48px rgba(37,99,235,.10) !important;
}
.version-mark{background:#dbeafe !important;color:#1d4ed8 !important;}
.v42-card{box-shadow:0 16px 42px rgba(37,99,235,.10) !important;border-color:#dbe6f6 !important;}
.v42-card.primary,.v42-card:hover{border-color:#93c5fd !important;}
.v42-card h2{color:#2563eb !important;}
.v42-card button{background:linear-gradient(135deg,#2563eb,#1d4ed8) !important;}
/* pagination */
.pagination{flex-wrap:wrap;}
.pagination a,.pagination span{border-radius:12px !important;}
@media (max-width:1350px){
    .employee-filter-form{grid-template-columns:1.4fr 1fr 1fr 1fr !important;}
}
@media (max-width:1100px){
    .main-content{max-width:100vw !important;}
    .employee-filter-form{grid-template-columns:1fr 1fr !important;}
    .container{padding:22px 18px !important;}
}
@media (max-width:720px){
    .employee-filter-form{grid-template-columns:1fr !important;}
    .admin-employees-page .page-head button,.batch-card select,.batch-card button{width:100% !important;}
    .employee-table-wrap table,.employee-table{min-width:980px !important;}
    .topbar{padding:0 16px !important;}
}