/* A&W CI overlay for the pinned Zammad 7.1.2 legacy agent interface. */
:root {
  --button-primary-background: #7eb2e4;
  --button-primary-background-active: #5b98d2;
  --text-link: #1376b8;
  --text-nav: #4ba0d1;
  --highlight: #2e91c8;
  --border-highlight: #1376b8;
  --background-tertiary: #263746;
  --background-quaternary: #1e2b36;
  --background-active: #263746;
  --background-highlight: #e5f2f9;
  --background-article-customer: #e8f3f9;
  --background-article-customer-meta: #f3f8fb;
  --border-article-customer: #d1e5f0;
  --border-article-customer-selected: #b5d7e8;
  --backdrop-clue-start: rgba(19, 118, 184, 0.1);
  --backdrop-clue-end: rgba(19, 118, 184, 0.9);
  --ok-color: #1376b8;
  --menu-background-active: #1376b8;
  --menu-switch-pointer: #263746;
  --menu-background-primary: #1e2b36;
  --menu-background-primary-hover: rgba(255, 255, 255, 0.08);
  --menu-background-secondary: #263746;
  --menu-close-tab-background: #263746;
}

/* Replace only the compact agent-navigation mark; the activity badge remains. */
.search .logo {
  box-sizing: border-box;
  width: 112px;
  height: 38px;
  flex: 0 0 112px;
  margin: -4px 7px 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  background: #fff url('/aw-ci-logo.jpg') center / 104px auto no-repeat;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.search .logo .icon-logo {
  width: 112px;
  height: 38px;
  visibility: hidden;
}

.search .logo .activity-counter {
  right: -5px;
  bottom: -4px;
  border-color: #1e2b36;
}

.menu-item.is-active,
.menu-item.is-hovered,
.nav-tab.is-active,
.nav-tab.nav-tab--search:hover,
.nav-tab.nav-tab--search.is-hover,
.nav-tab.task-state-open.is-active {
  background-color: #1376b8;
}

.btn--primary,
.btn.btn--primary {
  color: #023c72;
  background-color: #7eb2e4;
  border-color: #7eb2e4;
  font-weight: 600;
}

.btn--primary:hover,
.btn--primary:focus,
.btn--primary.is-active,
.btn.btn--primary:hover,
.btn.btn--primary:focus,
.btn.btn--primary.is-active {
  color: #fff;
  background-color: #5b98d2;
  border-color: #5b98d2;
}

.btn--primary:focus-visible,
.btn.btn--primary:focus-visible {
  outline: 2px solid #7eb2e4;
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .search {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 8px 12px 10px;
  }

  .search .logo {
    grid-row: 1;
    width: 100%;
    height: 44px;
    margin: 0;
    background-size: 188px auto;
  }

  .search .logo .icon-logo {
    width: 100%;
    height: 44px;
  }

  .search .search-holder {
    grid-row: 2;
    width: 100%;
    margin-right: 0;
  }

  .search.focused .logo {
    opacity: 1;
    z-index: 3;
  }

  .search.focused .search-holder {
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .navigation:not(:hover):not(.is-not-collapsed) .search .logo {
    width: 38px;
    height: 34px;
    flex-basis: 38px;
    margin: 8px 1px 0;
    background-size: 94px auto;
    background-position: 2px center;
  }

  .navigation:not(:hover):not(.is-not-collapsed) .search .logo .icon-logo {
    width: 38px;
    height: 34px;
  }
}