[data-theme="light"] {
  --color-bg: #ffffff;
  --color-fg: #000000;
  --color-fg-light: #222;
  --color-fg-setup: #000000;
  --text-shadow: 0 0 2px #ffffff;
  --color-bg-setup: lightgoldenrodyellow;
  --color-bg-input: #ffffff;
  --color-bg-th: lightgray;
  --color-fg-decent: #333;
}

[data-theme="dark"] {
  --color-bg: rgb(30, 30, 32);
  --color-fg: rgb(210, 210, 200);
  --color-fg-light: rgb(230, 230, 220);
  --color-fg-setup: rgb(245, 245, 230);
  --text-shadow: 0 0 2px #121212;
  --color-bg-setup: #42515e;
  --color-bg-input: #505050;
  --color-bg-th: #505050;
  --color-fg-decent: rgb(190, 190, 180)
}

* {
  box-sizing: border-box;
  border-radius: 0.3em;
}

body {
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-size: 80%;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  flex-direction: column;
}

input, select, button {
  border: 1px solid var(--color-fg);
  border-radius: .5em;
  background-color: var(--color-bg-input);
  color: var(--color-fg-light);
}

header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  background: var(--color-bg-setup);
  padding: .5em;
  border: 1px solid var(--color-fg-light);
  margin-bottom: -0.8em;
}

header h1 {
  margin: 0;
  font-size: 1.5em;
}

header .buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .8em;
}

header button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  padding: .3em;
  cursor: pointer;
}
header button svg {
  width: 100%;
  height: 100%;
}

.label {
  display: inline-block;
  width: 6em;
  text-align: right;
  padding-right: .2em;
}

legend {
  text-shadow: var(--text-shadow);
}

.hidden {display: none;}

.timesheetContainer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto 1fr;
  width: 95vw;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
}
.timesheetContainer > * {grid-column: 1;}
.timesheetContainer header { grid-row: 1; }
.timesheetContainer .setup {grid-row: 2;}
.timesheetContainer .summary table, .timesheetContainer .summary th {
  border: none;
  background: none;
}
.timesheetContainer .summary {
  grid-row: 3;
  margin: 0;
  padding: .3em;
}
.timesheetContainer .timesheet__header {
  grid-row: 4;
  border: 1px solid var(--color-fg-light);
  padding:  0.5em;
  text-align: right;
}
.timesheetContainer .timesheet__content {
  grid-row: 5;
}
.setup__container > * {
  padding: .6em;
  background: var(--color-bg-setup);
  color: var(--color-fg-setup);
  margin: 0;
}
.timeframe__presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: .7em;
  grid-row-gap: .7em;
  margin-left: 6.4em;
}

table {
  width: 100%;
  border: 1px solid var(--color-fg-light);
  border-collapse: collapse;
}

td, th {
  padding: 3px;
  text-align: right;
}
td {
  border-bottom: 1px solid var(--color-bg-th);
}
td:first-child {
  border-left: 1px solid var(--color-fg-light);
}
td:last-child {
  border-right: 1px solid var(--color-fg-light);
}

thead th, tfoot th, tfoot td {
  background: var(--color-bg-th);
  font-size: 110%;
}

td, th {
  text-align: left;
  border-radius: 0;
}

td+td, th+th, tfoot th, tfoot td {
  text-align: right;
  width: 130px;
}

tr.dayTotal td {
  color: var(--color-bg-th);
  border-top: 4px solid var(--color-bg-th);
  margin-bottom: .3em;
}

th small, td small {
  font-weight: normal;
  color: var(--color-fg-decent);
}

[data-info-view] {
  font-size: 1.2em;
  background: var(--color-bg);
  overflow: auto;
  margin-top: 1em;
  padding: 0.5em;
  border-radius: 0.5em;
  align-items: center;
}
[data-info-view] div {
  max-width: 60em;
  float: right;
}

[data-info-view] code {
  max-width: calc(100vw - 8em);
  overflow-y: auto;
  display: inline-block;
}

@media screen and (min-width: 1000px) {
  .timeframe__presets { grid-template-columns: repeat(3, 1fr); }
  .timesheetContainer {
    grid-template-columns: 1fr min-content;
    grid-template-rows: auto auto 1fr;
  }
  .timesheetContainer header { grid-area: 1 / 1 / 2 / 3; }
  .timesheetContainer .summary { grid-area: 2 / 1 / 3 / 2; }
  .timesheetContainer .timesheet__header { grid-area: 3 / 1 / 4 / 2; }
  .timesheetContainer .timesheet__content { grid-area: 4 / 1 / 5 / 2; }
  .timesheetContainer .setup {grid-area: 2 / 2 / 5 / 3; }
  .setup__container {
    position: sticky;
    top: 8px;
  }
}
@media screen and (max-width: 600px) {  .timeframe__presets { grid-template-columns: repeat(3, 1fr); }}
@media screen and (max-width: 400px) {  .timeframe__presets { grid-template-columns: repeat(2, 1fr); }}