/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Only show the empty state row when it's the only child in the tbody */
tbody tr.empty-state-row:not(:only-child) {
  display: none;
}

.google-signin-border {
  border: 1px solid #dadce0;
}

.section {
  --bulma-section-padding: 1.5rem 1.5rem;
  --bulma-section-padding-desktop: 1.5rem 3rem;
}

/* Less padding on the first section below the nav bar */
nav + .section {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Render markdown headings with a smaller font size */
.markdown {
  h1 {
    font-size: 1.5rem;
  }
  h2 {
    font-size: 1.25rem;
  }
  h3 {
    font-size: 1.1rem;
  }
  h4 {
    font-size: 1rem;
  }
  h5 {
    font-size: 0.95rem;
  }
  h6 {
    font-size: 0.9rem;
  }
}

.markdown-truncated {
  font-size: 0.8rem;
  line-height: 1.5;
  height: 12em;
  overflow: hidden;
  display: block;

  h1 {
    font-size: calc(1.5rem * 0.7);
  }
  h2 {
    font-size: calc(1.25rem * 0.7);
  }
  h3 {
    font-size: calc(1.1rem * 0.7);
  }
  h4 {
    font-size: calc(1rem * 0.7);
  }
  h5 {
    font-size: calc(0.95rem * 0.7);
  }
  h6 {
    font-size: calc(0.9rem * 0.7);
  }
}

/* Truncate long system messages */
.markdown .expandable {
  max-height: 18rem;
  overflow: hidden;
  position: relative;
  padding-bottom: 3rem;
}

/* Fade gradient at the bottom of truncated content */
.markdown .expandable::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6rem;
  background: linear-gradient(to bottom, transparent, #f9fafb);
  pointer-events: none;
}

/* Button overlaid on top of the HR */
.expandable-toggle-wrapper .button {
  margin-top: -0.75rem;
}

.flush-right {
  margin-left: auto;
  width: fit-content;
}

@media (min-width: 1024px) {
  /* If there's only one cell in .document-cards, limit its width to 50% */
  .document-cards .cell:only-child {
    max-width: 50%;
  }
}

label.label {
  text-transform: capitalize;
}

.ts-control {
  border-color: var(--bulma-input-border-color);
  border-radius: var(--bulma-input-radius);
  font-size: var(--bulma-control-size);
  line-height: var(--bulma-control-line-height);
  padding: var(--bulma-control-padding-vertical) var(--bulma-control-padding-horizontal);
  background-color: hsl(
    var(--bulma-input-h),
    var(--bulma-input-s),
    calc(var(--bulma-input-background-l) + var(--bulma-input-background-l-delta))
  );
  color: #111827;
}

/* Clickable card hover effect */
a.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

a.card-link .card {
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
  cursor: pointer;
  height: 100%;
}

a.card-link:hover .card {
  border-color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l));
  box-shadow:
    0 0 0 0.125em hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 0.25),
    0 4px 10px rgba(10, 10, 10, 0.1);
  transform: translateY(-2px);
}