/*
 * kCube theme — mobile layer. Replaces Redmine's responsive.css (which the
 * theme mechanism links by name) with the stock rules plus the brand header.
 */
@import url("/assets/responsive-b138584c.css");

@media screen and (max-width: 899px) {
  /* header: white with the cube mark, brand stripe underneath */
  #wrapper #header {
    background-color: #ffffff;
    background-image: url("/assets/themes/kcube/kcube-mark-65d39e99.svg");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: auto 40px;
    padding: 0;
    min-block-size: 0;
    border-block-end: 3px solid transparent;
    border-image: linear-gradient(90deg, #f48120 0 34%, #29aae1 34% 67%, #a4cd39 67% 100%) 1;
  }

  #wrapper #header a.kcube-home {
    inline-size: 64px;
    block-size: 64px;
  }

  #wrapper #header a.mobile-toggle-button {
    color: #262626;
    border-inline-start: 1px solid #dde2e8;
  }

  #wrapper #header #quick-search {
    padding-inline-start: 64px;
    background: transparent;
  }

  /* flyout menu in the logo black */
  .flyout-menu {
    background-color: #262626;
  }

  .flyout-menu h3 {
    background-color: #3d434a;
    border-block-color: #4c535b;
  }

  .flyout-menu ul li a:hover,
  .flyout-menu ul li a.selected {
    background-color: rgba(255, 255, 255, 0.12);
  }

  .flyout-menu ul li a.selected {
    box-shadow: inset 3px 0 0 #f48120;
  }

  /* login page: the card is narrower than the logo band, keep the logo inside it */
  #login-form::before {
    background-size: contain;
    inset-inline: 16px;
  }
}

@media screen and (max-width: 899px) {
  /* Gantt toolbar stacks: period + actions, then zoom / month navigation */
  body.controller-gantts #query_form_with_buttons p.buttons { flex: 1 1 100%; }
  body.controller-gantts #query_form_with_buttons p.contextual {
    flex: 1 1 100%;
    margin: 0;
    justify-content: space-between;
  }
  body.controller-gantts #query_form_with_buttons p.contextual > span { flex: 1 1 auto; }
  body.controller-gantts #query_form_with_buttons p.contextual > span > a,
  body.controller-gantts #query_form_with_buttons p.contextual > span > span { flex: 1 1 auto; justify-content: center; }
  body.controller-gantts #query_form_with_buttons p.buttons > select { flex: 1 1 7rem; }
  body.controller-gantts #query_form_with_buttons p.buttons a.icon { flex: 1 1 auto; justify-content: center; }
}