/**
 * =============================================================================
 * TRAINLINQ MOBILE CSS IMPROVEMENTS
 * =============================================================================
 * Version: 1.1
 * =============================================================================
 */


/* =============================================================================
 * SECTION 1: ASK LELAND MODAL - COMPACT & HIGH CONTRAST
 * =============================================================================
 */

/* -- 1.1 Modal Container - Compact for mobile viewport -- */
#AIWindow {
  position: fixed !important;
  top: 5% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 9999 !important; /* Above header and nav */

  width: 94% !important;
  max-width: 400px !important;
  max-height: 88vh !important;

  padding: 16px !important;
  box-sizing: border-box !important;

  background: #1c1c1e !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;

  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* -- 1.2 Title - Compact -- */
#AIWindow > p:first-of-type {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-align: center !important;
  margin: 0 0 12px 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* -- 1.3 Instructions - HIGH CONTRAST, Compact -- */
#AIWindow > p:nth-of-type(2) {
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #ffffff !important; /* WHITE text for high contrast */
  margin-bottom: 12px !important;
  padding: 10px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  border-left: 3px solid #0b5fff !important;
}

/* Make the inline spans in instructions visible */
#AIWindow > p:nth-of-type(2) span {
  color: #ffffff !important; /* Force white on all instruction text */
}

/* -- 1.4 Fieldset - Tighter padding -- */
#AIWindow fieldset {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  padding: 12px !important;
  margin: 0 0 10px 0 !important;
}

#AIWindow fieldset legend {
  font-size: 11px !important;
  color: #9ca3af !important;
  padding: 0 6px !important;
}

/* -- 1.5 Action Buttons - CENTERED icons -- */
#AIWindow .btn.mic,
#AIWindow .btn.send {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  min-height: 48px !important;
  min-width: 110px !important;
  padding: 10px 18px !important;

  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 4px !important;
}

/* Center the SVG icons inside buttons */
#AIWindow .btn.mic svg,
#AIWindow .btn.send svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

/* Button container */
#AIWindow > fieldset > div:first-of-type {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
}

/* -- 1.6 Status Area - SIMPLIFIED & Compact -- */
/* Hide verbose labels, show only essential info */
#AIWindow fieldset > p {
  margin: 6px 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* Labels - smaller, muted */
#AIWindow fieldset > p > span:first-child {
  font-weight: 600 !important;
  color: #9ca3af !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: block !important;
  margin-bottom: 2px !important;
}

/* Status values - HIGH CONTRAST */
#AIWindow #upload_status,
#AIWindow #voice_query,
#AIWindow #response_natural {
  color: #ffffff !important; /* WHITE for readability */
  font-size: 14px !important;
  display: block !important;
  padding: 6px 10px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border-radius: 6px !important;
  word-wrap: break-word !important;
  margin-top: 2px !important;
}

/* Result area - highlighted but compact */
#AIWindow #response_natural {
  background: rgba(11, 95, 255, 0.15) !important;
  border-left: 3px solid #0b5fff !important;
  min-height: 32px !important;
}

/* -- 1.7 Close Button - ALWAYS VISIBLE -- */
#AIWindow #button_close_AI {
  display: block !important;
  width: 100% !important;
  margin: 12px auto 0 auto !important;
  padding: 14px 20px !important;

  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;

  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
}

#AIWindow #button_close_AI:active {
  background: #dc2626 !important;
  transform: scale(0.98) !important;
}

/* -- 1.8 Footer Link - Minimal -- */
#AIWindow > p:last-of-type {
  font-size: 11px !important;
  color: #6b7280 !important;
  text-align: center !important;
  margin-top: 10px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* -- 1.9 Checkbox - Compact inline -- */
#AIWindow fieldset fieldset {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 8px 10px !important;
  margin-top: 10px !important;
  display: flex !important;
  align-items: center !important;
}

#AIWindow fieldset fieldset legend {
  font-size: 10px !important;
}

#AIWindow #tts_auto {
  width: 20px !important;
  height: 20px !important;
  margin-right: 8px !important;
  flex-shrink: 0 !important;
}


/* =============================================================================
 * SECTION 2: HEADER NAVIGATION - WITH MARGIN
 * =============================================================================
 */

#Header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 10px 12px !important;
}

#portrait_menu,
#landscape_menu {
  margin: 8px 0 !important;
}

/* GRID LAYOUT - All 4 buttons on one line */
#portrait_menu ul,
#landscape_menu ul {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important; /* 4 equal columns */
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

#portrait_menu ul li,
#landscape_menu ul li {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;

  min-height: 44px !important;
  padding: 6px 4px !important;

  background: linear-gradient(135deg, #2d2d30 0%, #1c1c1e 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;

  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: all 0.15s ease !important;
}

#portrait_menu ul li:active,
#landscape_menu ul li:active {
  transform: scale(0.96) !important;
  background: #3a3a3c !important;
}

#portrait_menu ul li svg,
#landscape_menu ul li svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

#portrait_menu ul li span,
#landscape_menu ul li span {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* AI Button - Primary action */
#portrait_menu ul li#AI,
#landscape_menu ul li#AI {
  background: linear-gradient(135deg, #0b5fff 0%, #0047d4 100%) !important;
  border-color: #0b5fff !important;
}


/* =============================================================================
 * SECTION 3: CONTENT SECTIONS - NO HORIZONTAL SCROLL
 * =============================================================================
 */

/* Main container - breathing room */
#main {
  padding: 0 8px !important;
  box-sizing: border-box !important;
}

/* Prevent horizontal overflow on all content */
.application_content {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  padding: 0 !important; /* Remove since #main has padding now */
}

/* All section containers */
#SpecialAlerts,
#Crossings,
#Trains,
#Signs,
#Pedestrians,
#Assets,
#Crossings_Events {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  margin: 12px 0 !important;
}

/* Section Labels */
#SpecialAlerts > label,
#Crossings > label,
#Trains > label,
#Signs > label,
#Pedestrians > label,
#Assets > label {
  display: block !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 8px !important;
  padding-left: 4px !important;
}

#SpecialAlerts > label {
  color: #ef4444 !important;
}

/* Fieldsets - Responsive */
#SpecialAlerts > fieldset,
#Crossings > fieldset,
#Trains > fieldset,
#Signs > fieldset,
#Pedestrians > fieldset,
#Assets > fieldset {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: #1c1c1e !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 10px !important;
  margin: 0 !important;
  overflow-x: hidden !important;
}

/* Fieldset legends */
#SpecialAlerts > fieldset > legend,
#Crossings > fieldset > legend,
#Trains > fieldset > legend {
  font-size: 10px !important;
  color: #6b7280 !important;
  padding: 0 6px !important;
}

/* Tables - Full width, no overflow */
#Crossings_table,
#Trains_table,
#SpecialAlerts_table,
#Signs_table,
#Pedestrians_table,
#Assets_table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

/* Table cells - wrap text */
#Crossings_table td,
#Trains_table td,
#SpecialAlerts_table td {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  padding: 8px 4px !important;
  font-size: 13px !important;
  color: #e5e7eb !important;
}

/* Crossing table rows */
#Crossings_table tr {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px !important;
  margin-bottom: 6px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}

#Crossings_table tr:active {
  background: rgba(255, 255, 255, 0.08) !important;
}


/* =============================================================================
 * SECTION 4: STATUS BADGES - COMPACT
 * =============================================================================
 */

.toClose, .toOpen, .Clear, .NoSensor, .Predicted, .Idle, .toClear, .noSensor {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 60px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  border-radius: 16px !important;
  border-width: 2px !important;
  border-style: solid !important;
  white-space: nowrap !important;
}

.toClose {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #22c55e !important;
  border-color: #22c55e !important;
}

.toOpen {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #ef4444 !important;
  border-color: #ef4444 !important;
}

.Clear, .toClear {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
  border-color: #4ade80 !important;
}

.NoSensor, .noSensor {
  background: rgba(107, 114, 128, 0.2) !important;
  color: #9ca3af !important;
  border-color: #6b7280 !important;
}

.Predicted {
  background: rgba(234, 179, 8, 0.2) !important;
  color: #facc15 !important;
  border-color: #facc15 !important;
}

.Idle {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #d1d5db !important;
  border-color: #6b7280 !important;
}


/* =============================================================================
 * SECTION 5: FOOTER
 * =============================================================================
 */

#Footer {
  padding: 6px 12px !important;
  background: #000000 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Settings icon - minimal, inline with text */
#Footer #button_show_settings {
  display: inline !important;
  padding: 0 !important;
  margin: 0 4px !important;
  background: none !important;
  border: none !important;
  vertical-align: middle !important;
  cursor: pointer !important;
}

#Footer #button_show_settings + span {
  vertical-align: middle !important;
}


/* =============================================================================
 * SECTION 6: RESPONSIVE
 * =============================================================================
 */

@media only screen and (max-width: 375px) {
  #AIWindow {
    padding: 12px !important;
    top: 2% !important;
  }

  #AIWindow > p:first-of-type {
    font-size: 18px !important;
  }

  #portrait_menu ul li span,
  #landscape_menu ul li span {
    display: none !important;
  }

  #portrait_menu ul li,
  #landscape_menu ul li {
    padding: 10px !important;
    min-width: 44px !important;
  }

  .application_content {
    padding: 0 4px !important;
  }
}

@media only screen and (max-height: 600px) {
  /* Short screens - extra compact modal */
  #AIWindow {
    top: 2% !important;
    max-height: 94vh !important;
    padding: 10px !important;
  }

  #AIWindow > p:first-of-type {
    font-size: 16px !important;
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
  }

  #AIWindow > p:nth-of-type(2) {
    font-size: 13px !important;
    padding: 8px !important;
    margin-bottom: 8px !important;
  }

  #AIWindow .btn.mic,
  #AIWindow .btn.send {
    min-height: 42px !important;
    padding: 8px 14px !important;
  }
}

@media only screen and (min-width: 768px) {
  #AIWindow {
    max-width: 500px !important;
    padding: 20px !important;
  }
}


/* =============================================================================
 * SECTION 7: MESSAGE & MAP MODALS - Z-INDEX & POSITIONING FIXES
 * =============================================================================
 */

/* Message modal - ensure it appears above header */
.modal-message,
#Message {
  z-index: 10000 !important;
}

/* InCabMap - clear the header/menu bar */
#InCabMap {
  margin-top: 95px !important;
}


/* =============================================================================
 * SECTION 8: LOGIN / SIGNUP / RESET / LOGOUT MODALS
 * =============================================================================
 */

/* -- 7.1 Shared Modal Container Styles -- */
#Login,
#Signup,
#Reset,
#Logout {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 9999 !important;

  width: 92% !important;
  max-width: 400px !important;
  max-height: 90vh !important;

  padding: 24px 20px !important;
  box-sizing: border-box !important;

  background: #1c1c1e !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.6) !important;

  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* -- 7.2 Modal Titles -- */
#Login > p:first-of-type,
#Signup > p:first-of-type,
#Reset > p:first-of-type,
#Logout > p:first-of-type {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-align: center !important;
  margin: 0 0 20px 0 !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  letter-spacing: -0.5px !important;
}

/* -- 7.3 Form Labels -- */
#Login label,
#Signup label,
#Reset label,
#Logout label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #9ca3af !important;
  text-align: left !important;
  margin-bottom: 8px !important;
  padding-left: 4px !important;
}

/* -- 7.4 Text Inputs -- */
#Login input[type="input"],
#Login input[type="password"],
#Login input[type="email"],
#Login input[type="text"],
#Signup input[type="input"],
#Signup input[type="password"],
#Signup input[type="email"],
#Signup input[type="text"],
#Reset input[type="input"],
#Reset input[type="email"],
#Reset input[type="text"],
#Email,
#SecurityCode,
#SignupEmail,
#SignupSecurityCode,
#ResetEmail {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 14px 16px !important;
  margin: 0 0 16px 0 !important;
  box-sizing: border-box !important;

  font-size: 17px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  background: #2c2c2e !important;

  border: 2px solid #3a3a3c !important;
  border-radius: 12px !important;
  outline: none !important;

  -webkit-appearance: none !important;
  appearance: none !important;
}

#Login input:focus,
#Signup input:focus,
#Reset input:focus {
  border-color: #0b5fff !important;
  background: #323234 !important;
}

/* Placeholder text */
#Login input::placeholder,
#Signup input::placeholder,
#Reset input::placeholder {
  color: #6b7280 !important;
}

/* -- 7.5 Primary Action Buttons (Login, Accept, Reset) -- */
#button_login_submit,
#button_signup_submit,
#button_reset {
  display: block !important;
  width: 100% !important;
  padding: 16px 20px !important;
  margin: 20px 0 12px 0 !important;

  font-size: 17px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #ffffff !important;

  background: linear-gradient(135deg, #0b5fff 0%, #0047d4 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;

  -webkit-tap-highlight-color: transparent !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

#button_login_submit:active,
#button_signup_submit:active,
#button_reset:active {
  transform: scale(0.98) !important;
  box-shadow: 0 4px 12px rgba(11, 95, 255, 0.4) !important;
}

/* Logout button - red/danger style */
#button_logout_submit {
  display: block !important;
  width: 100% !important;
  padding: 16px 20px !important;
  margin: 20px 0 12px 0 !important;

  font-size: 17px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #ffffff !important;

  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;

  -webkit-tap-highlight-color: transparent !important;
}

#button_logout_submit:active {
  transform: scale(0.98) !important;
}

/* -- 7.6 Secondary Buttons (Close) -- */
#button_login_close,
#button_signup_close,
#button_reset_close,
#button_logout_close {
  display: block !important;
  width: 100% !important;
  padding: 14px 20px !important;
  margin: 8px 0 !important;

  font-size: 15px !important;
  font-weight: 600 !important;
  color: #9ca3af !important;

  background: transparent !important;
  border: 2px solid #3a3a3c !important;
  border-radius: 12px !important;
  cursor: pointer !important;

  -webkit-tap-highlight-color: transparent !important;
  transition: all 0.15s ease !important;
}

#button_login_close:active,
#button_signup_close:active,
#button_reset_close:active,
#button_logout_close:active {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: #6b7280 !important;
  color: #ffffff !important;
}

/* -- 7.7 Sign Up Link - Clean Button Style -- */
#Login li#sign_up,
#Reset li#sign_up {
  display: block !important;
  margin-top: 16px !important;
  padding: 14px 20px !important;

  background: transparent !important;
  border: 2px solid #0b5fff !important;
  border-radius: 12px !important;

  list-style: none !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  text-align: center !important;
  transition: all 0.15s ease !important;
}

/* Hide the extra text, show only "Signup" */
#Login li#sign_up span:first-child,
#Reset li#sign_up span:first-child {
  display: none !important;
}

#Login li#sign_up i,
#Reset li#sign_up i {
  display: none !important;
}

#Login li#sign_up span:last-child,
#Reset li#sign_up span:last-child {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #0b5fff !important;
}

#Login li#sign_up:active,
#Reset li#sign_up:active {
  background: rgba(11, 95, 255, 0.15) !important;
  border-color: #3b82f6 !important;
}

#Login li#sign_up:active span:last-child,
#Reset li#sign_up:active span:last-child {
  color: #ffffff !important;
}

/* -- 7.8 Close X Button (Login) -- */
#Login li#loginexit {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;

  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;

  list-style: none !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

#Login li#loginexit i {
  color: #9ca3af !important;
  font-size: 18px !important;
}

#Login li#loginexit:active {
  background: rgba(255, 255, 255, 0.2) !important;
}

#Login li#loginexit:active i {
  color: #ffffff !important;
}

/* -- 7.9 Logo Video -- */
#Login #LogoLogin {
  display: block !important;
  max-width: 150px !important;
  height: auto !important;
  margin: 0 auto 16px auto !important;
  border-radius: 12px !important;
}

/* -- 7.10 License Link (Signup) -- */
#Signup a[href*="License"] {
  display: block !important;
  color: #0b5fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  margin: 8px 0 16px 0 !important;
}

/* -- 7.11 Inner div text alignment fix -- */
#Login > div,
#Signup > div,
#Reset > div,
#Logout > div {
  text-align: center !important;
}

/* Center the button containers */
#Login div[style*="text-align"],
#Signup div[style*="text-align"],
#Reset div[style*="text-align"],
#Logout div[style*="text-align"] {
  text-align: center !important;
}


/* =============================================================================
 * END
 * =============================================================================
 */