separation of css

templates/rooms/rooms.html

@@ -3,6 +3,10 @@
 
 {% block title %}Rooms - DocuPulse{% endblock %}
 
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/rooms.css') }}">
+{% endblock %}
+
 {% block content %}
 {{ header(
     title="Rooms",
@@ -128,42 +132,6 @@
     </div>
 </div>
 
-<style>
-.hover-shadow {
-    transition: all 0.3s ease;
-}
-
-.hover-shadow:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
-}
-
-.card {
-    border: none;
-    border-radius: 10px;
-}
-
-.card-footer {
-    padding: 1rem;
-}
-
-.btn {
-    border-radius: 5px;
-    font-weight: 500;
-    padding: 0.5rem 1rem;
-    transition: all 0.2s ease;
-}
-
-.btn:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.btn i {
-    font-size: 0.9em;
-}
-</style>
-
 {% block extra_js %}
 <script>
 // Debounce function