/* Basic body styling */
body {
  background-color: #f9fafb; /* bg-gray-50 */
  font-family: sans-serif; /* font-sans */
  padding: 1rem; /* p-4 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Centered container */
.container {
  max-width: 56rem; /* max-w-4xl */
  margin-left: auto;
  margin-right: auto;
}

/* Title styling */
h1 {
  font-size: 1.5rem; /* text-2xl */
  line-height: 2rem;
  font-weight: 700; /* font-bold */
  margin-bottom: 1rem; /* mb-4 */
  text-align: center; /* text-center */
}

/* Button container */
.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* gap-4 */
  justify-content: center;
  margin-bottom: 1.5rem; /* mb-6 */
}

/* General button styling */
button {
  padding: 0.5rem 1rem; /* px-4 py-2 */
  color: white;
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow */
  cursor: pointer;
  border: none;
}

/* Specific button colors */
#randomizeBtn {
  background-color: #2563eb; /* bg-blue-600 */
}
#randomizeBtn:hover {
  background-color: #1d4ed8;
}

/* Sheet styling */
#sheet {
  background-color: white; /* bg-white */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
  border-radius: 1rem; /* rounded-2xl */
  padding: 1.5rem; /* p-6 */
}

/* Row styling */
.trace-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem; /* mb-6 */
}
.trace-row:last-child {
  margin-bottom: 0; /* last:mb-0 */
}

/* Image slot styling */
.img-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e5e7eb; /* bg-gray-200 */
  cursor: pointer;
  border-radius: 1rem; /* rounded-2xl */
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* shadow */
  /* width/height set in JS */
}
.img-slot:hover {
  background-color: #d1d5db; /* hover:bg-gray-300 */
}

/* Plus sign inside image slot */
.img-slot .plus {
  font-size: 1.875rem; /* text-3xl */
  line-height: 2.25rem;
  color: #6b7280; /* text-gray-500 */
  user-select: none; /* select-none */
  transition: opacity 0.2s ease-in-out;
}

/* Hidden file input */
.img-slot input[type="file"] {
  display: none; /* hidden */
}

/* SVG styling */
.trace-svg {
  margin-left: 1rem; /* mx-4 */
  margin-right: 1rem; /* mx-4 */
  flex-shrink: 0; /* flex-shrink-0 */
}

/* ---------- Print Styles ---------- */
@media print {
  /* Hide non-essential elements */
  body > .container > h1,
  body > .container > .button-container {
    display: none;
  }

  /* Reset body styles for printing */
  body {
    background-color: white;
    padding: 0;
    margin: 0;
  }

  /* Adjust container and sheet for printing */
  .container {
    max-width: none; /* Allow full width */
    margin: 0;
    padding: 0;
  }

  #sheet {
    box-shadow: none; /* Remove shadow */
    border-radius: 0; /* Remove rounded corners */
    padding: 0; /* Remove padding */
    margin: 0;
    width: 100%; /* Use full available width */
    border: none; /* Remove any potential border */
  }

  /* Ensure rows take full width if needed */
  .trace-row {
    page-break-inside: avoid; /* Try to keep rows from splitting across pages */
    margin-bottom: 1rem; /* Add some space between rows for print */
  }
  .trace-row:last-child {
    margin-bottom: 0;
  }

  /* Ensure image slots print background images */
  .img-slot {
    box-shadow: none;
    border: 1px solid #ccc; /* Add a light border for definition */
    background-color: white !important; /* Ensure background is white */
    -webkit-print-color-adjust: exact !important; /* Force background image printing in Chrome/Safari */
    print-color-adjust: exact !important; /* Standard property */
  }

  /* Ensure plus sign is hidden if image loaded */
  .img-slot .plus {
     display: none; /* Hide plus by default in print */
  }
  /* Re-show plus if opacity was not set to 0 (i.e., no image loaded) */
  .img-slot .plus[style*="opacity: 0"] {
      display: none;
  }
   .img-slot .plus:not([style*="opacity: 0"]) {
      display: block !important; /* Or inline, depending on desired layout */
      opacity: 1 !important; /* Ensure it's visible */
   }


  /* Ensure SVG paths are visible */
  .trace-svg path {
    stroke: black !important; /* Use black for better print visibility */
    /* stroke-width will be inherited from the screen style (1.5px) */
    stroke-dasharray: 8 8 !important; /* Less dense dash pattern for print */
  }
}