body{font-family:Arial,sans-serif;background:#111;color:#fff;margin:0;padding:25px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px}.box{background:#1c1c1c;padding:20px;border-radius:12px;margin-bottom:20px;border:1px solid #333}.btn,button{display:inline-block;background:#c58b2a;color:#fff;border:none;padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:bold;cursor:pointer}.btn-secondary{background:#444}.btn-danger{background:#b22222}input,select{padding:10px;border-radius:6px;border:1px solid #444;background:#2b2b2b;color:#fff;box-sizing:border-box}form.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}table{width:100%;border-collapse:collapse;background:#1c1c1c}th,td{padding:12px;border-bottom:1px solid #333;text-align:left;vertical-align:top}th{background:#222}.cards{display:flex;gap:12px;flex-wrap:wrap}.card{background:#222;padding:15px 20px;border-radius:10px;border:1px solid #333;min-width:140px}.card strong{display:block;color:#c58b2a;font-size:24px;margin-top:5px}.error{background:#4a1d1d;color:#ffd6d6;padding:10px;border-radius:8px;margin-bottom:15px}.success{background:#1d4a24;color:#d6ffd6;padding:10px;border-radius:8px;margin-bottom:15px}.nav{display:flex;gap:10px;flex-wrap:wrap}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center}.login-box{background:#1c1c1c;padding:30px;border-radius:12px;width:100%;max-width:400px;box-shadow:0 10px 30px rgba(0,0,0,.3)}.login-box input{width:100%;margin-bottom:15px}.calendar-dot{display:inline-block;padding:4px 8px;border-radius:20px;background:#333;margin:2px;font-size:12px}.Annual{background:#007bff}.Sick{background:#dc3545}.Family{background:#28a745}.Unpaid{background:#6c757d}.Partial_Annual{background:#6f42c1}
small{
    display:block;
    color:#aaa;
    margin-top:4px;
    margin-bottom:6px;
    font-size:12px;
    line-height:1.4;
}

label{
    font-weight:bold;
    display:block;
    margin-bottom:5px;
}
form.grid > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

form.grid input,
form.grid select {
    width: 100%;
}

form.grid label {
    font-weight: bold;
    margin-bottom: 2px;
}

form.grid small {
    color: #aaa;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 6px;
}

.box {
    max-width: 1100px;
}
.field-row4.hours-start {
    grid-column: 1 / 2 !important;
}

.field-row3:nth-of-type(9) {
    grid-column: span 1 !important;
}

.field-row4.hours-start::before {
    content: "";
    display: block;
}

.employee-form .hours-start {
    grid-column-start: 1 !important;
}
.employee-form {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
}

.employee-form > div {
    display: flex !important;
    flex-direction: column !important;
}

.employee-form input,
.employee-form select {
    width: 100% !important;
}

.field-row1 {
    grid-column: span 1;
}

.field-row2 {
    grid-column: 1 / -1;
    max-width: 260px;
}

.field-row3 {
    grid-column: span 1;
}

.field-row4 {
    grid-column: span 1;
}

.field-row4.hours-start {
    grid-column: 1 / 2 !important;
}

.employee-form button {
    grid-column: 1 / -1;
    width: 220px;
    height: 50px;
    margin-top: 10px;
}

@media (max-width: 900px) {
    .employee-form {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .field-row2 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .employee-form {
        grid-template-columns: 1fr !important;
    }

    .employee-form button {
    grid-column: 1 / -1;
    width: 220px;
    height: 50px;
    margin-top: 10px;
    }
}