/**

 * analytics.css

 *

 * Minimal styling for analytics debugging / console overlay.

 * Also any minor classes you want for analytics-related UI elements.

 *

 * Author: Your Name

 * Version: 1.0.0

 */



/* 1) A debug overlay that appears at the bottom of the screen, showing events as they're tracked. */

#emls-tracking-overlay {

  position: fixed;

  bottom: 0;

  left: 0;

  width: 300px;

  max-height: 50vh;

  overflow-y: auto;

  z-index: 999999; /* ensure it's on top */

  background-color: rgba(0, 0, 0, 0.7);

  color: #fff;

  font-size: 13px;

  font-family: sans-serif;

  padding: 6px;

  border-top-right-radius: 4px;

  box-shadow: 2px -2px 8px rgba(0, 0, 0, 0.6);

}



/* Each line that gets added for a debug message */

.emls-tracking-line {

  margin: 3px 0;

  padding: 2px 4px;

  background-color: rgba(255, 255, 255, 0.1);

  border-radius: 2px;

}



/* Scrollbar styling if needed */

#emls-tracking-overlay::-webkit-scrollbar {

  width: 6px;

}

#emls-tracking-overlay::-webkit-scrollbar-thumb {

  background: #444;

}

#emls-tracking-overlay::-webkit-scrollbar-track {

  background: #222;

}





/* 2) Example styling for any data-event-type elements

   (purely optional, remove or adapt as you like) */

[data-event-type] {

  cursor: pointer;

  transition: box-shadow 0.2s ease;

}

[data-event-type]:hover {

  box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.5);

}



/* 3) (Optional) style forms with data-event-type="form_submission" */

form[data-event-type="form_submission"] {

  border: 1px dashed #f90;

  padding: 10px;

  margin: 10px 0;

}

form[data-event-type="form_submission"] label {

  font-weight: bold;

  color: #333;

}



/* Add any additional classes related to analytics debugging */