updated rimotype map

public/plugins/vue/tt-components/css/tt-map.css

@@ -0,0 +1,77 @@
+/* tt-map.css */
+.tt-map-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: #f0f0f0; /* Placeholder color while map loads */
+}
+
+.tt-map-container {
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+.tt-map-loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1001;
+    background: rgba(255, 255, 255, 0.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Slot for top controls like filters */
+.tt-map-top-controls {
+    position: absolute;
+    top: 10px;
+    left: 55px; /* Moved to avoid overlapping with zoom controls */
+    z-index: 401;
+}
+
+/* Slot for bottom controls like legend */
+.tt-map-bottom-controls {
+    position: absolute;
+    bottom: 30px;
+    right: 10px;
+    z-index: 401;
+}
+
+/* Container for built-in map buttons (zoom, layer toggle) */
+.tt-map-builtin-controls {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 401;
+    display: flex;
+    gap: 0.5rem;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+.tt-map-builtin-controls .btn {
+    min-width: 120px;
+    text-align: left;
+    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+}
+
+.tt-map-settings-panel {
+    background-color: white;
+    padding: 0.75rem;
+    border-radius: 5px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
+    border: 1px solid rgba(0,0,0,0.1);
+}
+
+.tt-map-settings-panel .btn-group .btn {
+    font-size: 0.8rem;
+}
+
+.popup-loader {
+    text-align: center;
+    padding: 10px;
+}