/* main stylesheet */
:root { --line-height: 1.2; --spacing: 0.5rem; --typography-spacing-vertical: 1.2rem; }

html { background-color: var(--primary); height: 100vh; }
body { background-color: var(--background-color); min-height: 100vh; }
body > header { padding: 0 2em; }
body > main { padding: 0; }

h1,h2,h3,h4,h5,h6 { margin-bottom: 0.3em;}
nav { text-align: center; }
.ctr { text-align: center; }
section { text-align: center; padding: 0.5em 1em; }

@media (min-width: 768px) {
  header { display: grid; grid-template: "a b" 1fr "a c" 1fr / 1fr 5fr; align-items: center; justify-items: center; }
  header img { min-width: 50px; }
  nav > ul { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; } 
  div#homepage { display: grid; grid-template: "a b" 1fr "a c" 1fr / 1fr 1fr; }
  }
@media (max-width: 768px) { 
  header { display: grid; grid-template: "a b" 1fr "c c" 1fr / 1fr 5fr; align-items: center; justify-items: center; }
  header img { min-width: 70px; padding: 0.2em; }
  header h1 { font-size: 1.5rem; }
  nav > ul { display: flex; flex-wrap: wrap; } 
  nav > ul li { padding: 0.5rem; flex-grow: 1;}
  }
nav > ul li { 
  a { display: inline-block; font-weight: bold; } 
  a:hover { background-color: var(--secondary-focus); } 
}

table { 
  width: 100%;
  td { vertical-align: text-top; }
  td.both { text-align: center; }
  td.left { text-align: right; }
  td.right { text-align: left; }
}

#status { border: 1px dashed red; text-align: center; padding: 0.5em; font-size: 1.1em; }
#status #timestamp { font-size: 0.6em; font-style: italic; }
#notice { width: 90%; padding: 0.5em; margin: 0.5em auto; border: 1px dashed lightcoral;}

article {
  margin: 1em;
  ul { margin: 0.5em 2em; list-style: disc; }
  p { margin: 1em; text-align: justify; }
}

body > footer {
  border-top: 1px solid var(--muted-border-color);
  font-size: small;
  text-align: center;
  position: sticky;
  top: 100vh;
}

.setpieces dl { margin: 0 0 1em 1em; }
.setpieces dt { font-weight: bold; }
.setpieces dd { margin-bottom: 0.5em; }

/* STYLES SPECIFIC TO ENTRIES PAGES */

#userprofile { margin: 0 1em; }

.help { padding: 1em;
  ul { margin: 0 2em; }
}

.error {
  width: 80%;
  margin-inline: auto;
  padding: 0.2em;
  text-align: center;
  border-radius: 0.5em;
  background-color: lightgray;
  color: rgb(200, 30, 30);
  font-weight: bold;
}

section#detail div.grid {
  grid-template-columns: 1fr 1fr / 4fr 1fr;
  span { 
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

@media (min-width: 992px) {
  section#detail div.grid {
    grid-template-columns: 2fr 4fr 1fr;
    span { grid-column: auto; grid-row: auto; } }
}

.sectlist {
  grid-template: 1fr auto / 1fr 1fr 1fr;
  padding: 0 1em;
  margin: 0 2em;
  border-bottom: 1px solid lightblue;
  &:hover { background-color: var(--muted-border-color); }
}

section#detail>div.grid:hover { background-color: var(--muted-border-color); }

article.entry {
  border: 1px solid var(--muted-border-color);
  margin: 0.5em;
  button { padding: 0 0.2em; }
  button.Paid { background-color: lightseagreen; color: black; }
  button.Open { background-color: royalblue; color: black; }
  button.Unpaid { background-color: lightcoral; color: red; }
  button.Cancelled { background-color: darkslategray; color: black; }
  &:hover { background-color: var(--muted-border-color); }
}

div#app>div>section {
  border: 1px solid var(--muted-border-color);
  padding: 0.3em 0.7em;
  font-weight: bold;
  line-height: 2em;
  table { border-collapse: separate; }
}

.editable {
  background-color: var(--muted-border-color);
  padding: 0.1em 0.3em;
}

#newentry fieldset {
  margin: 1rem;
  border-bottom: 1px solid var(--muted-border-color);
}