up source events

oedb/resources/demo/static/demo_styles.css

@@ -418,4 +418,96 @@ button:hover {
 .osm-login-btn{
     padding: 1rem 2rem;
     border-radius: 5px;
+}
+
+#report_issue_button{
+    position: fixed;
+    bottom: 0.5rem;
+    right: 0.5rem;
+}
+
+/* Tab styles */
+.tabs {
+    display: flex;
+    border-bottom: 1px solid #ddd;
+    margin-bottom: 20px;
+}
+
+.tab-item {
+    padding: 10px 20px;
+    cursor: pointer;
+    border: 1px solid transparent;
+    border-bottom: none;
+    margin-right: 5px;
+    border-radius: 5px 5px 0 0;
+    background-color: #f8f9fa;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.tab-item i {
+    font-size: 16px;
+}
+
+.tab-item:hover {
+    background-color: #e9ecef;
+}
+
+.tab-item.active {
+    background-color: white;
+    border-color: #ddd;
+    border-bottom-color: white;
+    margin-bottom: -1px;
+    font-weight: bold;
+}
+
+.tab-content {
+    margin-bottom: 20px;
+}
+
+.tab-pane {
+    display: none;
+}
+
+.tab-pane.active {
+    display: block;
+}
+
+/* Family-based colors for issue buttons */
+.issue-button.road {
+    background-color: #2196f3; /* Blue for road issues */
+    color: white;
+}
+
+.issue-button.rail {
+    background-color: #673ab7; /* Purple for rail issues */
+    color: white;
+}
+
+.issue-button.weather {
+    background-color: #ff9800; /* Orange for weather issues */
+    color: white;
+}
+
+.issue-button.emergency {
+    background-color: #f44336; /* Red for emergency issues */
+    color: white;
+}
+
+/* Disabled button styles */
+button:disabled, 
+button[disabled] {
+    background-color: #cccccc !important;
+    color: #666666 !important;
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+
+/* Invalid form field styles */
+input:invalid, 
+select:invalid {
+    border-color: #f44336;
+    background-color: #fff8f8;
 }