/**
 * MaptiX Custom Styles
 * ダークテーマ対応のカスタムスタイル
 */

/* Custom Variables */
:root {
  --map-height: calc(100vh - 64px);
  --sidebar-width: 320px;
  --animation-duration: 0.3s;
}

/* Dark mode variables */
.dark {
  --tw-bg-opacity: 1;
  --tw-text-opacity: 1;
}

/* Map Styles */
#map {
  height: var(--map-height);
  width: 100%;
  z-index: 1;
}

.leaflet-container {
  font-family: 'Noto Sans JP', sans-serif;
  z-index: 1;
}

.leaflet-popup-content-wrapper {
  @apply bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100;
}

.leaflet-popup-tip {
  @apply bg-white dark:bg-gray-800;
}

/* Map Controls Z-Index Fix */
.leaflet-top,
.leaflet-bottom {
  z-index: 1000 !important;
}

.leaflet-control-zoom {
  z-index: 1001 !important;
}

.leaflet-control-layers {
  z-index: 1001 !important;
}

/* Layer Control Positioning */
.leaflet-top.leaflet-left {
  top: 1rem;
  left: 1rem;
}

.leaflet-control-layers {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.dark .leaflet-control-layers {
  background: rgba(31, 41, 55, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f3f4f6 !important;
}

.leaflet-control-layers-toggle {
  background-image: none !important;
  position: relative;
  width: 32px !important;
  height: 32px !important;
}

.leaflet-control-layers-toggle::before {
  content: '\f279';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 16px;
  color: #374151;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dark .leaflet-control-layers-toggle::before {
  color: #f3f4f6;
}

/* Layer Control Content */
.leaflet-control-layers-list {
  margin: 8px !important;
}

/* AutoRAG Analysis Styles */
.processed-indicator {
  @apply px-2 py-1 bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 text-xs rounded font-medium;
}

.processing-indicator {
  @apply px-2 py-1 bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 text-xs rounded font-medium;
}

.analyze-paper {
  @apply transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2;
}

.paper-card {
  @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 mb-4 hover:shadow-lg transition-shadow duration-300;
}

.paper-title {
  @apply text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3 line-clamp-2;
}

/* 削除：論文カードの著者表示部分（AI分析モーダルに移動） */

.paper-meta {
  @apply flex items-center space-x-4 text-xs text-gray-500 dark:text-gray-500 mb-3;
}

.paper-abstract {
  @apply text-gray-700 dark:text-gray-300 text-sm mb-3 leading-relaxed;
}

.paper-tags {
  @apply flex flex-wrap gap-2 mb-3;
}

.paper-tag {
  @apply px-2 py-1 bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 text-xs rounded;
}

.paper-actions {
  @apply flex items-center justify-between pt-3 border-t border-gray-200 dark:border-gray-700;
}

.results-empty {
  @apply p-8 text-center text-gray-500 dark:text-gray-400;
}

/* Modal Styles */
.max-h-90vh {
  max-height: 90vh;
}

/* Loading Animation for AI Analysis */
.ai-processing {
  @apply bg-purple-400 cursor-wait opacity-75;
}

.ai-processing:hover {
  @apply bg-purple-400;
}

.ai-processing .fa-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 要約の改行保持 */
.whitespace-pre-line {
  white-space: pre-line;
}

.leaflet-control-layers label {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer;
  padding: 4px 0;
}

.dark .leaflet-control-layers label {
  color: #f3f4f6 !important;
}

/* Custom Map Controls */
.map-controls-overlay {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1002 !important;
  pointer-events: auto;
}

/* Ensure no overlap between controls */
.leaflet-top.leaflet-right {
  top: 1rem;
  right: 5rem; /* 右上のカスタムコントロールのためのスペース確保 */
}

/* Hide Default Leaflet Draw Controls */
.leaflet-draw-toolbar {
  display: none !important;
}

.leaflet-draw-section {
  display: none !important;
}

.leaflet-control-draw {
  display: none !important;
}

/* Drawing Cursor */
.leaflet-container.leaflet-draw-drawing {
  cursor: crosshair !important;
}

/* Drawing Tooltips */
.leaflet-draw-tooltip {
  @apply bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-2 py-1 rounded text-sm;
  z-index: 1003 !important;
}

/* Paper Card Styles */
.paper-card {
  @apply bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4 mb-4 shadow-sm hover:shadow-md transition-all duration-200;
}

.paper-card:hover {
  @apply border-blue-300 dark:border-blue-600;
}

.paper-title {
  @apply text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2;
}

.paper-authors {
  @apply text-sm text-gray-600 dark:text-gray-400 mb-2;
}

.paper-meta {
  @apply flex items-center text-xs text-gray-500 dark:text-gray-400 space-x-3 mb-3;
}

.paper-abstract {
  @apply text-sm text-gray-700 dark:text-gray-300 mb-3 line-clamp-3;
}

.paper-tags {
  @apply flex flex-wrap gap-1 mb-3;
}

.paper-tag {
  @apply px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded text-xs;
}

.paper-actions {
  @apply flex items-center justify-between;
}

/* Loading Animations */
.animate-pulse-slow {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Collection Items */
.collection-item {
  @apply bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-3 mb-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors;
}

/* Map Controls */
.map-control-btn.active {
  @apply bg-blue-700 dark:bg-blue-400 ring-2 ring-blue-300 dark:ring-blue-600;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.map-control-btn:hover:not(.active) {
  transform: translateY(-1px);
}

.map-control-btn {
  transition: all 0.2s ease;
}

/* Search Results */
.results-empty {
  @apply text-center py-12 text-gray-500 dark:text-gray-400;
}

/* Search Button in Map */
#search-button button {
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
  }
}

#search-button button:hover {
  animation: none;
  box-shadow: 0 0 25px rgba(59, 130, 246, 0.8);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .desktop-layout {
    @apply hidden;
  }
  
  .mobile-layout {
    @apply block;
  }
  
  #map {
    height: 50vh;
  }
}

@media (min-width: 769px) {
  .desktop-layout {
    @apply flex;
  }
  
  .mobile-layout {
    @apply hidden;
  }
}

/* Custom Scrollbar */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  @apply bg-gray-100 dark:bg-gray-700;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  @apply bg-gray-300 dark:bg-gray-500 rounded-full;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400 dark:bg-gray-400;
}

/* Toast Notifications */
.toast {
  @apply fixed top-4 right-4 z-50 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg p-4 max-w-sm transform transition-all duration-300;
}

.toast.success {
  @apply border-green-500 bg-green-50 dark:bg-green-900;
}

.toast.error {
  @apply border-red-500 bg-red-50 dark:bg-red-900;
}

.toast.warning {
  @apply border-orange-500 bg-orange-50 dark:bg-orange-900;
}

/* Line Clamp Utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Selection Highlight */
.selection-highlight {
  @apply bg-blue-100 dark:bg-blue-900 border-2 border-blue-500 dark:border-blue-400;
}

/* Auto RAG Processing Indicator */
.processing-indicator {
  @apply inline-flex items-center px-2 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded text-xs;
}

.processed-indicator {
  @apply inline-flex items-center px-2 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded text-xs;
}

/* Dropdown Menus */
.dropdown-menu {
  @apply absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1 z-50;
}

.dropdown-item {
  @apply block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer;
}

/* Accessibility */
.focus\:ring-blue-500:focus {
  @apply ring-2 ring-blue-500 ring-opacity-50;
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  .paper-card {
    @apply border border-gray-300 mb-4 break-inside-avoid;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .paper-card {
    @apply border-2 border-black dark:border-white;
  }
}