/* Mobile Event Navigation and Modal Styles */

/* Desktop: Event info and icons on same row */
.desktop-event-icons-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   margin-bottom: 1rem;
}

.desktop-event-icons-row .event-info-bar {
   flex: 1;
   margin: 0;
}

.desktop-event-icons-row .integration-icons-inline {
   display: inline-flex;
   align-items: center;
   gap: 0.75rem;
   flex-shrink: 0;
}

/* Desktop: Hide mobile icons in header, show desktop icons in content */
.header-integration-icons {
   display: none !important;
}

.integration-icons-inline#desktopIcons {
   display: inline-flex;
}

/* Mobile: Hide desktop event info and icons, show mobile versions in header */
@media (max-width: 768px) {
   /* Hide the desktop event-icons row on mobile */
   .desktop-event-icons-row {
      display: none !important;
   }
   
   /* Hide the event info bar on main page since it's now in the nav */
   .event-info-bar {
      display: none !important;
   }
   
   /* Hide desktop icons in content on mobile */
   .integration-icons-inline#desktopIcons {
      display: none !important;
   }
   
   /* Show mobile icons in header ONLY on dashboard */
   body.dashboard .header-integration-icons {
      display: flex !important;
   }
}

/* General nav-left padding */
.nav-left {
   padding-left: 24px;
}

/* Mobile Navigation Layout */
@media (max-width: 768px) {
   /* Hide desktop app name on mobile */
   .app-name-desktop {
      display: none !important;
   }
   
   /* Show mobile app name container */
   .app-name-mobile {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
   }
   
   .app-name-mobile a {
      font-size: 1.2rem;
      font-weight: 800;
      color: var(--text-heading, #1a202c);
      text-decoration: none;
      white-space: nowrap;
   }
   
   /* Event name styling (acts like logo) - HIDDEN BY DEFAULT */
   .event-name-logo {
      font-size: 0.9rem;
      color: var(--primary, #0676ed);
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 6px;
      transition: all 0.2s ease;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 150px;
      display: none !important; /* Hide by default */
      font-weight: 600;
      border: 1px solid transparent;
   }
   
   /* Show ONLY on dashboard */
   body.dashboard .event-name-logo {
      display: inline-block !important;
   }
   
   .event-name-logo:hover {
      background-color: rgba(0, 0, 0, 0.05);
      border-color: rgba(0, 0, 0, 0.1);
   }
   
   .event-name-logo.event-name-placeholder {
      color: var(--text-light, #718096);
      font-style: italic;
      font-weight: 400;
   }
   
   /* Header integration icons - positioned for mobile */
   .header-integration-icons {
      align-items: center;
      gap: 4px;
      margin-right: 16px;
      order: 2;
   }
   
   /* Hamburger menu positioning */
   .mobile-hamburger {
      order: 3;
      margin-left: 0;
      padding-right: 24px;
   }
   
   /* Nav layout adjustments */
   .nav-inner {
      display: flex;
      align-items: center;
      gap: 12px;
   }
   
   .nav-left {
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0; /* Allow flex items to shrink */
      padding-left: 24px;
   }
   
   /* Desktop: Hide mobile app name */
   .app-name-desktop {
      display: inline-block;
   }
}

/* Desktop: Show full app name, hide mobile version */
@media (min-width: 769px) {
   .app-name-mobile {
      display: none !important;
   }
   
   .app-name-desktop {
      display: inline-block !important;
   }
}

/* Event Modal Styles */
.event-modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10000;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   box-sizing: border-box;
}

.event-modal-backdrop {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
}

.event-modal-content {
   position: relative;
   background: white;
   border-radius: 12px;
   width: 100%;
   max-width: 500px;
   max-height: 90vh;
   overflow-y: auto;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
   z-index: 10001;
   display: flex;
   flex-direction: column;
}

.event-modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 24px;
   border-bottom: 1px solid #e5e7eb;
   flex-shrink: 0;
}

.event-modal-header h2 {
   margin: 0;
   font-size: 1.5rem;
   font-weight: 600;
   color: var(--text-heading, #1a202c);
}

.event-modal-close {
   background: none;
   border: none;
   font-size: 28px;
   line-height: 1;
   color: #6b7280;
   cursor: pointer;
   padding: 0;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 6px;
   transition: all 0.2s ease;
}

.event-modal-close:hover {
   background-color: #f3f4f6;
   color: #1a202c;
}

.event-modal-body {
   padding: 24px;
   flex: 1;
   overflow-y: auto;
}

.event-form-group {
   margin-bottom: 20px;
}

.event-form-group label {
   display: block;
   margin-bottom: 8px;
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--text-heading, #1a202c);
}

.event-form-input,
.event-form-textarea {
   width: 100%;
   padding: 12px;
   font-size: 1rem;
   border: 1px solid #d1d5db;
   border-radius: 8px;
   transition: all 0.2s ease;
   box-sizing: border-box;
   font-family: inherit;
}

.event-form-input:focus,
.event-form-textarea:focus {
   outline: none;
   border-color: #3b82f6;
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.event-form-textarea {
   resize: vertical;
   min-height: 100px;
   line-height: 1.5;
}

.event-form-actions {
   display: flex;
   gap: 12px;
   margin-top: 24px;
   flex-shrink: 0;
}

.event-form-actions .btn {
   flex: 1;
   padding: 12px 24px;
   font-size: 1rem;
   font-weight: 500;
   border: none;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
}

.event-form-actions .btn-primary {
   background-color: #3b82f6;
   color: white;
}

.event-form-actions .btn-primary:hover:not(:disabled) {
   background-color: #2563eb;
}

.event-form-actions .btn-primary:disabled {
   background-color: #9ca3af;
   cursor: not-allowed;
}

.event-form-actions .btn-secondary {
   background-color: #6b7280;
   color: white;
}

.event-form-actions .btn-secondary:hover:not(:disabled) {
   background-color: #4b5563;
}

.btn-spinner {
   display: none;
}

.btn:disabled .btn-text {
   display: none;
}

.btn:disabled .btn-spinner {
   display: inline;
}

/* Mobile Modal Adjustments */
@media (max-width: 640px) {
   .event-modal {
      padding: 0;
   }
   
   .event-modal-content {
      max-width: 100%;
      max-height: 100vh;
      border-radius: 0;
   }
   
   .event-modal-header {
      padding: 16px 20px;
   }
   
   .event-modal-header h2 {
      font-size: 1.25rem;
   }
   
   .event-modal-body {
      padding: 20px;
   }
   
   .event-form-actions {
      flex-direction: column;
   }
   
   .event-form-actions .btn {
      width: 100%;
   }
}

/* Mobile padding adjustments - match index.php style */
@media (max-width: 768px) {
   /* Remove all nested padding layers on mobile */
   .container {
      padding-left: 0 !important;
      padding-right: 0 !important;
   }
   
   .content {
      padding: 0 !important;
   }
   
   #defaultForm {
      padding: 0 !important;
      margin: 0 15px !important; /* Single margin layer matching index.php */
   }
   
   #result {
      padding: 0 !important;
      margin: 0 !important;
   }
}

/* Ensure textarea in main form is styled properly */
#defaultForm textarea#yourEmail {
   width: 100%;
   padding: 12px;
   font-size: 16px; /* Prevents zoom on iOS */
   border: 1px solid #d1d5db;
   border-radius: 8px;
   resize: vertical;
   font-family: inherit;
   box-sizing: border-box;
   min-height: 80px;
   line-height: 1.5;
}

#defaultForm textarea#yourEmail:focus {
   outline: none;
   border-color: #3b82f6;
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Header integration icons styling on mobile */
@media (max-width: 768px) {
   .header-integration-icons .integration-toggle {
      border: none;
      background: none !important;
      padding: 6px;
      margin: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--dashboard-text-light, #9CA3AF);
      transition: color 0.2s ease, transform 0.2s ease;
      border-radius: 0;
   }
   
   .header-integration-icons .integration-toggle:focus-visible {
      outline: 2px solid var(--dashboard-primary, #0E7C86);
      outline-offset: 2px;
   }
   
   .header-integration-icons .integration-toggle:not(.is-active):hover {
      color: var(--dashboard-text-heading, #111827);
      transform: translateY(-1px);
      background: none !important;
   }
   
   .header-integration-icons .integration-toggle.is-active {
      color: #28a745;
      background: rgba(40, 167, 69, 0.12) !important;
      border-radius: 4px;
   }
   
   .header-integration-icons .integration-toggle svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      transition: transform 0.2s, opacity 0.2s;
      pointer-events: none;
   }
}

/* Share button row - restore original width */
.share-button-row {
   margin-top: 12px;
   margin-bottom: 24px;
}

.share-button-row .button {
   width: 100%;
   margin: 0;
}

/* Result card close button fix */
.card-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
}

.result-close {
   background: none;
   border: none;
   font-size: 24px;
   line-height: 1;
   color: #6b7280;
   cursor: pointer;
   padding: 4px 8px;
   margin: -4px -8px -4px 0;
   border-radius: 4px;
   transition: all 0.2s ease;
   flex-shrink: 0;
}

.result-close:hover {
   background-color: rgba(0, 0, 0, 0.05);
   color: #1f2937;
}

/* Result card mobile styling */
@media (max-width: 768px) {
   .result-card {
      margin: 10px 0 !important;
   }
   
   .card-head {
      padding: 12px !important;
   }
   
   .result-close {
      font-size: 28px;
      padding: 2px 6px;
   }
}

/* Prevent body scroll when modal is open */
body.modal-open {
   overflow: hidden;
}