body { font-family: Arial, sans-serif; margin: 0 auto; padding: 0; width: 100%; overvlow-x: hidden;}
table { width: 100%; border-collapse: collapse; margin: 5px 0; font-size: 0.90rem;}
table, th, td { border: 1px solid #ddd; }
th, td { padding: 4px; text-align: left; }
th { background-color: #DCDCDC; }
button { padding: 4px 8px; background: #4CAF50; color: white; border: none; cursor: pointer;}
label { display: block; margin: 5px 0 1px; min-width: 80px; }
input, select { width: 100%; padding: 2px; margin-bottom: 3px; box-sizing: border-box; }
form { margin: 0px 0px; }
.btn { display: inline-block; padding: 4px 8px; background: #4CAF50; color: white;
       text-decoration: none; border-radius: 4px; margin-right: 2px; vertical-align: middle;
       cursor: pointer; border: 1px solid transparent; border-radius: 4px;
       transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.btn:hover {background-color: #0056b3; color: #ffffff; /* Ensures visibility */ }
.btn-primary {color: #fff; background-color: #007bff; border-color: #007bff; }
.btn-secondary {color: #fff; background-color: #6c757d; border-color: #6c757d; }
.btn-success { color: #fff; background-color: #28a745; border-color: #28a745; }
.btn-danger { color: #fff; background-color: #B6160A; border-color: #dc3545; }
.button-group { margin-top: 20px; display: flex; gap: 10px; }
.cancel-button { display: flex; background-color: #c82333; color: #fff; text-decoration: none; border: 1px solid #ccc; line-height: normal; gap: 10px;}
.btn-sm {padding: 0.25rem 0.5rem; font-size: 0.75rem; border-radius: 0.2rem;}
.flash-messages { padding: 10px; margin: 10px 0; background: #b9f2ff; border-radius: 4px; }
form { display: flex; flex-direction: column; gap: 2px;}
.form-row {display: flex; margin-bottom: 2px; align-items: center; gap: 2px}
.form-row label { flex: 0 0 80px; margin: 0;}
.form-row input,
.form-row textarea {flex: 1; padding: 4px; margin: 0; }                     /* Adjust as needed */
.form-row button {margin-left: 70px;}                           /* Should match width of label + margin-right */
.form-group { display: flex; align-items: center; gap: 10px; }
.small-text {font-size: 0.80rem;}
.header-container { text-align: center; background-color: #e0f0e0; padding: 2px; border-radius: 5px; margin-top: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
.header-container h2 {margin: 0; color: #333;}
.nav-container { display: flex;}
.profile-btn {margin-left: auto;}
textarea { width: 100%; min-height: 80px; height: 120px; box-sizing: border-box; resize: vertical; }
#is_admin { width: 30px;  padding: 5px;}
#is_admin + label { font-size: 0.9em; white-space: nowrap;  margin-left: 10px; }

/* Navigation Bar */
nav { background-color: #333; padding: 5px; }
nav ul { list-style-type: none; padding: 0; margin: 0; display: flex;}
nav ul li { margin: 0; padding: 0;}
nav ul li a { display: block; padding: 10px 20px; color: white; text-decoration: none;}
nav ul li a:hover { background-color: #555;}