UI chnage mobile view and desktop view apllyign css

static/css/report.css

@@ -1,76 +1,162 @@
-/* ================= GLOBAL ================= */
+/* ================= RESET ================= */
 * {
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
-  box-sizing: border-box;
-  font-family: "Segoe UI", sans-serif;
 }
 
+/* ================= BODY ================= */
 body {
-  background: #f4f7f6;
-  display: flex;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background-color: #f4f7f9;
+  overflow: hidden;
+  /* ❌ no scroll desktop/laptop */
 }
 
-a {
-  text-decoration: none !important;
-  color: #007bff;
-}
-
-/* ================= MAIN CONTENT ================= */
+/* ================= MAIN WRAPPER ================= */
 .main {
-    margin-left: 20px;
-    padding: 8px;
-    width: calc(100% - 50px);
-    margin-top: 50px;
-    position: relative;
-    z-index: 5;
-    transition: 0.3s;
+  margin-left: 260px;
+  margin-top: 80px;
+  width: calc(100% - 260px);
+  height: calc(100vh - 80px);
+  padding: 0 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
+/* ================= CONTAINER ================= */
 .container {
-  background: white;
-  padding: 30px;
-  width: 95%;
-  margin: auto;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  max-width: 900px;
+  width: 100%;
+  background: #ffffff;
+  padding: 45px 55px;
+  border-radius: 16px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+
+  /* ⬇️ MOVE UP & LEFT */
+  transform: translate(-40px, -30px);
 }
 
-h2 {
+/* ================= HEADING ================= */
+.container h2 {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1f2d3d;
+  margin-bottom: 32px;
   text-align: center;
-  margin-bottom: 20px;
-  color: #007bff;
 }
 
+/* ================= REPORT LIST ================= */
 ul {
-    list-style: none;
-    padding-left: 0;
-    margin-top: 20px;
-    text-align: center;
-}
-
-ul li {
-    margin: 14px 0;
+  list-style: none;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 18px;
 }
 
+/* ================= REPORT BUTTONS ================= */
 ul li a {
-    color: #007bff;
-    font-size: 18px;
-    font-weight: 600;
-    transition: 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: linear-gradient(135deg, #f1f7ff, #e9f2ff);
+  border-radius: 12px;
+  color: #0056ff;
+  font-size: 17px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  border: 1px solid #e1ecff;
 }
 
 ul li a:hover {
-    color: #0056b3;
-    text-decoration: underline;
+  background: linear-gradient(135deg, #e3efff, #dbe9ff);
+  transform: translateY(-3px);
+  box-shadow: 0 8px 18px rgba(0, 86, 255, 0.15);
 }
 
+/* ================= LAPTOP VIEW ================= */
+@media (max-width: 1400px) and (min-width: 992px) {
+
+  .container {
+    max-width: 820px;
+    padding: 40px 45px;
+    transform: translate(-30px, -20px);
+    /* ⬅️ softer move */
+  }
+
+  .container h2 {
+    font-size: 26px;
+  }
+
+  ul li a {
+    font-size: 16px;
+    padding: 18px;
+  }
+}
+
+/* ================= TABLET ================= */
+@media (max-width: 992px) {
+
+  body {
+    overflow-y: auto;
+  }
 
-/* ================= RESPONSIVE ================= */
-@media (max-width: 768px) {
   .main {
     margin-left: 0;
     width: 100%;
-    padding: 20px;
+    height: auto;
+    padding: 40px 25px;
+    display: block;
+  }
+
+  .container {
+    transform: none;
+    /* ❌ reset move */
+    padding: 40px 32px;
+  }
+}
+
+/* ================= MOBILE ================= */
+@media (max-width: 768px) {
+
+  body {
+    overflow-y: auto;
+  }
+
+  .main {
+    margin-top: 70px;
+    height: auto;
+    padding: 25px 15px;
+  }
+
+  .container {
+    transform: none;
+    /* ❌ reset move */
+    padding: 28px 22px;
+  }
+
+  .container h2 {
+    font-size: 22px;
+  }
+
+  ul li a {
+    font-size: 15px;
+    padding: 15px;
+  }
+}
+
+/* ================= SMALL MOBILE ================= */
+@media (max-width: 480px) {
+
+  .container {
+    padding: 22px 18px;
+  }
+
+  ul li a {
+    font-size: 14px;
+    padding: 14px;
   }
 }