/* =========================================================
   LIFTRIX Mobile Header
   全モバイルWeb画面 共通ヘッダー
   Clean Top Version
========================================================= */

.mobileHeader {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: 8000;

  width: 100%;
  max-width: none;
  min-height: 60px;
  height: 60px;
  padding: 8px 14px;

  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;

  box-sizing: border-box;
  margin: 0;
  border-radius: 0;
  transform: none;

  background:
    linear-gradient(
      180deg,
      rgba(26, 47, 102, 0.96) 0%,
      rgba(16, 36, 79, 0.96) 48%,
      rgba(15, 34, 73, 0.94) 100%
    );

  border-bottom: 1px solid rgba(125, 170, 255, 0.14);

  box-shadow:
    0 10px 24px rgba(5, 18, 45, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.mobileHeader,
.mobileHeader * {
  box-sizing: border-box;
}

.mobileHeader__left,
.mobileHeader__center,
.mobileHeader__right {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.mobileHeader__left {
  justify-content: flex-start;
}

.mobileHeader__center {
  justify-content: center;
  min-width: 0;
}

.mobileHeader__right {
  justify-content: flex-end;
}

.mobileHeader__menuBtn,
.mobileHeader__todayBtn,
.mobileHeader__dateArrow,
.mobileHeader__dateLabel {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobileHeader__menuBtn {
  width: 38px;
  height: 38px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: rgba(244, 248, 255, 0.94);
  background: transparent;
  border: 0;
  box-shadow: none;

  font-size: 21px;
  font-weight: 950;
  line-height: 1;
}

.mobileHeader__menuBtn:active,
.mobileHeader__todayBtn:active,
.mobileHeader__dateArrow:active,
.mobileHeader__dateLabel:active {
  transform: scale(0.96);
}

.mobileHeader__title {
  margin: 0;
  max-width: 100%;

  color: #f7fbff;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mobileHeader__dateNav {
  width: min(196px, 100%);
  height: 38px;

  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;

  border-radius: 999px;
  background: rgba(15, 26, 43, 0.52);
  border: 1px solid rgba(217, 228, 246, 0.10);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.10);
}

.mobileHeader__dateArrow {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: rgba(247, 251, 255, 0.92);
  background: transparent;

  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.mobileHeader__dateLabel {
  min-width: 0;
  height: 36px;
  padding: 0 4px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #ffffff;
  background: transparent;

  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-align: center;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mobileHeader__todayBtn {
  width: 44px;
  height: 38px;
  padding: 0;

  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--liftrix-btn-primary-text, #ffffff) !important;
  background: var(--liftrix-btn-primary-bg) !important;
  border: 1px solid var(--liftrix-btn-primary-border) !important;
  box-shadow: var(--liftrix-btn-primary-shadow) !important;

  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

/* Calendar画面などで親幅が狭い場合の保険 */
.clientMobileCalendarScreen .mobileHeader {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

@media (max-width: 360px) {
  .mobileHeader {
    padding-inline: 10px;
    gap: 8px;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
  }

  .mobileHeader__menuBtn {
    width: 36px;
    height: 36px;
  }

  .mobileHeader__dateNav {
    width: min(180px, 100%);
    grid-template-columns: 34px minmax(0, 1fr) 34px;
  }

  .mobileHeader__dateArrow {
    width: 34px;
    font-size: 21px;
  }

  .mobileHeader__dateLabel {
    font-size: 11px;
    padding-inline: 2px;
  }

  .mobileHeader__todayBtn {
    width: 42px;
    font-size: 11px;
  }
}