/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Theme color variables */
:root, [data-theme="righteousfellowship"] {
  /* Light theme colors */
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --color-accent: #10b981;
  --color-success: #10b981;
  --color-error: #ef4444;
  --color-warning: #fbbd23;

  --color-base-100: #ffffff;
  --color-base-200: #f3f4f6;
  --color-base-300: #e5e7eb;
  --color-base-content: #1f2937;
}

[data-theme="righteousfellowship-dark"] {
  /* Dark theme colors - High contrast with blacks and grays */
  --color-primary: #60a5fa;
  --color-secondary: #a78bfa;
  --color-accent: #34d399;
  --color-success: #4ade80;
  --color-error: #f87171;
  --color-warning: #fbbf24;

  --color-base-100: #000000;
  --color-base-200: #0a0a0a;
  --color-base-300: #171717;
  --color-base-content: #f5f5f5;
}

/* Apply theme colors */
.bg-base-100 {
  background-color: var(--color-base-100);
}

.bg-base-200 {
  background-color: var(--color-base-200);
}

.bg-base-300 {
  background-color: var(--color-base-300);
}

.text-base-content {
  color: var(--color-base-content);
}

.border-base-content\/20 {
  border-color: color-mix(in srgb, var(--color-base-content) 20%, transparent);
}

.border-base-content\/10 {
  border-color: color-mix(in srgb, var(--color-base-content) 10%, transparent);
}

.text-base-content\/60 {
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
}

.text-base-content\/70 {
  color: color-mix(in srgb, var(--color-base-content) 70%, transparent);
}

.text-base-content\/80 {
  color: color-mix(in srgb, var(--color-base-content) 80%, transparent);
}

.text-base-content\/50 {
  color: color-mix(in srgb, var(--color-base-content) 50%, transparent);
}

.text-primary {
  color: var(--color-primary);
}

.text-success {
  color: var(--color-success);
}

.text-error {
  color: var(--color-error);
}

.text-warning {
  color: var(--color-warning);
}

.hover\:bg-base-200:hover {
  background-color: var(--color-base-200);
}

.hover\:text-primary:hover {
  color: var(--color-primary);
}

.border-primary\/30 {
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.bg-primary\/10 {
  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.bg-primary\/20 {
  background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.bg-primary\/5 {
  background-color: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

.bg-base-content\/10 {
  background-color: color-mix(in srgb, var(--color-base-content) 10%, transparent);
}

.bg-base-content\/5 {
  background-color: color-mix(in srgb, var(--color-base-content) 5%, transparent);
}

.bg-success\/10 {
  background-color: color-mix(in srgb, var(--color-success) 10%, transparent);
}

.bg-error\/10 {
  background-color: color-mix(in srgb, var(--color-error) 10%, transparent);
}

.bg-error\/5 {
  background-color: color-mix(in srgb, var(--color-error) 5%, transparent);
}

.bg-warning\/10 {
  background-color: color-mix(in srgb, var(--color-warning) 10%, transparent);
}

.bg-warning\/5 {
  background-color: color-mix(in srgb, var(--color-warning) 5%, transparent);
}

.hover\:bg-primary\/10:hover {
  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.hover\:bg-primary\/20:hover {
  background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.border-l-primary {
  border-left-color: var(--color-primary);
}

.border-l-success {
  border-left-color: var(--color-success);
}

.border-l-error {
  border-left-color: var(--color-error);
}

.border-l-warning {
  border-left-color: var(--color-warning);
}

.border-primary {
  border-color: var(--color-primary);
}

.border-success {
  border-color: var(--color-success);
}

.border-success\/30 {
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}

.border-error {
  border-color: var(--color-error);
}

.border-error\/30 {
  border-color: color-mix(in srgb, var(--color-error) 30%, transparent);
}

.border-warning {
  border-color: var(--color-warning);
}

.border-warning\/30 {
  border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

/* Mobile-friendly improvements */
html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

/* Improve touch targets */
.touch-manipulation {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Prevent text selection on buttons */
button, a.btn, .btn {
  -webkit-user-select: none;
  user-select: none;
}

/* Better scrolling on mobile */
body {
  -webkit-overflow-scrolling: touch;
}

/* Ensure minimum tap target size for accessibility */
@media (pointer: coarse) {
  button, a, input[type="submit"], input[type="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Leaflet map customizations - Bloomberg Terminal style */
.leaflet-container {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 10px;
}

/* Map tiles are now handled by loading different tile sets (light/dark) from ArcGIS */
/* No CSS filters needed - the tile URLs change based on theme */

/* Leaflet controls styling */
.leaflet-control-zoom a {
  background-color: var(--color-base-100) !important;
  color: var(--color-base-content) !important;
  border: 1px solid color-mix(in srgb, var(--color-base-content) 20%, transparent) !important;
}

.leaflet-control-zoom a:hover {
  background-color: var(--color-base-200) !important;
  border-color: var(--color-primary) !important;
}

/* Leaflet popup - Bloomberg Terminal style */
.leaflet-popup-content-wrapper {
  background-color: var(--color-base-100) !important;
  color: var(--color-base-content) !important;
  border: 1px solid color-mix(in srgb, var(--color-base-content) 20%, transparent) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-width: 220px;
}

/* Dark mode shadow enhancement */
[data-theme="righteousfellowship-dark"] .leaflet-popup-content-wrapper {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8) !important;
  border: 1px solid color-mix(in srgb, var(--color-base-content) 30%, transparent) !important;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip-container {
  border-radius: 0 !important;
}

.leaflet-popup-content {
  margin: 0 !important;
  line-height: 1.3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.leaflet-popup-tip {
  background-color: var(--color-base-100) !important;
  border: 1px solid color-mix(in srgb, var(--color-base-content) 20%, transparent) !important;
  border-left: none !important;
  border-top: none !important;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Dark mode tip enhancement */
[data-theme="righteousfellowship-dark"] .leaflet-popup-tip {
  border-color: color-mix(in srgb, var(--color-base-content) 30%, transparent) !important;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6) !important;
}

.leaflet-container a.leaflet-popup-close-button {
  color: var(--color-base-content) !important;
  font-size: 16px;
  font-weight: bold;
  padding: 4px 8px;
  opacity: 0.5;
  transition: opacity 0.2s, color 0.2s;
}

.leaflet-container a.leaflet-popup-close-button:hover {
  color: var(--color-error) !important;
  opacity: 1;
  background-color: transparent !important;
}

/* Map popup content styles - Dense Information Architecture */
.map-popup-content {
  padding: 12px;
  font-size: 10px;
  background-color: var(--color-base-100);
  color: var(--color-base-content);
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-base-content) 10%, transparent);
}

.popup-label {
  color: var(--color-primary) !important;
  font-weight: bold;
  font-size: 9px;
  letter-spacing: 0.5px;
}

.popup-id {
  color: color-mix(in srgb, var(--color-base-content) 50%, transparent) !important;
  font-size: 9px;
  font-weight: normal;
}

.popup-name {
  font-size: 11px;
  font-weight: bold;
  color: var(--color-base-content) !important;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.popup-location {
  font-size: 9px;
  color: color-mix(in srgb, var(--color-base-content) 70%, transparent) !important;
  margin-bottom: 8px;
}

.popup-divider {
  height: 1px;
  background: color-mix(in srgb, var(--color-base-content) 10%, transparent);
  margin: 8px 0;
}

.popup-data-grid {
  margin-bottom: 8px;
}

.popup-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 9px;
}

.popup-data-label {
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent) !important;
  font-weight: normal;
  letter-spacing: 0.3px;
}

.popup-data-value {
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.popup-data-value.rating-high {
  color: var(--color-success) !important;
}

.popup-data-value.rating-medium {
  color: var(--color-warning) !important;
}

.popup-data-value.rating-low {
  color: var(--color-error) !important;
}

.popup-action {
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--color-base-content) 10%, transparent);
}

.popup-link {
  display: block;
  color: var(--color-primary) !important;
  font-size: 9px;
  font-weight: bold;
  text-decoration: none !important;
  letter-spacing: 0.5px;
  text-align: right;
  transition: color 0.2s;
}

.popup-link:hover {
  color: var(--color-success) !important;
  text-decoration: none !important;
}

/* Map container border enhancement */
.leaflet-container {
  background-color: var(--color-base-200);
}

/* Dark mode icon toggle */
[data-theme="righteousfellowship"] .dark-mode-icon::before {
  content: "☀";
}

[data-theme="righteousfellowship-dark"] .dark-mode-icon::before {
  content: "☾";
}

.dark-mode-icon {
  font-style: normal;
}

.dark-mode-icon::before {
  content: "☀";
}

/* Church marker customization - Bloomberg Terminal style */
.church-marker-rectangle {
  background: transparent;
  border: none;
}

.church-marker-tag {
  background-color: var(--color-primary);
  color: white;
  padding: 4px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 9px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  border: 2px solid var(--color-base-100);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.church-marker-tag:hover {
  background-color: var(--color-success);
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Attribution control styling */
.leaflet-control-attribution {
  background-color: var(--color-base-100) !important;
  color: var(--color-base-content) !important;
  font-size: 9px !important;
  opacity: 0.7;
}

.leaflet-control-attribution a {
  color: var(--color-primary) !important;
}