/* General body and container styles */
:root{
  --primary:#2563eb;
  --muted:#f0eef0;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background-image: url(b.jpg);
    background-attachment: fixed;
    min-height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 0;
    padding: 10px;
    color: #222;
    box-sizing: border-box;
}
.wrap {
    max-width: 850px;
    margin: 20px auto;
    background: var(--muted);
    padding: 18px 24px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.grid-container {
    display: grid;
    grid-template-columns: 1fr auto;
    width: 100%;
}
.logo { grid-column: 2; display:flex; justify-content:flex-end; padding:8px 0; }
.logo img { width: 200px; height: auto; }

/* Headings */
h1 { color: teal; font-size: 1.6rem; margin: 0 0 8px 0; text-align:center; }
.card { margin-bottom: 12px; padding:8px 0; }

/* Form Layout */
.grid {
    display: grid;	
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: end;
}
.form-group { display:flex; flex-direction:column; }
label { font-size: 13px; margin-bottom:6px; color:#333; }
input[type="text"], input[type="number"], input[type="date"], select {
    width:100%; padding:9px 10px; border:1px solid #205cea; border-radius:6px; box-sizing:border-box;
}
.form-actions { display:flex; gap:8px; align-items:center; grid-column: span 1; }
button {
    padding:9px 12px; border:0; border-radius:6px; background:var(--primary); color:#ffffff; cursor:pointer;
}
button.ghost { background:#6b7280; }
button.btn-clear { background:darkred; color:#fff; }
button.small { padding:6px 8px; font-size:12px; }

/* Table */
.table-wrap { margin-top:16px; overflow-x:auto; border-radius:6px; background:#fff; padding:6px; }
table { width:100%; min-width:600px; border-collapse:collapse; font-size:13px; }
th, td { padding:8px 10px; border-bottom:1px solid #187870; text-align:left; white-space:nowrap; }
th { background:#5a8f74; color:#b10d54; position:sticky; top:0; z-index:10; }
td.right { text-align:right; }
.summary { margin-top:12px; font-weight:600; }

/* Misc */
.msg { color:green; margin-left:8px; display:none; }
.tamil-block { font-family: "Latha","Vijaya","Nirmala UI","Noto Sans Tamil","Tamil Sangam MN","Tamil MN","Arial Unicode MS",sans-serif; }
.controls { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.actions { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.btn-edit { background:orange; color:#fff; }
.delete-btn { background:#c32323; color:#fff; padding:6px 8px; border-radius:6px; border:0; cursor:pointer; }
@media (max-width:640px){
  .grid { grid-template-columns: 1fr; }
  .logo img { width:120px; }
  th, td { font-size:12px; }
}
.item-list {
    font-size: 12px;
    margin-top: 4px;
    color: #333;
    max-height: 100px;
    overflow-y: auto;
    background: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 6px;
}
.item-list span {
    display: inline-block;
    margin: 2px 4px;
    padding: 2px 6px;
    background: #2563eb;
    color: #6829f0;
    border-radius: 4px;
}
.table-wrap {
    max-height: 400px; /* Adjust the height as needed */
    overflow-y: auto;  /* Enables vertical scroll */
    border: 1px solid #a51212;
    margin-top: 1rem;
}

.table-wrap table {
    width: 100%;
    border-collapse: collapse;
}

.table-wrap th, 
.table-wrap td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.table-wrap thead th {
    position: sticky;
    top: 0;
    background: #f2f2f2; /* Header background */
    z-index: 1;
}