changes of ui in dropwon select opptions and bottun colours add

static/css/index.css

@@ -1,4 +1,4 @@
-/* RESET */
+/* ================= RESET ================= */
 * {
     margin: 0;
     padding: 0;
@@ -11,13 +11,12 @@ body {
     display: flex;
 }
 
-/* NAVBAR */
+/* ================= NAVBAR ================= */
 .navbar {
     width: 100%;
     height: 60px;
     background-color: #007bff;
     display: flex;
-    justify-content: space-between;
     align-items: center;
     padding: 0 20px;
     position: fixed;
@@ -26,18 +25,6 @@ body {
     color: white;
     z-index: 1000;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    gap: 10px;
-}
-
-.nav-logo {
-    height: 80px;
-    width: auto;
-    filter: brightness(0) invert(1);
-}
-
-.toggle-btn {
-    font-size: 26px;
-    cursor: pointer;
 }
 
 .nav-left {
@@ -46,7 +33,19 @@ body {
     gap: 15px;
 }
 
-/* SIDEBAR */
+.nav-logo {
+    height: 46px;
+    filter: brightness(0) invert(1);
+}
+
+.toggle-btn {
+    font-size: 26px;
+    cursor: pointer;
+    display: none;
+    /* hidden on desktop */
+}
+
+/* ================= SIDEBAR ================= */
 .sidebar {
     width: 250px;
     background: #ffffff;
@@ -58,15 +57,10 @@ body {
     overflow-y: auto;
     border-right: 1px solid #e5d1be;
     transition: 0.3s;
-
     display: flex;
     flex-direction: column;
 }
 
-.sidebar.hide {
-    left: -250px;
-}
-
 .sidebar h2 {
     color: #007bff;
     text-align: center;
@@ -88,6 +82,7 @@ body {
     background: #88ccfa;
 }
 
+/* Submenu */
 .submenu {
     display: none;
     background: #ffffff;
@@ -104,19 +99,16 @@ body {
 
 .submenu a:hover {
     background: #b3dbf7;
-    color: #007bff;
 }
 
 /* Logout */
 .sidebar-logout {
     margin-top: auto;
-    padding: 10px 16px;
+    padding: 12px;
     background: #007bff;
     display: flex;
     justify-content: center;
-    align-items: center;
     border-radius: 6px;
-    text-decoration: none;
 }
 
 .sidebar-logout:hover {
@@ -128,18 +120,12 @@ body {
     height: 22px;
 }
 
-/* MAIN CONTENT */
+/* ================= MAIN ================= */
 .main {
-    margin-left: 260px;
+    margin-left: 250px;
+    margin-top: 60px;
     padding: 30px;
-    width: calc(100% - 260px);
-    margin-top: 80px;
-    transition: 0.3s;
-}
-
-.main.collapsed {
-    margin-left: 20px;
-    width: calc(100% - 40px);
+    width: calc(100% - 250px);
 }
 
 /* Container */
@@ -147,62 +133,46 @@ body {
     background: white;
     padding: 40px;
     border-radius: 12px;
-    max-width: 800px;
+    max-width: 900px;
     margin: auto;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
 }
 
-.header {
-    font-size: 32px;
-    color: #2c3e50;
-    text-align: center;
-    margin-bottom: 20px;
-    font-weight: 600;
-}
-
-a {
-    text-decoration: none;
-}
-
-
-/* ---------------- RESPONSIVE ---------------- */
-
-/* Tablets */
+/* ================= TABLET ================= */
 @media (max-width: 992px) {
     .nav-left h3 {
         font-size: 16px;
+        max-width: 200px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        max-width: 200px;
     }
 
     .nav-logo {
-        height: 45px;
+        height: 40px;
     }
 
+    /* sidebar still visible */
     .sidebar {
         width: 220px;
     }
 
     .main {
-        margin-left: 0;
-        width: 100%;
-        padding: 20px;
+        margin-left: 220px;
+        width: calc(100% - 220px);
     }
 }
 
-/* Mobile */
+/* ================= MOBILE ================= */
 @media (max-width: 768px) {
 
     body {
         display: block;
     }
 
-    /* Navbar */
-    .navbar {
-        height: 56px;
-        padding: 0 12px;
+    /* Show toggle only on mobile */
+    .toggle-btn {
+        display: block;
     }
 
     .nav-left h3 {
@@ -211,21 +181,14 @@ a {
     }
 
     .nav-logo {
-        height: 38px;
-    }
-
-    .toggle-btn {
-        font-size: 24px;
+        height: 36px;
     }
 
     /* Sidebar as drawer */
     .sidebar {
-        position: fixed;
-        top: 56px;
         left: -100%;
         width: 85%;
         max-width: 280px;
-        height: calc(100vh - 56px);
         z-index: 2000;
         box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2);
     }
@@ -234,10 +197,6 @@ a {
         left: 0;
     }
 
-    .sidebar.hide {
-        left: -100%;
-    }
-
     /* Main content full width */
     .main {
         margin-left: 0;
@@ -250,20 +209,11 @@ a {
         padding: 20px;
         width: 100%;
     }
-
-    .header {
-        font-size: 22px;
-    }
 }
 
-/* Very small phones */
+/* ================= VERY SMALL PHONES ================= */
 @media (max-width: 480px) {
     .nav-left h3 {
         display: none;
-        /* hide long company name */
-    }
-
-    .header {
-        font-size: 20px;
     }
 }