/* Modal de novo chamado */
#dashboard {
  & .indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    width: 100%;
    align-items: center;
    gap: 10px;

    & .indicador {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
      width: 100%;
      gap: 15px;
      background-color: white;
      padding: 30px 20px;
      border-radius: 15px;
      box-shadow: var(--shadow);
      border: 1px solid rgb(228, 228, 228);
      color: #444;

      & .icone {
        --size: 65px;
        height: var(--size);
        width: var(--size);
        min-width: var(--size);

        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-radius: 10px;
        /* border: 1px solid #dcdcdc; */
        box-shadow: var(--shadow);
        font-size: 1.8rem;
      }

      & .texto {
        font-size: 1.2rem;
      }

      & .qtd {
        font-size: 2.3rem;
        line-height: 2.3rem;
      }

      & .botao-padrao {
        box-shadow: var(--shadow);
      }

      &.vermelho {
        background: linear-gradient(
          180deg,
          rgba(223, 92, 92, 0.3) 0%,
          rgba(223, 92, 92, 0.15) 100%
        );

        & .icone {
          background-color: rgb(223, 92, 92);
          color: white;
        }
      }

      &.azul {
        background: linear-gradient(
          180deg,
          rgba(82, 121, 227, 0.3) 0%,
          rgba(82, 121, 227, 0.15) 100%
        );

        & .icone {
          background-color: rgb(82, 121, 227);
          color: white;
        }
      }

      &.amarelo {
        background: linear-gradient(
          180deg,
          rgba(232, 185, 45, 0.3) 0%,
          rgba(232, 185, 45, 0.15) 100%
        );

        & .icone {
          background-color: rgb(232, 185, 45);
          color: white;
        }
      }

      &.verde {
        background: linear-gradient(
          180deg,
          rgba(103, 204, 103, 0.3) 0%,
          rgba(103, 204, 103, 0.15) 100%
        );

        & .icone {
          background-color: rgb(103, 204, 103);
          color: white;
        }
      }
    }
  }

  & .tool-bar {
    display: flex;
    justify-content: right;
    flex-wrap: wrap;
    gap: 15px;

    & .novo-chamado {
      min-width: max-content;
      width: max-content;
      max-width: max-content;

      & * {
        min-width: max-content;
        width: max-content;
        max-width: max-content;
      }
    }

    & .modulos-links {
      --height: 45px;
      display: flex;
      height: calc(var(--height) + 10px);
      width: fit-content;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 0 5px;
      margin: 0;
      border-radius: calc((var(--height) + 10px) / 2);
      box-shadow: var(--shadow);
      border: 1px solid lightgray;

      & li {
        width: max-content;

        & a:not(.botao-simples, .botao-padrao) {
          display: flex;
          width: max-content;
          height: var(--height);
          gap: 5px;
          justify-content: center;
          align-items: center;
          border-radius: calc(var(--height) / 2);
          padding: 0 18px;
          border-radius: 30px;

          &:hover {
            /* background-color: var(--cor-cinza); */
            background-color: var(--cor-principal);
            color: white;
          }
        }

        & .dropdown-menu {
          border-radius: calc(45px / 2);

          &.show {
            display: flex;
            flex-direction: column;
          }

          & *:is(.botao-simples, .botao-padrao) {
            height: fit-content;
            padding: 10px;
            padding-left: 10px;
            text-align: left;
            justify-content: left;
          }
        }
      }
    }
  }

  & .painel-chamados {
    flex: 1;
    display: flex;
    flex-direction: column;

    & .box-aba-button {
      display: flex;
      align-items: center;
      padding: 0 20px;
      height: 45px;
      gap: 5px;

      & .aba-button {
        height: 45px;
        width: max-content;
        min-width: max-content;
        padding: 0 20px;
        border: none;
        border-radius: 10px 10px 0 0;
        border-bottom: none;
        color: black;
        background-color: white;

        &:not(.active) {
          position: relative;

          &::after {
            content: "";
            width: 100%;
            height: 0px;
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: var(--cor-principal);
            transition: 0.2s ease-in-out;
          }

          &:hover {
            &::after {
              height: 3px;
            }
          }
        }

        &.active {
          cursor: default;
          position: relative;

          &::after {
            content: "";
            width: 100%;
            height: 3px;
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: var(--cor-principal);
          }
        }
      }
    }

    & .box-aba-content {
      padding: 20px;
      background-color: white;
      flex: 1;
      border-top: 1px solid var(--cor-cinza);
      min-height: 1063px;

      & .aba-content {
        display: flex;
        flex-direction: column;
        gap: 15px;
      }
    }
  }

  & .atualizar-tabela {
    display: none;
  }

  & .area-tabela {
    & .filtro {
      background-color: var(--cor-principal) !important;

      & .contador-box {
        color: white;
      }
    }

    /* para deixar a tabela com tamanho fixo independente da quantidade de itens */
    & [id$="_wrapper"] {
      justify-content: space-between;
    }

    &
      table.dataTable.dtr-inline.collapsed
      > tbody
      > tr[role="row"]
      > td:first-child:before {
      left: -25px !important;
    }
  }
}

#newProspection {
  & form {
    display: flex;
    flex-direction: column;
    gap: 10px;

    & .detalhes {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 5px 10px;

      & .campo-box {
        display: flex;
        flex-direction: column;

        & #datetimepicker {
          background-color: #fff;
          cursor: pointer;
        }
      }

      &:has(.sistema) {
        & .cliente,
        & .atividade {
          grid-column: span 2;
        }
      }

      &:not(:has(.sistema)) {
        padding-bottom: 10px;
        border-bottom: 1px solid lightgray;
      }
    }

    & .campos-principais {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 10px;
      background-color: #f0f0f0;
      border-radius: calc(45px / 2);
      border: 1px solid rgba(100, 100, 100, 0.1);
      box-shadow: 0 3px 3px rgba(100, 100, 100, 0.1);
    }
  }
}

/* Página do chamado */
#chamado {
  background-color: #fff !important;

  & .titulo-chamado {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  & .container-pequeno {
    --padding: 10px;
    display: flex;
    flex-direction: column;
    padding: var(--padding) 20px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(100, 100, 100, 0.1);
    border-radius: calc((35px + (var(--padding) * 2)) / 2);
    gap: 10px;
    background-color: #f3f3f3;

    & > div {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    & .titulo {
      display: flex;
      gap: 10px;
      align-items: center;

      & > p {
        font-size: 1.2rem;

        & .icone {
          font-size: 1rem;
          height: 35px;
          width: 35px !important;
          min-width: 35px !important;
        }
      }
    }

    & .abre-info-cliente {
      height: 35px;
      width: 35px;
    }

    & .box-info-cliente {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
      gap: 10px;

      &:not(.aberto) {
        display: none;
      }

      & .info-cliente {
        min-height: 45px;
        padding: 20px;
        border-radius: calc(45px / 2);
        background-color: #e1e1e1;
      }
    }

    & .botao-padrao {
      height: 35px;

      &.icone {
        width: 35px;
        min-width: 35px;
      }
    }
  }

  & #titulo-nome-cliente {
    /* background-color: var(--cor-secundaria-hover); */
  }

  & #titulo-atividade {
    /* background-color: #fac09e; */
  }

  & #titulo-sistema {
    /* background-color: #c4fde1; */
  }

  & .infos-gerais {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;

    & .container-pequeno {
      flex: 1;
      flex-basis: 400px;
      font-size: 1rem;
      justify-content: center;
      background-color: #f3f3f3;
      /* background-color: #bdedb9;
      background-color: var(--cor-secundaria-hover); */

      & .titulo {
        display: grid;
        grid-template-columns: 1fr;

        &:has(button) {
          grid-template-columns: 35px 1fr;
        }
      }
    }
  }

  & .detalhes-chamado {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 20px;
    border-radius: calc(45px / 2);
    border: 1px solid rgba(100, 100, 100, 0.1);
    /* border: 1px solid rgba(100, 100, 100, 0.4); */
    box-shadow: var(--shadow);
    background-color: #f3f3f3;

    & > header {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;

      & .botao-padrao {
        height: 35px;
        min-width: max-content;

        &.icone {
          max-width: 35px;
        }
      }

      & .titulo-cartao {
        display: flex;
        gap: 10px;
        align-items: center;
        flex: 1;
      }

      & .right {
        display: flex;
        gap: 10px;
        align-items: center;

        & .campo {
          min-width: 150px;
          display: flex;
          gap: 10px;
          position: relative;
          text-align: center;

          & .select2-selection {
            padding-left: 20px !important;
          }

          & .icone {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1000;
          }
        }
      }
    }

    & .bloco {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 10px;

      & input {
        padding: 20px 12px !important;
        padding-left: 40px !important;
        background-color: #fff;
        font-size: 0.95rem;
      }

      & .input-icone {
        position: absolute;
        bottom: -2px;
        transform: translateY(-50%) translateX(-50%);
        left: 20px;
        z-index: 100;
      }

      & .campo:has(select) .input-icone {
        bottom: 0px;
      }
    }

    & :not(> header) .campo {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 5px;
    }
  }

  & .badges-chamado {
    display: flex;
    /* display: none; */
    justify-content: right;
  }

  & .box-comentarios {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: calc(45px / 2);
    border: 1px solid rgba(100, 100, 100, 0.1);
    box-shadow: var(--shadow);

    & .log-chamado {
      padding: 15px 20px;
      border-radius: calc(45px / 2);
      box-shadow: 0 3px 3px rgba(100, 100, 100, 0.1);
      border: 1px solid rgba(100, 100, 100, 0.1);
      background-color: #f8f8f8;
      font-weight: bold;
      color: #444;
    }

    & .comentario {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 15px 20px;
      padding-bottom: 20px;
      border-radius: calc(45px / 2);
      box-shadow: 0 3px 3px rgba(100, 100, 100, 0.1);
      /*border: 2px #75c1c1 solid;*/
      border: 1px solid rgba(100, 100, 100, 0.3);
      background-color: #fff;

      & > header {
        display: flex;
        gap: 20px;
        width: 100%;

        & .foto-comentario {
          width: 100px;
          height: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
          position: relative;

          & img {
            position: absolute;
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: cover;
            border-radius: 10px;
          }
        }

        & .detalhes-comentario {
          display: flex;
          flex-direction: column;
          gap: 20px;
          border-left: 1px solid var(--cor-cinza) !important;
          padding-left: 20px;
          width: 100%;

          & .infos {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
          }

          & .info-comentario {
            --height: 45px;
            display: flex;
            width: 100%;
            gap: 15px;
            padding: 10px 15px !important;
            align-items: center;
            border-radius: calc(var(--height) / 2);
            box-shadow: 0 3px 3px rgba(100, 100, 100, 0.1);
            border: 1px solid rgba(100, 100, 100, 0.1);

            &.autor.cliente {
              background-color: #efefef;
              border:2px #d78686 solid;
            }

            &.cor-secundaria {
              background-color: var(--cor-secundaria);
              color: var(--cor-texto-secundaria);
            }

            &:not(.autor) {
              flex: 1;
              flex-basis: max-content;
              width: auto;
              height: var(--height);
              padding: 0 50px !important;
              position: relative;

              & .icone {
                position: absolute;
                left: 22px;
                top: 50%;
                transform: translateY(-50%) translateX(-50%);
              }

              & .texto {
                width: 100%;
                text-align: center;
              }
            }

          }
        }
      }

      & .conteudo {
        padding: 15px 20px;
        border-radius: calc(45px / 2);
        box-shadow: 0 3px 3px rgba(100, 100, 100, 0.1);
        border: 1px solid rgba(100, 100, 100, 0.1);
        background-color: #f9f9f9;

        & .texto-conteudo {
          min-height: 150px;
          font-size: 1.05rem;
        }
      }
    }

  }

  & .box-novo-comentario {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border-radius: calc(45px / 2);
    border: 1px solid rgba(100, 100, 100, 0.1);
    box-shadow: var(--shadow);
    background-color: #f3f3f3;

    & .input-comentario {
      --height: 200px;
      padding: 20px;
      resize: none;
      border-radius: 15px;
      height: var(--height);
      min-height: var(--height);
      max-height: var(--height);
    }
  }

  & #modal_anexos {
  }
}



#relatorios-tarefas {
  .area-tabela {
    .filtro {
      background-color: var(--cor-principal);
      color: var(--cor-texto-principal);
    }
  }

  #work_hours {
    display: flex;
    border-radius: calc(45px / 2);
    box-shadow: var(--shadow);
    border: 1px solid rgba(100, 100, 100, 0.1);
    padding: 15px;
    width: fit-content;
    margin: 0 auto;

    & .campo {
      display: flex;
      flex-direction: column;
      justify-content: left;
      gap: 5px;
      position: relative;

      & input {
        height: 40px;
        width: 300px;
      }

      & button {
        position: absolute;
        bottom: 5px;
        right: 5px;
        border: none;
        height: 30px;
        border-radius: calc(30px / 2);
        background-color: var(--cor-principal);
        color: var(--cor-texto-principal);
        padding: 0 10px;

        &:hover {
          background-color: var(--cor-principal-hover);
        }

        & .icone {
          font-size: 0.9rem;
        }
      }
    }
  }
}

#central-links {
  & .botao-padrao {
    height: 35px;
    border-radius: calc(35px / 2);
  }
}

#novo-link {
  form {
    display: flex;
    flex-direction: column;
    align-items: center;

    & .campos {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 70%;
      gap: 10px;
      margin-bottom: 10px;

      & .campo {
        width: 100%;
      }
    }
  }
}

@media only screen and (max-width: 1130px) {
  #dashboard {
    & .painel-chamados {
      & .box-aba-button {
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;

        & .aba-button,
        & .aba-button.active {
          background-color: #f1f1f1 !important;
        }

        & .novo-chamado {
          margin-left: 20px;
        }
      }

      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
}

@media only screen and (max-width: 992px) {
  #newProspection {
    & form {
      & .detalhes {
        display: flex;
        flex-direction: column;
      }
    }

    & .modal-footer {
      & .botoes {
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 100%;

        & .botao-padrao {
          width: 100%;
        }
      }
    }
  }
}

@media only screen and (max-width: 900px) {
  #dashboard {
    & .tool-bar {
      width: 100%;

      & .modulos-links {
        width: 100%;
        padding: 5px;

        & .btn-group {
          width: 100%;
        }

        & a,
        & li {
          width: 100% !important;
        }
      }
    }
  }

  #chamado {
    & .titulo-chamado {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
    }

    & .detalhes-chamado {
      & header {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
          "botao titulo"
          "dados dados";

        & .right {
          grid-area: dados;
        }
      }

      & .acoes {
        display: flex;
        flex-direction: column;
        gap: 10px;

        & .botoes {
          display: flex;
          flex-direction: column;
          width: 100%;
          gap: 10px;
        }

        & .botao-padrao {
          width: 100%;
          justify-content: center;
        }
      }
    }

    & .box-novo-comentario {
      & .botoes {
        & .botao-padrao {
          width: 100%;
          justify-content: center;
        }
      }
    }
  }
}

@media only screen and (max-width: 740px) {
  #dashboard {
    & .tabelas {
      display: flex;
      flex-direction: column;
    }
  }
}

@media only screen and (max-width: 700px) {
  #dashboard {
    & .indicadores {
      display: flex;
      flex-direction: column;
      width: 100%;
      align-items: center;
      gap: 10px;

      & .indicador {
        flex-direction: row;
        padding: 5px;
        border-radius: calc((45px + 5px * 2) / 2);

        & .icone {
          --size: 45px;
          height: var(--size);
          width: var(--size);
          min-width: var(--size);
          border-radius: calc(var(--size) / 2);
          font-size: 1.4rem;
        }

        & .texto {
          width: 100%;
          font-size: 1.2rem;
        }

        & .qtd {
          font-size: 2rem;
          line-height: 2rem;
        }

        & .botao-padrao {
          width: fit-content !important;
          padding: 0 20px;
        }
      }
    }

    & .acesso-rapido {
      & .botao {
        flex-direction: row;
        font-size: 1.3rem;
        width: 100%;
        padding: 10px;

        & .descricao {
          display: none;
        }
      }
    }
  }

  #chamado {
    & .box-comentarios {
      & .comentario {
        & > header {
          flex-direction: column;
          align-items: center;

          & .detalhes-comentario {
            border: none !important;
            padding: 0;
          }
        }
      }
    }
  }

  #novo-link {
    form {
      & .campos {
        width: 100%;
      }
    }
  }
}

@media only screen and (max-width: 550px) {
  #dashboard {
    & .tool-bar {
      justify-content: center;
      width: 100%;

      & .modulos-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        height: fit-content;
        width: 100%;
        padding: 5px;

        & a,
        & li {
          width: 100% !important;
        }
      }
    }
  }

  #chamado {
    & .detalhes-chamado {
      & .acoes {
        flex-direction: column;

        & .botao-padrao {
          width: 100%;
          justify-content: center;
        }
      }
    }

    & .box-novo-comentario {
      & .botoes {
        flex-direction: column;

        & .botao-padrao {
          width: 100%;
          justify-content: center;
        }
      }
    }
  }

  #chamadoModal {
    .modal-footer {
      & .botoes {
        flex-direction: column;

        & .botao-padrao {
          width: 100%;
          justify-content: center;
        }
      }
    }
  }
}