/* ========================================
   🌑 Login page Styles
   ======================================== */

.login-page {
  background-image: url('/backgrounds/loginBackground.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  color: #fff;
}

/* ========================================
   🌑 Base Styles
   ======================================== */
body {
  background: url('../backgrounds/background.jpg') no-repeat center center fixed;
  background-size: cover;
  color: #f0f0f0;
  /* Use Inter for UI text for better readability; reserve Cinzel for headings/brand */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.form-control {
  padding: 0.75rem;
  font-size: 1rem;
}

/* Dark mode overrides */

@media (prefers-color-scheme: dark) {
  input.form-control,
  select.form-select,
  textarea.form-control {
    background-color: #2a2a2a !important;
    color: #f0f0f0 !important;
    border-color: #444 !important;
    caret-color: #f0f0f0 !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: #aaa !important;
    font-style: italic !important;
    opacity: 1 !important;
  }


  /* Optional: Select2 placeholder override */
  .select2-selection__placeholder {
    color: #aaa;
  }
}


/* ========================================
   🧙‍♂️ Buttons
   ======================================== */
.btn-arcane {
  background-color: #FFDB51;
  color: #1a1a1a;
  border: none;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
  transition: all 0.3s ease-in-out;
  animation: pulseGlow 2s infinite;
}

.btn-arcane:hover {
  background-color: #FFDB51;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
  transform: scale(1.02);
}

@keyframes pulseGlow {
  0%   { box-shadow: 0 0 10px rgba(212, 175, 55, 0.6); }
  50%  { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
  100% { box-shadow: 0 0 10px rgba(212, 175, 55, 0.6); }
}

/* ========================================
   🧭 Navigation
   ======================================== */
.bg-gradient-arcane {
  background: linear-gradient(to right, #2c2c54, #40407a);
  border-bottom: 2px solid #7f8fa6;
  box-shadow: 0 0 12px #7f8fa6;
}

.navbar {
  border-radius: 10px;
  margin: 10px;
  padding: 10px 20px;
  z-index: 1055; /* Above session sidebar (1040) to allow dropdowns to display */
  position: relative; /* Establish stacking context */
}

/* Ensure the brand uses the Cinzel display font */
.navbar-brand {
  font-family: 'Cinzel', serif !important;
}

.navbar-nav .nav-link {
  font-family: 'Cinzel', serif;
  padding: 10px 20px;
  margin-right: 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: all 0.3s ease;
  color: #f5f6fa;
}

.navbar-nav .nav-link:hover {
  background-color: #485460;
  border-color: #7f8fa6;
  box-shadow: 0 0 8px #7f8fa6;
}

.navbar-nav .nav-link::after {
  content: '';
  display: block;
  margin: auto;
  height: 2px;
  width: 0;
  background: #FFDB51;
  transition: width 0.3s ease;
}

.navbar-nav .nav-link:hover::after {
  width: 80%;
}

@media (min-width: 992px) {
  .navbar-nav {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
  }
}
@media (max-width: 991.98px) {
  .navbar-nav {
    flex-direction: column !important;
    width: 100%;
  }

  .nav-item {
    width: 100%;
  }

  .nav-link {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    white-space: normal;
  }
}
.navbar-nav .nav-link.active {
  background-color: #40739e;
  border-color: #7f8fa6;
  font-weight: bold;
  box-shadow: 0 0 10px #00a8ff;
}

.navbar-text {
  font-family: 'Cinzel Decorative', cursive;
  font-size: 0.95rem;
}

.btn-outline-light {
  border-color: #7f8fa6;
  color: #f5f6fa;
}

.btn-outline-light:hover {
  background-color: #7f8fa6;
  color: #2f3640;
}

/* ========================================
   🧱 Layout & Components
   ======================================== */
.container {
  padding-top: 2rem;
}

.card {
  background-color: #1e1e1e;
  border: 1px solid #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.event-npc-list a {
  color: #FFDB51;
  font-weight: bold;
  transition: color 0.2s ease;
}

.event-npc-list a:hover {
  color: #f0f0f0;
  text-decoration: underline;
}

.select2-selection__placeholder {
  color: #aaa;           /* Light gray or your theme color */
  font-size: 1rem;     /* Adjust as needed */
  font-style: italic;    /* Optional for visual distinction */
}

#helpfulLinks {
  position: absolute;
  top: 5rem;
  right: 1rem;
  width: 250px;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* ========================================
   ✨ Utility Classes
   ======================================== */
.accent-glow {
  color: #FFDB51;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
}

.spinner-border {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
  animation: pulseGlow 1.5s infinite;
}

.custom-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 14px;
  color: #fff;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.custom-toast.visible {
  opacity: 1;
  pointer-events: auto;
}

.custom-toast.success {
  background-color: #28a745;
}

.custom-toast.error {
  background-color: #dc3545;
}

.custom-toast.info {
  background-color: #333;
}

/* ========================================
   🌑 Dark Theme Text Readability Improvements
   ======================================== */

/* Improve text contrast on dark cards */
.card.bg-dark, .bg-dark {
  color: #f8f9fa !important;
}

.bg-dark .text-muted {
  color: #dee2e6 !important;
}

.bg-dark .card-title, 
.bg-dark .card-text,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6 {
  color: #f8f9fa !important;
}

/* Improve button contrast on dark backgrounds */
.bg-dark .btn-outline-secondary {
  border-color: #6c757d;
  color: #f8f9fa;
}

.bg-dark .btn-outline-secondary:hover {
  background-color: #6c757d;
  color: #fff;
}

/* Improve badge readability */
.bg-dark .badge {
  filter: brightness(1.2);
}

/* IMPORTANT: Restore normal colors for interactive elements */
.dropdown-menu, 
.dropdown-menu *,
.dropdown-item {
  color: #212529 !important;
  background-color: white !important;
}

.dropdown-item:hover {
  background-color: #f8f9fa !important;
}

.form-select, 
.form-select option,
.form-control {
  color: #212529 !important;
  background-color: white !important;
}

.btn {
  color: inherit !important;
}
*** End Patch

/* ========================================
   🗺️ Interactive Maps Page Styles
   Moved from views/interactive_maps.php inline <style> block
   ======================================== */

/* Map container and display */
.map-container {
  /* Make the map noticeably taller while leaving room for header/sidebar
     and controls. Use a viewport-based height but clamp it to a sensible
     pixel range for small screens. */
  height: min(82vh, calc(100vh - 140px));
  min-height: 420px;
  max-height: 96vh;
  background: #1e1e1e;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #444;
}

/* Stronger desktop override: try to occupy available space beneath the navbar.
   We subtract an estimated navbar+controls height (140px) so the map fills most
   of the remaining viewport. Use !important to ensure this wins over any
   competing rules from other styles. */
@media (min-width: 992px) {
  .map-container {
    height: calc(100vh - 140px) !important;
    min-height: 520px !important;
  }
}

#mapDisplay {
  height: 100%;
  width: 100%;
}

/* Ensure map container element itself has a minimum height so Leaflet can
   initialize correctly when parent layout changes. This helps when the
   page uses responsive columns or dynamic panels. */
#mapDisplay { min-height: 320px; }

.map-controls {
  background: rgba(30, 30, 30, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #444;
}

/* ========================================
   📰 Article / Event View Styles (moved from inline in views/articles.php)
   ======================================== */
.article-body {
  white-space: pre-line; /* preserve line breaks but collapse extra spaces */
  word-break: break-word;
  line-height: 1.55;
  font-size: 0.98rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 4px solid rgba(111,66,193,0.12);
  border-radius: 6px;
  background-color: rgba(255,255,255,0.02);
  max-height: calc(60vh);
  overflow: auto;
}

/* Ensure modals and footer buttons accept pointer events and show pointer cursor */
.modal {
  position: fixed !important;
}
.modal .modal-content {
  pointer-events: auto !important;
}
.modal-footer .btn {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Select2 dropdown stacking overrides (moved from inline in views/articles.php) */
.select2-dropdown {
  z-index: 1056 !important; /* Bootstrap modal is 1055 */
}
.select2-container--open .select2-dropdown,
.select2-container .select2-dropdown {
  z-index: 3000 !important;
}

/* Pins & regions list items */
.pin-list-item {
  background: rgba(50, 50, 50, 0.7);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border-left: 4px solid #0d6efd;
}
.pin-list-item.place { border-left-color: #17a2b8; }
.pin-list-item.location { border-left-color: #28a745; }
.pin-list-item.event { border-left-color: #ffc107; }
.pin-list-item.npc { border-left-color: #dc3545; }
.pin-list-item.custom { border-left-color: #6f42c1; }
.pin-list-item.auto-generated { opacity: 0.8; background: rgba(40,40,40,0.6); }
.pin-list-item.auto-generated::before { content: "🤖"; font-size: 0.8rem; margin-right: 0.5rem; }

.region-list-item {
  background: rgba(50, 50, 50, 0.7);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border-left: 4px solid #20c997;
}

/* Mode indicator and coordinates */
.mode-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  z-index: 1000;
  font-weight: bold;
}
.mode-indicator.view { background: rgba(13,110,253,0.8); }
.mode-indicator.pin { background: rgba(40,167,69,0.8); }
.mode-indicator.region { background: rgba(255,193,7,0.8); color: #000; }
#modeIndicator { display: none !important; }

.coordinates-display {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  z-index: 1000;
  font-size: 0.8rem;
}

/* Leaflet popup & tooltip dark style - improved contrast & readability */
.leaflet-popup-content-wrapper {
  background: rgba(30,30,30,0.98);
  color: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

/* ========================================
   📝 Section detail (editor) styles
   Keep visual treatment consistent with other pages (dark cards, arcane accents)
   ======================================== */
.section-detail label.form-label { color: #e9eef6; font-weight:600; }
.section-detail #sectionSummary {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  background: #1e1e1e;
  color: #f8f9fa;
  border: 1px solid #444;
  padding: .85rem;
  box-shadow: none;
  resize: vertical;
  overflow: auto;
  min-height: calc(70vh);
  max-height: calc(85vh);
  white-space: pre-wrap;
}
.summary-wrapper { display:flex; flex-direction:column; flex:1 1 auto; }
.summary-wrapper textarea { flex:1 1 auto; }
@media (max-width:767px) { .section-detail #sectionSummary { min-height: 50vh; } }

@media (max-width:991px) {
  /* On narrower viewports (tablet/phone), allow the map to be shorter so
     it doesn't push critical controls off-screen. */
  .map-container { height: 58vh; min-height: 320px; }
}

.section-detail .btn {
  border-radius: .375rem;
  font-weight: 600;
}
.section-detail .btn-outline-secondary {
  background-color: rgba(255,255,255,0.04);
  color: #fff;
  border-color: rgba(255,255,255,0.12);
}
.section-detail .btn-outline-primary {
  background-color: rgba(255,255,255,0.03);
  color: #fff;
  border-color: rgba(255,255,255,0.12);
}
.section-detail .btn-outline-secondary:hover,
.section-detail .btn-outline-primary:hover {
  background-color: rgba(255,255,255,0.08);
  color: #fff;
}

/* Ensure outline-light buttons inside section-detail are visible on dark backgrounds */
.section-detail .btn-outline-light {
  border-color: rgba(255,255,255,0.12);
  color: #f8f9fa;
  background-color: rgba(255,255,255,0.02);
}
.section-detail .btn-outline-light:hover {
  background-color: rgba(255,255,255,0.06);
  color: #fff;
}

/* Modals inside the section editor should use the site's dark modal theme */
.section-detail .modal-content {
  background: #1e1e1e;
  color: #f8f9fa;
  border-color: #444;
}
.section-detail .modal-header .modal-title,
.section-detail .modal-header .btn-close {
  color: #f8f9fa;
}

/* ========================================
   🧩 Dev stub for Session Planner
   Simple styles used by the lightweight dev UI when ?dev=1 is present
   ======================================== */
.dev-planner {
  font-family: Arial, sans-serif;
  padding: 20px;
  color: #f0f0f0;
}
.dev-planner #sections { max-width: 800px; }
.dev-planner .section { padding: 6px 8px; border: 1px solid #444; margin: 4px 0; background: rgba(255,255,255,0.03); color: #f8f9fa; }
.dev-planner .small-input { width: 80px; display: inline-block; }
.dev-planner .preview-area { margin-top: 12px; border: 1px solid #444; padding: 8px; background: rgba(255,255,255,0.02); color: #f8f9fa; }

.leaflet-popup-content {
  color: #ffffff;
  font-size: 0.95rem; /* slightly larger for readability */
  line-height: 1.3;
  word-break: break-word;
}
.leaflet-popup-content strong { color: #fff; font-weight: 700; }
.leaflet-popup-content small { color: #d0d0d0; }
.leaflet-popup-content .text-info { color: #7fc8ff; } /* make info text bluish and readable */
.leaflet-popup-content a { color: #ffd86b; text-decoration: underline; }
.leaflet-popup-tip { background: rgba(30,30,30,0.98); }

/* Tooltip style (leaflet tooltips) */
.leaflet-tooltip { background: rgba(10,10,10,0.95); color: #fff; border-radius: 6px; padding: 6px 8px; font-size: 0.9rem; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.leaflet-container .leaflet-tooltip-left { transform: translateX(-6px); }
.leaflet-container .leaflet-tooltip-right { transform: translateX(6px); }

/* Region hover tooltip style */
.region-hover-tooltip {
  background: rgba(20,20,20,0.98) !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 6px 8px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
}

/* ===== navigation/header styles migrated from includes/header.php ===== */
.navbar-nav .dropdown-menu {
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  border-radius: 0.375rem;
  margin-top: 0.5rem;
  z-index: 1070 !important; /* Ensure dropdowns appear above session sidebar (1040) */
  position: absolute; /* Ensure proper stacking */
}

.navbar-nav .dropdown-item {
  transition: all 0.2s ease;
  border-radius: 0.25rem;
  margin: 0.125rem 0.5rem;
  padding: 0.5rem 1rem;
}

.navbar-nav .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff !important;
  transform: translateX(4px);
}

.navbar-nav .dropdown-item.active {
  background: linear-gradient(135deg, #6f42c1, #8e2de2);
  color: #fff !important;
}

.navbar-nav .nav-link.dropdown-toggle:hover {
  color: rgba(255, 255, 255, 0.9) !important;
}

.navbar-nav .nav-link.dropdown-toggle.active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.25rem;
}

.dropdown-menu {
  animation: dropdownFadeIn 0.2s ease;
}

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

.dropdown-item i { width: 20px; text-align: center; opacity: 0.8; }
.dropdown-item:hover i { opacity: 1; }

@media (max-width: 991.98px) {
  .navbar { padding: 0.5rem 1rem; min-height: auto; }
  .navbar-brand { font-size: 1.1rem !important; padding: 0.25rem 0; }
  .navbar-collapse { background: rgba(0,0,0,0.95); border-radius: 0.5rem; margin-top: 0.5rem; padding: 1rem; border: 1px solid rgba(255,255,255,0.1); }
  .navbar-nav .nav-link { padding: 0.75rem 1rem; border-radius: 0.375rem; margin-bottom: 0.25rem; font-size: 1rem; color: rgba(255,255,255,0.9) !important; }
  .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus { background: rgba(255,255,255,0.1); color: #fff !important; }
  .navbar-nav .nav-link.active { background: rgba(111,66,193,0.3); color: #fff !important; }
  .navbar-nav .dropdown-menu { position: static !important; float: none; width: auto; margin-top: 0; background-color: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 0.375rem; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); display: block !important; }
  .navbar-nav .dropdown .dropdown-menu { display: none; }
  .navbar-nav .dropdown.show .dropdown-menu { display: block !important; }
  .navbar-nav .dropdown-item { margin: 0.125rem 0.25rem; padding: 0.6rem 1rem; font-size: 0.95rem; border-radius: 0.25rem; color: rgba(255,255,255,0.8) !important; }
  .navbar-nav .dropdown-item:hover, .navbar-nav .dropdown-item:focus { background: rgba(255,255,255,0.15); color: #fff !important; transform: none; }
  .navbar-nav .dropdown-toggle::after { margin-left: 0.5rem; transition: transform 0.2s ease; }
  .navbar-nav .dropdown.show .dropdown-toggle::after { transform: rotate(180deg); }
  .navbar-nav.ms-auto { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.1); }
  .navbar-text.d-none.d-lg-block { display: none !important; }
  .nav-item.d-lg-none .nav-link { text-align: center; background: rgba(255,255,255,0.05); margin-bottom: 0.5rem; }
}

@media (min-width: 768px) and (max-width: 991.98px) { .navbar-nav .nav-link { font-size: 0.95rem; padding: 0.5rem 0.75rem; } }

@media (max-width: 575.98px) {
  .navbar-brand { font-size: 1.1rem !important; }
  .navbar-nav .nav-link { font-size: 1rem; padding: 0.7rem 1rem; }
  .navbar-nav .dropdown-item { font-size: 0.95rem; padding: 0.5rem 0.75rem; }
  .container-fluid { padding-left: 1rem; padding-right: 1rem; }
}

@media (hover: none) and (pointer: coarse) {
  .navbar-nav .nav-link, .navbar-nav .dropdown-item { min-height: 44px; display: flex; align-items: center; }
  .navbar-nav .dropdown-item:hover { transform: none; }
}

/* ===== end migrated header navigation styles ===== */

/* Session Planner: render each list item as a light, card-like row with dark text
   This gives the tree items a light surface while keeping the rest of the UI dark.
   Scoped to the inline manage panel and the sections list area only. */
#manageSectionsInline .list-group-item,
#sectionsListArea .list-group-item {
  background: #f8f9fa !important; /* light surface */
  color: #212529 !important; /* dark body text */
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 6px;
}

#manageSectionsInline .list-group-item strong,
#sectionsListArea .list-group-item strong {
  color: #212529 !important;
}

#manageSectionsInline .list-group-item .text-muted,
#sectionsListArea .list-group-item .text-muted {
  color: #6c757d !important; /* slightly muted but readable */
}

/* Make the inline edit buttons remain visually compact */
#manageSectionsInline .list-group-item .btn,
#sectionsListArea .list-group-item .btn {
  font-size: 0.85rem;
}

/* Hover and spacing improvements for planner list rows */
#manageSectionsInline .list-group-item,
#sectionsListArea .list-group-item {
  padding: 0.6rem 0.9rem !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

#manageSectionsInline .list-group-item:hover,
#sectionsListArea .list-group-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  background: #ffffff !important; /* subtle brighten on hover */
}

/* Accent the inline edit button to use the site's primary accent */
#manageSectionsInline .list-group-item .btn-outline-secondary,
#sectionsListArea .list-group-item .btn-outline-secondary {
  border-color: rgba(111,66,193,0.18);
  color: #7041c7;
}

#manageSectionsInline .list-group-item .btn-outline-secondary:hover,
#sectionsListArea .list-group-item .btn-outline-secondary:hover {
  background: rgba(111,66,193,0.06);
  color: #4e2fa8;
}

/* Strong overrides to prevent other site rules from making popup text/background unreadable */
.leaflet-popup-content-wrapper,
.leaflet-popup-content,
.leaflet-popup-content * {
  background: rgba(30,30,30,0.98) !important;
  color: #fff !important;
}
.leaflet-popup-tip {
  background: rgba(30,30,30,0.98) !important;
}
.leaflet-tooltip,
.leaflet-tooltip * {
  background: rgba(10,10,10,0.95) !important;
  color: #fff !important;
}

/* Marker tint helpers */
.marker-location { filter: hue-rotate(120deg); }
.marker-event { filter: hue-rotate(60deg); }
.marker-npc { filter: hue-rotate(0deg); }
.marker-custom { filter: hue-rotate(270deg); }

/* Fullscreen and compact controls */
.fullscreen-toggle { background: rgba(13,110,253,0.8); color: white; border: none; border-radius: 8px; padding: 0.5rem 1rem; cursor: pointer; z-index: 1000; font-weight: bold; }
.fullscreen-toggle:focus { outline: none; }
.edit-add-button { background: rgba(255,193,7,0.8); color: #000; border: none; border-radius:8px; padding:0.5rem 1rem; cursor:pointer; position:absolute; top:10px; right:10px; z-index:1000; font-weight:bold; }
#compactFullscreenBtn { display:inline-block; position:static; margin-left:0.25rem; }
/* Make compact topbar buttons less squished */
#compactFullscreenBtn, #compactAddMapBtn {
  min-width: 110px;
  padding: 0.45rem 0.9rem;
  height: calc(2.4rem + 6px);
  line-height: 1.1;
  font-weight: 600;
}

#compactAddMapBtn {
  min-width: 130px;
}

/* Fullscreen button specific styles */
#compactFullscreenBtn {
  background: linear-gradient(90deg, rgba(10,84,166,0.95), rgba(24,120,255,0.95));
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(10,84,166,0.35);
}

/* Active/fullscreen state for the button */
#compactFullscreenBtn.fullscreen-active {
  background: linear-gradient(90deg, rgba(5,60,130,1), rgba(10,110,240,1)) !important;
  box-shadow: 0 8px 24px rgba(5,60,130,0.5) !important;
}

/* Compact top bar sizing */
#compactTopBar .form-select { min-width: 320px; height: calc(2.2rem + 10px); padding: 0.4rem 0.75rem; background-color: #1e1e1e !important; color: #fff !important; border: 1px solid #444 !important; }
#compactTopBar .btn { height: calc(2.2rem + 10px); align-self: center; }

/* When compact topbar is moved into fullscreen mode we want it to sit on top of the map
   rather than being covered by leaflet layers. Use a high z-index and fixed positioning
   so it stays visible at the top center. */
.compact-topbar-fullscreen {
  position: fixed !important;
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 2147483646 !important; /* very high but under browser UI */
  background: transparent !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35) !important;
}

/* Slight adjustments when in fullscreen to keep controls compact */
.compact-topbar-fullscreen .form-select { min-width: 260px !important; }
.compact-topbar-fullscreen .btn { height: auto !important; }

/* Sidebar button overrides for readability */
.map-sidebar .btn { border-radius: 6px; padding: 0.5rem 0.75rem; background: rgba(255,255,255,0.03) !important; color: #f8f9fa !important; border: 1px solid rgba(255,255,255,0.06) !important; }
.map-sidebar .btn-arcane { background-color: #FFDB51 !important; color: #1a1a1a !important; border: none !important; }
.map-sidebar .btn-outline-light { border-color: #7f8fa6 !important; color: #f5f6fa !important; background: transparent !important; }

/* Sidebar text & svg */
.map-sidebar { color: #fff !important; font-family: inherit; }
.map-sidebar svg { fill: currentColor; vertical-align: middle; }