@import url('variables.css');

:root {
  /* Explorer-specific variables */
  --explorer-color-shadow: rgba(0, 0, 0, 0.1); /* Just subtle shadows */
}

div.explorer_container {
  border: 1px solid var(--color-border, #b3b3b3);
  background-color: var(--color-background-white, #fff);
  margin-bottom: 1em;
  padding: var(--spacing-small, 6px);
  border-radius: var(--radius-small, 6px);
}

div.explorer_title {
  font-weight: bold;
  margin-top: -6px;
  margin-left: -6px;
  margin-right: -6px;
  padding: var(--spacing-medium, 12px);
  border-top-left-radius: var(--radius-small);
  border-top-right-radius: var(--radius-small);
  background-color: var(--color-gray-light, #dedede);
  box-shadow: 0 4px 8px var(--explorer-color-shadow);  /* Shadow for the whole table */
}

table.explorer {
  font-weight: bold;
  border-radius: var(--radius-small, 6px);
  border-collapse: collapse;
  width: 100%;
  margin: var(--spacing-medium, 12px) 0;
  overflow: hidden;                                     /* So the child elements don't overflow the rounded corners */
  box-shadow: 0 4px 8px var(--explorer-color-shadow);   /* Shadow for the whole table */
}

th.explorer {
  font-weight: bold;
  background-color: var(--color-light, #e8e8e8);
  text-shadow: 0 1px 1px var(--explorer-color-shadow); /* Subtle text shadow for depth */
}

/* Zebra striping for rows within the 'explorer' table */
/* Apply zebra striping to odd rows' td elements */
table.explorer tr:nth-child(even) td {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
}

th.explorer, td.explorer {
  padding: var(--spacing-medium, 12px);
}

/* Exception for rows with id starting with "explorer_check_row_" */
tr[id^="explorer_check_row_"] th.explorer {
  padding: 0; /* Override padding or apply different styles */
}

/* Action icons */
td.explorer_action_icon {
  text-align: center;
  padding: var(--spacing-tiny, 3px);
  vertical-align: middle;
}

span.explorer_action_icon, img.explorer_action_icon {
  max-height: auto;
  width: auto;
  display: inline-block;
  font-size: 1.4em; /* for unicode icons */
  line-height: 1.4em;
  text-align: center;
}

/* Ensure rounded corners are only applied to the container */
div.explorer_container {
  border-radius: var(--radius-small, 6px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Container shadow for depth */
}

div.explorerborder {
  border: 1px solid var(--color-border-lighter, #ebeaeb);
  width: 96px;
  min-height: 128px;
  margin-right: var(--spacing-small, 6px);
  margin-top: var(--spacing-small, 6px);
  margin-bottom: var(--spacing-small, 6px);
  float: left;
  box-shadow: 0 2px 4px var(--explorer-color-shadow);
}

div.explorersymbol {
  width: 64px;
  height: 64px;
  padding: var(--spacing-large, 16px);

}

div.explorertext {
  text-align: center;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.explorer:link, a.explorer:visited, a.explorer:hover,
a.explorer_new:link, a.explorer_new:visited, a.explorer_new:hover {
  text-decoration: none; /* removing underline */
  color: inherit; /* maintaining text color */
}

tr:hover a.explorer {
  color: var(--color-secondary, #00488C);
}

input.explorer_search {
  float: right;
}