changes of ui in dropwon select opptions and bottun colours add

templates/mat_credit.html

@@ -7,68 +7,65 @@
 {% endblock %}
 
 {% block content %}
-<div class="container">
-    <div class="container">
-        <h2 style="text-align:center;">MAT Credit and Utilization Records</h2>
-        <!-- YEAR ADD CONTROLS -->
-        <div class="year-controls">
-            <select id="yearSelect">
-                <option value="">-- Select AY --</option>
-                {% for y in range(2001, 2026) %}
-                <option value="{{ y }}-{{ y+1 }}">{{ y }}-{{ y+1 }}</option>
-                {% endfor %}
-            </select>
-            <button onclick="addYearColumn()">➕ Add Year</button>
-        </div>
+<div class="container mat-container">
 
-        <!-- SCROLL WRAPPER -->
-        <div class="table-wrapper">
-            <table id="matTable">
-                <thead>
-                    <tr id="tableHeader">
-                        <th>AY</th>
-                        <th>MAT Credit</th>
-
-                        {% for y in added_years %}
-                        <th>Utilized {{ y }}</th>
-                        {% endfor %}
-
-                        <th>Balance</th>
-                        <th>Action</th>
-                    </tr>
-                </thead>
-
-                <tbody>
-                    {% for row in mat_rows %}
-                    <tr>
-                        <td contenteditable="true">{{ row.financial_year }}</td>
-                        <td><input value="{{ row.mat_credit }}"></td>
-
-                        {% for y in added_years %}
-                        <td>
-                            <input value="{{ utilization_map.get(row.id, {}).get(y, '') }}">
-                        </td>
-                        {% endfor %}
-
-                        <td><input value="{{ row.balance }}"></td>
-                        <td><button onclick="saveRow(this)">Save</button></td>
-                    </tr>
-                    {% endfor %}
-
-                </tbody>
-            </table>
-        </div>
-
-        <br>
-        <button onclick="addRow()">➕ Add Row</button>
-        <!-- <button onclick="saveAll()">💾 Save All</button> -->
+    <h2 class="page-title">MAT Credit and Utilization Records</h2>
 
+    <!-- YEAR ADD CONTROLS -->
+    <div class="year-controls">
+        <select id="yearSelect">
+            <option value="">-- Select AY --</option>
+            {% for y in range(2001, 2026) %}
+            <option value="{{ y }}-{{ y+1 }}">{{ y }}-{{ y+1 }}</option>
+            {% endfor %}
+        </select>
+        <button onclick="addYearColumn()">➕ Add Utilized Year</button>
     </div>
 
+    <!-- TABLE WRAPPER -->
+    <div class="table-wrapper">
+        <table id="matTable">
+            <thead>
+                <tr id="tableHeader">
+                    <th>AY</th>
+                    <th>MAT Credit</th>
+
+                    {% for y in added_years %}
+                    <th>Utilized {{ y }}</th>
+                    {% endfor %}
+
+                    <th>Balance</th>
+                    <th>Action</th>
+                </tr>
+            </thead>
+
+            <tbody>
+                {% for row in mat_rows %}
+                <tr>
+                    <td contenteditable="true">{{ row.financial_year }}</td>
+                    <td><input value="{{ row.mat_credit }}"></td>
+
+                    {% for y in added_years %}
+                    <td>
+                        <input value="{{ utilization_map.get(row.id, {}).get(y, '') }}">
+                    </td>
+                    {% endfor %}
+
+                    <td><input value="{{ row.balance }}"></td>
+                    <td><button onclick="saveRow(this)">Save</button></td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+
+    <div class="action-footer">
+        <button class="add-row-btn" onclick="addRow()">➕ Add New Row</button>
+    </div>
 
 </div>
+{% endblock %}
 
 {% block extra_js %}
 <script src="{{ url_for('static', filename='js/mat_credit.js') }}"></script>
-{% endblock %}
 {% endblock %}