@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

body {
  /* line-height: 0; */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.unit {
  border: 0.5px solid #222;
  width: 1.8em;
  height: 1.8em;
  display: inline-block;
  margin: 0;
}

.unit span {
  font-size: 0.5em;
}

.seat,
.facility {
  width: 1.8em;
  height: 1.8em;
  z-index: 10000;
}

p {
  font-size: 0.8em;
}

.wing {
  z-index: 1;
}
.deck {
  border: none;
  border-left: 2px solid #222;
  border-right: 2px solid #222;
  position: sticky;
  text-align: center;
  margin: auto;
  background-color: whitesmoke;
  z-index: 2;
  padding-left: 1.5rem;
}

@media (max-width: 768px) {
  .deck {
    position: relative;
    margin: auto;
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
  }
  
  /* Enable horizontal scroll for seatmap grids on mobile */
  .grid-container {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: calc(100vw - 32px); /* Account for page padding */
  }
  
  /* Ensure grid doesn't overflow */
  .grid {
    min-width: max-content;
    width: max-content;
  }
  
  /* Only constrain seatmap section */
  .seatmap-section {
    overflow-x: hidden;
  }
  
  /* Fix footer overflow on mobile */
  footer {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }
  
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Adjust footer text sizing for mobile */
  footer h3 {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  footer a, footer p {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
  }
  
  footer ul {
    margin-top: 0.5rem !important;
  }
  
  footer li {
    margin-bottom: 0.25rem !important;
  }
  
  /* Reduce padding on mobile */
  footer > div {
    padding: 2rem 1rem !important;
  }
}

.deck div {
  position: absolute;
  left: 12px;
}

.wing {
  border: 2px dashed #222;
  z-index: 0;
}

.plane-nose {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #B0C4DE;
  /* Light steel blue */
  position: relative;
}

.plane-nose:before {
  content: '';
  position: absolute;
  top: 25px;
  left: -50px;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 75px solid #B0C4DE;
  /* Light steel blue */
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */