/* Mobile fixes for Rules and Profiles pages */

/* Fix for profile button in navbar (desktop mode) */
.profile-button {
  max-width: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.profile-picture {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Fix for analytics page controls section */
.analytics-container .controls-section {
  flex-shrink: 0 !important;
  height: auto !important;
  max-height: 70px !important;
}

.analytics-container .analytics-grid {
  flex: 1 !important;
  overflow-y: auto !important;
}

/* Gondwa page fixes - Desktop */
.sidebar {
  width: 400px !important;
  padding-top: 20px !important;
  height: calc(100vh - 60px) !important;
  overflow-y: auto !important;
}

.right-sidebar {
  width: 380px !important;
  padding-top: 20px !important;
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
}

/* Resource categories and toggles improvements */
.resource-category {
  margin-bottom: 15px !important;
}

.areas-toggle {
  padding: 10px !important;
}

.areas-toggle-header {
  margin-bottom: 5px !important;
}

.category-header {
  padding: 10px 0 !important;
}

/* Hide mobile elements in desktop mode */
@media (min-width: 769px) {
  /* Hide specific mobile elements for various pages */
  .mobile-profiles-modal,
  .modal-backdrop,
  #mobileProfileSelector,
  #mobileRuleSelector {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* Hide mobile toggle buttons on desktop */
  .left-sidebar-toggle,
  .right-sidebar-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* Ensure sidebar scrolling works on desktop */
  .sidebar, 
  .right-sidebar {
    overflow-y: auto !important;
    max-height: none !important;
  }
  
  .sidebar {
    height: calc(100vh - 60px) !important;
  }
  
  .right-sidebar {
    max-height: calc(100vh - 100px) !important;
  }
}

/* Mobile styles for the Gondwa page */
@media (max-width: 768px) {
  /* Map adjustments */
  #map {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(100vh - var(--navbar-height)) !important;
  }
  
  /* Hide sidebars by default on mobile */
  .sidebar, 
  .right-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 80vh !important; /* Limit height to enable scrolling */
    position: fixed !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s ease !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px !important;
    z-index: 9999 !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5) !important;
    overflow-y: auto !important; /* Ensure scrolling is enabled */
  }
  
  /* Sidebar toggle buttons for mobile */
  .left-sidebar-toggle,
  .right-sidebar-toggle {
    display: flex !important;
    position: fixed !important;
    bottom: 20px !important;
    z-index: 999999 !important;
    width: 56px !important;
    height: 56px !important;
    background-color: #ff763c !important;
    color: white !important;
    border-radius: 50% !important;
    border: none !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .left-sidebar-toggle {
    left: 20px !important;
  }
  
  .right-sidebar-toggle {
    right: 20px !important;
  }
  
  /* Make the toggle buttons more clickable with !important */
  #leftSidebarToggle,
  #rightSidebarToggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    z-index: 999999 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }
  
  /* Active state for sidebars */
  .sidebar.active,
  .right-sidebar.active {
    transform: translateY(0) !important;
  }
  
  /* Modal backdrop when sidebars are open */
  .gondwa-modal-backdrop {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 9000 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
  }
  
  .gondwa-modal-backdrop.active {
    display: block !important;
    opacity: 1 !important;
  }

  /* Modal pull indicator - make it more visible and clickable */
  .modal-pull-indicator {
    width: 60px !important;
    height: 6px !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
    border-radius: 5px !important;
    margin: 0 auto 15px !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
  }
  
  /* Add hover effect to make it clear it's interactive */
  .modal-pull-indicator:hover {
    background-color: rgba(255, 255, 255, 0.6) !important;
  }

  /* Improved styling for resource toggles on mobile */
  .resource-toggles-grid {
    grid-template-columns: 1fr !important;
    margin-bottom: 20px !important;
  }
  
  .resource-toggle {
    padding: 12px !important; 
    font-size: 16px !important;
  }
  
  .resource-name {
    font-size: 15px !important;
  }
  
  .dino-selector {
    margin-bottom: 20px !important;
  }
  
  .dino-select {
    width: 100% !important;
    padding: 12px !important;
    font-size: 16px !important;
  }
}

/* FINAL ALERT MODAL FIX - SIMPLIFIED */
#alertModal,
#changeSummaryRequestModal,
#changeSummaryInputModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999999;
}

#alertModal .alert-modal-content,
#changeSummaryRequestModal .alert-modal-content,
#changeSummaryInputModal .alert-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #2a2a2a;
  color: #e6e6e6;
  width: 90%;
  max-width: 400px;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  text-align: center;
}

#alertModal .alert-title,
#changeSummaryRequestModal .alert-title,
#changeSummaryInputModal .alert-title {
  color: #ff763c;
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 20px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #3a3a3a;
  padding-bottom: 15px;
}

#alertModal .alert-body,
#changeSummaryRequestModal .alert-body,
#changeSummaryInputModal .alert-body {
  margin-bottom: 25px;
}

#alertModal .alert-body p,
#changeSummaryRequestModal .alert-body p,
#changeSummaryInputModal .alert-body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

#alertModal .alert-footer,
#changeSummaryRequestModal .alert-footer,
#changeSummaryInputModal .alert-footer {
  display: flex;
  justify-content: center;
}

#alertModal #alertOkBtn,
#changeSummaryRequestModal #summaryYesBtn,
#changeSummaryInputModal #summarySubmitBtn {
  min-width: 120px;
  padding: 10px 20px;
  background-color: #ff763c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
}

#alertModal #alertOkBtn:hover,
#changeSummaryRequestModal #summaryYesBtn:hover,
#changeSummaryInputModal #summarySubmitBtn:hover {
  background-color: #e66a35;
}

#changeSummaryRequestModal #summaryNoBtn,
#changeSummaryInputModal #summaryCancelBtn {
  min-width: 120px;
  padding: 10px 20px;
  background-color: #444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
}

#changeSummaryRequestModal #summaryNoBtn:hover,
#changeSummaryInputModal #summaryCancelBtn:hover {
  background-color: #555;
}

#summaryInput {
  width: 100% !important;
  min-height: 80px !important;
  margin-top: 10px !important;
  background-color: #333 !important;
  color: #fff !important;
  border: 1px solid #444 !important;
  border-radius: 4px !important;
  padding: 8px !important;
  font-size: 14px !important;
  resize: vertical !important;
}

#alertModal .alert-close,
#changeSummaryRequestModal .alert-close,
#changeSummaryInputModal .alert-close {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  background: none;
  border: none;
  line-height: 20px;
}

#alertModal .alert-close:hover,
#changeSummaryRequestModal .alert-close:hover,
#changeSummaryInputModal .alert-close:hover {
  color: #ff763c;
}

/* Fix CKEditor Content Formatting */
.ck-content p, 
.ck-content h1, 
.ck-content h2, 
.ck-content h3, 
.ck-content h4, 
.ck-content h5, 
.ck-content h6, 
.ck-content ul, 
.ck-content ol, 
.ck-content li, 
.ck-content blockquote {
  margin: 0 0 1em 0 !important; /* Consistent margins */
  line-height: 1.6 !important;
}

.ck-content p {
  margin-bottom: 1em !important;
}

/* Fix heading styles */
.ck-content h1 {
  font-size: 2em !important;
  margin-top: 1em !important;
  margin-bottom: 0.5em !important;
}

.ck-content h2 {
  font-size: 1.75em !important;
  margin-top: 0.8em !important;
  margin-bottom: 0.5em !important;
}

.ck-content h3 {
  font-size: 1.5em !important;
  margin-top: 0.8em !important;
  margin-bottom: 0.5em !important;
}

.ck-content h4 {
  font-size: 1.25em !important;
}

.ck-content h5, .ck-content h6 {
  font-size: 1em !important;
}

/* Fix list formatting */
.ck-content ul, .ck-content ol {
  padding-left: 1.5em !important;
  margin-bottom: 1em !important;
}

.ck-content li {
  margin-bottom: 0.25em !important;
}

/* Make images responsive */
.ck-content img {
  max-width: 100% !important;
  height: auto !important;
}

/* Fix sidebar font size */
.profile-list .profile-item {
  font-size: 0.875rem !important; /* 14px */
}

.profile-list .profile-name {
  font-size: 0.875rem !important; /* 14px */
  font-weight: 400 !important;
}

.sidebar .search-input {
  font-size: 0.875rem !important; /* 14px */
}

/* Ensure proper spacing in editor */
.ck.ck-editor__editable_inline {
  padding: 1.5em !important;
}

/* Fix editor toolbar */
.ck.ck-toolbar {
  padding: 0.25em !important;
}

.ck.ck-toolbar__items {
  line-height: 1 !important;
}