@import "style/dropdown.css";
@import "style/checkbox.css";
@import "style/menu.css";
@import "style/table.css";
@import "style/tooltips.css";
@import "style/loading.css";
@import "style/context.css";
@import "https://unpkg.com/chartist@1.3.0/dist/index.css";

:root {
  --backgroundColor: #ffffff;
  --backgroundColorSecondary: #fcfcfc;
  --backgroundColorHover: #dddddd;
  --textColor: #000000;
  --textColorSecondary: #333333;
  --textColorHover: #999999;
  --primaryColor: #f75f2a;
  --secondaryColor: #3fcd89;
  --secondaryColorDark: #27ae6d;
  --prodIndicatorColor: #950460;
  --prodSubtleColor: #fef0f7;
  --qaIndicatorColor: #47b9d8;
  --qaSubtleColor: #eaf7fb;
  --failColor: #F4616D;
}

@media (prefers-color-scheme: dark) {
  :root {
      --secondaryColor: #15844f;
      --secondaryColorDark: #177649;
      --backgroundColor: #333333;
      --backgroundColorSecondary: #3c3c3c;
      --backgroundColorHover: #444444;
      --textColor: #ffffff;
      --textColorSecondary: #eeeeee;
      --textColorHover: #aaaaaa;
      --prodSubtleColor: #573f4b;
      --qaSubtleColor: #506b74;
    }
  }

body,
html {
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  background: var(--backgroundColor);
}

.topbar {
  position: fixed;
  display: flex;
  line-height: 62px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  background: var(--backgroundColor);
  color: var(--textColor);
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}

.topbar .logo {
  height: 36px;
  vertical-align: middle;
  padding: 12px 12px;
}

.topbar h1 {
  flex-grow: 1;
  font-size: 24px;
  margin: 0;
  padding: 0;
}

.topbar #user img {
  border-radius: 50%;
  height: 30px;
  vertical-align: middle;
  margin: 18px 0;
}

.topbar #user {
  padding-right: 12px;
  position: relative;
}

.topbar #user .logout {
  display: none;
  font-weight: bold;
  position: absolute;
  left: 0;
  right: 45px;
  background: rgb(250, 250, 250);
  padding: 0 10px;
  top: 0;
  bottom: 0;
  cursor: pointer;
}

.topbar #user:hover .logout {
  display: block;
}

.app {
  display: flex;
  margin-top: 66px;
  min-height: calc(100% - 62px);
}

#deployables {
  flex-grow: 1;
}

#deployables h2 {
  margin: 100px auto;
  width: 500px;
  text-align: center;
}

.action-bar {
  background: var(--secondaryColorDark);
  display: flex;
  width: 100%;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.action-bar .title {
  color: #FFFFFF;
  font-size: 25px;
  line-height: 46px;
  flex-grow: 1;
  padding: 0 8px;
}

.action-bar .actions {
  text-align: right;
}

.pagination {
  display: flex;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
  padding: 6px;
  background: rgba(0,0,0,0.02);
  color: var(--textColor);
}

.indicator {
  flex-grow: 1;
  text-align: center;
}

.pageBtn {
  width: 100px;
}

.status {
  width: 50px;
}

.envDropdown {
  background: rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 10px;
  color: white;
  vertical-align: middle;
  padding: 2px 4px;
}

.daysDropdown {
  background: transparent;
  border: none;
  font-size: 1em;
  font-weight: bold;
  color: white;
}

.deployed {
  width: 15px;
  height: 15px;
  margin: 0 0 0 4px;
  display: inline-block;
  border-radius: 50%;
  background: #cccccc;
}

.deployed img {
  width: 100%;
  height: 100%;
  opacity: 50%;
  object-fit: cover;
  border-radius: 50%;
  padding: 2px;
  box-sizing: border-box;
}

.deployed:hover img {
  margin: -7px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  opacity: 1;
}

.deployed.prod {
  background: var(--prodIndicatorColor);
}

.deployed.qa {
  background: var(--qaIndicatorColor);
}

.text-mobile {
  display: none;
}

.text-desktop {
  display: inline;
}

.tag {
  background: var(--prodIndicatorColor);
  color: white;
  border-radius: 8px;
  font-size: 13px;
  padding: 4px 8px;
}

.stats {
  background: var(--secondaryColorDark);
  color: #FFFFFF;
  padding: 1px 16px;
}

.stats .statbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.stats .statbar div {
  width: 33%;
}

@media only screen and (max-width: 700px) {
  #sidebar {
    display: none;
  }

  #mobileMenuToggle {
    display: block;
  }

  .stats .statbar div {
    width: 50%;
  }

  .stats .statbar .chart {
    width: 100%;
  }

  table .message {
    max-height: 200px;
  }

  .text-mobile {
    display: inline;
  }
  
  .text-desktop {
    display: none;
  }
  .status {
    width: 20px;
  }
}

.security button {
  border-radius: 5px;
  border: none;
  font-weight: bold;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.security .CRITICAL {
  background-color: rgb(238 26 26 / 20%);
}

.security .HIGH {
  background-color: rgba(171, 26, 238, 0.2);
}

.security .MODERATE {
  background-color: rgba(26, 111, 238, 0.2);
}

.security .LOW {
  background-color: rgba(26, 238, 181, 0.2);
}