$border: #e4e4e4;
$bkgrnd: #f5f5f5;
$sidebar_hover: #110617;
$unselected_font: #b4b4b4;
$title: #a2a2a2;
$font_size: 15px;
$purple: #6B419A;

body {
  background-color: $bkgrnd;
  font-family: 'OpenSans','Lucida Grande','Lucida Sans Unicode',sans-serif;
  margin: 0;
  overflow-x: hidden;
  font-size: $font_size;
}

textarea {
   resize: none;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

.dropdown {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 10px;

  select {
    outline: none;
    font-size: $font_size !important;
    padding: 2px 10px !important;
  }
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  transform: translate(-50%, -50%);
}

.fa-spinner {
  color: $title;
}

#sidebar {
  height: 100%;
  width: 160px;
  background-image: linear-gradient(to bottom, #443e4a 0, #110617 100%);
  position: absolute;
  top: 0px;
  left: 0px;

  #logo {
    cursor: pointer;
    opacity: 0.85;
    height: 130px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
  }

  #logo:hover {
    opacity: 1;
    background-color: $sidebar_hover;
  }


//************* Navbar (sidebar menu)

  .navbar {
    width: 100%;
    padding: 0;
    position: absolute;
    left: 0px;

    .nav_item {
      position: relative;
      width: 150px;
      padding-left: 10px;
      height: 50px;
      line-height: 50px;
      color: $unselected_font;
      cursor: pointer;
      font-size: 13px;
    }

    .nav_item:hover {
      color: white;
      background-color: $sidebar_hover;

      .side_menu {
        color: $unselected_font;  // don't automatically highlight
      }
    }

    .fa-chevron-down {
      position: absolute;
      top: calc(50% - 6.5px);
      right: 7px;
    }

    .side_menu {
      display: none;
      padding: 0;
      z-index: 10;
      position: relative;
      margin-left: -10px; // to make up for the 10px left padding the nav items have
      left: 160px;
      top: -50px;
      background-color: $sidebar_hover;
    }

    #status_side_menu {
      width: 100px;
    }

    #checks_side_menu {
      width: 165px;
    }

    #logs_side_menu {
      width: 140px;
    }

    .multi:hover {
      .side_menu {
        display: block;
      }
    }

    .side_menu_item {
      width: 100%;
      height: 50px;
      display: inline-block;
      text-indent: 20px;
    }

    .side_menu_item:hover {
      color: white;
      background-color: gray;
    }

    .active {
      color: white;
    }
  }
}


//************* Top bar

.top_bar {
  width: calc(100% - 160px);
  height: 80px;
  background-color: white;
  position: absolute;
  top: 0px;
  left: 160px;
  border-bottom: 1px solid $border;
  overflow-x: hidden;

  #title {
    color: $title;
    font-weight: bold;
    position: absolute;
    height: 100%;
    line-height: 80px;
    text-indent: 27.5px;
    font-size: 25px;
  }

  #agent_status {
    // Default: green status
    background:linear-gradient(to bottom, #89c403 5%, #77a809 100%);
    background-color:#89c403;
    background-color: red;
    border:1px solid #74b807;
    text-shadow:0px 1px 0px #528009;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -150px;

    border-radius:26px;
  	color:#ffffff;
  	padding:6px 24px;
  	text-decoration:none;
    text-align: center;
  }
  #restart_status {
    color: #ff0000;
  }
  #agent_info {
    position: absolute;
    right: 0px;
    margin-right: 100px;
    text-align: right;
    top: 50%;
    transform: translateY(-50%);
    color: $title;
  }

  /*
  #hostname {
    max-width: 250px;
    overflow-x: scroll;
    white-space: nowrap;
  }
  */
}


#main {
  position: absolute;
  left: 160px;
  top: 80px;
  width: calc(100% - 160px);
  height: calc(100% - 80px);

  .page {
    position: absolute;
    top: 20px;
    left: 20px;
    border: 1px solid $border;
    background-color: white;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
    -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
    -webkit-box-shadow:  0px 0px 15px rgba(0, 0, 0, 0.22);
    display: none;
  }

//************* Input/input buttons

  #settings_input, #check_input, #new_config_input {
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    font-size: $font_size;
    padding: 1px;

    #submit_settings, #save_check, #disable_check, #add_check {
      box-shadow:inset 0px 1px 0px 0px #3dc21b;
      background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
      background-color:#44c767;
      border-radius:3px;
      border:1px solid #18ab29;
      color:#ffffff;
      text-shadow:0px 1px 0px #2f6627;

      z-index: 5;
      position: absolute;
      padding: 6px 10px;
      cursor: pointer;
      font-size: $font_size;
      text-decoration: none;
    }

    .unsuccessful {
      z-index: 5;
      cursor: default;
      position: absolute;
      color: red;
      top: 50%;
      transform: translateY(-50%);
      left: -30px;
    }

    .success {
      z-index: 5;
      cursor: default;
      position: absolute;
      color: green;
      top: 50%;
      transform: translateY(-50%);
      left: -30px;
    }

    .msg {
      z-index: 5;
      cursor: default;
      position: absolute;
      width: 240px;
      text-align: right;
      top: calc(100% + 10px);
      right: 0px;
      color: black;
      font-size: $font_size;
    }

    #submit_settings {
      width: 32px;
      right: 15px;
      top: 15px;
    }

    #save_check  {
      right: 10px;
      top: 10px;
    }

    #disable_check  {
      right: 70px;
      top: 10px;
    }

    #add_check {
      width: 80px;
      right: 10px;
      top: 10px;
    }

    #submit_settings:hover, #save_check:hover, , #disable_check:hover {
      background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
      background-color:#5cbf2a;
    }

    #submit_settings:active, #save_check:active, #disable_check:active, #add_check:active {
      margin-top: 1px;
    }

    .inactive {
      pointer-events: none;

      box-shadow:inset 0px 1px 0px 0px white!important;
      background:linear-gradient(to bottom, grey 5%, white 100%)!important;
      background-color: grey!important;
      border-color: grey!important;
    }
  }

//************* Status pages

  #general_status, #collector_status {
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    overflow-y: scroll;

    .stat {
      margin: 10px;
      margin-left: 20px;
      margin-bottom: 20px;
      line-height: 140%;

      .stat_title {
        font-size: $font_size * 1.3;
        font-weight: bold;
        color: $purple;
        display: block;
        padding-top: 10px;
        padding-bottom: 5px;
      }

      .stat_subtitle {
        font-size: $font_size * 1.1;
        font-weight: bold;
        display: block;
        padding-top: 10px;
        padding-bottom: 3px;
      }

      .stat_data {
        display: block;
        padding-left: 15px;
      }

      .stat_subdata {
        display: block;
        padding-left: 20px;
        padding-bottom: 20px;
      }

      .stat_subdata ul {
        display: block;
        margin: 0;
        padding: 0 0 0 20px;
      }

      .error {
        color: red;
        font-weight: bold;
      }

      .warning {
        color: #FFA500;
        font-weight: bold;
      }

      .ok {
        color: #18ab29;
        font-weight: bold;
      }
    }
  }


//************* Settings page

  #settings {
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    overflow-y: hidden;
    overflow-x: scroll;

    // keep the scrollbar always showing
    ::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 7px;
    }
    ::-webkit-scrollbar-thumb {
      border-radius: 4px;
      background-color: rgba(0, 0, 0, .5);
      -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
    }
  }

//************* Manage checks

  #manage_checks {
    width: calc(100% - 40px);
    height: calc(100% - 40px);

    #checks_description {
      width: 100%;
      height: 50px;
      border-bottom: 1px solid $border;
      display: block;
      text-align: center;
      line-height: 50px;
      font-size: $font_size;
      font-weight: bold;
    }

    .interface {
      position: absolute;
      width: 100%;
      height: calc(100% - 50px);
      top: 50px;

      .left {
        position: absolute;
        height: 100%;
        width: 215px;
        border-right: 1px solid $border;

        .list {
          position: absolute;
          top: 50px;
          height: calc(100% - 50px);
          width: 100%;
          overflow-y: scroll;

          .check {
            font-size: $font_size * 0.9;
            padding: 5px;
            width: calc(100% - 10px);
            display: inline-block;
          }

          .check:hover {
            background-color: $border;
          }

          .active_check {
            background-color: $border;
          }
        }

      }

      .right {
        position: absolute;
        height: 100%;
        width: calc(100% - 215px);
        left: 215px;
      }
    }

    .popup {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: block;
      padding: 15px;
      height: calc(100% - 130px);
      width: calc(100% - 330px);
      min-width: 700px;

      z-index: 5;
      background-color: #f4f4f4;
      box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
      -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
      -webkit-box-shadow:  0px 0px 15px rgba(0, 0, 0, 0.22);

      .exit {
        z-index: 6;
        position: absolute;
        top: 0px;
        right: 0px;
        margin: 5px;

        cursor: pointer;
        width: 20px;
        height: 20px;

        color: #fff;
        border: 1px solid #AEAEAE;
        border-radius: 30px;
        background: #605F61;
        font-size: 20px;
        font-weight: bold;

        display: inline-block;
        text-align: center;
        line-height: 15px;
      }

      #check_run_results {
        height: 100%;
        width: 100%;
        overflow-y: scroll;

        .stat_title {
          display: block;
          font-size: $font_size * 1.25;
          font-weight: bold;
        }

        .stat_subtitle {
          display: block;
          font-size: $font_size * 1.1;
          font-weight: bold;
          padding-top: 10px;
          padding-bottom: 7px;
          padding-left: 10px;
        }

        .stat_data {
          display: block;
          padding-left: 20px;
        }

        .error {
          color: red;
          font-weight: bold;
        }

        .warning {
          color: #FFA500;
          font-weight: bold;
        }

        .green {
          color: green;
        }

        .red {
          color: red;
        }

        #summary {
          display: block;
          padding-bottom: 10px;
          font-size: $font_size * 1.1;
        }
      }
    }
  }

//************* List running checks

  #running_checks {
    padding: 20px;
    max-height: calc(100% - 80px);
    overflow-y: scroll;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    #running_checks_table {
      th {
        padding: 5px;
      }

      td {
        border-top: 1px solid $border;
        padding: 5px;
      }

      .l_space {
        padding-left: 30px;
      }

      .success {
        color: green;
      }

      .error {
        color: red;
      }

      .warning {
        color: #FFA500;
      }
    }

    #running_checks_info {
      display: block;
      padding-top: 15px;
      text-align: center;
    }
  }

//************* Flare

   #flare {
    width: 500px;
    height: 320px;
    padding: 10px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    #flare_description {
      padding: 10px;
      width: calc(100% - 20px);
      text-align: center;
      font-size: $font_size * 1.2;
    }

    .flare_input {
      width: 400px;
      padding: 30px;
      margin-top: -20px;

      #email:-webkit-autofill {
        // Turn off color change due to autocomplete
        -webkit-box-shadow: 0 0 0px 1000px white inset;
      }

      #ticket_num, #email {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;

        display: block;
        width: 100%;
        padding: 7px;
        border: none;
        border-bottom: 1px solid #ddd;
        outline: none;
        margin-bottom: 10px;
        font-size: $font_size;
        height: 45px;
      }

      #submit_flare {
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        display: inline-block;
        cursor: pointer;
        font-size: $font_size;
        padding: 8px 18px;
        outline: none;

        -moz-box-shadow: inset 0px 1px 0px 0px #45D6D6;
        -webkit-box-shadow: inset 0px 1px 0px 0px #45D6D6;
        box-shadow: inset 0px 1px 0px 0px #45D6D6;
        background-color: #2CBBBB;
        border-radius:3px;
        border: 1px solid #27A0A0;
        color: #FFFFFF;
      }

      #submit_flare:hover {
        background:linear-gradient(to bottom, #34CACA 5%, #30C9C9 100%);
        background-color:#34CACA;
      }

      #submit_flare:active {
        bottom:-21px;
      }
    }
  }


//************* Logs

  #logs {
    width: calc(100% - 70px);
    height: calc(100% - 60px);
    padding: 15px;
    padding-top: 5px;
    overflow: scroll;

    .log_title {
      display: inline-block;
      font-weight: bold;
    }

    .log_data {
      max-width: calc(100% - 30px);
      position: absolute;
      top: 60px;
      line-height: 120%;
      font-size: $font_size * 0.9;
    }

    .load_more {
      display: block;
      height: 20px;
      width: 80px;
      padding: 5px 10px 5px 10px;
      margin: 10px 0px 10px 0px;
      font-size: $font_size;
      border-radius: 6px;
      background-color: #b4b4b4;
    }

    .load_more:active {
      background-color: #a2a2a2;
    }
  }
}

.inventory-scrollbox {
  max-height: 400px;
  overflow-y: auto;
  border: 2px solid $purple;
  background: #f6f3fa; // Very light Datadog purple
  box-shadow: 0 2px 8px rgba(107, 65, 154, 0.2); // Soft purple shadow
  border-radius: 6px;
  padding: 0.5em;
  margin-bottom: 1em;

  // Custom scrollbar for Webkit browsers
  &::-webkit-scrollbar {
    width: 12px;
    background: #e8e0f2;
    border-radius: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background: $purple;
    border-radius: 6px;
    border: 2px solid #f6f3fa;
  }

  // For Firefox
  scrollbar-width: thin;
  scrollbar-color: $purple #e8e0f2;
}

.source-bubble {
  display: inline-block;
  padding: 0px 6px;
  border-radius: 10px;
  font-size: 0.85em;
  font-weight: normal;
  margin-left: 5px;

  &.installed {
    background-color: #E3F2FD;
    color: #1976D2;
  }

  &.broken {
    background-color: #F3E5F5;
    color: #7B1FA2;
  }
}
