:root {
  --text: #555;
  --black: #000;
  --white: #fff;
  --border: #ddd;
  --gray-dark: #434343;
  --gray-light: #c5c5c5;
  --blue-link: blue;
  --loading: #c5c5c573;
  --danger: var(--red, #e75f5f);
  --success: var(--tan, #d1cbc3);

  --grid-header-height: 5rem;
}

::backdrop {
  backdrop-filter: blur(2px);
}

body:has(dialog[open]) {
  overflow: hidden !important;
}

.registry-wrapper {
  min-height: 30rem;
  height: 50vh;
  border: 1px solid var(--border, #434343);
  margin: 2rem auto;
  user-select: none;
  overflow: auto;

  >header {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--border, #434343);
  }

  hr {
    width: 95%;
    border: none;
    border-bottom: 1px solid var(--border);
    margin: 1rem auto;
  }

  button,
  a {
    outline: none;
    border: none;
    background-color: var(--danger);
    border-radius: 6px;
    color: var(--white);
    padding: .7rem 1rem;
    text-transform: uppercase;
  }

  textarea {
    field-sizing: content;
    min-height: 100px;
  }

  input,
  textarea {
    outline: none;
    border-radius: 4px;
  }

  input[type="date"] {
    height: 45px;
    border: 1px solid #b5b5b5;
    padding: 8px 14px;
    vertical-align: middle
  }

  section[data-result] {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(4, 1fr) min-content;
    gap: 1rem;
    margin: 1rem;
    color: var(--gray-dark, #434343);

    &>span {
      color: var(--text);
      font-size: clamp(17px, 1.2rem, 20px);
      ;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &:nth-last-child(-n+5) {
        border: none;
      }

      &[data-header-row] {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        position: sticky;
        top: 0;
        min-height: var(--grid-header-height);
        background-color: var(--white);
      }
    }

    .row-action {
      display: flex;
      justify-content: flex-end;
      gap: 1rem;

      a[data-invert] {
        color: var(--danger);
        border: 1px solid var(--danger);
        background-color: transparent;
      }
    }

    h2 {
      justify-self: center;
      grid-column-start: 1;
      grid-column-end: 6;
      margin: 5rem;
      font-size: 3rem;
    }

    [data-header-line-break] {
      grid-column: span 5;
      border-bottom: 1px solid var(--border, gray);
      position: sticky;
      top: var(--grid-header-height);
    }

    [data-line-break] {
      grid-column: span 5;
      border-bottom: 1px solid var(--border, gray);
    }
  }

  [data-search] {
    display: inline-flex;
    gap: 1rem;
    align-items: center;
    border-bottom: 1px solid var(--border);
    overflow: hidden;

    input[type="text"] {
      border: none;
    }

    button[type="submit"] {
      border: none;
      background-color: var(--border);
      color: var(--white);
      padding: 0 1rem;
    }

    [data-search-mine] {
      color: var(--danger);
      transition: transform 700ms;
      padding-right: 1rem;
    }

    [data-search-mine]:hover {
      transform: scale(1.3);
    }
  }

  [data-modal-add] {
    outline: none;
    border: none;
    user-select: none;
    box-shadow: 3px 3px 15px var(--gray-dark);
    overflow: hidden;
    padding: 0;

    >header {
      display: flex;
      justify-content: center;
      align-items: center;
      position: sticky;
      top: 0;
      padding: 1rem;
      background-color: var(--red);
      color: var(--white);

      >h4 {
        color: revert;
        flex: 1;
        text-align: center;
        margin: 0;
      }

      >i {
        margin-left: auto;
        cursor: pointer;
        font-size: 3rem;
      }
    }

    >main {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      width: clamp(250px, 60vw, 950px);
      height: clamp(250px, 65vh, 1000px);
      overflow-y: auto;
      padding: 2rem;

      section {
        display: flex;
        flex-direction: column;
        gap: .2rem;

        input,
        textarea {
          margin: .8rem 0;
          resize: vertical;
        }

        sup {
          all: revert;
          font-size: 1rem;
          display: inline-flex;
          gap: .8rem;
          margin: 0 .3rem;

          i {
            cursor: pointer;
          }
        }

        div[contenteditable="true"] {
          box-shadow: 5px 5px 12px var(--grey);
          border-radius: 6px;
          outline: none;

          &:focus {
            border: 1px solid var(--red);
          }
        }
      }

      [data-registry-item]:has(div) {
        display: grid;
        grid-template-columns: 30% repeat(3, 1fr) min-content;
        gap: 1rem;
        border: 1px solid var(--border);
        padding: 1rem;
        border-radius: 6px;

        div {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding-inline: 1rem;
        }

        [data-row] {
          grid-column: span 5;
          border-bottom: 1px solid var(--border);
        }

        [data-actions] {
          display: flex;
          gap: 2rem;
          align-items: center;

          i {
            cursor: pointer;

            &:hover {
              ::after {
                content: '';
                height: 50px;
                width: 50px;
                background-color: #4343439f;
              }
            }
          }
        }

        .right {
          text-align: right;
        }

        .center {
          text-align: center;
        }
      }

      [data-row]:last-of-type {
        display: none;
      }
    }

    >footer {
      display: flex;
      position: sticky;
      bottom: 0;
      flex-direction: row-reverse;
      padding: 1rem;
    }

    [data-registry-add-legend] {
      position: fixed;
      top: 50%;
      right: 0;
      display: inline-flex;
      flex-direction: column;
      background-color: var(--red);
      color: var(--white);
      gap: 1rem;
      padding: 1rem;
      border-radius: 8px 0 0 8px;
      box-shadow: 3px 3px 15px var(--gray-dark);

      i {
        display: flex;
        align-items: center;
        cursor: help;
      }

      i::before {
        margin: 1rem;
      }
    }
  }

  .registry-list {
    display: flex;
  }
}

.round {
  border-radius: 6px;
}