modification ui changes base pages,login, manus and from chnages and adding filds. V2 commit

static/css/add_itr.css

@@ -1,135 +1,155 @@
-body {
-    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-    background: #eef2f7;
+/* ================= RESET ================= */
+* {
     margin: 0;
-    padding: 40px;
-    color: #333;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Segoe UI", sans-serif;
 }
 
+body {
+    background-color: #f0f4ff;
+    /* very light blue background */
+}
+
+/* ================= CONTAINER ================= */
 .container {
-    max-width: 900px;
-    margin: auto;
-    background: #fff;
-    padding: 40px 50px;
-    border-radius: 12px;
-    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
-    transition: box-shadow 0.3s ease;
+    max-width: 90%;
+    margin: 20px 20px 20px 20px;
+    /* top margin to clear navbar */
+    background: white;
+    padding: 10%;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-.container:hover {
-    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
-}
-
-h2 {
+.no-record {
     text-align: center;
-    margin-bottom: 35px;
-    font-size: 30px;
-    color: #2c3e50;
-    font-weight: 700;
-    letter-spacing: 0.5px;
+    font-size: 18px;
+    margin-top: 20px;
+    color: #555;
+    padding: 15px;
+    background: #f9f9f9;
+    border-radius: 8px;
+    border: 1px solid #e0e0e0;
 }
 
-form {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 20px 30px;
+
+/* ================= FORM ================= */
+form label {
+    display: block;
+    margin-top: 10px;
+    font-weight: bold;
+    color: #000000;
+    /* dark blue text */
 }
 
+form input,
+form select {
+    width: 100%;
+    padding: 10px;
+    margin-top: 6px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    outline: none;
+}
+
+form input:focus,
+form select:focus {
+    border-color: #0056b3;
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+}
+
+.auto {
+    padding: 10px 12px;
+    border: 1px solid #ccd1d9;
+    border-radius: 6px;
+    font-size: 15px;
+    background-color: #d5edd7;
+    transition: all 0.25s ease-in-out;
+}
+
+/* ================= SUBMIT BUTTON (GREEN) ================= */
+button {
+    width: 60%;
+    margin-top: 20px;
+    margin-left: 20%;
+    padding: 12px 20px;
+    background-color: #28a745;
+    /* Bootstrap green */
+    color: #ffffff;
+    border: none;
+    cursor: pointer;
+    border-radius: 6px;
+    font-weight: 600;
+    font-size: 15px;
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+button:hover {
+    background-color: #218838;
+    /* Darker green on hover */
+    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.35);
+}
+
+button:active {
+    background-color: #1e7e34;
+}
+
+button:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.35);
+}
+
+/* ================= TABLE (if used in this page) ================= */
+.table-wrapper {
+    overflow-x: auto;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+th,
+td {
+    padding: 12px;
+    border: 1px solid #dee2e6;
+    text-align: right;
+    white-space: nowrap;
+}
+
+th {
+    background-color: #007bff;
+    color: white;
+    text-align: center;
+}
+
+tr:nth-child(even) {
+    background-color: #f0f8ff;
+}
+
+td:first-child,
+th:first-child {
+    text-align: left;
+}
+
+/* Full width rows (span 2 columns) */
 .form-group {
     display: flex;
     flex-direction: column;
 }
 
-label {
-    font-weight: 600;
-    margin-bottom: 8px;
-    color: #555;
-    font-size: 14px;
-    font-weight: bold;
-}
-
-input[type="number"] {
-    padding: 10px 12px;
-    border: 1px solid #ccd1d9;
-    border-radius: 6px;
-    font-size: 15px;
-    background-color: #fafafa;
-    transition: all 0.25s ease-in-out;
-}
-
-input[type="number"]:focus {
-    border-color: #007BFF;
-    background: #fff;
-    box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
-    outline: none;
-}
-
-button[type="submit"] {
+.form-group.full-width {
     grid-column: span 2;
-    margin-top: 25px;
-    padding: 15px;
-    background: linear-gradient(135deg, #007BFF, #0056b3);
-    border: none;
-    border-radius: 8px;
-    color: #fff;
-    font-size: 18px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: transform 0.2s, background 0.3s;
 }
 
-button[type="submit"]:hover {
-    background: linear-gradient(135deg, #0056b3, #00408f);
-    transform: translateY(-2px);
+/* Special case: two inputs inside one form-group */
+.form-group.inline-2 {
+    flex-direction: row;
+    gap: 15px;
 }
 
-/* Back button styling */
-.back-btn {
-    display: inline-block;
-    margin-bottom: 20px;
-    padding: 10px 18px;
-    background: #6c757d;
-    color: white;
-    font-size: 15px;
-    font-weight: 600;
-    border-radius: 6px;
-    text-decoration: none;
-    transition: background 0.3s ease;
-}
-
-.back-btn:hover {
-    background: #5a6268;
-}
-
-
-/* Style for Year Dropdown */
-select {
-    padding: 10px 5px;
-    border: 1px solid #ccd1d9;
-    border-radius: 6px;
-    font-size: 15px;
-    background-color: #fafafa;
-    transition: all 0.25s ease-in-out;
-    cursor: pointer;
-    height: 40px;
-}
-
-select:focus {
-    border-color: #007BFF;
-    background: #fff;
-    box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
-    outline: none;
-}
-
-
-
-/* Responsive */
-@media (max-width: 768px) {
-    form {
-        grid-template-columns: 1fr;
-    }
-
-    h2 {
-        font-size: 24px;
-    }
+.form-group.inline-2>div {
+    flex: 1;
 }