@import "https://rsms.me/inter/inter.css";
@import "https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css";

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --theme: #66cc66;
  --theme-0: #338033;
  --theme-1: #99ff99;
  --theme-2: var(--theme);
  --theme-3: #802653;
  --theme-4: #cc6699;
  --gray: #dedede;

  --text-theme: var(--text);

  --bg: #ffffff;
  --text: #000000de;

  --bg-inv: var(--theme-1);
  --text-inv: #ffffffde;

  --bg-1: #f0f0f0;

  --text-green: #296629;
  --text-link: var(--text-green);

  --gap: 1rem;

  --red: var(--theme-3);
  --green: var(--theme-0);

  --red-1: var(--theme-4);
  --green-1: var(--theme);

  --border: 0.5em;
  --radius: 0.25em;

  --default-ffs: "dlig", "ss01", "ss04";
  --num: var(--default-ffs), "tnum", "case";
}

body {
  font-family: "Inter var experimental", "Inter var", "Inter", sans-serif;
  margin: 0;

  background: var(--bg);
  color: var(--text);

  display: grid;
  grid-template-columns: max-content 1fr;
  font-feature-settings: var(--default-ffs);
}

p {
  line-height: 2em;
}
a {
  color: var(--text-link);
  text-decoration: none;
  display: inline-block;

  &:is(:hover, :focus) {
    text-decoration: underline;
  }
}

.red {
  color: var(--red);
  fill: var(--red);
}
.green {
  color: var(--green);
  fill: var(--green);
}

main,
nav,
footer {
  padding: 2rem 1rem;
  @media (width > 720px) {
    padding: 2rem;
  }
  background: var(--bg);
}
main {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  overflow-x: hidden;
  h2.new {
    opacity: 0.8;
  }

  .split {
    display: grid;
    gap: var(--gap);
    grid-template-columns: 100%;
    @media (width > 720px) {
      grid-template-columns: minmax(20rem, max-content) 1fr;
    }

    & > section > :first-child {
      margin-top: 0;
    }
  }
}
nav {
  grid-column: 1;
  grid-row: 1;

  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;

  background: var(--bg-1);
  line-height: 2rem;

  h1 img {
    height: 1cap;
  }
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
  }
  a {
    &.skip-link {
      font-weight: 300;

      &:is(:active, :focus) {
        font-weight: 500;
      }
    }
    display: grid;
    grid-template-columns: 1fr max-content;
    align-items: baseline;

    [class^="ri-"] {
      height: 1.5em;
      width: 1.5em;
      line-height: 1.5em;
      border-radius: var(--radius);
    }

    &.cur {
      font-weight: 550;
      [class^="ri-"] {
        background: var(--text-link);
        color: var(--bg);
      }
    }
  }
}
:is(nav, main) > :first-child,
main > section:first-child > :first-child {
  margin-top: 0;
}
footer {
  text-align: center;
  grid-column: 2;
  font-weight: 250;
}

.pagination {
  text-align: center;
  font-feature-settings: var(--num);

  a {
    min-width: 1rem;
    padding: 0 0.5rem;

    &.cur {
      font-weight: 650;
      text-decoration: underline dotted;

      &:is(:hover, :focus) {
        text-decoration: underline;
      }
    }
  }

  @media (width > 720px) {
    &.n3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      width: max-content;
      margin: 0.5rem auto;

      .prev {
        grid-column: 1;
      }
      .cur {
        grid-column: 2;
      }
      .next {
        grid-column: 3;
      }
    }
  }

  & + section :first-child {
    margin-top: 0;
  }
}

@media (width < 1024px) {
  body {
    grid-template-columns: 1fr;
  }
  nav,
  main,
  footer {
    grid-column: 1;
    grid-row: auto;
    position: relative;
    height: initial;
  }
}
[class^="ri-"] {
  display: inline-block;
  text-align: center;
  font-weight: normal;

  &.green,
  &.red,
  &.white {
    &.green {
      background: var(--green);
      color: var(--bg);
    }
    &.red {
      background: var(--red);
      color: var(--bg);
    }
    &.white {
      background: var(--bg-1);
    }
    border-radius: var(--radius);
    height: 1.5em;
    width: 1.5em;
    line-height: 1.5em;
  }

  a:not(.i) &,
  .wi &,
  h2 & {
    &:first-child::after {
      content: "\2002";
    }
  }
}

h1,
h2,
h3 {
  font-weight: 300;
  margin-top: 1em;
  margin-bottom: 0.5em;
  line-height: 1cap;
}
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.5rem;
}
p {
  margin: 0.5em 0;
}

ul.messages {
  font-weight: 550;
  list-style-type: none;
  margin: 0;
  margin-bottom: var(--gap);
  background: var(--bg-1);
  padding: 0;

  li {
    --message-color: var(--text);
    padding: calc(var(--gap) / 2) var(--gap);
    border-left: var(--message-color) solid var(--border);

    [class^="ri-"] {
      height: 1.5em;
      width: 1.5em;
      line-height: 1.5em;
      border-radius: var(--radius);
      background: var(--message-color);
      color: var(--bg);
      margin-right: 0.5rem;
    }

    &.msg-level-20 {
      --message-color: var(--green);
    }
    &.msg-level-25 {
      --message-color: var(--green-1);
    }
    &.msg-level-30 {
      --message-color: var(--red-1);
    }
    &.msg-level-40 {
      --message-color: var(--red);
    }
  }
}

.backlinks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  p {
    grid-column: 1;

    &.back {
      grid-column: 2;
      text-align: right;

      a {
        margin-right: 0;
        margin-left: 1em;
        [class^="ri-"] {
          margin-right: 0em;
          margin-left: 0.5em;
        }
      }
    }
  }
}

dl.accounts {
  margin: 0;

  dt,
  dd {
    margin: 0;
  }
  .account {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--gray);

    display: grid;
    grid-template-columns: 1fr min-content;
    &.new,
    &.more {
      border-style: dashed;
    }
    &.more label {
      display: block;
    }
  }
  &:not(.show-archive) .account.archived {
    display: none;
  }
}

ul.statements,
ul.invoices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  grid-auto-rows: 1fr;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;

  li {
    display: grid;
    gap: 0.5rem;
    padding: var(--gap);
    border: var(--gray) 1px solid;
    text-align: right;
    align-items: center;

    > * {
      &.title {
        font-weight: 650;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    &.new,
    &.more {
      border-style: dashed;
    }
  }
}

ul.statements {
  li {
    > * {
      display: grid;
      align-items: center;

      &.date :first-child {
        font-size: 2rem;
      }
      &.value :first-child {
        font-weight: 650;
      }
      &.icon {
        span {
          margin: auto;
        }
      }
      &.account a {
        overflow: hidden;
        text-overflow: ".";
        white-space: nowrap;
      }
    }
  }
}

ul.invoices {
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

.statement-details {
  display: grid;
  @media (width > 720px) {
    grid-template-columns: repeat(3, min-content);
  }
  gap: var(--gap);
  align-items: center;

  > span.evolution {
    display: grid;
    grid-auto-rows: min-content;
    > span[class^="ri-"] {
      font-size: 2rem;
    }
    > span.value {
      text-align: right;
    }
  }
  > span.start,
  > span.end,
  > span.file,
  > span.incons {
    display: grid;
    border: var(--gray) 1px solid;
    padding: var(--gap);

    &.file,
    &.incons {
      grid-column: 1 / -1;
    }
    &.incons {
      border-color: var(--red);
      grid-template-columns: min-content 1fr;
      grid-auto-flow: column;
      align-items: center;
      gap: 0.5rem;

      > .ds {
        display: grid;
        grid-auto-rows: min-content;
      }
      .value {
        text-align: right;
      }
      .diff {
        font-weight: 650;
      }
      .sum {
        text-decoration: line-through;
      }
      .links {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        gap: inherit;
        a {
          color: var(--red);
        }
      }
    }

    > .date {
      text-align: right;
    }
    > .value {
      font-size: 2rem;
    }
  }
}

.multilink {
  display: grid;
  grid-auto-columns: max-content;
}

.transaction-details {
  display: grid;
  grid-auto-columns: minmax(1fr, max-content);
  grid-auto-rows: min-content;

  max-width: 32rem;

  ul {
    list-style: none;
    display: grid;

    li.value {
      font-size: 1.5rem;
      text-align: right;
    }
  }

  p.description,
  ul {
    border: var(--gray) 1px solid;
    padding: var(--gap);
  }
}

.category,
.big-link {
  padding: 0 var(--gap);
  border: var(--gray) 1px solid;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;

  &.add {
    border-style: dashed;
  }
}

.date,
.value {
  font-feature-settings: var(--num);
}

details {
  border: var(--gray) 1px solid;
  margin-bottom: var(--gap);

  summary {
    font-weight: 650;
    cursor: pointer;
    padding: var(--gap);

    &::marker {
      content: "\ed27\2002";
      font-family: remixicon;
      font-weight: initial;
    }
  }

  &[open] summary {
    background: var(--bg-1);
  }

  form {
    padding: var(--gap);
  }
}
