$cBlue: #6690F4;
$cRed: #aa0505;
$cGreen: #43833f;
$cGreenLight: #57b951;
$cBlack: #4e5e6a;

.animate {
  animation: mymove 3s infinite;
}

.text-right {
  text-align: right;
}

.text-bold {
  font-weight: 900 !important;
}

.nowrap {
  white-space: nowrap;
}

table {
  border-collapse: collapse;
}

small {
  font-size: .75em;
}

table {
  font-size: 13px;
}

@keyframes mymove {
  50% {
    opacity: .33;
  }
}

/* motion */
@keyframes gradient-animation {
  0% {
    background-position: 15% 0%;
  }

  50% {
    background-position: 85% 100%;
  }

  100% {
    background-position: 15% 0%;
  }
}

@keyframes frame-enter {
  0% {
    clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
  }

  25% {
    clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 100% 100%, 100% 0%, 0% 0%);
  }

  50% {
    clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, 100% 0%, 0% 0%);
  }

  75% {
    -webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 0%, 0% 0%);
  }

  100% {
    -webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 0% 100%);
  }
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  font-size: 15px;
  color: #4e5e6a;
}

.btn {
  padding: 12px 25px;
  transition: all 0.3s ease;
  color: #FFF;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  gap: 5px;
  justify-content: center;
  align-items: center;

  &.btn_small,
  &.btn-xs {
    padding: 5px 7px;
    font-size: 13px;

    i {
      font-size: 12px;
    }
  }

  &.btn-success {
    background: #57b951;

    &:hover {
      background: #4a9c3b;
    }
  }

  &.btn-primary {
    background: $cBlue;

    &:hover {
      background: #3164db;
    }
  }

  &.btn-danger {
    background: #cc0000;

    &:hover {
      background: #b30000;
    }
  }
}

.hide {
  display: none;
}

.form-error {
  color: #cc0000;
  font-size: 13px;
}

.input-group {
  margin-bottom: 10px;
}

input[type="checkbox"] {
  border: 1px solid #eee;
}

.form-control {
  border: 1px solid #eee;
  border-radius: 3px;
  height: 35px;
  width: 100%;
  padding: 5px;
  font-family: "Roboto", sans-serif;

  option {
    padding: 5px;
  }

  &:focus {
    border: 1px solid $cBlue;
    outline: none;
  }
}

.unlogged {
  background: #EEF1F9;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;

  .box-login {
    background: #FFF;
    padding: 25px;
    border-radius: 6px;
    width: 400px;

    .title {
      text-align: center;
      padding: 10px 10px 25px;
      border-bottom: 1px solid #eee;
      font-size: 20px;
      margin-bottom: 25px;
    }
  }
}

body>.top {
  background: #FFF;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .logo {
    a {
      display: inline-flex;
      color: $cBlue;
      padding: 10px;
      text-decoration: none;

      span {
        font-weight: 600;
      }
    }
  }

  .user-nav {
    position: relative;
    font-size: 14px;
    padding: 10px;

    .trigger {
      cursor: pointer;

      i {
        color: $cBlue;
      }
    }

    ul {
      position: absolute;
      top: 100%;
      left: 0;
      background: #FFF;
      margin: 0;
      padding: 0;
      width: 100%;
      list-style-type: none;
      border: 1px solid #eee;
      display: none;

      li {
        cursor: pointer;

        &:hover {
          background: #F8F9FA;
        }

        a {
          color: #333;
          display: block;
          text-decoration: none;
          padding: 10px;
        }
      }
    }

    &:hover {
      ul {
        display: block;
      }
    }
  }
}

.main-menu {
  display: flex;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;

  ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 14px;

    li {
      cursor: pointer;

      a {
        color: #333;
        text-decoration: none;
        display: inline-flex;
        padding: 10px 15px;
      }

      &:hover {
        a {
          background: $cBlue;
          color: #FFF;
        }
      }

      ul {
        display: none;
      }
    }
  }
}

.main {
  padding: 25px;
  background: #D9DEE2;
  min-height: calc(100vh - 80px);
}

.tasks_container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  .column {
    width: 350px;

    h2 {
      display: flex;
      padding: 10px;
      background: #FFF;
      margin-bottom: 10px;
      font-size: 15px;
      font-weight: 300;
      border-radius: 3px 3px 0 0;
      justify-content: space-between;
      align-items: center;

      i {
        cursor: pointer;
      }
    }

    &.tasks_suspended {
      h2 {
        border-bottom: 5px solid #cc0000;
      }
    }

    &.tasks_new {
      h2 {
        border-bottom: 5px solid #ccc;
      }
    }

    &.tasks_bulk {
      h2 {
        border-bottom: 5px solid #ff8c00;
      }
    }

    &.tasks_to_do {
      h2 {
        border-bottom: 5px solid #2aaf47;
      }
    }

    &.tasks_to_review {
      h2 {
        border-bottom: 5px solid #2535c9;
      }
    }

    &.tasks_closed {
      h2 {
        border-bottom: 5px solid #000;
      }
    }

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;

      .task {
        margin-bottom: 5px;
        background: #FFF;
        padding: 10px;
        border-radius: 0;
        display: flex;
        position: relative;

        &.notopened {
          border: 2px solid #cc0000;
        }

        .left {
          width: 30px;

          .users {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;

            .user {
              display: flex;
              width: 20px;
              height: 20px;
              border-radius: 50%;
              justify-content: center;
              align-items: center;
              color: #FFF;
              font-size: 13px;
            }
          }
        }

        .middle {
          width: calc(100% - 60px);
        }

        .right {
          width: 30px;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-end;

          .recursively {
            color: #ccc;
            border-radius: 3px;
            cursor: pointer;
            margin-bottom: 5px;
            width: 22px;
            height: 22px;
            text-align: center;

            i {
              font-size: 15px;
            }
          }

          .task_start {
            background: #57b951;
            color: #FFF;
            border-radius: 3px;
            cursor: pointer;
            margin-bottom: 5px;
            width: 22px;
            height: 22px;
            text-align: center;

            &.hidden {
              display: none;
            }

            i {
              font-size: 12px;
            }
          }

          .task_end {
            background: #cc0000;
            color: #FFF;
            border-radius: 3px;
            cursor: pointer;
            margin-bottom: 5px;
            width: 22px;
            height: 22px;
            text-align: center;

            &.hidden {
              display: none;
            }

            i {
              font-size: 12px;
            }
          }
        }

        .name {
          font-size: 14px;
          color: #333;
          text-decoration: none;
          display: block;
          margin-bottom: 5px;
        }

        .bottom {
          display: flex;
          justify-content: space-between;
        }

        .client_info,
        .current_status {
          font-size: 12px;
          font-weight: 400;

          strong {
            font-weight: 600;
          }
        }

        .current_status {
          position: relative;
          cursor: pointer;

          .status_change {
            position: absolute;
            left: 0;
            top: 20px;
            background: #fff;
            padding: 15px;
            border: 1px solid #dfdfdf;
            border-radius: 3px;
            cursor: pointer;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            z-index: 99;
            display: none;

            select {
              width: 250px;
              padding: 10px;
              border: 1px solid #eee;
              border-radius: 3px;

              option {
                font-size: 15px;
                padding: 3px;
              }
            }
          }
        }

        .dates {
          margin-bottom: 5px;
          display: flex;
          justify-content: space-between;
          font-size: 12px;

          .danger {
            color: #cc0000;
            font-weight: 600;
          }

          .warning {
            color: #ff8c00;
          }

          i {
            font-size: 12px;
            color: #C9CED4;
            margin-right: 5px;
          }
        }
      }
    }
  }
}

.action_menu {
  display: flex;
  margin-bottom: 25px;
  gap: 20px;

  .btn {
    display: inline-flex;
    padding: 7px 15px;
    color: #FFF;
    border-radius: 3px;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    gap: 5px;

    &.btn_add {
      background: #57b951;

      &:hover {
        background: #4a9c3b;
      }
    }

    &.btn_cancel {
      background: #cc0000;

      &:hover {
        background: #b30000;
      }
    }

    &.disabled {
      opacity: .5;
    }
  }
}

.form_container {
  background: #FFF;
  padding: 25px;
  max-width: 1300px;

  &.full {
    max-width: 100%;
  }

  .form_group {
    margin-bottom: 10px;
    display: flex;

    >.label {
      width: 300px;
      display: inline-flex;
      align-items: flex-start;
      justify-content: right;
      padding-right: 10px;
    }

    .input {
      width: calc(100% - 300px);
    }
  }
}

.task_popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;

  .task_details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FFF;
    padding: 25px;
    border-radius: 6px;
    max-width: 1140px;
    width: 100%;

    .title {
      font-size: 20px;
      margin-bottom: 25px;

      a {
        color: #333;
        text-decoration: none;
        margin-right: 10px;

        &.task-delete {
          color: #cc0000;
        }
      }
    }

    .close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
    }

    .content {
      display: flex;
      font-size: 14px;

      h3 {
        width: 100%;
        margin-top: 0;
        margin-bottom: 5px;
        font-weight: 500;
        color: #000;
        font-size: 17px;
      }

      .left {
        width: 70%;
        max-height: 700px;
        overflow-y: auto;

        .users {
          display: flex;
          gap: 20px;

          .user {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 10px;

            .avatar {
              height: 30px;
              width: 30px;
              border-radius: 50%;
              background: #ccc;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #FFF;
            }
          }
        }

        .comments {
          border-radius: 3px;
          padding: 0 15px 15px 0;
          margin-bottom: 15px;
          border-bottom: 1px solid #eee;

          .new_comment {
            margin-bottom: 15px;

            textarea {
              height: 75px;
            }

            .add_comment {
              background: #57b951;
              color: #FFF;
              padding: 10px;
              border-radius: 6px;
              cursor: pointer;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              width: 200px;
              text-decoration: none;

              &:hover {
                background: #4a9c3b;
              }
            }
          }

          ul {
            margin: 0;
            padding: 0;
            list-style-type: none;

            li {
              background: #eee;
              margin-bottom: 5px;
              padding: 15px;
              border-radius: 6px;
              position: relative;

              .delete_comment {
                position: absolute;
                top: 10px;
                right: 10px;
                cursor: pointer;
                color: #cc0000;
              }

              .author {
                font-weight: 600;
                margin-bottom: 5px;
                display: inline-flex;
                margin-right: 10px;
              }

              .date {
                font-size: 12px;
                margin-bottom: 5px;
                display: inline-flex;
              }

              .text {
                margin-bottom: 15px;
                font-size: 13px;
              }
            }
          }
        }

        .checklist {
          border-radius: 3px;
          padding: 0 15px 15px 0;
          margin-bottom: 15px;
          border-bottom: 1px solid #eee;

          .new_element {
            display: flex;
            margin-bottom: 15px;

            a {
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 10px;
              border-radius: 0 6px 6px 0;
              text-decoration: none;
              width: 35px;
              background: #57b951;
              color: #FFF;
            }
          }

          ul {
            margin: 0;
            padding: 0;
            list-style-type: none;

            li {
              display: flex;
              gap: 10px;
              margin-bottom: 5px;
              background: #FFF;
              border-radius: 3px;
              padding: 5px;
              border: 1px solid #eee;
              font-size: 13px;
              align-items: center;

              i {
                margin-left: auto;
                margin-right: 0;
                cursor: pointer;
                color: #cc0000;
              }
            }
          }
        }

        .description {
          padding: 15px;
          border-radius: 3px;
          background: #F6F8F9;
          margin-bottom: 15px;
        }
      }

      .right {
        width: 30%;
        padding: 0 15px 15px;

        .box {
          margin-bottom: 15px;
        }

        .time {
          a {
            display: block;
            padding: 10px;
            border-radius: 6px;
            margin-top: 10px;
            text-decoration: none;
            text-align: center;
            width: 100%;

            &.task_start {
              background: #57b951;
              color: #FFF;
            }

            &.task_end {
              background: #cc0000;
              color: #FFF;
            }

            &.hidden {
              display: none;
            }
          }
        }

        .dates {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;

          .danger {
            color: #cc0000;
            font-weight: 600;
          }

          .warning {
            color: #ff8c00;
          }

          i {
            color: #C9CED4;
            margin-right: 5px;
          }
        }
      }
    }
  }
}

.table {
  width: 100%;

  th,
  td {
    border: 1px solid #eee;
    padding: 5px;
  }

  td.center {
    text-align: center;
  }

  td.left {
    text-align: left;
  }

  &.table-sm {

    td {
      padding: 5px !important;
    }
  }

  input.form-control {
    font-size: 13px;
  }
}

.projects_container {
  background: #FFF;
  padding: 15px;
  border-radius: 6px;
  display: flex;
  gap: 20px;

  .left {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    width: calc(100% - 250px);
  }

  .right {
    width: 250px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    border-left: 1px solid #eee;
    padding-left: 15px;

    select {
      width: 200px;
    }
  }
}

.default_popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;

  .popup_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FFF;
    padding: 25px;
    border-radius: 6px;
    max-width: 1140px;
    width: 100%;

    .close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
    }
  }
}

#fg-cron {
  margin: 10px 0;

  .countdown {
    background: #57b951;
    color: #FFF;
    padding: 10px;
  }

  #cron-container {
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;

    .msg {
      font-size: 13px;
      padding: 5px;
      border-bottom: 1px solid #e8e8e8;
    }
  }
}

.card {
  background: #FFF;
  padding: 25px;
  border-radius: 6px;
  color: #000;
  font-size: 15px;
  max-width: 1280px;

  &.mb25 {
    margin-bottom: 25px;
  }

  .card-header {
    font-weight: 600;
  }

  .card-body {
    padding-top: 10px;

    table {
      border-collapse: collapse;

      th,
      td {
        font-size: 14px;

        &.bold {
          font-weight: 600;
        }

        &.text-right {
          text-align: right;
        }

        &.text-center {
          text-align: center;
        }

        .close-task {
          text-decoration: none;
          color: $cBlue;

          &:hover {
            color: #cc0000;
          }
        }
      }
    }
  }
}

.finance-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;

  .panel {
    background: #FFF;
    border-radius: 6px;
    padding: 15px;

    h1 {
      font-size: 20px;
      margin: 0;
    }

    span {
      font-size: 0.85em;
    }
  }
}

.finance-manager {
  display: grid;
  gap: 10px;
  grid-template-columns: 200px 1fr 500px;
  padding-top: 25px;

  .manage-menu {
    display: inline-block;
    margin-right: 10px;

    a {
      color: #333333;
      text-decoration: none;
      font-weight: 300;
      display: block;
    }
  }

  .actions {
    width: 100px;
    text-align: center;

    a {
      display: inline-flex;
      margin: 0 2px;
      height: 25px;
      width: 25px;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: #000;
      border: 1px solid #e7e7e7;
      font-size: 11px;
      border-radius: 3px;
      transition: all 0.3s ease;

      &:hover {
        border: 1px solid $cBlue;
      }
    }
  }
}

.bootstrap-tagsinput {
  .tag {
    background: $cBlue;
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 12px;

    [data-role="remove"] {
      color: #FFF !important;

      &:hover {
        box-shadow: none !important;
        color: #000 !important
      }
    }
  }
}

.finance-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;

  a:not(.btn) {
    display: flex;
    width: 100%;
    text-decoration: none;
    color: $cBlack;

    &.zoom-100 {
      font-size: 130%;
    }

    &.zoom-90 {
      font-size: 120%;
    }

    &.zoom-80 {
      font-size: 110%;
    }

    &.zoom-70 {
      font-size: 100%;
    }

    &.zoom-60 {
      font-size: 95%;
    }

    &.zoom-50 {
      font-size: 85%;
    }

    &.zoom-40 {
      font-size: 80%;
    }

    &.zoom-30 {
      font-size: 75%;
    }

    &.zoom-20 {
      font-size: 75%;
    }

    &.zoom-10 {
      font-size: 70%;
    }

    &.zoom-0 {
      font-size: 70%;
    }
  }
}

.manage-menu {
  position: relative;

  .context-menu {
    border-left: 4px dotted #000;
    width: 1px;
    height: 100%;
  }

  .context-menu-container {
    position: absolute;
    display: none;
    background: #FFF;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
    top: 2px;
    left: 2px;

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;

      li {
        a {
          display: block;
          padding: 7px 15px;
          white-space: nowrap;

          &:hover {
            background: #f8f8f8;
          }
        }
      }
    }
  }

  &:hover {
    .context-menu-container {
      display: block;
    }
  }
}

.dt-layout-table {
  margin-bottom: 25px;
}

.pagination {
  button {
    border: 1px solid #eee;
    background: #FFF;
    display: inline-flex;
    height: 30px;
    width: 30px;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    transition: all 0.3s ease;

    &:hover {
      background: #eee;
    }
  }
}

table {
  &#products {
    .table-product-title {
      display: flex;
      justify-content: space-between;
    }

    .edit-product-title {
      display: flex;
      height: 25px;
      align-items: center;
      justify-content: center;
      width: 25px;
      cursor: pointer;
      background: #fff;
      border: 1px solid #9b9b9b;
      color: #9b9b9b;

      &:hover {
        background: #9b9b9b;
        color: #fff;
      }
    }

    a {
      &.custom_name {
        color: $cGreenLight !important;
      }
    }
  }
}

.chart-with-form {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.chart-area {
  flex: 1 1 auto;
  min-width: 0;
}

.comment-form {
  width: 360px;
  /* stała, wygodna szerokość prawej kolumny */
  flex: 0 0 360px;
}

.comment-form .form-group {
  margin-bottom: 12px;
}

.comment-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.comment-form input[type="date"],
.comment-form textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 14px;
}

.comment-form textarea {
  min-height: 120px;
  resize: vertical;
}

.comment-form .btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 4px;
  border: 0;
  background: #337ab7;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.comment-form .btn[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

.comment-form .hint {
  font-size: 12px;
  color: #666;
}

/* === Select2 w modalu "Edytuj produkt" === */

/* pełna szerokość i taki sam odstęp jak inne pola */
.jconfirm-box .form-group .select2-container {
  width: 100% !important;
  margin-top: 8px;
}

/* wygląd "inputa" */
.jconfirm-box .select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 1px solid #ced4da;
  /* jak bootstrapowe inputy */
  border-radius: 3px;
  min-height: 42px;
  /* wysokość podobna do pola tytułu/opisu */
  display: flex;
  align-items: center;
  padding: 4px 12px;
  box-shadow: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  font-size: 14px;
}

/* tekst w środku */
.jconfirm-box .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
  line-height: 1.4;
  color: #495057;
}

/* placeholder */
.jconfirm-box .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #adb5bd;
}

/* strzałka po prawej – wyrównanie */
.jconfirm-box .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 8px;
}

/* efekt hover/focus – jak na form-control */
.jconfirm-box .select2-container--default.select2-container--focus .select2-selection--single,
.jconfirm-box .select2-container--default .select2-selection--single:hover {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
  outline: 0;
}

/* dropdown (lista kategorii) */
.jconfirm-box .select2-container .select2-dropdown {
  border-color: #ced4da;
  border-radius: 0 0 3px 3px;
  font-size: 14px;
}

/* pole wyszukiwania w dropdownie */
.jconfirm-box .select2-container .select2-search--dropdown .select2-search__field {
  padding: 6px 10px;
  border-radius: 3px;
  border: 1px solid #ced4da;
  font-size: 14px;
}

/* podświetlenie zaznaczonej pozycji */
.jconfirm-box .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #007bff;
  color: #fff;
}