Fix CSS linting, organize properly

app/styles/app.css

@@ -42,7 +42,8 @@ body {
   position: fixed;
   inset: 0;
   z-index: 3999; /* Below widget container but above everything else */
-  /* background: rgba(0,0,0,0.2); Optional: dim background */
+
+  /* background: rgb(0 0 0 / 20%); Optional: dim background */
 }
 
 /* App Header */
@@ -74,7 +75,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
   cursor: pointer;
   transition: transform 0.1s;
 }
@@ -98,7 +99,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
 }
 
 /* User Menu Popover */
@@ -114,19 +115,17 @@ body {
   width: 280px;
   background: white;
   border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
   padding: 1rem;
   z-index: 3001;
 }
 
 .menu-backdrop {
   position: fixed;
-  top: 0;
+  inset: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
   z-index: 3000; /* Below popover but above everything else */
-  /* background: rgba(0,0,0,0.1); Optional dimming */
+
+  /* background: rgb(0 0 0 / 10%); Optional dimming */
 }
 
 .user-status {
@@ -174,6 +173,7 @@ body {
 .text-primary {
   color: #007bff;
 }
+
 .text-danger {
   color: #dc3545;
 }
@@ -198,7 +198,7 @@ body {
 }
 
 /* Settings Pane Mobile Overrides */
-@media (max-width: 768px) {
+@media (width <= 768px) {
   .settings-pane.sidebar {
     width: 100%;
     right: 0;
@@ -258,7 +258,7 @@ body {
 .form-control:focus {
   outline: none;
   border-color: #007bff;
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
+  box-shadow: 0 0 0 2px rgb(0 123 255 / 10%);
 }
 
 .edit-actions {
@@ -275,7 +275,7 @@ body {
   font-size: 1rem;
   font-weight: bold;
   color: #666;
-  margin: 0 0 0.5rem 0;
+  margin: 0 0 0.5rem;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -298,6 +298,16 @@ body {
   background: #0069d9;
 }
 
+.meta-info a {
+  color: #007bff;
+  text-decoration: none;
+  padding-bottom: 4rem;
+}
+
+.meta-info a:hover {
+  text-decoration: underline;
+}
+
 .link-list {
   list-style: none;
   padding: 0;
@@ -318,112 +328,6 @@ body {
   text-decoration: underline;
 }
 
-.back-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0 0.5rem;
-  margin-left: -0.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.close-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0 0.5rem;
-  margin-right: -0.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.place-details {
-}
-
-.place-details h3 {
-  font-size: 1.2rem;
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-}
-
-.place-details .place-type {
-  color: #666;
-  font-size: 0.9rem;
-  text-transform: capitalize;
-  margin: 0 0 1rem 0;
-}
-
-.place-details .place-description {
-  margin-bottom: 1.5rem;
-}
-
-.place-details .actions {
-  padding-bottom: 0.3rem;
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-}
-
-.btn {
-  padding: 0.75rem 1.5rem;
-  border-radius: 4px;
-  cursor: pointer;
-  /* width: 50%; */
-  font-size: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-}
-
-.btn-sm {
-  padding: 0.4rem 1rem !important;
-  font-size: 0.9rem !important;
-}
-
-.btn-outline {
-  background: transparent;
-  color: #333;
-  border: 1px solid #ccc;
-}
-
-.btn-outline:hover {
-  border: 1px solid #898989;
-}
-
-.btn-secondary {
-  color: #333;
-  border: 1px solid rgba(255, 204, 51, 0.2);
-  background: rgba(255, 204, 51, 0.3);
-}
-
-.btn-secondary:hover {
-  background: rgba(255, 204, 51, 0.4);
-}
-
-.btn-blue {
-  background: #007bff;
-  color: white;
-  border: none;
-}
-
-.btn-blue:hover {
-  background: #0056b3;
-}
-
-.btn-green {
-  background: #198754;
-  color: white;
-  border: none;
-}
-
-.btn-green:hover {
-  background: #157347;
-}
-
 .places-list {
   list-style: none;
   padding: 0;
@@ -460,42 +364,113 @@ body {
   text-transform: capitalize;
 }
 
-.meta-info {
+.back-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 0.5rem;
+  margin-left: -0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 0.5rem;
+  margin-right: -0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.place-details h3 {
+  font-size: 1.2rem;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+.place-details .place-type {
+  color: #666;
   font-size: 0.9rem;
-  text-align: left;
+  text-transform: capitalize;
+  margin: 0 0 1rem;
 }
 
-.meta-info p:first-child {
+.place-details .place-description {
-  margin-top: 1.2rem;
+  margin-bottom: 1.5rem;
-  padding-top: 1.2rem;
-  border-top: 1px solid #eee;
 }
 
-.meta-info p {
+.place-details .actions {
-  margin: 0.75rem 0;
+  padding-bottom: 0.3rem;
-  line-height: 1.4;
+  display: flex;
-  word-break: break-word; /* Prevent long URLs from breaking layout */
+  flex-direction: row;
+  gap: 1rem;
 }
 
-.meta-info strong {
+.btn {
-  font-weight: bold;
+  padding: 0.75rem 1.5rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
 }
 
-.meta-info a {
+.btn-sm {
-  color: #007bff;
+  padding: 0.4rem 1rem !important;
-  text-decoration: none;
+  font-size: 0.9rem !important;
-  padding-bottom: 4rem;
 }
 
-.meta-info a:hover {
+.btn-outline {
-  text-decoration: underline;
+  background: transparent;
+  color: #333;
+  border: 1px solid #ccc;
+}
+
+.btn-outline:hover {
+  border: 1px solid #898989;
+}
+
+.btn-secondary {
+  color: #333;
+  border: 1px solid rgb(255 204 51 / 20%);
+  background: rgb(255 204 51 / 30%);
+}
+
+.btn-secondary:hover {
+  background: rgb(255 204 51 / 40%);
+}
+
+.btn-blue {
+  background: #007bff;
+  color: white;
+  border: none;
+}
+
+.btn-blue:hover {
+  background: #0056b3;
+}
+
+.btn-green {
+  background: #198754;
+  color: white;
+  border: none;
+}
+
+.btn-green:hover {
+  background: #157347;
 }
 
 /* Map Search Pulse Animation */
 .search-pulse {
   border-radius: 50%;
-  border: 2px solid rgba(255, 204, 51, 0.8); /* Gold/Yellow to match markers */
+  border: 2px solid rgb(255 204 51 / 80%); /* Gold/Yellow to match markers */
-  background: rgba(255, 204, 51, 0.2);
+  background: rgb(255 204 51 / 20%);
   position: absolute;
   transform: translate(-50%, -50%);
   pointer-events: none;
@@ -509,8 +484,8 @@ body {
 }
 
 .search-pulse.blue {
-  border-color: rgba(51, 153, 204, 0.8);
+  border-color: rgb(51 153 204 / 80%);
-  background: rgba(51, 153, 204, 0.2);
+  background: rgb(51 153 204 / 20%);
 }
 
 @keyframes pulse {
@@ -518,6 +493,7 @@ body {
     transform: translate(-50%, -50%) scale(0.8);
     opacity: 0.8;
   }
+
   100% {
     transform: translate(-50%, -50%) scale(1.4);
     opacity: 0;
@@ -526,28 +502,20 @@ body {
 
 /* Locate Control */
 .ol-control.ol-locate {
-  top: auto;
+  inset: auto 0.5em 2.5em auto;
-  bottom: 2.5em;
-  right: 0.5em;
-  left: auto;
 }
 
 .ol-touch .ol-control.ol-locate {
-  top: auto;
+  inset: auto auto 3.5em;
-  bottom: 3.5em;
 }
 
 /* Rotate Control */
 .ol-rotate {
-  top: auto;
+  inset: auto 0.5em 5em auto;
-  bottom: 5em;
-  right: 0.5em;
-  left: auto;
 }
 
 .ol-touch .ol-rotate {
-  top: auto;
+  inset: auto auto 6em;
-  bottom: 6em;
 }
 
 span.icon {
@@ -561,7 +529,7 @@ span.icon {
 .icon svg {
   width: 100%;
   height: 100%;
-  stroke: currentColor;
+  stroke: currentcolor;
   fill: none;
   stroke-width: 2;
   stroke-linecap: round;
@@ -578,6 +546,7 @@ span.icon {
 /* Selected Pin Animation */
 .selected-pin-container {
   position: absolute;
+
   /* Center the bottom tip of the pin at the coordinate */
   transform: translate(-50%, -100%);
   pointer-events: none; /* Let clicks pass through to the map features below if needed */
@@ -586,14 +555,14 @@ span.icon {
 
 .selected-pin-container.active {
   display: block;
-  animation: dropIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+  animation: drop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
 }
 
 .selected-pin {
   width: 40px;
   height: 40px;
   color: #ea4335; /* Google Red */
-  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
+  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 30%));
 }
 
 .selected-pin svg {
@@ -608,7 +577,7 @@ span.icon {
 .selected-pin-shadow {
   width: 10px;
   height: 4px;
-  background: rgba(0, 0, 0, 0.3);
+  background: rgb(0 0 0 / 30%);
   border-radius: 50%;
   position: absolute;
   bottom: 0;
@@ -616,45 +585,45 @@ span.icon {
   transform: translateX(-50%);
   z-index: -1;
   opacity: 0;
-  animation: shadowFade 0.5s 0.2s forwards;
+  animation: shadow-fade 0.5s 0.2s forwards;
 }
 
-@keyframes dropIn {
+@keyframes drop-in {
   0% {
     transform: translate(-50%, -200%) scale(0);
     opacity: 0;
   }
+
   60% {
     opacity: 1;
   }
+
   100% {
     transform: translate(-50%, -100%) scale(1);
     opacity: 1;
   }
 }
 
-@keyframes shadowFade {
+@keyframes shadow-fade {
   to {
     opacity: 1;
   }
 }
 
-@media (max-width: 768px) {
+@media (width <= 768px) {
   .sidebar {
-    top: auto;
-    bottom: 0;
-    left: 0;
-    right: 0;
     width: 100%;
     height: 50vh;
-    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);
     border-top-left-radius: 16px;
     border-top-right-radius: 16px;
+    inset: auto 0 0;
   }
 
   .sidebar-content {
     overflow-y: auto;
     overscroll-behavior: contain; /* Prevent scroll chaining */
+
     /* Ensure content doesn't get hidden behind bottom safe areas on mobile */
     padding-bottom: env(safe-area-inset-bottom, 20px);
   }