@import "./foundations.css";

body {
  display: grid;
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
  grid-template-columns:
    [full-start] minmax(calc(8 * var(--spacing)), 1fr)
    [content-start] minmax(0, 1280px) [content-end] minmax(
      calc(8 * var(--spacing)),
      1fr
    )
    [full-end];
  grid-template-rows: auto 1fr auto;
}

header,
footer {
  display: grid;
  background: var(--color-white);
  grid-template-rows: auto;
  grid-template-columns: subgrid;
  grid-column: full-start / full-end;
  gap: calc(2 * var(--spacing));
}

header {
  padding: calc(3 * var(--spacing)) 0;
  box-shadow: var(--shadow);

  img {
    grid-column: content-start;
    grid-row: 1;
    align-self: center;
    max-width: unset;
    height: calc(8 * var(--spacing));
  }

  h1 {
    grid-column: content-start;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }
}

footer {
  background: var(--color-gray-50);
  padding: calc(3 * var(--spacing)) 0;
  border-top: 1px solid var(--color-gray-200);
  text-align: right;
  font-size: var(--text-sm);
  color: var(--color-gray-900);
  box-shadow: var(--shadow);

  #copyright {
    grid-column: content-start;
    align-self: center;
    justify-self: end;
  }
}

h1 {
  font-size: var(--text-base);
  font-weight: var(--font-weight-light);
}

h3 {
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  margin-bottom: var(--spacing);
}

section {
  grid-column: content-start / content-end;
}

main {
  display: grid;
  grid-column: full-start / full-end;
  grid-template-columns: subgrid;
  grid-template-rows: auto 1fr;
  gap: calc(8 * var(--spacing)) 0;
  padding: calc(8 * var(--spacing)) 0;
  overflow-y: auto;
}

section p {
  margin: 0 0 calc(var(--spacing) * 2) 0;
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

table {
  table-layout: fixed;
  width: 100%;
  font-size: var(--text-sm);
  color: var(--color-gray-900);
  border: 1px solid var(--color-gray-300);
  border-collapse: collapse;
}

section h3 ~ *:not(p) {
  margin-top: calc(6 * var(--spacing));
}

table thead {
  background: var(--color-purple-50);
}

table thead th {
  padding: calc(4 * var(--spacing));
  text-align: left;
  font-weight: var(--font-weight-medium);
}

table thead,
table tbody tr:not(:last-child) {
  border-bottom: 1px solid var(--color-gray-300);
}

table thead th:not(:last-child) {
  border-right: 1px solid var(--color-gray-300);
}

table tbody td {
  padding: calc(2 * var(--spacing)) calc(4 * var(--spacing));
}

th:first-child,
td:first-child {
  width: 32ch;
  white-space: nowrap;
}

th:nth-child(2):not(:last-child),
td:nth-child(2):not(:last-child) {
  width: 32ch;
  white-space: nowrap;
}

a {
  color: var(--color-primary-800);
}

.status-row {
  text-align: center;
  color: var(--color-gray-600);
}

.status-row td {
  padding: calc(4 * var(--spacing));
}