From ab8f2dcae47d3d17d78821c9680d0276cab89754 Mon Sep 17 00:00:00 2001
From: nic <npatterson@marmicfire.com>
Date: Thu, 3 Apr 2025 10:30:54 -0400
Subject: [PATCH] chore: updated css to use variables for easier management

---
 static/css/styles.css | 913 ++++++++++++------------------------------
 1 file changed, 247 insertions(+), 666 deletions(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index cc5e902..8e8a411 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1,11 +1,98 @@
+/* CSS Variables for theming */
+:root {
+  /* Base colors */
+  --bg-color: #f3f4f6;
+  --text-color: #2d3748;
+
+  /* Dashboard items */
+  --dashboard-bg: white;
+  --dashboard-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --dashboard-header-color: #2d3748;
+
+  /* Content panels */
+  --content-bg: #f3f4f6;
+  --content-border: 1px solid #e2e8f0;
+  --content-text: #2d3748;
+
+  /* Form elements */
+  --input-bg: white;
+  --input-border: 1px solid #cbd5e0;
+  --input-text: #4a5568;
+  --label-color: #4a5568;
+
+  /* Progress bar */
+  --progress-bg: #e2e8f0;
+  --progress-fill: #4299e1;
+
+  /* Sidebar */
+  --sidebar-bg: #1f2937;
+  --sidebar-text: white;
+  --sidebar-hover: #374151;
+
+  /* Buttons */
+  --btn-primary-bg: #4299e1;
+  --btn-primary-hover: #2b6cb0;
+  --btn-warning-bg: #ef4444;
+  --btn-warning-hover: #dc2626;
+  --btn-caution-bg: #eab308;
+  --btn-caution-hover: #ca8a04;
+  --btn-success-bg: #22c55e;
+  --btn-success-hover: #16a34a;
+  --btn-disabled: #9ca3af;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Base colors */
+    --bg-color: #121212;
+    --text-color: #e5e7eb;
+
+    /* Dashboard items */
+    --dashboard-bg: #1e1e2e;
+    --dashboard-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    --dashboard-header-color: #e2e8f0;
+
+    /* Content panels */
+    --content-bg: #2a2a40;
+    --content-border: none;
+    --content-text: white;
+
+    /* Form elements */
+    --input-bg: #374151;
+    --input-border: 1px solid #4b5563;
+    --input-text: white;
+    --label-color: #e2e8f0;
+
+    /* Progress bar */
+    --progress-bg: #3b3b53;
+    --progress-fill: #4299e1;
+
+    /* Sidebar */
+    --sidebar-bg: #121220;
+    --sidebar-text: #e5e7eb;
+    --sidebar-hover: #374151;
+
+    /* Buttons */
+    --btn-primary-bg: #4299e1;
+    --btn-primary-hover: #2563eb;
+    --btn-warning-bg: #f87171;
+    --btn-warning-hover: #e11d48;
+    --btn-caution-bg: #f59e0b;
+    --btn-caution-hover: #d97706;
+    --btn-success-bg: #34d399;
+    --btn-success-hover: #059669;
+    --btn-disabled: #9ca3af;
+  }
+}
+
 /* General reset and body setup */
 body,
 html {
   margin: 0;
   height: 100%;
   font-family: Arial, sans-serif;
-  background-color: #f3f4f6;
-  /* similar to bg-gray-100 */
+  background-color: var(--bg-color);
+  color: var(--text-color);
 }
 
 .flex {
@@ -25,7 +112,7 @@ html {
 }
 
 .bg-gray {
-  background-color: #f3f4f6;
+  background-color: var(--bg-color);
 }
 
 /* Container setup for dashboard */
@@ -39,10 +126,8 @@ html {
 /* Sidebar styles */
 .sidebar {
   width: 16rem;
-  /* Fixed width for sidebar */
-  background-color: #1f2937;
-  /* Dark background */
-  color: white;
+  background-color: var(--sidebar-bg);
+  color: var(--sidebar-text);
   padding: 1rem;
   display: flex;
   flex-direction: column;
@@ -59,7 +144,7 @@ html {
 }
 
 .sidebar a {
-  color: white;
+  color: var(--sidebar-text);
   text-decoration: none;
   padding: 0.5rem 0;
   display: block;
@@ -68,31 +153,26 @@ html {
 }
 
 .sidebar a:hover {
-  background-color: #374151;
-  /* Slightly lighter on hover */
+  background-color: var(--sidebar-hover);
 }
 
 /* Main content area for dashboard */
 .main-content {
   flex-grow: 1;
-  /* Take up remaining space */
   padding: 2rem;
   display: flex;
   flex-direction: column;
   overflow-y: auto;
-  /* Allow scrolling if needed */
 }
 
 .header {
   display: flex;
   justify-content: flex-end;
-  /* Align logout button to the right */
   margin-bottom: 2rem;
 }
 
 .logout-btn {
-  background-color: #ef4444;
-  /* Red button */
+  background-color: var(--btn-warning-bg);
   color: white;
   padding: 0.5rem 1rem;
   border: none;
@@ -101,93 +181,74 @@ html {
 }
 
 .logout-btn:hover {
-  background-color: #dc2626;
-  /* Darker red on hover */
+  background-color: var(--btn-warning-hover);
 }
 
 .content {
-  background-color: #f9fafb;
+  background-color: var(--content-bg);
+  color: var(--content-text);
   padding: 1.5rem;
-  border: 1px solid #e2e8f0;
-  /* Subtle border for definition */
+  border: var(--content-border);
   border-radius: 0.5rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--dashboard-shadow);
   flex-grow: 1;
   overflow-y: auto;
-  /* Ensure content area can scroll */
 }
 
 /* Login Container */
 .login-container {
-  background-color: white;
+  background-color: var(--dashboard-bg);
   padding: 2rem;
   border-radius: 0.5rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  /* Similar to shadow-md */
+  box-shadow: var(--dashboard-shadow);
   width: 24rem;
-  /* similar to w-96 */
 }
 
 .login-title {
   font-size: 1.75rem;
-  /* similar to text-2xl */
   font-weight: bold;
   margin-bottom: 0.5rem;
-  /* similar to mb-6 */
   text-align: center;
-  color: #2d3748;
-  /* similar to text-gray-800 */
+  color: var(--dashboard-header-color);
 }
 
 .login-subtitle {
   font-size: 1.25rem;
-  /* Size between h2 and h3 */
   font-weight: normal;
-  /* Lighter weight to distinguish from the title */
   margin-bottom: 1.5rem;
-  /* Adjust spacing below subtitle */
   text-align: center;
-  color: #4a5568;
-  /* A slightly lighter color than the title */
+  color: var(--label-color);
 }
 
 /* Input Fields */
 .input-group {
   margin-bottom: 1rem;
-  /* similar to mb-4 */
 }
 
 .input-group label {
   display: block;
-  color: #4a5568;
-  /* similar to text-gray-700 */
+  color: var(--label-color);
   font-size: 0.875rem;
-  /* similar to text-sm */
   font-weight: bold;
   margin-bottom: 0.5rem;
-  /* similar to mb-2 */
 }
 
 .input-field {
   width: 100%;
   padding: 0.5rem;
-  border: 1px solid #cbd5e0;
-  /* similar to border */
+  border: var(--input-border);
   border-radius: 0.25rem;
-  /* similar to rounded */
-  color: #4a5568;
-  /* similar to text-gray-700 */
+  background-color: var(--input-bg);
+  color: var(--input-text);
   font-size: 1rem;
   line-height: 1.5;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0);
-  /* resets shadow */
   transition: box-shadow 0.15s ease-in-out;
 }
 
 .input-field:focus {
   outline: none;
   box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
-  /* similar to focus:shadow-outline */
 }
 
 /* Inline input group for horizontal layout */
@@ -195,57 +256,43 @@ html {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
-  /* Spacing between inputs */
 }
 
 .inline-input-group .input-group {
   flex: 1;
-  /* Distribute space evenly */
   min-width: 150px;
-  /* Minimum width for smaller screens */
 }
 
 .card-input {
-  width: 95%;
-  /* Adjust size as needed */
-  padding: 0.25rem 0.5rem;
-  /* Smaller padding */
-  border: 1px solid #cbd5e0;
-  /* Light border */
-  border-radius: 0.375rem;
-  /* Slightly rounded corners */
-  background-color: #ffffff;
-  /* White background */
-  color: #4a5568;
-  /* Text color matching theme */
+  width: 100%;
+  padding: 0.5rem;
+  border: var(--input-border);
+  border-radius: 0.25rem;
+  background-color: var(--input-bg);
+  color: var(--input-text);
   font-size: 0.875rem;
-  /* Slightly smaller font size */
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  /* Subtle shadow */
   transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
+  margin-bottom: 0.75rem;
 }
 
 .card-input:focus {
   outline: none;
-  border-color: #4299e1;
-  /* Focused blue border */
+  border-color: var(--btn-primary-bg);
   box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
-  /* Blue shadow */
 }
 
-
 /* Form Footer */
 .form-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 1rem;
-  /* similar to mb-6 */
 }
 
+/* Button styles */
 .btn-primary {
-  background-color: #4299e1;
-  /* similar to bg-blue-500 */
+  background-color: var(--btn-primary-bg);
   color: white;
   padding: 0.5rem 1rem;
   border-radius: 0.25rem;
@@ -256,22 +303,81 @@ html {
 }
 
 .btn-primary:hover {
-  background-color: #2b6cb0;
-  /* similar to hover:bg-blue-700 */
+  background-color: var(--btn-primary-hover);
+}
+
+.warning-button {
+  background-color: var(--btn-warning-bg);
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  margin-bottom: 1rem;
+}
+
+.warning-button:hover {
+  background-color: var(--btn-warning-hover);
+}
+
+.warning-button:disabled {
+  background-color: var(--btn-disabled);
+  cursor: not-allowed;
+}
+
+.caution-button {
+  background-color: var(--btn-caution-bg);
+  color: #1f2937;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  margin-bottom: 1rem;
+}
+
+.caution-button:hover {
+  background-color: var(--btn-caution-hover);
+}
+
+.caution-button:disabled {
+  background-color: var(--btn-disabled);
+  cursor: not-allowed;
+}
+
+.success-button {
+  background-color: var(--btn-success-bg);
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  margin-bottom: 1rem;
+}
+
+.success-button:hover {
+  background-color: var(--btn-success-hover);
+}
+
+.success-button:disabled {
+  background-color: var(--btn-disabled);
+  cursor: not-allowed;
 }
 
 .forgot-password {
-  color: #4299e1;
-  /* similar to text-blue-500 */
+  color: var(--btn-primary-bg);
   font-size: 0.875rem;
-  /* similar to text-sm */
   font-weight: bold;
   text-decoration: none;
 }
 
 .forgot-password:hover {
-  color: #2b6cb0;
-  /* similar to hover:text-blue-800 */
+  color: var(--btn-primary-hover);
 }
 
 /* Login Message */
@@ -279,6 +385,7 @@ html {
   margin-top: 1rem;
   text-align: center;
   font-size: 0.875rem;
+  color: var(--label-color);
 }
 
 /* Dashboard-specific styles */
@@ -290,87 +397,96 @@ html {
 }
 
 .dashboard-item {
-  background-color: white;
+  background-color: var(--dashboard-bg);
   padding: 1rem;
   border-radius: 0.5rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--dashboard-shadow);
 }
 
-.dashboard-item h3 {
+.dashboard-item h2 {
+  color: var(--dashboard-header-color);
   margin-top: 0;
   margin-bottom: 1rem;
 }
 
-/* New styles for jobs submenu */
-.submenu-container {
-  margin-bottom: 2rem;
+.dashboard-item .content {
+  background-color: var(--content-bg);
+  color: var(--content-text);
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  margin-bottom: 1rem;
+  border: var(--content-border);
 }
 
-.submenu-header {
-  font-size: 1.5rem;
+.dashboard-item .submenu-header {
+  font-size: 1.25rem;
   font-weight: bold;
-  color: #2d3748;
   margin-bottom: 1rem;
+  color: var(--dashboard-header-color);
 }
 
-.submenu-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
+.dashboard-item .card-input {
+  width: 100%;
+  padding: 0.5rem;
+  border: var(--input-border);
+  border-radius: 0.25rem;
+  background-color: var(--input-bg);
+  color: var(--input-text);
+  font-size: 0.875rem;
+  margin-bottom: 0.75rem;
 }
 
-.submenu-item {
-  background-color: white;
-  border-radius: 0.5rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  padding: 1rem;
-  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+/* Document Upload Form Styling */
+.document-row {
+  margin-bottom: 1.5rem;
 }
 
-.submenu-item:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+.document-field {
+  margin-bottom: 1rem;
 }
 
-.submenu-title {
-  font-size: 1.25rem;
-  font-weight: bold;
-  color: #4a5568;
+.document-field label {
+  display: block;
   margin-bottom: 0.5rem;
+  color: var(--label-color);
 }
 
-/* Style for lists within submenu items */
-.submenu-item ul {
-  list-style-type: none;
-  padding-left: 0;
-  margin-top: 0.5rem;
+.document-field-row {
+  display: flex;
+  gap: 1.5rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
-.submenu-item li {
-  font-size: 0.875rem;
-  color: #718096;
-  padding: 0.25rem 0;
+.document-name-field {
+  flex: 3;
 }
 
-/* Style for buttons or links within submenu items */
-.submenu-item a,
-.submenu-item button {
-  display: inline-block;
-  background-color: #4299e1;
-  color: white;
-  padding: 0.5rem 1rem;
+.document-type-field {
+  flex: 2;
+}
+
+#add-document {
+  margin-top: 1rem;
+}
+
+/* Progress bar styling */
+.progress {
+  background-color: var(--progress-bg);
+  height: 1rem;
   border-radius: 0.25rem;
-  text-decoration: none;
-  font-size: 0.875rem;
-  font-weight: bold;
-  transition: background-color 0.2s;
-  border: none;
-  cursor: pointer;
+  overflow: hidden;
+  margin: 0.5rem 0;
 }
 
-.submenu-item a:hover,
-.submenu-item button:hover {
-  background-color: #2b6cb0;
+.progress-bar {
+  height: 100%;
+  background-color: var(--progress-fill);
+  transition: width 0.3s ease;
+}
+
+#upload-progress {
+  margin-top: 1rem;
 }
 
 /* Style for error and not-found message display */
@@ -447,8 +563,8 @@ html {
 .loading-indicator {
   width: 1.5rem;
   height: 1.5rem;
-  border: 0.25rem solid #e2e8f0;
-  border-top: 0.25rem solid #4299e1;
+  border: 0.25rem solid var(--progress-bg);
+  border-top: 0.25rem solid var(--progress-fill);
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin-right: 0.5rem;
@@ -473,539 +589,4 @@ html {
 
 .highlight-change {
   animation: highlightBackground 2s ease-in-out;
-}
-
-/* You better be sure you wanna do this button styles */
-.warning-button {
-  background-color: #ef4444;
-  color: white;
-  border: none;
-  padding: 0.5rem 1rem;
-  border-radius: 0.25rem;
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  margin-bottom: 1rem;
-}
-
-.warning-button:hover {
-  background-color: #dc2626;
-}
-
-.warning-button:disabled {
-  background-color: #9ca3af;
-  cursor: not-allowed;
-}
-
-/* Pretty sure you wanna do this but lets think about it again button styles */
-.caution-button {
-  background-color: #eab308;
-  color: #1f2937;
-  border: none;
-  padding: 0.5rem 1rem;
-  border-radius: 0.25rem;
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  margin-bottom: 1rem;
-}
-
-.caution-button:hover {
-  background-color: #ca8a04;
-}
-
-.caution-button:disabled {
-  background-color: #9ca3af;
-  cursor: not-allowed;
-}
-
-/* This button is harmless button styles */
-.success-button {
-  background-color: #22c55e;
-  color: white;
-  border: none;
-  padding: 0.5rem 1rem;
-  border-radius: 0.25rem;
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  margin-bottom: 1rem;
-}
-
-.success-button:hover {
-  background-color: #16a34a;
-}
-
-.success-button:disabled {
-  background-color: #9ca3af;
-  cursor: not-allowed;
-}
-
-@media (prefers-color-scheme: dark) {
-
-  /* General reset and body setup */
-  body,
-  html {
-    margin: 0;
-    height: 100%;
-    font-family: Arial, sans-serif;
-    background-color: #1e1e2e;
-    /* Dark background */
-    color: #e5e7eb;
-    /* Light text */
-  }
-
-  .flex {
-    display: flex;
-  }
-
-  .h-screen {
-    height: 100vh;
-  }
-
-  /* Flexbox centering for login */
-  .flex-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-  }
-
-  .bg-gray {
-    background-color: #2a2a40;
-    /* Dark gray */
-  }
-
-  /* Container setup for dashboard */
-  .container {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    height: 100vh;
-  }
-
-  /* Sidebar styles */
-  .sidebar {
-    width: 16rem;
-    /* Fixed width for sidebar */
-    background-color: #121220;
-    /* Darker background */
-    color: #e5e7eb;
-    /* Light text */
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .sidebar .title {
-    font-size: 1.5rem;
-    font-weight: bold;
-    margin-bottom: 1.5rem;
-  }
-
-  .sidebar ul {
-    list-style-type: none;
-  }
-
-  .sidebar a {
-    color: #e5e7eb;
-    text-decoration: none;
-    padding: 0.5rem 0;
-    display: block;
-    margin-bottom: 0.5rem;
-    border-radius: 0.25rem;
-  }
-
-  .sidebar a:hover {
-    background-color: #374151;
-    /* Slightly lighter on hover */
-  }
-
-  /* Main content area for dashboard */
-  .main-content {
-    flex-grow: 1;
-    /* Take up remaining space */
-    padding: 2rem;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    /* Allow scrolling if needed */
-  }
-
-  .header {
-    display: flex;
-    justify-content: flex-end;
-    /* Align logout button to the right */
-    margin-bottom: 2rem;
-  }
-
-  .logout-btn {
-    background-color: #f87171;
-    /* Red button */
-    color: white;
-    padding: 0.5rem 1rem;
-    border: none;
-    border-radius: 0.25rem;
-    cursor: pointer;
-  }
-
-  .logout-btn:hover {
-    background-color: #e11d48;
-    /* Darker red on hover */
-  }
-
-  .content {
-    background-color: #2e2e42;
-    /* Dark content background */
-    border: 1px solid #303046;
-    /* Subtle border for definition */
-    padding: 1.5rem;
-    border-radius: 0.5rem;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-    flex-grow: 1;
-    overflow-y: auto;
-    /* Ensure content area can scroll */
-  }
-
-  /* Login Container */
-  .login-container {
-    background-color: #2e2e42;
-    padding: 2rem;
-    border-radius: 0.5rem;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-    width: 24rem;
-  }
-
-  .login-title {
-    font-size: 1.75rem;
-    font-weight: bold;
-    margin-bottom: 0.5rem;
-    text-align: center;
-    color: #e5e7eb;
-  }
-
-  .login-subtitle {
-    font-size: 1.25rem;
-    font-weight: normal;
-    margin-bottom: 1.5rem;
-    text-align: center;
-    color: #9ca3af;
-    /* Slightly lighter than title */
-  }
-
-  /* Input Fields */
-  .input-group {
-    margin-bottom: 1rem;
-  }
-
-  .input-group label {
-    display: block;
-    color: #9ca3af;
-    /* Gray text */
-    font-size: 0.875rem;
-    font-weight: bold;
-    margin-bottom: 0.5rem;
-  }
-
-  .input-field {
-    width: 100%;
-    padding: 0.5rem;
-    border: 1px solid #4b5563;
-    /* Dark border */
-    border-radius: 0.25rem;
-    background-color: #3b3b53;
-    color: #e5e7eb;
-    font-size: 1rem;
-    line-height: 1.5;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0);
-    transition: box-shadow 0.15s ease-in-out;
-  }
-
-  .input-field:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
-    /* Blue focus */
-  }
-
-  .card-input {
-    background-color: #2e2e42;
-    /* Dark background */
-    border: 1px solid #4b5563;
-    /* Darker border */
-    color: #e5e7eb;
-    /* Light text color */
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-    /* Stronger shadow */
-  }
-
-  .card-input:focus {
-    border-color: #4299e1;
-    /* Focused blue border */
-    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
-    /* Blue shadow */
-  }
-
-  /* Form Footer */
-  .form-footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 1rem;
-  }
-
-  .btn-primary {
-    background-color: #4299e1;
-    /* Blue button */
-    color: white;
-    padding: 0.5rem 1rem;
-    border-radius: 0.25rem;
-    border: none;
-    font-weight: bold;
-    cursor: pointer;
-    transition: background-color 0.2s;
-  }
-
-  .btn-primary:hover {
-    background-color: #2563eb;
-    /* Darker blue on hover */
-  }
-
-  .forgot-password {
-    color: #4299e1;
-    font-size: 0.875rem;
-    font-weight: bold;
-    text-decoration: none;
-  }
-
-  .forgot-password:hover {
-    color: #2563eb;
-  }
-
-  /* Login Message */
-  .login-message {
-    margin-top: 1rem;
-    text-align: center;
-    font-size: 0.875rem;
-    color: #9ca3af;
-  }
-
-  /* Dashboard-specific styles */
-  .dashboard-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 1rem;
-    margin-top: 1rem;
-  }
-
-  .dashboard-item {
-    background-color: #1e1e2e;
-    padding: 1rem;
-    border-radius: 0.5rem;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-  }
-
-  .dashboard-item h3 {
-    margin-top: 0;
-    margin-bottom: 1rem;
-    color: #e5e7eb;
-  }
-
-  /* New styles for jobs submenu */
-  .submenu-container {
-    margin-bottom: 2rem;
-  }
-
-  .submenu-header {
-    font-size: 1.5rem;
-    font-weight: bold;
-    color: #e5e7eb;
-    margin-bottom: 1rem;
-  }
-
-  .submenu-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 1rem;
-  }
-
-  .submenu-item {
-    background-color: #3b3b53;
-    border-radius: 0.5rem;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-    padding: 1rem;
-    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
-  }
-
-  .submenu-item:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-  }
-
-  .submenu-title {
-    font-size: 1.25rem;
-    font-weight: bold;
-    color: #9ca3af;
-    margin-bottom: 0.5rem;
-  }
-
-  /* Style for lists within submenu items */
-  .submenu-item ul {
-    list-style-type: none;
-    padding-left: 0;
-    margin-top: 0.5rem;
-  }
-
-  .submenu-item li {
-    font-size: 0.875rem;
-    color: #a0aec0;
-    padding: 0.25rem 0;
-  }
-
-  /* Style for buttons or links within submenu items */
-  .submenu-item a,
-  .submenu-item button {
-    display: inline-block;
-    background-color: #4299e1;
-    color: white;
-    padding: 0.5rem 1rem;
-    border-radius: 0.25rem;
-    text-decoration: none;
-    font-size: 0.875rem;
-    font-weight: bold;
-    transition: background-color 0.2s;
-    border: none;
-    cursor: pointer;
-  }
-
-  .submenu-item a:hover,
-  .submenu-item button:hover {
-    background-color: #2563eb;
-  }
-
-  /* Style for error and not-found message display */
-  .error,
-  .not-found {
-    text-align: center;
-    padding: 0.75rem;
-    border-radius: 0.25rem;
-    font-size: 0.875rem;
-    margin-top: 0.5rem;
-    animation: fadeIn 0.3s ease-in-out;
-  }
-
-  .error {
-    background-color: #fee2e2;
-    border: 1px solid #f87171;
-    color: #e11d48;
-  }
-
-  .not-found {
-    background-color: #fef3c7;
-    border: 1px solid #f59e0b;
-    color: #92400e;
-  }
-
-  .error::before,
-  .not-found::before {
-    margin-right: 0.5rem;
-  }
-
-  .error::before {
-    content: "⚠️";
-  }
-
-  .not-found::before {
-    content: "🔍";
-  }
-
-  /* Loading indicator */
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  .loading-indicator {
-    width: 1.5rem;
-    height: 1.5rem;
-    border: 0.25rem solid #4a5568;
-    border-top: 0.25rem solid #4299e1;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    margin-right: 0.5rem;
-  }
-
-  /* Fade effect for existing content */
-  .htmx-request .fade-me-out {
-    opacity: 0.5;
-    transition: opacity 0.3s ease-in-out;
-  }
-
-  /* Highlight effect for changed content */
-  @keyframes highlightBackground {
-    0% {
-      background-color: #fef3c7;
-    }
-
-    100% {
-      background-color: transparent;
-    }
-  }
-
-  .highlight-change {
-    animation: highlightBackground 2s ease-in-out;
-  }
-
-  /* Button styles */
-  .warning-button {
-    background-color: #f87171;
-    color: white;
-    border: none;
-    padding: 0.5rem 1rem;
-    border-radius: 0.25rem;
-    font-size: 0.875rem;
-    cursor: pointer;
-    transition: background-color 0.2s;
-    margin-bottom: 1rem;
-  }
-
-  .warning-button:hover {
-    background-color: #e11d48;
-  }
-
-  .caution-button {
-    background-color: #f59e0b;
-    color: #1f2937;
-    border: none;
-    padding: 0.5rem 1rem;
-    border-radius: 0.25rem;
-    font-size: 0.875rem;
-    cursor: pointer;
-    transition: background-color 0.2s;
-    margin-bottom: 1rem;
-  }
-
-  .caution-button:hover {
-    background-color: #d97706;
-  }
-
-  .success-button {
-    background-color: #34d399;
-    color: white;
-    border: none;
-    padding: 0.5rem 1rem;
-    border-radius: 0.25rem;
-    font-size: 0.875rem;
-    cursor: pointer;
-    transition: background-color 0.2s;
-    margin-bottom: 1rem;
-  }
-
-  .success-button:hover {
-    background-color: #059669;
-  }
 }
\ No newline at end of file