/* General ----------------------------------------------*/

/* DEBUG */
/*div { border: 2px solid red; }*/

:root {
  --font-color: #eaeaea;
  --link-color: #7da4e8;
  --bg-color: #111217;
  --fg-color: #181b1f;
  --border-color: #35383e;
}

footer {
  overflow: auto;
  padding: 3em;
  font-size: 0.6em;
  text-align: right;
}

a {
  color: var(--link-color);
  text-decoration: none;
}
a:hover {
  color: var(--font-color);
}
a.hostname {
  color: white;
}
a.hostname:hover {
  color: var(--link-color);
}

button.copy-to-clipboard {
  font-size: 1em;
  color: var(--link-color);
  border: none;
  background: none;
}

button.copy-to-clipboard:active {
  color: black;
  background-color: var(--link-color);
  border-radius: 0.3em;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2em;
  background-color: silver;
  margin-left: 6%;
  margin-right: 6%;
  color: var(--font-color);
  background-color: var(--bg-color);
  /* Text alignment */
  text-align: center;
  vertical-align: middle;
}

/* Fleets -----------------------------------------------*/

.fleets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(97ch, 2fr));
}

.fleet {
  border-radius: 1ex;
  margin: 0.3em;
  padding: 0.5em;
  border: 1px solid var(--border-color);
  background-color: var(--fg-color);

  display: grid;
  grid-template-rows:    4em min-content;
  grid-template-columns: 20% 80%;
}

.fleet-hosts {
  grid-column: 1 / 3;
}

.fleet-header-left {
  font-size: 2.2em;
  text-align: left;
  margin-left: 0.5em;
}

.fleet-header-right {
  margin: 1em;
  text-align: right;
}

p.commit {
  display: inline-block;
  vertical-align: top;
  margin: 1px;
  max-width: 6ch;
  overflow: hidden;
}

/* Tables -----------------------------------------------*/
table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  table-layout: fixed;
}
th {
  font-size: 0.7em;
}
td {
  border-top: 1px solid #ccc;
  padding: 6px;
  padding-left: 2px;
  text-align: left;
}
td:nth-child(1) {
  text-align: right;
}
th.hostname {
  width: 14rem;
  text-align: right;
  padding-right: 0.5em;
}
th.copy-hostname {
  width: 2em;
}
th.service {
  width: 10rem;
}
th.commit {
  width: 8em;
}
th.version {
  width: 10em;
}
th.metadata {
  width: 21em;
}
th.links {
  width: 12em;
}