body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: linear-gradient(120deg, #f4f6fb 0%, #e6f0fa 100%);
    margin: 0;
    padding: 0;
    color: #003F8C;
    min-height: 100vh;
}

header, .footer {
    background: #003F8C;
    color: #fff;
    padding: 16px 0;
    text-align: center;
    letter-spacing: 1px;
}


h1, h2 {
    color: #003F8C;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
img.company-logo {
    display: block;
    margin: 0 auto 32px auto;
    max-width: 90vw;
    max-height: 80px;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,63,140,0.15), 0 1.5px 8px rgba(0,63,140,0.10);
    background: #fff;
    border: 2px solid #e0e6f1;
    padding: 12px;
    object-fit: contain;
}

/* KPI cards */
.kpi-card {
    background: linear-gradient(135deg, #f9fbff 0%, #eef4ff 100%);
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid #d9e4ff;
    min-width: 19%;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0,63,140,0.10);
}
.kpi-title { font-weight: 700; color: #234; letter-spacing: .3px; }
.kpi-value { font-size: 1.8rem; font-weight: 900; margin-top: 6px; }

/* Color variants */
.kpi-present .kpi-value { color: #2e7d32; }
.kpi-half .kpi-value { color: #fb8c00; }
.kpi-leave .kpi-value { color: #c62828; }
.kpi-hours .kpi-value { color: #1565c0; }

.container {
    background: #fff;
    margin: 32px auto 32px auto;
    padding: 36px 28px 32px 28px;
    max-width: 800px;
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(0,63,140,0.10);
    position: relative;
}

form {
    background: #f8fafc;
    padding: 22px 18px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,63,140,0.07);
    margin-bottom: 24px;
}

form label {
    display: block;
    margin-top: 14px;
    color: #003F8C;
    font-weight: 600;
    letter-spacing: 0.5px;
}

form input, form select {
    width: 100%;
    padding: 12px;
    margin-top: 6px;
    border-radius: 7px;
    border: 1.5px solid #bfc9d9;
    font-size: 1rem;
    box-sizing: border-box;
    background: #fff;
    color: #003F8C;
    transition: border 0.2s;
}

form input:focus, form select:focus {
    border: 1.5px solid #003F8C;
    outline: none;
}

/* WFH checkbox row */
.wfh-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    background: #f8fbff;
    /* border: 1px solid #d9e4ff; */
    border-radius: 8px;
}
.wfh-row label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-weight: 600;
    color: #003F8C;
}
/* Override generic input styles for checkbox */
.wfh-row input[type="checkbox"] {
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    transform: scale(1.25);
    accent-color: #003F8C;
}

/* --- Premium Button Shadow & Effect --- */
input[type="submit"], button, .export-link {
    background: #003F8C;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
    box-shadow:
        0 2px 8px rgba(0,63,140,0.10),
        0 8px 24px rgba(0,63,140,0.18);
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    text-decoration: none;
    display: inline-block;
}
input[type="submit"]:hover, button:hover, .export-link:hover {
    background: #E70000;
    color: #fff;
    transform: translateY(-2px) scale(1.03);
    box-shadow:
        0 4px 16px rgba(231,0,0,0.18),
        0 12px 32px rgba(0,63,140,0.10);
}

.btn-row {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Premium Table Shadow & Color --- */
.table, #attendanceRecords table, #leaveSection table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background: #fff;
    box-shadow: 0 2px 16px rgba(0,63,140,0.08);
    border-radius: 10px;
    overflow: hidden;
}
.table-responsive, #attendanceRecords {
    width: 100%;
    overflow-x: auto;
}

#attendanceRecords th, #attendanceRecords td, .table th, .table td {
    border: 1px solid #e0e6f1;
    padding: 10px 8px;
    text-align: center;
    white-space: nowrap;
}
.table th, #attendanceRecords th, #leaveSection th {
    background: linear-gradient(90deg, #003F8C 60%, #0059c7 100%);
    color: #fff;
    font-weight: 700;
}
.table tr:hover, #attendanceRecords tr:hover, #leaveSection tr:hover {
    background: #f4f8ff;
}

#attendanceRecords tr:nth-child(even) {
    background: #f4f6fb;
}
#attendanceRecords tr:hover {
    background: #e6f0fa;
}
#attendanceRecords .leave-status-dropdown {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #003F8C;
    font-size: 1rem;
    background: #fff;
    color: #003F8C;
    font-weight: 600;
    transition: border 0.2s;
}
#attendanceRecords .leave-status-dropdown:focus {
    border: 2px solid #E70000;
    outline: none;
}
#attendanceRecords a {
    color: #E70000;
    text-decoration: underline;
    font-weight: 500;
}
#attendanceRecords a:hover {
    color: #003F8C;
}
#attendanceRecords .badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.98rem;
}
#attendanceRecords .badge-pending {
    background: #E70000;
    color: #fff;
}
#attendanceRecords .badge-accepted {
    background: #28a745;
    color: #fff;
}
#attendanceRecords .badge-rejected {
    background: #003F8C;
    color: #fff;
}

#leaveSection table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 18px;
    background: #fff;
    box-shadow: 0 2px 16px rgba(0,63,140,0.08);
    border-radius: 10px;
    overflow: hidden;
}
#leaveSection th, #leaveSection td {
    border: 1px solid #e0e6f1;
    padding: 12px 10px;
    text-align: center;
    font-size: 1rem;
}
#leaveSection th {
    background: linear-gradient(90deg, #003F8C 60%, #0059c7 100%);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.5px;
}
#leaveSection tr:nth-child(even) {
    background: #f4f6fb;
}
#leaveSection tr:hover {
    background: #e6f0fa;
}
#leaveSection .leave-status-dropdown {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #003F8C;
    font-size: 1rem;
    background: #fff;
    color: #003F8C;
    font-weight: 600;
    transition: border 0.2s;
}
#leaveSection .leave-status-dropdown:focus {
    border: 2px solid #E70000;
    outline: none;
}
#leaveSection a {
    color: #E70000;
    text-decoration: underline;
    font-weight: 500;
}
#leaveSection a:hover {
    color: #003F8C;
}
#leaveSection .badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.98rem;
}
#leaveSection .badge-pending {
    background: #E70000;
    color: #fff;
}
#leaveSection .badge-accepted {
    background: #28a745;
    color: #fff;
}
#leaveSection .badge-rejected {
    background: #003F8C;
    color: #fff;
}

/* Attendance Records Table Scroll (max 10 rows visible) */
#attendanceRecords .table-responsive {
  max-height: none;
  overflow-y: visible;
  overflow-x: visible;
  border: 1px solid #e0e6f1;
  border-radius: 8px;
  background: #fff;
}
#attendanceRecords table {
  margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 700px) {
    .container {
        margin: 12px 4px;
        padding: 10px 2vw;
        max-width: 98vw;
    }
    h1, h2 {
        font-size: 1.3rem;
    }
    form, #addEmployeeForm {
        padding: 10px 2vw;
    }
    img.company-logo {
        display: block;
        margin: 0 auto 32px auto;
        width: 20rem;
        border-radius: 16px;
        box-shadow: 0 4px 24px rgba(0,63,140,0.15), 0 1.5px 8px rgba(0,63,140,0.10);
        background: #fff;
        border: 2px solid #e0e6f1;
        padding: 12px;
        object-fit: contain;
    }
    button, .export-link, input[type="submit"] {
        width: 100%;
        padding: 12px 0;
        font-size: 1rem;
        margin-top: 10px;
    }
    #employeeList li {
        flex-direction: column;
        align-items: flex-start;
        font-size: 1rem;
    }
    #attendanceRecords table,
    #attendanceRecords thead,
    #attendanceRecords tbody,
    #attendanceRecords th,
    #attendanceRecords td,
    #attendanceRecords tr {
        display: block;
    }
    #attendanceRecords thead tr {
        display: none;
    }
    #attendanceRecords td {
        position: relative;
        padding-left: 50%;
        border: 1px solid #e0e6f1;
        text-align: left;
    }
    #attendanceRecords td:before {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 45%;
        white-space: nowrap;
        font-weight: bold;
        color: #003F8C;
        content: attr(data-label);
    }
}