@font-face {
  font-family: 'Telematic';
  src: url("/Telematic.otf");
}

html,
body {
  width: 100vw;
  height: 100vh;
}

* {
  box-sizing: border-box;
}

:root {
  --theme-color: #66aa00;
  --theme-color-darker: color-mix(in hsl, var(--theme-color) 80%, black 20%);
  --theme-color-dark: color-mix(in hsl, var(--theme-color) 50%, black 50%);
}

body {
  background-color: black;
  color: white;
  font-family: "Hack", monospace;
}

main {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-areas:
    "hdr hdr hdr"
    "sbr vwr vwr"
    "sbr vwr vwr"
    "ftr ftr ftr";
  grid-template-columns: clamp(18rem, 18vw, 28rem) 1fr;
  grid-template-rows: auto 1fr 3em 3em;
  background-color: black;

  &.hide-sidebar {
    grid-template-columns: 0 1fr;

    & .sidebar {
      display: none;
    }

  }

  &.read-only {
    grid-template-columns: 0 1fr;
    grid-template-rows: auto 1fr 0 0;

    & .sidebar,
    & .entry,
    & .footer {
      display: none;
    }

  }
}

.sidebar {
  grid-area: sbr;
  height: 100%;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--theme-color-darker);


  & .dictionary {

    & input {
      display: none;
    }
  }

  & .sidebar-header {
    background-color: var(--theme-color-darker);
    color: white;
    padding: 0.125rem;
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    letter-spacing: 0.2ch;
  }

  & .click-zone {
    display: flex;
  }

  & #clipboard-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5ch;
    border-left: 2px solid var(--theme-color-darker);
    cursor: pointer;
  }

  & #import-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5ch;
    border-left: 2px solid var(--theme-color-darker);
    cursor: pointer;
  }

  & #dictionary-click-zone {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    padding-block: 1ch;

    & p {
      text-align: center;
    }

    &[loaded=true] {
      padding-block: 0.5ch;
      color: var(--theme-color);

      &+#clipboard-zone {
        color: var(--theme-color);
      }
    }
  }

  & .specific-controls-view {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    flex: 0 0 auto;
  }

  & .general-controls-view {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    margin-bottom: 12;
}

  & .dict-view-content {
    overflow-y: scroll;

    & table {
      width: 100%;
    }

    & tr:nth-child(2n + 2) {
      background-color: var(--theme-color-dark)
    }

    & td {
      white-space: pre;
      padding-block: 0.0625em;

      &:last-child {
        text-align: right;
      }
    }
  }



  & .sidebar-title {
    text-align: center;
    background-color: var(--theme-color-darker);
    padding: 0.25em;
    font-weight: bold;
  }

  & #call-sign {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
  }

  & #call-sign-digits {
    display: flex;
    flex-direction: row;
    gap: 0.25em;

    font-size: 1.5em;

    & i {
      color: var(--theme-color);
      cursor: pointer;
    }
  }

  & #call-sign {
    width: calc(100% - 2em);
    margin-inline: 1em;
    padding-block: 0.5em 1em;
  }

  & .digit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0em;

    & .value {
      margin-top: 0.15em;
    }
  }

  & #set-call-sign {
    color: white;
    white-space: pre;
    display: block;
    width: 100%;
    background-color: var(--theme-color);
    padding-inline: 0.75rem;
    padding-block: 0.25rem;
    text-align: center;
    border-radius: 999em;
    cursor: pointer;
    outline: none;
    border: none;
    font-family: inherit;

    &:disabled {
      background-color: #333333;
      color: gray;
    }

    &[flash="true"] {
      background-color: var(--theme-color-darker);
      color: black;
    }
  }
}

dialog {
  background-color: black;
  width: 100%;
  max-width: min(50em, 100vw - 4em);
  height: 100%;
  max-height: min(30em, 100vh - 4em);
  outline: none;
  border: 2px solid var(--theme-color-darker);
  padding: 0;

  & .dialog-content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  &::backdrop {
    background-color: rgb(0 0 0 / 40%);
  }

  & p.dialog-title {
    color: var(--theme-color);
    border-bottom: 2px solid var(--theme-color-darker);
    padding: 1ch;
    padding-left: 1em;
    text-transform: uppercase;

    display: flex;
    align-items: center;
    justify-content: space-between;

    & button {
      border-radius: 0;
      background-color: black;
      color: var(--theme-color);
      font-family: 'Hack', 'Courier New', Courier, monospace;
      text-transform: uppercase;
      padding: 0.25ch 0.75ch;
      padding-bottom: 0.125ch;
      font-size: 1.25em;
    }

  }


  & div.button-row {
    display: flex;
    justify-content: end;
    border-top: 2px solid var(--theme-color-darker);
    padding: 0.5ch;

    & button {
      border-radius: 0;
      background-color: black;
      color: var(--theme-color);
      font-family: 'Hack', 'Courier New', Courier, monospace;
      text-transform: uppercase;
      padding: 0.5ch;
      padding-bottom: 0.25ch;
    }
  }
}


textarea.dict-paste-contents {
  width: 100%;
  flex-grow: 1;
  resize: none;
  background-color: transparent;
  color: var(--theme-color-darker);
  padding: 1em;
  border: none;
  outline: none;
  font-family: 'Hack', 'Courier New', Courier, monospace;
}

textarea.import-paste-contents {
  width: 100%;
  flex-grow: 1;
  resize: none;
  background-color: transparent;
  color: var(--theme-color-darker);
  padding: 1em;
  border: none;
  outline: none;
  font-family: 'Hack', 'Courier New', Courier, monospace;
  text-transform: uppercase;
}


.spacer {
  flex-grow: 1;
}

.header {
  grid-area: hdr;
  background-color: var(--theme-color-darker);
  color: black;
  font-family: 'Telematic', 'Courier New', Courier, monospace;
  font-style: italic;
  font-size: 2em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-inline: 0.25em 0.5em;
  padding-block: 0.125em;

  & .button-row {

    display: flex;
    gap: 0.3em;


    & a {
      display: inline-block;
      cursor: pointer;
      width: 1em;
    }
  }

}

.view {
  grid-area: vwr;
  overflow: hidden;
  min-height: 0;
  overflow-y: scroll;

  & #all-messages {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
  }

  & .message {
    width: 100%;
    display: flex;
    align-items: start;

    padding: 1ch;
    border-bottom: 1px dashed var(--theme-color);

    & .message-body {
      line-height: 1.3;

      text-shadow: 0 0 0.5ch currentColor;
      flex-grow: 1;


    }

    & .message-aux {
      display: flex;
      flex-direction: column;
      justify-content: end;
      gap: 0.5em;

      & .message-sequence {
        text-align: right;
        color: var(--theme-color-dark);
      }

      & .imageButton {
        background: url(./icons/eye.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 30px;
        height: 20px;
        margin-left: 10px;
      }

      & .seeMoreButton {
        background: url(./icons/see-more.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 30px;
        height: 20px;
        margin-left: 10px;
      }
    }


    &.error {
      background-color: rgba(255, 0, 0, 0.1);
      color: rgba(255, 200, 200, 1);

      & i {
        margin-right: 2ch;
      }
    }

    &.good {
      background-color: rgba(0, 255, 0, 0.1);
      color: rgba(0, 180, 0, 1);

      & i {
        margin-right: 2ch;
      }
    }

    & .sender {
      font-weight: bold;
      margin-right: 2ch;
    }

    & .encryption-key {
      color: #ffff00;
      margin-right: 1ch;
    }

    & span {
      white-space: normal;
      overflow-wrap: anywhere;
    }
  }
}

.entry {
  grid-area: ent;

  & .load-entry {
    background-color: var(--theme-color-dark);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  & .load-entry {
    display: none;
  }

  & .message-row {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    font-size: 1.1em;
    padding-inline: 1ch;
    padding-block: 0.5ch;
    font-family: Hack, 'Courier New', Courier, monospace;

    & #message-input {
      text-transform: uppercase;

      width: 100%;
      height: 100%;
      background-color: transparent;
      border: none;
      outline: none;
      color: white;
      font-size: 1em;
      font-family: Hack, 'Courier New', Courier, monospace;
    }
  }

  &[data-disabled="true"] {

    & .message-row {
      display: none;
    }

    & .load-entry {
      display: flex;
    }
  }
}


.header,
.sidebar,
.view,
.entry,
.footer {
  border: 1px solid var(--theme-color-darker);
}

.footer {
  grid-area: ftr;
  display: flex;
  align-items: center;
  color: #aaa;
  font-style: italic;
}

.footer p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-inline: 0.5em;
}

div [data-disabled="true"] {
  visibility: hidden;
}

.controls {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    padding: 16px;
    gap: 18px;
}

.instructions {
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 9px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}


.position-controls {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
}

.position-input input {
    width: 60px;
}

.range {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-bottom: 10px;
}

.range-slider {
    flex: 1;
    min-width: 0;
}

.range-amount {
    width: 60px;
    flex: 0 0 60px;
}

#specific-controls button {
    width: 100%;
}

#general-controls > button {
    width: 100%;
}

.undo-row {
    display: flex;
    gap: 10px;
}

.undo-row button {
    flex: 1;
}

button {
  background-color: var(--theme-color-dark);
  border: none;
  font-family: 'Hack', monospace;
  text-transform: uppercase;
  border-radius: 999em;
  color: white;
  padding-inline: 0.75rem;
  padding-block: 0.25rem;
  cursor: pointer;
  white-space: pre;
  text-align: center;
  border: none;
  font-weight: 500;
}

.sidebar button {
  font-size: 0.9em;
}

.header button {
    background-color: var(--theme-color-dark);
  font-size: 0.5em;
  transform: translateY(-6px);
}

.range-slider {
  appearance: none;
  height: 0.8ch;
  background: black;
  border: 1px solid var(--theme-color-darker);
  border-radius: 0;
  outline: none;
}

input[type="number"] {
  background-color: black;
  color: white;
  border: 2px solid var(--theme-color-darker);
  border-radius: 999em;
  font-family: 'Hack', 'Courier New', monospace;
  text-align: right;
  padding: 0.25ch 0.5ch;
  box-shadow: none;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}
input[type="number"] {
  appearance: textfield;
}

.importExport {
  display: flex;
    justify-content: flex-end;
}


/* TOOLTIPS */

.tippy-tooltip {
  background-color: black;
  border: 2px solid var(--theme-color-darker);
  border-radius: 0;
}