Move css to separate files

Move css styles from `<style>` tags to `static/css/`.
More modularity.

static/css/csv_preview.css

@@ -0,0 +1,39 @@
+/* Custom styles for the preview page */
+.table-container {
+    overflow-x: auto;
+    margin-bottom: 2rem;
+    border: 1px solid #dee2e6;
+    border-radius: 0.25rem;
+}
+.table-valid-entries {
+    background-color: rgba(212, 237, 218, 0.1);
+}
+.table-invalid-entries {
+    background-color: rgba(248, 215, 218, 0.1);
+}
+[contenteditable="true"] {
+    padding: 0.5rem;
+    min-width: 100px;
+}
+[contenteditable="true"]:focus {
+    outline: 2px solid #86b7fe;
+    background-color: white;
+}
+.sticky-actions {
+    position: sticky;
+    bottom: 0;
+    background: white;
+    padding: 1rem 0;
+    border-top: 1px solid #dee2e6;
+    margin-top: 2rem;
+}
+.error-details {
+    background-color: #f8d7da;
+    border-left: 4px solid #dc3545;
+    padding: 1rem;
+    margin-bottom: 2rem;
+}
+.error-details summary {
+    font-weight: bold;
+    cursor: pointer;
+}

static/css/delete_page.css

@@ -0,0 +1,30 @@
+.delete-container {
+    max-width: 800px;
+    margin: 0 auto;
+}
+.preview-card {
+    background: white;
+    border-radius: 0.5rem;
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+}
+.attribute-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1rem;
+}
+.attribute-item {
+    padding: 0.75rem;
+    border-bottom: 1px solid #eee;
+}
+.attribute-label {
+    font-weight: 600;
+    color: #6c757d;
+}
+.sticky-actions {
+    position: sticky;
+    bottom: 0;
+    background: white;
+    padding: 1rem 0;
+    border-top: 1px solid #dee2e6;
+    margin-top: 2rem;
+}

static/css/form_page.css

@@ -0,0 +1,30 @@
+.form-container {
+    max-width: 1000px;
+    margin: 0 auto;
+}
+.form-card {
+    background: white;
+    border-radius: 0.5rem;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+}
+.form-field {
+    margin-bottom: 1.5rem;
+}
+.sticky-actions {
+    position: sticky;
+    bottom: 0;
+    background: white;
+    padding: 1rem 0;
+    border-top: 1px solid #dee2e6;
+    margin-top: 2rem;
+}
+.error-message {
+    color: #dc3545;
+    margin-bottom: 1.5rem;
+    padding: 0.75rem;
+    background-color: #f8d7da;
+    border-radius: 0.25rem;
+}
+select.form-control {
+    appearance: auto; /* Keep native select dropdown arrow */
+}

static/css/upload_page.css

@@ -0,0 +1,8 @@
+.upload-container {
+    max-width: 800px;
+    margin: 0 auto;
+}
+.error-details {
+    background-color: #f8d7da;
+    border-left: 4px solid #dc3545;
+}

static/css/view_table.css

@@ -0,0 +1,8 @@
+.table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    margin-bottom: 1rem;
+}
+.action-buttons {
+    white-space: nowrap;
+}

templates/csv_preview.html

@@ -7,47 +7,7 @@
     {% include 'favicon.html' %}
     <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/bootstrap-icons.min.css') }}" rel="stylesheet">
-    <style>
+    <link href="{{ url_for('static', filename='css/csv_preview.css') }}" rel="stylesheet">
-        /* Custom styles for the preview page */
-        .table-container {
-            overflow-x: auto;
-            margin-bottom: 2rem;
-            border: 1px solid #dee2e6;
-            border-radius: 0.25rem;
-        }
-        .table-valid-entries {
-            background-color: rgba(212, 237, 218, 0.1);
-        }
-        .table-invalid-entries {
-            background-color: rgba(248, 215, 218, 0.1);
-        }
-        [contenteditable="true"] {
-            padding: 0.5rem;
-            min-width: 100px;
-        }
-        [contenteditable="true"]:focus {
-            outline: 2px solid #86b7fe;
-            background-color: white;
-        }
-        .sticky-actions {
-            position: sticky;
-            bottom: 0;
-            background: white;
-            padding: 1rem 0;
-            border-top: 1px solid #dee2e6;
-            margin-top: 2rem;
-        }
-        .error-details {
-            background-color: #f8d7da;
-            border-left: 4px solid #dc3545;
-            padding: 1rem;
-            margin-bottom: 2rem;
-        }
-        .error-details summary {
-            font-weight: bold;
-            cursor: pointer;
-        }
-    </style>
 </head>
 <body>
     {% include 'header.html' %}

templates/delete.html

@@ -6,38 +6,7 @@
     {% include 'favicon.html' %}
     <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/bootstrap-icons.min.css') }}" rel="stylesheet">
-    <style>
+    <link href="{{ url_for('static', filename='css/delete_page.css') }}" rel="stylesheet">
-        .delete-container {
-            max-width: 800px;
-            margin: 0 auto;
-        }
-        .preview-card {
-            background: white;
-            border-radius: 0.5rem;
-            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-        }
-        .attribute-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            gap: 1rem;
-        }
-        .attribute-item {
-            padding: 0.75rem;
-            border-bottom: 1px solid #eee;
-        }
-        .attribute-label {
-            font-weight: 600;
-            color: #6c757d;
-        }
-        .sticky-actions {
-            position: sticky;
-            bottom: 0;
-            background: white;
-            padding: 1rem 0;
-            border-top: 1px solid #dee2e6;
-            margin-top: 2rem;
-        }
-    </style>
 </head>
 <body>
     {% include 'header.html' %}

templates/item_form.html

@@ -6,38 +6,7 @@
     {% include 'favicon.html' %}
     <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/bootstrap-icons.min.css') }}" rel="stylesheet">
-    <style>
+    <link href="{{ url_for('static', filename='css/form_page.css') }}" rel="stylesheet">
-        .form-container {
-            max-width: 1000px;
-            margin: 0 auto;
-        }
-        .form-card {
-            background: white;
-            border-radius: 0.5rem;
-            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
-        }
-        .form-field {
-            margin-bottom: 1.5rem;
-        }
-        .sticky-actions {
-            position: sticky;
-            bottom: 0;
-            background: white;
-            padding: 1rem 0;
-            border-top: 1px solid #dee2e6;
-            margin-top: 2rem;
-        }
-        .error-message {
-            color: #dc3545;
-            margin-bottom: 1.5rem;
-            padding: 0.75rem;
-            background-color: #f8d7da;
-            border-radius: 0.25rem;
-        }
-        select.form-control {
-            appearance: auto; /* Keep native select dropdown arrow */
-        }
-    </style>
 </head>
 <body>
     {% include 'header.html' %}

templates/upload.html

@@ -7,16 +7,7 @@
     {% include 'favicon.html' %}
     <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/bootstrap-icons.min.css') }}" rel="stylesheet">
-    <style>
+    <link href="{{ url_for('static', filename='css/upload_page.css') }}" rel="stylesheet">
-        .upload-container {
-            max-width: 800px;
-            margin: 0 auto;
-        }
-        .error-details {
-            background-color: #f8d7da;
-            border-left: 4px solid #dc3545;
-        }
-    </style>
 </head>
 <body>
     {% include 'header.html' %}

templates/viewList.html

@@ -6,17 +6,7 @@
     <title>View Inventory</title>
     {% include 'favicon.html' %}
     <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
-    <style>
+    <link href="{{ url_for('static', filename='static/css/view_table.css') }}" rel="stylesheet">
-        /* Minimal custom CSS for table responsiveness */
-        .table-container {
-            overflow-x: auto;
-            -webkit-overflow-scrolling: touch;
-            margin-bottom: 1rem;
-        }
-        .action-buttons {
-            white-space: nowrap;
-        }
-    </style>
 </head>
 <body>
     {% include 'header.html' %}