/* Page-specific styles for the home page (home/index) and the profile page
   (home/profile), which carries the changelog and the request metric cards. */

/* New-request buttons. Their height is tied to the yellow navbar (.navbar in
   application.css is 2em tall) so the two bars read as one block at the top of
   the page — keep the two in step if either changes. Buttons are as wide as
   their label, wrapping onto as many rows as they need. */
div.home_nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

div.home_nav > a {
  /* Solid, not inset: the inset style lightens the bottom and right edges until
     they disappear against the pale gradient, leaving a half-drawn box. */
  border: 1px solid #a0a0a0;
  height: 2em;
  padding: 0 10px;
  text-decoration: none;
  white-space: nowrap;

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#feffff+0,d2ebf9+100;Blue+3D+%2312 */
  background: #feffff; /* Old browsers */
  background: -moz-linear-gradient(top, #feffff 0%, #d2ebf9 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #feffff 0%,#d2ebf9 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #feffff 0%,#d2ebf9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#d2ebf9',GradientType=0 ); /* IE6-9 */

  display: flex;
  align-items: center;
  gap: 0.4em;

  i {
    color: black;
    font-size: 1.25em;
    line-height: 1;
  }
}

[data-bs-theme=dark] .home_nav a {
  color: black;
}

/* Footer app version */
#app-version {
  font-size: 0.8em;
  opacity: 0.7;
  margin-top: 0.25em;
}
#app-version a { text-decoration: none; }
#app-version a:hover { text-decoration: underline; }

/* Changelog on the Profile page */
.changelog {
  margin-top: 2em;
  scroll-margin-top: 1em;
}
.changelog .section-title { margin-bottom: 0.75em; }
.changelog-release { margin-bottom: 1em; }
.changelog-header {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  margin-bottom: 0.5em;
}
.changelog-version { font-weight: 600; }
.changelog-date { font-size: 0.85em; opacity: 0.7; }
.changelog-notes { margin: 0; padding-left: 1.25em; }

/* Request metric cards on the Profile page: 4-up at md+, 2-up below (via
   col-6), 1-up on very narrow screens. */
@media (max-width: 330px) {
  .dashboard-stats > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.dashboard-stat {
  transition: transform 0.15s;
}

.dashboard-stat:hover {
  transform: translateY(-2px);
}

.dashboard-pie {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dashboard-pie-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  flex-shrink: 0;
}

.dashboard-pie-legend {
  font-size: 0.875rem;
}

/* The supervisor's review queue heading, tinted so the queue reads apart from
   the user's own lists below it. The text colour is set with the background so
   it stays legible in dark mode too. */
h3.review-queue-heading {
  background-color: #f8d7da;
  color: #58151c;
  border-radius: 6px;
  padding: 0.3em 0.5em;
}