$cBlue: #6690F4;
$cRed: #cc563d;
$cGreen: #099885;
$cBlack: #4e5e6a;

.default-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 6px;
  padding: 0 15px;
  transition: all .3s ease;

  &:hover {
    text-decoration: none;
  }
}

.animate {
  animation: mymove 3s infinite;
}

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

.nowrap {
  white-space: nowrap;
}

table {
  border-collapse: collapse;
  font-size: 13px;
}

small {
  font-size: .75em;
}

@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: "Open Sans", sans-serif;
  margin: 0;
  padding: 0;
  font-size: 15px;
  color: #4e5e6a;
}

.btn {
  padding: 9px 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,
  &.btn-sm {
    padding: 5px 7px;
    font-size: 13px;

    i {
      font-size: 12px;
    }
  }

  &.btn-success {
    background: $cGreen;

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

  &.btn-primary {
    background: $cBlue;

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

  &.btn-danger {
    background: $cRed;

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

.hide {
  display: none;
}

.form-error {
  color: $cRed;
  font-size: 13px;
}

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

.form-field {
  margin-bottom: 15px;

  label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #4e5e6a;
  }
}

.password-wrap {
  position: relative;

  .form-control {
    padding-right: 40px;
  }

  .password-eye {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    text-decoration: none;
    z-index: 2;

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

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

.form-control {
  border: 1px solid #cdcdcd;
  border-radius: 6px;
  height: 35px;
  width: 100%;
  padding: 5px;
  font-family: "Open Sans", 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 #cdcdcd;
      font-size: 20px;
      margin-bottom: 25px;
    }
  }
}

$sidebar-width: 220px;
$sidebar-collapsed-width: 60px;
$sidebar-bg: #1e2a3a;
$sidebar-text: #c2c7d0;
$sidebar-active: #fff;
$sidebar-hover-bg: rgba(255, 255, 255, 0.08);

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: $sidebar-width;
  height: 100vh;
  background: $sidebar-bg;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: width 0.3s ease;
  overflow: hidden;

  &.collapsed {
    width: $sidebar-collapsed-width;

    .sidebar-header .sidebar-logo span,
    .sidebar-nav ul li a span,
    .sidebar-footer span,
    .sidebar-footer .sidebar-user span {
      display: none;
    }

    .sidebar-header .sidebar-logo {
      font-size: 0;

      &::first-letter {
        font-size: 16px;
      }
    }

    .sidebar-nav ul li a {
      justify-content: center;
      padding: 10px;

      i {
        margin-right: 0;
      }
    }

    .sidebar-nav ul li.has-submenu {
      .submenu-arrow {
        display: none;
      }

      .sidebar-submenu {
        display: none;
      }
    }

    .sidebar-footer .sidebar-footer-link,
    .sidebar-footer .sidebar-user {
      justify-content: center;
      padding: 8px 10px;

      i {
        margin-right: 0;
      }
    }
  }

  .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    .sidebar-logo {
      color: $cBlue;
      text-decoration: none;
      font-size: 16px;
      white-space: nowrap;

      span {
        font-weight: 700;
      }
    }

    .sidebar-toggle {
      cursor: pointer;
      color: $sidebar-text;
      font-size: 16px;
      transition: color 0.2s ease;

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

  .sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;

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

      li {
        a {
          display: flex;
          align-items: center;
          padding: 10px 15px;
          color: $sidebar-text;
          text-decoration: none;
          font-size: 14px;
          transition: all 0.2s ease;
          white-space: nowrap;

          i {
            width: 20px;
            text-align: center;
            margin-right: 10px;
            font-size: 15px;
          }

          &:hover {
            background: $sidebar-hover-bg;
            color: $sidebar-active;
          }
        }

        &.active a {
          background: $sidebar-hover-bg;
          color: $sidebar-active;
          font-weight: 600;
        }

        &.has-submenu {
          >a .submenu-arrow {
            margin-left: auto;
            font-size: 12px;
            transition: transform 0.2s ease;
            width: auto;
          }

          &.open>a .submenu-arrow {
            transform: rotate(180deg);
          }

          .sidebar-submenu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.25s ease;
            background: rgba(0, 0, 0, 0.15);

            li a {
              padding: 8px 15px 8px 45px;
              font-size: 13px;

              i {
                font-size: 13px;
                width: 16px;
              }
            }
          }

          &.open .sidebar-submenu {
            max-height: 200px;
          }
        }
      }
    }
  }

  .sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 0;

    .sidebar-user {
      display: flex;
      align-items: center;
      padding: 8px 15px;
      color: $sidebar-text;
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;

      i {
        margin-right: 10px;
        color: $cBlue;
      }
    }

    .sidebar-footer-link {
      display: flex;
      align-items: center;
      padding: 8px 15px;
      color: $sidebar-text;
      text-decoration: none;
      font-size: 13px;
      transition: all 0.2s ease;
      white-space: nowrap;

      i {
        width: 20px;
        text-align: center;
        margin-right: 10px;
      }

      &:hover {
        background: $sidebar-hover-bg;
        color: $sidebar-active;
      }

      &.logout {
        color: $cRed;

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

.content-wrapper {
  margin-left: $sidebar-width;
  min-height: 100vh;
  transition: margin-left 0.3s ease;

  &.expanded {
    margin-left: $sidebar-collapsed-width;
  }
}

.top-bar {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 10px 20px;
  display: flex;
  align-items: center;

  .top-bar-left {
    display: flex;
    align-items: center;
    gap: 15px;

    i {
      cursor: pointer;
      font-size: 18px;
      color: #4e5e6a;

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

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

.tasks_container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;

  .column {
    width: 100%;

    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 $cRed;
      }
    }

    &.tasks_fvat {
      h2 {
        border-bottom: 5px solid #a900fc;
      }
    }

    &.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;
        border-radius: 6px;
        flex-wrap: wrap;

        &.notopened {
          border: 2px solid $cRed;
        }

        .top {
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px;
          width: 100%;

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

            .user {
              display: flex;
              width: 25px;
              height: 25px;
              border-radius: 6px;
              justify-content: center;
              align-items: center;
              color: #FFF;
              font-size: 12px;
            }
          }

          ._timer {
            display: flex;
            gap: 5px;

            .recursively {
              color: #FFF;
              background: #405189;
              border-radius: 3px;
              cursor: pointer;
              margin-bottom: 5px;
              width: 25px;
              height: 25px;
              text-align: center;
              display: block;

              i {
                font-size: 12px;
              }
            }

            .task_start {
              display: block;
              background: $cGreen;
              color: #FFF;
              border-radius: 6px;
              cursor: pointer;
              margin-bottom: 5px;
              width: 25px;
              height: 25px;
              text-align: center;

              &.hidden {
                display: none;
              }

              i {
                font-size: 12px;
              }
            }

            .task_end {
              background: $cRed;
              display: block;
              color: #FFF;
              border-radius: 6px;
              cursor: pointer;
              margin-bottom: 5px;
              width: 25px;
              height: 25px;
              text-align: center;

              &.hidden {
                display: none;
              }

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

        .middle {
          width: 100%;
        }

        .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 #cdcdcd;
              border-radius: 3px;

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

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

          .danger {
            color: $cRed;
            font-weight: 600;
          }

          .warning {
            color: #ff8c00;
          }

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

/* page header */
.block-header {
  margin-bottom: 20px;

  h2 {
    font-size: 20px;
    font-weight: 400;
    color: $cBlack;
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #e2e6ec;

    strong {
      font-weight: 700;
    }
  }
}

/* filters bar — reusable across modules */
.filters-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 12px 16px;
  background: #f5f7fa;
  border-radius: 8px;
  border: 1px solid #e2e6ec;

  select,
  input[type="text"],
  input[type="date"],
  input[type="number"] {
    height: 36px;
    min-width: 170px;
    padding: 0 10px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    color: $cBlack;
    font-family: "Open Sans", sans-serif;
    transition: border-color 0.2s;

    &:focus {
      border-color: $cBlue;
      outline: none;
    }
  }

  .btn {
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: #fff;

    &.btn-primary {
      background: $cBlue;

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

    &.btn-success {
      background: $cGreen;

      &:hover {
        background: #077a6b;
      }
    }
  }
}

/* section title — reusable */
.section-title {
  font-size: 14px;
  font-weight: 600;
  color: $cBlack;
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e6ec;
}

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

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

    &.btn_add {
      background: $cGreen;

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

    &.btn_cancel {
      background: $cRed;

      &: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);
    }
  }
}

.fullscreen_description {
  position: fixed !important;
  top: 25px;
  left: 25px;
  right: 25px;
  bottom: 25px;
  z-index: 9999;
  background: white;
  padding: 20px;
  overflow: auto;
  border-radius: 0.25rem;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.fullscreen {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  color: #FFF;
  background: $cRed;
  display: inline-flex;
  height: 40px;
  width: 40px;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;

  &:hover {
    transform: scale(1.05);
    text-decoration: none;
  }
}

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

  .task_details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FFF;
    padding: 25px;
    border-radius: 6px;
    max-width: 1140px;
    width: 100%;
    transition: all 0.3s ease;
    height: 90vh;

    .content {
      height: calc(100% - 50px);
    }

    &.open_works_time {
      max-width: 1540px;

      .content {
        grid-template-columns: 1fr 300px 350px;

        .task_work_details {
          display: block;
        }
      }
    }

    .title {
      font-size: 20px;
      margin-bottom: 25px;
      display: flex;
      align-items: center;
      gap: 10px;

      a {
        border: 1px solid $cGreen;
        display: inline-flex;
        height: 30px;
        width: 30px;
        border-radius: 6px;
        align-items: center;
        justify-content: center;

        &:hover {
          text-decoration: none;
        }

        i {
          color: $cGreen;
        }

        &.task-delete {
          border: 1px solid $cRed;

          i {
            color: $cRed;
          }
        }

        i {
          font-size: 14px;
        }
      }

      .task-title-edit-box {
        align-items: center;
        gap: 6px;

        .task-title-input {
          height: 30px;
          font-size: 14px;
          padding: 2px 8px;
          width: 300px;
          border: 1px solid #ccc;
          border-radius: 4px;
        }

        a.task-title-save,
        a.task-title-cancel {
          height: 30px;
          width: 30px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border-radius: 6px;

          i {
            font-size: 13px;
          }
        }

        a.task-title-save {
          background: $cGreen;
          border-color: $cGreen;

          i {
            color: #fff;
          }
        }

        a.task-title-cancel {
          background: $cRed;
          border-color: $cRed;

          i {
            color: #fff;
          }
        }
      }
    }

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

    .content {
      display: grid;
      font-size: 14px;
      grid-template-columns: 1fr 300px;
      gap: 30px;
      transition: all 0.3s ease;

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

      .left {
        height: 100%;
        overflow: hidden;

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

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

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

        .comments {
          border-radius: 3px;
          max-height: 406px;
          overflow-y: auto;

          .new_comment {
            margin-bottom: 10px;

            textarea {
              height: 75px;
              margin-bottom: 10px;
              border-radius: 6px;
            }

            .add_comment {
              background: $cGreen;
              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: #ced4da;
              margin-bottom: 5px;
              padding: 15px;
              border-radius: 6px;
              position: relative;

              .delete_comment {
                position: absolute;
                top: 10px;
                right: 10px;
                cursor: pointer;
                color: $cRed;
              }

              .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;
          margin-bottom: 10px;

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

            input {
              border-radius: 6px 0 0 6px;
            }

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

          ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            overflow-y: auto;
            max-height: calc(90vh - 400px);

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

              a {
                margin-left: auto;
                margin-right: 0;
                cursor: pointer;
                background: $cRed;
                display: flex;
                height: 25px;
                width: 25px;
                min-width: 25px;
                justify-content: center;
                align-items: center;
                border: 0;
                border-radius: 3px;
                transition: all 0.3s ease;

                &:hover {
                  text-decoration: none;
                  background: #b30000;
                }

                i {
                  color: #FFF;
                  font-size: 12px;
                }
              }
            }
          }
        }

        .attachments {
          margin-top: 10px;
          border: 1px solid #e6e9ed;
          border-radius: 8px;
          padding: 12px;
          background: #f9fbfd;

          h3 {
            margin-bottom: 10px;
            font-size: 16px;
            font-weight: 600;
          }

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

            .attachment_file_input {
              flex: 1;
              margin-bottom: 0;
              border-radius: 6px;
              background: #fff;
            }

            .attachment-upload-btn {
              white-space: nowrap;
              border-radius: 6px;
              min-width: 150px;

              &.is-loading {
                pointer-events: none;
                opacity: 0.85;

                i {
                  margin-right: 6px;
                }
              }
            }
          }

          .attachments_list {
            margin: 0;
            padding: 0;
            list-style: none;
            display: grid;
            gap: 8px;
            max-height: 180px;
            overflow-y: auto;

            li {
              display: flex;
              align-items: center;
              gap: 8px;
              background: #fff;
              border: 1px solid #e4e8ee;
              border-radius: 6px;
              padding: 8px 10px;

              .attachment-link {
                color: #1f3d72;
                text-decoration: none;
                font-weight: 600;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                max-width: calc(100% - 140px);

                &:hover {
                  text-decoration: underline;
                }
              }

              small {
                color: #6b7280;
                margin-right: auto;
              }

              .attachment-rename,
              .attachment-delete {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                height: 28px;
                width: 28px;
                border-radius: 4px;
                text-decoration: none;
                transition: all 0.2s ease;
              }

              .attachment-rename {
                border: 1px solid #d8e2f6;
                color: $cBlue;
                background: #f4f8ff;

                &:hover {
                  background: #e7f0ff;
                }
              }

              .attachment-delete {
                border: 1px solid #f1d3d1;
                color: $cRed;
                background: #fff6f6;

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

            .attachments-empty {
              color: #6b7280;
              border-style: dashed;
              justify-content: center;
              font-size: 13px;
            }
          }
        }

        .description {
          padding: 15px;
          border-radius: 0.25rem;
          border: 1px solid #cdcdcd;
          margin-bottom: 15px;
          max-height: 202px;
          overflow-x: hidden;
          position: relative;
        }
      }

      .right {

        .box {
          margin-bottom: 15px;
        }

        .time {
          a.time_worked_toggle {
            @extend .default-btn;
            color: #299cdb;
            display: inline-flex;
            border: 1px solid #299cdb;

            &:hover {
              background: #dff0fa;
              text-decoration: none;
            }

            &:active,
            &:focus {
              text-decoration: none;
            }
          }

          a:not(.time_worked_toggle) {
            @extend .default-btn;
            margin-top: 10px;
            text-decoration: none;
            gap: 10px;

            &.task_start {
              background: #0ab39c;
              color: #FFF;

              &:hover {
                background: #099885;
              }
            }

            &.task_end {
              background: $cRed;
              color: #FFF;
            }

            &.hidden {
              display: none;
            }
          }
        }

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

          .danger {
            color: $cRed;
            font-weight: 600;
          }

          .warning {
            color: #ff8c00;
          }

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

      .task_work_details {
        display: none;
        overflow-y: auto;
        max-height: 508px;
        width: 100%;
        padding-right: 10px;
        padding-top: 4px;

        ._line {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 5px;

          ._user {
            width: 100%;
            font-size: 13px;
          }

          input {
            width: calc(50% - 25px);
            text-align: center;
            margin-left: 2px;
            margin-right: 2px;
          }
        }

        ._work_delete {
          display: inline-flex;
          height: 35px;
          width: 35px;
          border-radius: 6px;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          border: 1px solid $cRed;
          margin-left: 2px;
          transition: all 0.3s ease;

          &:hover {
            background: $cRed;

            i {
              color: #FFF;
            }
          }

          i {
            transition: all 0.3s ease;
            color: $cRed;
          }
        }
      }
    }
  }
}

.table {
  width: 100%;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  background: #fff;

  th,
  td {
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid #eef0f3;
    text-align: left;
    vertical-align: middle;
  }

  thead th {
    background: #f5f7fa;
    color: #4e5e6a;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    border-bottom: 2px solid #e2e6ec;
  }

  tbody tr {
    transition: background 0.15s ease;

    &:last-child td {
      border-bottom: none;
    }

    &:hover {
      background: #f8fafd;
    }
  }

  td.center,
  th.center {
    text-align: center;
  }

  td.left,
  th.left {
    text-align: left;
  }

  td.right,
  th.right {
    text-align: right;
  }

  // empty state
  td[colspan] {
    text-align: center;
    color: #8896a4;
    padding: 24px 14px;
    font-style: italic;
  }
}

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

  .left {
    width: calc(100% - 250px);

    ._projects,
    ._users {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }
  }

  .right {
    width: 250px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    border-left: 1px solid #cdcdcd;
    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: 0;
    max-width: 1140px;
    width: 100%;

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

#fg-cron {
  margin: 10px 0;

  .countdown {
    background: $cGreen;
    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: $cRed;
          }
        }
      }
    }
  }
}

.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: 1.2em;
    }

    &.zoom-90 {
      font-size: 1.15em;
    }

    &.zoom-80 {
      font-size: 1.1em;
    }

    &.zoom-70 {
      font-size: 1.05em;
    }

    &.zoom-60 {
      font-size: 1em;
    }

    &.zoom-50 {
      font-size: 0.95em;
    }

    &.zoom-40 {
      font-size: 0.9em;
    }

    &.zoom-30 {
      font-size: 0.85em;
    }

    &.zoom-20 {
      font-size: 0.8em;
    }

    &.zoom-10 {
      font-size: 0.75em;
    }

    &.zoom-0 {
      font-size: 0.7em;
    }
  }
}

.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;
    }
  }
}

.wiki-categories {
  display: grid;
  gap: 10px;
  margin-top: 25px;
  grid-template-columns: 1fr 1fr 1fr 1fr;

  .category {
    background: #FFF;
    padding: 10px;

    .users {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 5px;

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

    .actions {
      display: grid;
      grid-template-columns: 1fr 1fr;

      a {
        display: block;
        color: $cBlack;
        font-size: 13px;
        text-align: center;
      }
    }

    .title {
      margin-bottom: 5px;

      a {
        display: block;
        color: $cBlack;
        font-size: 13px;
        font-weight: 600;
      }
    }
  }
}

.bootstrap-datetimepicker-widget .picker-switch {
  a {
    display: block;
    color: #000;
  }
}

.gantt_users {
  display: flex;
  gap: 20px;
}

#g-results {
  background: #FFF;
  padding: 25px;
}

.g-menu-container {
  margin-bottom: 15px;

  .right-menu {
    display: none;
  }
}

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

.alert {
  background: $cGreen;
  border: 0;
  color: #FFF;
}

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

  ._left_column {
    padding: 25px;
    background: #fcfcfc;
    border-right: 1px solid #e8e8e8;
    width: 350px;

    label {
      font-weight: 400;
      font-size: 14px;
    }

    select[name="filtr"] {
      margin-bottom: 10px;
    }

    ._buttons {
      display: flex;
      gap: 10px;
      justify-content: space-between;

      .btn {
        flex: 1;
      }
    }
  }

  ._right_column {
    flex: 1;
    max-width: calc(100% - 350px);
  }
}

#billing-summary {
  .card-header {
    padding: 10px;
  }

  .billing-kpi {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  .billing-kpi-label {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 3px;
  }

  .billing-kpi-value {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.1;
  }

  .billing-details-row {
    display: none;
  }

  .billing-client-name {
    font-weight: 600;
  }

  .billing-table>thead>tr>th {
    background: #f8f9fa;
  }

  .billing-details-wrap {
    background: #f8fbff;
  }
}

/* sidebar submenu */

/* vacations module */

.vacation-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  background: #e3f0ff;
  color: #2563eb;

  &.type-chorobowe {
    background: #fff3e0;
    color: #e65100;
  }

  &.type-inna_nieobecnosc {
    background: #f3e5f5;
    color: #7b1fa2;
  }
}