*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;margin:0;color:#111;background:#f7fbff}
header{background:#02a773;color:white;padding:18px 16px}
header h1{margin:0;font-size:1.5rem}
header .sub{margin:6px 0 0;font-size:0.9rem;opacity:0.95}
.container{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:18px;max-width:1100px;margin:18px auto}
.form-section, .logs-section{background:white;padding:14px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,0.06)}
label{display:block;margin-bottom:8px;font-size:0.9rem}
input[type="text"], input[type="date"], input[type="number"], textarea{width:100%;padding:8px;border-radius:6px;border:1px solid #d6e6f0}
textarea{resize:vertical}
.buttons{display:flex;gap:8px;margin-top:8px}
button{background:#026aa7;color:white;border:none;padding:8px 10px;border-radius:6px;cursor:pointer}
button[aria-pressed="true"]{background:#014f73}
.logsList{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.logItem{padding:10px;border-radius:6px;border:1px solid #e1eef7;display:flex;gap:10px;align-items:flex-start}
.logMeta{flex:1}
.logMeta h3{margin:0;font-size:1rem}
.logMeta p{margin:4px 0;font-size:0.9rem;color:#214b6b}
.logActions{display:flex;flex-direction:column;gap:6px}
.small{font-size:0.85rem;color:#556b7a}
.actions{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.search{flex:1}
footer{padding:12px;text-align:center;color:#5b6b77;font-size:0.85rem}
@media (max-width:900px){.container{grid-template-columns:1fr}}
.logItem {
    transition: all 0.3s ease-in-out;
}
.logItem:hover {
    transform: scale(1.02);
    background-colour: #e0f7fa;
}
logItem {
  transition: all 0.3s ease-in-out;
}
.logItem:hover {
  transform: scale(1.02);
  background-color: #e0f7fa;
}