@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&family=Sawarabi+Gothic&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* Material Design Colors */
:root {
  --md3-primary: #6200EE;
  --md3-primary-container: #EDE7F6;
  --md3-secondary: #03DAC6;
  --md3-background: #FAFAFA;
  --md3-surface: #FFFFFF;
  --md3-error: #B00020;
  --md3-outline: #BBBBBB;
  --md3-on-primary: #FFFFFF;
  --md3-on-surface: #333333;
  --md3-on-secondary: #000000;
}

/* General Styles */
body {
  font-family: 'Sawarabi Gothic', sans-serif;
  background-color: var(--md3-background);
  color: var(--md3-on-surface);
  margin: 0;
  padding: 20px;
}

h1 {
  font-family: 'Roboto Slab', serif;
  text-align: center;
  color: var(--md3-primary);
  margin-bottom: 24px;
}

textarea {
  width: 100%;
  height: 120px;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid var(--md3-outline);
  border-radius: 8px;
  font-size: 16px;
  background-color: var(--md3-surface);
  color: var(--md3-on-surface);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
}

textarea:focus {
  outline: none;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* Button Styles */
button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  font-family: 'Roboto Slab', serif;
  font-size: 16px;
  font-weight: bold;
  background-color: var(--md3-primary);
  color: var(--md3-on-primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

button:hover {
  background-color: #3700B3; /* Darker shade of primary */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

button:active {
  background-color: #311B92; /* Even darker shade */
}

/* Typography */
.headline {
  font-family: 'Roboto Slab', serif;
  font-size: 24px;
  font-weight: bold;
  line-height: 32px;
}

.body {
  font-family: 'Sawarabi Gothic', sans-serif;
  font-size: 16px;
  line-height: 24px;
}

.label {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--md3-outline);
}

/* Table Styles */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 20px;
  background-color: var(--md3-surface);
  color: var(--md3-on-surface);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(10px);
  animation: fadeIn 0.5s ease-out forwards;
}

th {
  font-size: 14px;
  background-color: var(--md3-primary-container);
  color: var(--md3-primary);
  font-weight: bold;
  text-align: center;
  padding: 12px;
  border-bottom: 1px solid var(--md3-outline);
}

td {
  font-size: 14px;
  padding: 12px;
  color: var(--md3-on-surface);
}

td.center {
  text-align: center;
}

tr:nth-child(even) {
  background-color: var(--md3-primary-container);
}

tr:hover {
  background-color: rgba(98, 0, 238, 0.1); /* Light hover effect */
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s ease-out forwards;
}


button::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 0.6s linear;
  width: 200%;
  height: 200%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
}

button:active::after {
  animation: ripple 0.6s linear;
}

@keyframes ripple {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.8;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* Tooltip Styles */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: var(--md3-primary);
  text-decoration: underline;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px; /* Adjust as needed */
  background-color: var(--md3-on-surface);
  color: var(--md3-surface);
  text-align: left;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;

  /* Default positioning */
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Adjust position dynamically if near viewport edges */
.tooltip .tooltiptext[data-position="right"] {
  bottom: auto;
  top: 50%;
  left: 105%;
  transform: translateY(-50%);
}

.tooltip .tooltiptext[data-position="left"] {
  bottom: auto;
  top: 50%;
  right: 105%;
  transform: translateY(-50%);
}

.tooltip .tooltiptext[data-position="bottom"] {
  bottom: auto;
  top: 125%;
  left: 50%;
  transform: translateX(-50%);
}

}