/* We'll use a CDN for Tailwind CSS for rapid UI development */
/* This file is here for any custom CSS you might want to add later. */
/* Shared Toast + Popup Action Styles */
/* legacy #toast-container rules removed; unified toast uses dynamic container */
.toast { animation: fadeInToast .25s ease-out; }
@keyframes fadeInToast { from { opacity:0; transform:translateY(-4px);} to { opacity:1; transform:translateY(0);} }

/* Compact popup action buttons (map) */
.popup-action-btn { font-size:11px; line-height:1.1; }
.popup-action-btn i { margin-right:2px; }

/* Vote cluster layout fix for narrow popups */
.popup-vote-cluster button { font-size:11px; }

html {
  height: 100%;
}
body {
  display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
  flex-grow: 1;
  /* Allows the main content area to expand and push the footer down */
}

#map {
  height: 600px;
  position: relative;
}

/* Map Status Indicator */
#map-status {
  background: rgba(45, 55, 72, 0.9);
  color: #fff;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  pointer-events: none;
}

/* Performance improvements for markers */
.custom-div-icon {
  background: rgba(99, 102, 241, 0.8);
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  /* IMPORTANT: do not animate transforms on marker wrappers; Leaflet
     uses transforms for zoom/pan and CSS transitions here cause
     temporary misalignment during zoom. */
}

/* Safety: never animate or transition the wrapper that Leaflet moves.
   Animating transforms on wrappers causes visible drift during zoom/pan. */
.leaflet-marker-pane .custom-div-icon,
.leaflet-zoom-animated .custom-div-icon {
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}
/* Force absolute positioning on actual Leaflet marker elements */
.leaflet-marker-icon.custom-div-icon { position: absolute !important; }

/* Allow relative positioning for legend/demo icons only */
#legend-sidebar .custom-div-icon,
#legend-grid .custom-div-icon { position: relative; }

/* Keep a subtle hover effect by scaling only the inner icon. */
.custom-div-icon i { transition: transform .2s ease; }
.custom-div-icon:hover i { transform: scale(1.1); }

/* Demolished pin variant: red color and slightly smaller */
.custom-div-icon.pin-demolished {
  background: rgba(239, 68, 68, 0.85); /* red-500 */
  border-color: #fecaca; /* red-200 */
  color: #fff;
}
.custom-div-icon.pin-demolished i { filter: brightness(1.05); }

/* Subtle strike-through overlay for demolished markers */
.custom-div-icon.pin-demolished::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  top: 48%;
  height: 2px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 2px rgba(0,0,0,0.3);
  transform: rotate(-18deg);
  pointer-events: none;
}

/* Construction pin variant: yellow color and slightly smaller (size set in JS) */
.custom-div-icon.pin-construction {
  background: rgba(234, 179, 8, 0.85); /* yellow-500 */
  border-color: #fef08a; /* yellow-200 */
  color: #1f2937; /* gray-800 for contrast */
}
.custom-div-icon.pin-construction i { filter: brightness(1.0) saturate(1.05); }

/* Subtle dashed band overlay for construction markers */
.custom-div-icon.pin-construction::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  top: 48%;
  height: 0; /* using border for dashed line */
  border-top: 2px dashed rgba(31, 41, 55, 0.85); /* gray-800 dashed */
  box-shadow: 0 0 2px rgba(0,0,0,0.25);
  transform: rotate(-18deg);
  pointer-events: none;
}

/* Redeveloped pin variant: teal color and slightly smaller (size set in JS) */
.custom-div-icon.pin-redeveloped {
  background: rgba(239, 68, 68, 0.85); /* red-500 */
  border-color: #fecaca; /* red-200 */
  color: #fff;
}
.custom-div-icon.pin-redeveloped i { filter: brightness(1.0) saturate(1.05); }

/* Subtle double-band overlay for redeveloped markers to differentiate */
/* Subtle rebuild glyph overlay (screwdriver-wrench/tools) */
.custom-div-icon.pin-redeveloped::after {
  content: "\f7d9"; /* fa-screwdriver-wrench (aka tools) */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: -2px; /* tuck to top-right */
  top: -2px;
  font-size: 10px;
  color: #fff;
  text-shadow: 0 0 1px rgba(0,0,0,0.35);
  pointer-events: none;
}

/* Cluster marker styles */
.custom-cluster-icon {
  background: transparent;
  border: none;
}

.cluster-marker {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: 3px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 3px 6px rgba(0,0,0,0.4);
  width: 100%;
  height: 100%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: #2d3748;
  color: #fff;
}

.leaflet-container a.leaflet-popup-close-button {
  color: #fff;
}

.leaflet-popup-content a {
  color: #818cf8;
  text-decoration: none;
}

.leaflet-popup-content a:hover {
  text-decoration: underline;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
}

.modal-content {
  background-color: #2d3748;
  margin: 5% auto;
  /* Changed from 15% to 5% to position it higher */
  padding: 24px;
  border-radius: 8px;
  width: 80%;
  max-width: 500px;
  box-sizing: border-box;
  /* Ensures padding is included in the 80% width */
}

.popup-edit-button,
.popup-delete-button {
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 12px;
  margin-left: 8px;
  cursor: pointer;
}

.popup-edit-button {
  background-color: #2563eb;
}

.popup-delete-button {
  background-color: #dc2626;
}

.leaflet-popup-content {
  width: 250px !important;
}

.popup-thumbnail {
  width: 100%;
  height: 125px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 12px;
}

.popup-divider {
  border-color: #4a5568;
  margin: 12px 0;
}

.popup-actions {
  margin-top: 12px;
}

.dropdown-menu {
  top: 100%;
  margin-top: 0.5rem;
}

.location-btn {
  background-color: #3b82f6;
}

.location-btn:hover {
  background-color: #2563eb;
}

.user-location-marker {
  background-color: #3b82f6;
  border: 3px solid white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
.custom-div-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: white;
  background-color: #374151; /* bg-gray-700 */
  border: 2px solid #9ca3af; /* border-gray-400 */
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  will-change: auto; /* avoid forcing transform animations */
}
/* --- Accordion Styles for Icon Legend --- */
.accordion-button {
  background-color: #4a5568;
  /* bg-gray-600 */
  color: #e5e7eb;
  /* text-gray-200 */
  cursor: pointer;
  padding: 1rem;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: background-color 0.2s ease;
  border-radius: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.accordion-button:hover,
.accordion-button.active {
  background-color: #2d3748;
  /* bg-gray-800 */
}

.accordion-button .fa-chevron-down {
  transition: transform 0.3s ease;
}

.accordion-button.active .fa-chevron-down {
  transform: rotate(180deg);
}

.accordion-panel {
  background-color: #1f2937;
  /* bg-gray-800 */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

/* --- Announcement Pop-out Styles --- */
.announcement-popout {
  /* Positioning is handled by #announcements-container */
  background-color: #2d3748;
  /* bg-gray-800 */
  border: 1px solid #4a5568;
  /* border-gray-600 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  /* Add animation for entry/exit if desired */
}

.announcement-popout .announcement-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 1.25rem;
  /* text-xl */
  line-height: 1;
}

/* .announcement-popout .announcement-dismiss-btn styles are applied inline via utility classes */

/* Optional: Animation for when an announcement is dismissed */
.announcement-popout.dismissed {
  opacity: 0;
  transform: translateY(-20px);
}

/* Style for the unread count badge */
#unread-announcements-count {
  min-width: 20px;
  /* Ensure it's a circle even with single digit */
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure the search results dropdown appears above map controls */
#location-search-results {
  z-index: 1002;
  /* Higher than leaflet's z-index */
}

.gallery-image.active-thumbnail {
  border: 3px solid #818cf8;
  /* Tailwind's indigo-400 color */
  opacity: 1;
}

/* Chat Styles */
.chat-notification-badge {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.dropdown-menu {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.mention-highlight {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Chat Message Animations */
.chat-message {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Typing indicator animation */
.typing-dots {
  display: inline-block;
}

.typing-dots::after {
  content: '...';
  animation: typing-dots 1.5s infinite;
}

@keyframes typing-dots {
  0%, 60%, 100% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
}

/* Smooth scroll behavior for chat */
.chat-messages {
  scroll-behavior: smooth;
}

/* Custom scrollbar for chat */
.chat-messages::-webkit-scrollbar {
  width: 6px;
}

/* Thin scrollbar utility (used in offline modal lists) */
.custom-scroll-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scroll-thin::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);
  border-radius: 3px;
}
.custom-scroll-thin::-webkit-scrollbar-thumb {
  background: #4b5563; /* gray-600 */
  border-radius: 3px;
}
.custom-scroll-thin::-webkit-scrollbar-thumb:hover {
  background: #6b7280; /* gray-500 */
}

.chat-messages::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Role-based colors */
.role-admin {
  color: var(--role-color-admin, #e74c3c) !important;
  font-weight: 600;
}

.role-verified {
  color: var(--role-color-verified, #f1c40f) !important;
  font-weight: 600;
}

.role-editor {
  color: var(--role-color-editor, #3498db) !important;
  font-weight: 600;
}

.role-member {
  color: var(--role-color-member, #3498db) !important;
  font-weight: 600;
}

/* Chat input focus styles */
.chat-input:focus,
#modal-message-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px #3498db;
  border-color: #3498db;
}

/* Mention notification styles */
.mention-item {
  transition: background-color 0.2s ease;
}

.mention-item:hover {
  background-color: rgba(52, 152, 219, 0.1);
}

/* Markdown content styling for announcements */
/* Chat message markdown styling */
.chat-message-content strong {
  font-weight: bold;
  color: #2d3748;
}

.chat-message-content em {
  font-style: italic;
}

.chat-message-content u {
  text-decoration: underline;
}

.chat-message-content del {
  text-decoration: line-through;
  opacity: 0.7;
}

.chat-inline-code {
  background-color: #f7fafc;
  color: #2d3748;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.875em;
  border: 1px solid #e2e8f0;
}

.modal-inline-code {
  background-color: #f7fafc;
  color: #2d3748;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.875em;
  border: 1px solid #e2e8f0;
}

/* Announcement content styling for announcements */
.announcement-content {
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.announcement-content h1,
.announcement-content h2,
.announcement-content h3,
.announcement-content h4,
.announcement-content h5,
.announcement-content h6 {
  font-weight: bold;
  margin-bottom: 0.5rem;
  margin-top: 0.75rem;
  color: #f7fafc;
}

.announcement-content h1 { font-size: 1.5rem; }
.announcement-content h2 { font-size: 1.25rem; }
.announcement-content h3 { font-size: 1.125rem; }
.announcement-content h4 { font-size: 1rem; }

.announcement-content p {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.announcement-content br {
  line-height: 1.6;
}

.announcement-content p:last-child {
  margin-bottom: 0;
}

.announcement-content strong {
  font-weight: bold;
  color: #f7fafc;
}

.announcement-content em {
  font-style: italic;
}

.announcement-content a {
  color: #63b3ed;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.announcement-content a:hover {
  color: #90cdf4;
}

.announcement-content ul,
.announcement-content ol {
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
}

.announcement-content li {
  margin-bottom: 0.25rem;
}

.announcement-content code {
  background-color: #4a5568;
  color: #f7fafc;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.875em;
}

.announcement-content pre {
  background-color: #2d3748;
  color: #f7fafc;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin-bottom: 0.75rem;
  border: 1px solid #4a5568;
}

.announcement-content pre code {
  background: none;
  padding: 0;
}

.announcement-content blockquote {
  border-left: 4px solid #63b3ed;
  padding-left: 1rem;
  margin-bottom: 0.75rem;
  font-style: italic;
  color: #a0aec0;
  background-color: rgba(99, 179, 237, 0.1);
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
}

.announcement-content hr {
  border: none;
  height: 1px;
  background-color: #4a5568;
  margin: 1rem 0;
}

.announcement-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.75rem;
}

.announcement-content th,
.announcement-content td {
  border: 1px solid #4a5568;
  padding: 0.5rem;
  text-align: left;
}

.announcement-content th {
  background-color: #2d3748;
  font-weight: bold;
}
/* Announcement Modal Specific Styles */
#announcement-modal .announcement-content {
  max-height: none;
  font-size: 0.95rem;
  color: #e2e8f0;
}

#announcement-modal .announcement-content h1,
#announcement-modal .announcement-content h2,
#announcement-modal .announcement-content h3,
#announcement-modal .announcement-content h4,
#announcement-modal .announcement-content h5,
#announcement-modal .announcement-content h6 {
  color: #ffffff;
}

/* Announcement Popout Improvements */
.announcement-popout {
  transition: all 0.2s ease-in-out;
  border: 1px solid #4a5568;
}

.announcement-popout:hover {
  border-color: #63b3ed;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Modal z-index fix */
#announcement-modal {
  z-index: 9999;
}

/* Mobile-specific announcement modal fixes */
@media (max-width: 768px) {
  #announcement-modal .announcement-content {
    font-size: 0.875rem;
    line-height: 1.5;
  }
  
  #announcement-modal .announcement-content h1,
  #announcement-modal .announcement-content h2,
  #announcement-modal .announcement-content h3,
  #announcement-modal .announcement-content h4,
  #announcement-modal .announcement-content h5,
  #announcement-modal .announcement-content h6 {
    font-size: 1.1rem;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
  }
  
  #announcement-modal .announcement-content p {
    margin-bottom: 0.75rem;
  }
  
  #announcement-modal .announcement-content ul,
  #announcement-modal .announcement-content ol {
    padding-left: 1.25rem;
  }
  
  #announcement-modal .bg-gray-800 {
    margin: 2rem 1rem;
    max-height: calc(100vh - 4rem);
  }
  
  /* Ensure modal is properly sized on mobile */
  #announcement-modal {
    padding: 1rem;
  }
  
  /* Better touch targets for mobile */
  #announcement-modal button {
    min-height: 44px;
    padding: 0.75rem 1rem;
  }
  
  /* Fix scrolling on mobile */
  #announcement-modal .flex-1 {
    -webkit-overflow-scrolling: touch;
  }
}

/* Popup action buttons */
.popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #4a5568;
}

.popup-actions button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.popup-actions button:hover {
  background-color: #4a5568;
}

.popup-actions .fa-edit {
  color: #60a5fa; /* blue-400 */
}

.popup-actions .fa-trash {
  color: #f87171; /* red-400 */
}

/* ===== Admin Dashboard Enhancements ===== */
.admin-subnav {
  background: linear-gradient(to right, rgba(31,41,55,0.9), rgba(55,65,81,0.9));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(4px);
  border-radius: 0.75rem;
  padding: .5rem 1rem;
  margin-bottom: 1.5rem;
  position: sticky;
  top: 70px;
  z-index: 30;
}
.admin-subnav ul {display:flex; flex-wrap:wrap; gap:.75rem; list-style:none; margin:0; padding:0;}
.admin-subnav a {display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .9rem; font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; font-weight:600; background:#374151; border:1px solid rgba(255,255,255,0.06); border-radius:.5rem; color:#e5e7eb; transition:all .18s ease;}
.admin-subnav a:hover {background:#4b5563; color:#fff; border-color:rgba(255,255,255,0.15);}
.admin-section {background:#1f2937; border:1px solid #374151; border-radius:1rem; padding:1.5rem 1.75rem; box-shadow:0 4px 12px rgba(0,0,0,.35);}
.section-header h2 {font-size:1.35rem; font-weight:700; margin:0; display:flex; align-items:center; gap:.5rem;}
.section-header {margin-bottom:1rem;}
.section-sub {font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:#9ca3af; margin:0; font-weight:600;}
.metric-card {position:relative; overflow:hidden; background:linear-gradient(135deg,#1f2937,#111827); border:1px solid #374151; border-radius:1rem; padding:1rem 1.25rem; box-shadow:0 3px 8px rgba(0,0,0,.4);} 
.metric-card:before {content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 20%, rgba(99,102,241,.15), transparent 60%); opacity:.9; pointer-events:none;}
.metric-label {font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:#9ca3af; display:flex; align-items:center; gap:.4rem;}
.metric-value {font-size:1.75rem; font-weight:700; line-height:1.1; color:#f1f5f9; margin-top:.25rem;}
.admin-card {background:#111827; border:1px solid #374151; border-radius:.85rem; padding:1.1rem 1.1rem 1rem; box-shadow:0 3px 10px rgba(0,0,0,.35);} 
.admin-card .card-title {font-size:1rem; font-weight:600; margin:0 0 .85rem; display:flex; align-items:center;}
.setting-toggle {display:flex; justify-content:space-between; align-items:center; background:#1f2937; border:1px solid #374151; padding:.65rem .75rem; border-radius:.65rem;}
.setting-toggle .desc {font-size:.65rem; color:#9ca3af; margin-top:.15rem;}
button.toggle {position:relative; width:2.75rem; height:1.35rem; background:#374151; border:1px solid #4b5563; border-radius:999px; transition:all .25s cubic-bezier(.4,0,.2,1); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.07);} 
button.toggle span {position:absolute; top:50%; left:3px; width:1rem; height:1rem; transform:translateY(-50%); background:#e5e7eb; border-radius:50%; transition:all .25s cubic-bezier(.4,0,.2,1); box-shadow:0 2px 4px rgba(0,0,0,.4);}
button.toggle.on {background:linear-gradient(90deg,#6366f1,#8b5cf6); border-color:#6366f1; box-shadow:0 0 0 1px rgba(99,102,241,.4),0 4px 10px -2px rgba(99,102,241,.45);} 
button.toggle.on span {left:calc(100% - 1rem - 3px); background:#fff;}
button.toggle:focus {outline:none; box-shadow:0 0 0 2px #6366f1,0 0 0 4px rgba(99,102,241,.4);} 
.textarea {background:#1f2937; border:1px solid #374151; color:#f1f5f9; font-size:.8rem; border-radius:.6rem; padding:.6rem .75rem; resize:vertical; min-height:90px;}
.textarea:focus {outline:none; border-color:#6366f1; box-shadow:0 0 0 1px #6366f1;}
.btn-primary, .btn-warning, .btn-danger {display:inline-flex; align-items:center; font-weight:600; border-radius:.6rem; font-size:.75rem; letter-spacing:.05em; padding:.55rem .9rem; text-transform:uppercase;}
.btn-primary {background:linear-gradient(90deg,#6366f1,#4f46e5); color:#fff; box-shadow:0 2px 6px -1px rgba(79,70,229,.6);} 
.btn-primary:hover {filter:brightness(1.1);} 
.btn-warning {background:linear-gradient(90deg,#d97706,#f59e0b); color:#fff; box-shadow:0 2px 6px -1px rgba(217,119,6,.6);} 
.btn-warning:hover {filter:brightness(1.1);} 
.btn-danger {background:linear-gradient(90deg,#dc2626,#b91c1c); color:#fff; box-shadow:0 2px 6px -1px rgba(220,38,38,.6);} 
.btn-danger:hover {filter:brightness(1.1);} 
.alert-success, .alert-error {border-radius:.6rem; padding:.55rem .75rem; font-size:.7rem; font-weight:600; letter-spacing:.04em;}
.alert-success {background:rgba(16,185,129,.12); color:#34d399; border:1px solid rgba(16,185,129,.25);} 
.alert-error {background:rgba(239,68,68,.12); color:#f87171; border:1px solid rgba(239,68,68,.25);} 
.admin-section:not(:last-child) {margin-bottom:2rem;}
@media (max-width:768px){ .metric-value {font-size:1.4rem;} .admin-subnav {top:60px;} }
/* ===== End Admin Enhancements ===== */
/* Accessible focus utilities */
.focus-ring:focus {outline:2px solid #818cf8; outline-offset:2px;}
.focus-ring-inset:focus {box-shadow:0 0 0 3px rgba(129,140,248,.6) inset; outline:none;}

/* Responsive table (single markup, mobile stacked) */
.responsive-table {width:100%; border-collapse:separate; border-spacing:0;}
@media (max-width: 768px){
  .responsive-table thead {display:none;}
  .responsive-table tr {display:block; margin-bottom:1rem; background:#1f2937; border:1px solid #374151; border-radius:.75rem; padding:.75rem .85rem;}
  .responsive-table td, .responsive-table th[scope=row]{display:flex; align-items:center; justify-content:space-between; padding:.4rem .25rem !important; border:none !important;}
  .responsive-table td::before, .responsive-table th[scope=row]::before {content: attr(data-label); font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:#9ca3af; margin-right:1rem; flex:1; text-align:left;}
  .responsive-table th[scope=row]{font-weight:600;}
  .responsive-table td[data-label="Actions"]{flex-wrap:wrap; gap:.35rem;}
}
/* Table loading overlay */
.table-wrapper {position:relative;}
.table-loading-overlay {position:absolute; inset:0; background:rgba(17,24,39,0.85); display:none; align-items:center; justify-content:center; flex-direction:column; gap:.75rem; z-index:20;}
.table-loading-overlay.active {display:flex;}
.table-loading-overlay .spinner {width:32px; height:32px; border:4px solid rgba(255,255,255,0.15); border-top-color:#6366f1; border-radius:50%; animation:spin 0.8s linear infinite;}
@keyframes spin {to {transform:rotate(360deg);}}

/* Donor glow badge */
.donor-name-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.donor-glow-text {
  /* Keep the inner text color from context (e.g., role color in chat) */
  color: inherit;
  position: relative;
  /* Gold outline + glow. Use both stroke (WebKit) and multi-shadow for broad support */
  -webkit-text-stroke: 0.8px rgba(251, 191, 36, 0.55); /* gold-400 */
  paint-order: stroke fill;
  text-shadow:
    /* soft outer glow */
    0 0 2px rgba(251, 191, 36, 0.65),
    0 0 4px rgba(251, 191, 36, 0.55),
    0 0 8px rgba(251, 191, 36, 0.45),
    0 0 14px rgba(251, 191, 36, 0.35),
    /* pseudo-outline using directional shadows */
    1px 0 rgba(251, 191, 36, 0.35),
    -1px 0 rgba(251, 191, 36, 0.35),
    0 1px rgba(251, 191, 36, 0.35),
    0 -1px rgba(251, 191, 36, 0.35);
}

.donor-glow-icon {
  color: #fbbf24;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6));
  font-size: 0.85em;
  animation: donor-glow-pulse 2.4s ease-in-out infinite;
}

.donor-has-badge .donor-glow-icon {
  margin-left: 0.2rem;
}

@keyframes donor-glow-pulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.85)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6)); }
}