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

/*

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

*/


.btn-success {
  @apply bg-red-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded;
}

.btn-primary {
  @apply bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded;
}


/* General Reset */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #2c2f33; /* Example background color */
}

/* Container */
.container {
  margin: 0 auto;
  padding: 0 0rem;
  position: relative;
  padding-bottom: 6rem; /* Adjusted padding for footer or bottom space */
  background-color: black;
}

/* Two-Column Items */
.grid > div {
  background-color: black; /* Set the background color to black */
  color: white; /* Ensure text is readable on a black background */
  border-radius: 0.5rem; /* Keep rounded corners */
  padding: 1.5rem; /* Maintain padding inside columns */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Specific Sections with Lighter Background */
.grid > div .bg-gray-50 {
  background-color: #1a1a1a; /* Dark gray background */
  color: white; /* Ensure text is readable */
  border-radius: 0.5rem; /* Match container rounding */
  padding: 1rem; /* Add padding for inner spacing */
}

/* Chat Box Specific Styling */
.grid > div .bg-gray-800 {
  background-color: #1a1a1a; /* Darker gray for chat box background */
  color: white;
}

/* Canvas Styling */
.grid > div canvas {
  border-radius: 0.5rem; /* Keep the canvas rounded */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Shadow around canvas */
}

/* Inline Data Styling */
.grid > div .data-section p {
  color: white; /* Force text color to white for key-value pairs */
}


/* Main Frame Container */
.game-frame {
  position: relative;
  width: 100%;
  min-height: 100vh; /* Ensure the frame grows with content */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px; /* Space for the frame borders */
  box-sizing: border-box; /* Include padding in size calculations */
  background: url(/assets/textures/gold_texture-16029022463954b7975884d13938be6223a4b5ac3ffe8995e5781a60ae95d627.jpg) repeat, rgba(255, 215, 0, 0.15); /* Gold texture */
  background-size: cover; /* Ensure the texture scales nicely */
  border: 15px solid rgba(255, 215, 0, 0.15); /* Subtle border for framing */
  box-shadow: 
    0 0 25px rgba(255, 215, 0, 0.6), /* Outer glowing gold shadow */
    0 0 50px rgba(255, 215, 0, 0.4), /* Secondary softer glow */
    inset 0 0 15px rgba(255, 215, 0, 0.3), /* Inner gold reflection */
    inset 0 0 30px rgba(0, 0, 0, 0.6); /* Inner shadow for depth */
  border-radius: 20px; /* Rounded edges for an elegant look */
}

/* Decorative Corners */
.game-frame-corner {
  position: absolute;
  width: 50px;
  height: 50px;
  background-image: url(/assets/frame_corner.png); /* Replace with decorative corner image */
  background-size: cover; /* Ensure proper scaling of the image */
  z-index: 2;
}

.top-left {
  top: 0;
  left: 0;
}

.top-right {
  top: 0;
  right: 0;
}

.bottom-left {
  bottom: 0;
  left: 0;
}

.bottom-right {
  bottom: 0;
  right: 0;
}

/* Content Container */
.content-container {
  position: relative;
  z-index: 3; /* Ensure content appears above borders and corners */
  width: 80%;
  height: 90%;
  background: black;
  box-shadow: 
    inset 0 0 20px rgba(255, 215, 0, 0.2), /* Inner glow for content area */
    0 0 10px rgba(255, 215, 0, 0.4); /* Outer reflection effect */
  border-radius: 10px; /* Rounded corners for the content */
  overflow: hidden; /* Prevent overflow of child content */
  padding: 0; /* Add spacing inside the container */
}

/* Responsive Design */
@media (max-width: 768px) {
  .game-frame {
    padding: 0; /* Remove padding to maximize space */
    border: none; /* Remove the border */
    background: none; /* Remove the texture and background for simplicity */
    box-shadow: none; /* Remove shadows */
  }

  .game-frame-corner {
    display: none; /* Hide decorative corners */
  }

  .content-container {
    width: 100%; /* Use the full width of the viewport */
    height: auto; /* Adjust height to fit content */
    border-radius: 5px; /* Remove rounded corners */
    box-shadow: none; /* Simplify the container styling */
    padding: 20px; /* Add minimal padding for spacing */
  }
}
.landing-page {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(/assets/backgrounds/landing-eb0e789a978b0c2474fe3952b3156087c26cd969ae1632fab5f4787af6170189.webp);
  background-size: contain; /* Ensure the entire image fits */
  background-position: center;
  background-repeat: no-repeat;
}

.form-container {
  background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-container h2 {
  text-align: center;
  margin-bottom: 15px;
  font-family: 'Arial', sans-serif;
}
.ticker-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background: #fafafa;
  border: 5px solid #ddd;
  padding: 0.5rem;
}

.ticker-text {
  display: inline-block;
  padding-left: 100%;
  animation: ticker 20s linear infinite;
}

.ticker-separator {
  margin: 0 1rem;
  color: #888;
}

@keyframes ticker {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}
/* ---------------------------------------------
   Tooltip Styling
   --------------------------------------------- */

/* Base tooltip container (initially hidden) */
.tooltip-content {
  display: none;
  position: fixed; /* or `fixed` if using manual positioning */
  z-index: 9999;
  width: 280px;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 12px;
  pointer-events: none; /* Prevent flickering on hover */
}

/* Show on tile hover */
.tile:hover .tooltip-content {
  display: block;
  /* Ensures the tooltip appears above everything else */
  z-index: 9999;
  background-color: #fff; /* Fully opaque */
}

/* Smart positioning classes */
.tooltip-content[data-position="top"] {
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}

.tooltip-content[data-position="bottom"] {
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}

.tooltip-content[data-position="left"] {
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%);
}

.tooltip-content[data-position="right"] {
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
}

/* Tooltip arrow */
.tooltip-content::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  z-index: 1001;
}

.tooltip-content[data-position="top"]::after {
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: white;
}

.tooltip-content[data-position="bottom"]::after {
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: white;
}

.tooltip-content[data-position="left"]::after {
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: white;
}

.tooltip-content[data-position="right"]::after {
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: white;
}

/* Inner tooltip content (headers, stats, etc.) */
.tooltip-header {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

.stat-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}

.stat-label {
  flex: 0 0 70px;
  font-size: 12px;
  color: #6b7280;
}

.stat-bar {
  flex: 1;
  height: 8px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.stat-fill {
  height: 100%;
  background: #4f46e5;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.stat-value {
  position: absolute;
  right: -5px;
  top: -18px;
  font-size: 10px;
  color: #6b7280;
}

.stat-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 8px 0;
}

.risk-section {
  padding: 8px 0;
}

.risk-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 4px;
}

.risk-details {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: #6b7280;
}

.tile-footer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #374151;
}
/* ---------------------------------------------
   app/assets/stylesheets/tiles.css (merged)
   --------------------------------------------- */
  
/* Tailwind layer for component classes */
@layer components {
  .tile.available {
    @apply bg-green-100 border-green-300;
  }

  .tile.private_owned {
    @apply bg-blue-100 border-blue-300;
  }

  .tile.owned-by-current-user {
    @apply ring-2 ring-green-500;
  }

  .tile-grid-container {
    @apply container mx-auto p-4 grid grid-cols-[3fr_1fr] gap-4;
  }

  .tile-details-panel {
    @apply bg-white shadow-xl p-6 rounded-lg;
  }

  .purchase-button {
    @apply bg-green-500 text-white px-4 py-2 rounded 
           hover:bg-green-600 transition-colors;
  }
}

/* Crop details */
.crop-details {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
  border-radius: 5px;
}

/* Canvas styling */
#tileCanvas {
  width: 100%;         /* Makes it responsive */
  height: auto;        /* Keeps aspect ratio */
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  background-image: url(/plowed.webp);
  background-size: cover;
  background-position: center;
}

/* ---------------------------------------------
   Tile & Map Layout
   --------------------------------------------- */

/* Container for the tile index page */
.screen-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 64px); /* Adjust for your toolbar height */
  width: 100%;
}

.map-column {
  padding: 1rem;
  border-right: 1px solid #e5e7eb;
  overflow-y: auto;
}

.info-column {
  padding: 1rem;
  overflow-y: auto;
}

/* Wrapper for maintaining aspect ratio in the map area */
.map-wrapper {
  width: 100%;
  padding-bottom: 100%; /* Creates a square aspect ratio */
  position: relative;
}

/* Absolute map container */
.map-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  @apply border border-gray-300 rounded-lg overflow-hidden;
  border: 1px solid #e5e7eb; /* Merges tailwind with custom */
  border-radius: 0.5rem;
  overflow: hidden;
}

.map-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay grid for tiles */
.tile-overlay {
  @apply z-10;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  overflow: visible;
}

/* ---------------------------------------------
   Tile Styling
   --------------------------------------------- */

/* Base tile */
.tile {
  @apply block;
  position: relative; /* Needed for containing tooltip */
}

/* Transitions for tile children (if needed) */
.tile > div {
  transition: background-color 0.2s ease-in-out;
}

/* Tile interior */
.tile-interior {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s ease-in-out;
}

.tile-interior:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Owned tile styling */
.owned-tile {
  border: 2px solid #FFD700; /* Gold border */
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); /* Subtle gold glow */
}

.owned-tile:hover {
  background-color: rgba(255, 215, 0, 0.15); /* Gold-tinted hover state */
}

/* Optional corner indicator */
.ownership-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent #FFD700 transparent transparent;
}

/* Tiles owned by other users */
.other-owned-tile {
  border: 2px solid #1E90FF; /* Blue border */
  box-shadow: 0 0 10px rgba(30, 144, 255, 0.3); /* Subtle blue glow */
}

.other-owned-tile:hover {
  background-color: rgba(30, 144, 255, 0.15); /* Blue-tinted hover state */
}

/* Optional corner indicator for other users' tiles */
.other-ownership-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent #1E90FF transparent transparent;
}




/* ---------------------------------------------
   Miscellaneous
   --------------------------------------------- */

.chat-box {
  margin-bottom: 1rem;
}

.user-crops {
  /* Add any specific user-crops styling here */
}

/* Toolbar that spans the full width above columns */
.toolbar {
  width: 100%;
}


.tile-footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* Adds spacing between rows */
}

.tile-owner-location p {
  margin: 0; /* Removes default paragraph margins */
}

.tile-details span {
  display: block; /* Stacks values vertically */
  margin-top: 0.5rem; /* Adds spacing between items */
}
/*
 * 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.
 *


 */

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