:root {
 --brand: #2f8f2f; /* primary green */
 --brand-dark: #1f6f1f;
 --muted: #6c757d;
 --bg: #ffffff; /* mostly white */
 --card-bg: #ffffff;
 --accent: #eaf6ea; /* light green accent */
}

html {
 font-size:14px;
}

@media (min-width:768px) {
 html {
 font-size:16px;
 }
}

body {
 background: linear-gradient(180deg, #ffffff0%, #f6fbf6100%);
 margin-bottom:60px;
 color: #0b0b0b; /* more black-ish text */
 -webkit-font-smoothing: antialiased;
 /* removed global padding-bottom; only add when footer is fixed */
}

/* Navbar tweaks */
.navbar-brand {
 font-weight:700;
 color: var(--brand) !important;
}
.navbar .nav-link {
 color: rgba(0,0,0,.75) !important;
}

/* Hero */
.hero {
 background: linear-gradient(90deg, rgba(47,143,47,0.06), rgba(47,143,47,0.02));
 border-radius:8px;
 padding:28px;
 margin-bottom:20px;
}
.hero h1 {
 margin:0;
 font-size:1.9rem;
 color: #0b3f0b; /* dark green text for headings */
}
.hero p.lead {
 margin:0;
 color: var(--muted);
}

/* Card style for forms and lists */
.card-soft {
 background: var(--card-bg);
 border-radius:8px;
 padding:18px;
 box-shadow:06px18px rgba(12,50,12,0.04);
 margin-bottom:18px;
}

.login-card {
 padding:22px;
 border:1px solid #e6efe6; /* add border */
 border-radius:10px;
 background: #fff; /* ensure white */
 box-shadow:06px18px rgba(12,50,12,0.05);
}

/* Ensure cards have extra bottom spacing so last card doesn't get too close to footer */
.card-soft, .login-card {
 margin-bottom:36px; /* enough space so last card isn't near footer */
}

.form-inline-row {
 display: flex;
 gap:12px;
 align-items: center;
}
.form-inline-row .form-control {
 flex:1;
}

/* Inputs & buttons */
.form-control {
 border-radius:6px;
 border:1px solid #e6efe6;
 padding:10px12px;
 background: #fff;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
 -webkit-box-shadow:0001000px #fff inset !important;
 box-shadow:0001000px #fff inset !important;
 -webkit-text-fill-color: #000 !important;
}

.btn-primary {
 background: var(--brand);
 border-color: var(--brand);
 padding:8px14px;
 border-radius:6px;
 color: #fff;
}
.btn-primary:hover {
 background: var(--brand-dark);
 border-color: var(--brand-dark);
}

.btn-success {
 background: #2e7d32; /* stronger green for actions */
 border-color: #2e7d32;
 color: #fff;
}
.btn-success:hover {
 background: #235f24;
 border-color: #235f24;
}

/* Table improvements: keep responsive via horizontal scroll on small screens */
.table-responsive {
 margin-bottom:20px;
 overflow-x: auto;
}

/* Footer: keep static to avoid overlay on any mobile portrait. Do not fix footer. */
footer.footer {
 position: static !important;
 padding:10px0;
 background: rgba(255,255,255,0.95);
 box-shadow:0 -1px0 rgba(0,0,0,0.04);
 font-size:0.9rem;
}

/* Remove any fixed-footer rules and any body padding that were causing layout issues */
@media (min-width:1200px) {
 /* still keep static by default; if you want fixed on very large screens re-enable later */
}

/* Remove aggressive main/container bottom padding on mobile */
@media (max-width:767px) {
 main[role="main"], .container {
 padding-bottom:20px; /* small safe padding only */
 }
}

/* Mobile card tweaks: keep cards readable but compact so footer doesn't appear large relative to content */
@media (max-width:576px) and (orientation: portrait) {
 .table tbody tr {
 display: block;
 margin-bottom:18px;
 border-radius:8px;
 padding:10px;
 background: #fff;
 border:1px solid #eef7ee;
 }
 .table thead { display: none; }
 .table tbody td { display: block; padding:6px0; border: none; }
 .table tbody td:first-child { font-weight:600; }
 .btn { font-size:0.9rem; padding:6px10px; }
}

/* Focus styles */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
 box-shadow:0000.1rem rgba(47,143,47,0.18);
}

/* Responsive tweaks */
@media (max-width:576px) {
 .form-inline-row { flex-direction: column; }
 .hero h1 { font-size:1.4rem; }
}

/* Hover animation for devices with pointer/hover (desktop, laptops, some tablets) */
@media (hover: hover) and (pointer: fine) {
 .table tbody tr {
 will-change: transform, background-color, box-shadow;
 transition: background-color250ms cubic-bezier(.22,.9,.36,1),
 transform200ms cubic-bezier(.22,.9,.36,1),
 box-shadow200ms cubic-bezier(.22,.9,.36,1);
 }
 .table tbody tr:hover {
 background-color: #eaf7ea; /* subtle greenish hover for rows */
 transform: translateY(-3px);
 box-shadow:06px18px rgba(12,50,12,0.06);
 }
}

/* Fallback: ensure previous rule remains for other devices but without transform */
.table tr:hover {
 background: #f0fff0;
}