/* modal-sheet.css */
/*
  This stylesheet provides the styles for a reusable modal-sheet component.
  It defines:
    - A modal-sheet overlay that covers the entire viewport with a semi-transparent background.
    - A modal-sheet content container that is centered on desktop and slides up as a bottom sheet on mobile.
    - A two-column layout for displaying sample charts, which collapses on smaller screens.
*/

/* Reset default browser styles 


/* PADDING / SPACING FOR THE BOTTOM SHEET */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  
  /* Modal-Sheet Overlay
     - Covers the entire viewport with a background.
     - Initially hidden using opacity and visibility properties.
  */
  
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display:none;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9998;
  }
  
  /* When the modal-sheet is open, make the overlay visible */
  .modal-overlay.open {
    display:block;
    visibility: visible;
  }
  
  /* Modal-Sheet Content
     - The container for the modal-sheet’s inner content.
     - On desktop: centered with a fixed width, rounded corners, and a shadow.
     - Initially hidden with opacity 0.
  */
  
  .modal-content {
    position: fixed;
    background-color: #fff;
    width: 80%;
    max-width: 800px;
    padding: 20px;
    border-radius: 8px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  /* When the modal-sheet is open, show the content */
  
  .modal-overlay.open .modal-content {
    opacity: 1;
    display:block;
    transform: translate(-50%, -50%);
  }
  
  
  /* Demo Content: Two-Column Layout for Sample Charts
     - On desktop: charts are displayed side by side.
     - On mobile: charts stack vertically.
  */
  .two-column-content {
    display: flex;
    gap: 20px;
    margin-top: 1rem;
  }
  
  .two-column-content > div {
    flex: 1;
  }
  
  /* Close Button styling */
  .close-btn {
    border: none;
    background: none;
    font-size: 1.2rem;
    cursor: pointer;
    float: right;
  }
  
  /***********************************************
    Responsive Adjustments – Bottom Sheet on Mobile
  ***********************************************/
  @media (max-width: 768px) {

    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 9998;
      }
      

    /* Adjust modal-sheet content for bottom sheet behavior */
    .modal-overlay .modal-content {
      top: auto;
      bottom: 0;
      left: 50%;
      width: 100%;
      max-width: none;
      padding: 20px;
      border-radius: 12px 12px 0 0;
      height: 60vh; /* Adjust height as needed */
      overflow-y: auto;
      /* Start offscreen at the bottom */
      transform: translate(-50%, 100%);
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    /* When open, slide the bottom sheet up */
    .modal-overlay.open .modal-content {
      transform: translate(-50%, 0);
      opacity: 1;
    }
    /* Stack the two columns vertically on mobile */
    .two-column-content {
      flex-direction: column;
    }
  }