body {
    font-family: Arial;
    background: #f2f2f2;
    padding: 40px;
}

h1 { text-align: center; }

form {
    max-width: 400px;
    background: white;
    padding: 20px;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #ccc;
}

label { display: block; margin-top: 1rem;}
select, button { width: 100%; padding: 8px; margin-top: 5px; }
input{ width: 100%; padding: 8px; margin-top: 5px; box-sizing: border-box; }

button {
    background: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}
button:hover { background: #0056b3; }

/* Responsive enhancements */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Make forms fluid and readable on small screens */
form {
    width: 100%;
    box-sizing: border-box;
}

.top-actions {
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:flex-end;
    margin: 12px auto;
    max-width: 1100px;
    padding: 0 16px;
}

/* Tables: allow horizontal scrolling on small devices */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 auto;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

table {
    border-collapse: collapse;
    width: 100%;
    min-width: 600px; /* allows horizontal scroll on small screens */
}

th, td {
    padding: 8px 10px;
    text-align: left;
}

/* Responsive typography and spacing */
@media (max-width: 900px) {
    body { padding: 20px; }
    form { padding: 16px; }
    h1 { font-size: 1.4rem; }
}

@media (max-width: 600px) {
    body { padding: 12px; }
    h1 { font-size: 1.2rem; }
    .top-actions { justify-content: center; }
    /* Make form and controls larger/tappable */
    select, input, button { padding: 12px; }
    table { min-width: 480px; }
}

/* Small visual polish for buttons/links */
a.button, .btn {
    display:inline-block;
    padding:8px 12px;
    background:#007bff;
    color:#fff;
    text-decoration:none;
    border-radius:4px;
}

.muted { color:#666; }