body{
margin:0;
font-family:system-ui,-apple-system,Segoe UI,Roboto;
background:#0f172a;
color:#e2e8f0;
}

.container{
max-width:900px;
margin:auto;
padding:40px 20px;
}

.card{
background:#1e293b;
padding:30px;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,.3);
}

.card form {
    display: flex;
    flex-direction: column;
    align-items: center; /* center horizontally */
    max-width: 300px; /* keep form narrow */
    margin: auto; /* center inside card */
}

.card form input, 
.card form button {
    width: 100%; /* full width of form box */
    box-sizing: border-box;
    text-align: center; /* optional: text centered inside input */
}

.card form input {
    margin-bottom: 15px;
}
h1,h2,h3{
margin-top:0;
}

input{
width:100%;
padding:10px;
margin-top:5px;
margin-bottom:15px;
border-radius:6px;
border:none;
background:#334155;
color:white;
}

button{
background:#3b82f6;
border:none;
padding:10px 18px;
border-radius:6px;
color:white;
cursor:pointer;
}

button:hover{
background:#2563eb;
}

a{
color:#60a5fa;
text-decoration:none;
}

table{
width:100%;
border-collapse:seperate;
margin-top:20px;
}

table input {
    width: 100%;
    max-width: 300px;      /* keep inputs reasonable width */
    padding: 4px 6px;
    border: 1px solid transparent; /* no harsh border by default */
    border-radius: 4px;
    background-color: transparent; /* match the row */
    color: inherit; /* match the row text color */
    box-sizing: border-box;
    font-size: 14px;
}

table input.username {
    width: 120px;             /* shorter for username */
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: transparent;
    color: inherit;
    box-sizing: border-box;
    font-size: 14px;
}

table input.email {
    width: 220px;             /* wider for email */
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: transparent;
    color: inherit;
    box-sizing: border-box;
    font-size: 14px;
}

table input:focus {
    outline: none;
    border-color: #60a5fa;
    background-color: rgba(255,255,255,0.05);
}

/* Add subtle border on focus so user sees it’s editable */
table input:focus {
    outline: none;
    border-color: #60a5fa; /* light blue highlight */
    background-color: rgba(255,255,255,0.05); /* slight highlight on focus */
}

table tr:nth-child(even) {
    background-color: #1e293b; /* dark row */
}

table tr:nth-child(odd) {
    background-color: #111827; /* slightly darker row */
}

table td, table th {
    padding: 8px;
    vertical-align: middle;
    text-align: left;
}

.nav{
background:#1e293b;
padding:15px 20px;
display:flex;
justify-content:space-between;
}

.nav a{
margin-left:15px;
}

/* Container for input rows */
.create-user-form .form-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap; /* Wrap on smaller screens */
}

/* Inputs */
.create-user-form input {
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
    background-color: #1e293b; /* matches table row */
    color: #e2e8f0;
    font-size: 14px;
    flex: 1; /* Take equal space in the row */
    box-sizing: border-box;
}

/* Admin checkbox label */
.admin-checkbox {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Button */
.create-user-form button {
    padding: 6px 12px;
    border-radius: 4px;
    background-color: #3b82f6;
    color: white;
    border: none;
    cursor: pointer;
    flex: 1; /* button stretches to row width */
}

.create-user-form button:hover {
    background-color: #2563eb;
}