/* =========================================================
   Fonts (shared with login)
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@100;200;300;400;600&family=Roboto:wght@300;400;500&display=swap');


/* =========================================================
   Base / Variables
========================================================= */
:root {
  --ucid-blue: #4f63ff;
  --ucid-pink: #e95b7c;

  --ucid-text: #111827;
  --ucid-muted: #6b7280;

  --ucid-divider: rgba(0, 0, 0, 0.03);
}

/* unused avatar */
.pf-v5-c-avatar {
  display: none;
}

@keyframes ucid-gradient {
  from { background-position: left; }
  to   { background-position: right; }
}


/* =========================================================
   Header / Masthead
========================================================= */
.pf-v5-c-page__header,
.pf-v5-c-masthead {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.pf-v5-c-page__header a,
.pf-v5-c-masthead * {
  color: var(--ucid-text) !important;
}

/* toolbar (PF v5 variable override) */
.pf-v5-c-toolbar {
  --pf-v5-c-toolbar--BackgroundColor: #ffffff;
  --pf-v5-c-toolbar--BorderColor: rgba(0, 0, 0, 0.06);
  background-color: #ffffff !important;
}

.pf-v5-c-masthead .pf-v5-c-toolbar {
  --pf-v5-c-toolbar--BackgroundColor: #ffffff;
  background-color: #ffffff !important;
}

.pf-v5-c-masthead__toggle,
.pf-v5-c-masthead__brand {
  background: transparent !important;
}


/* =========================================================
   Masthead Text
========================================================= */
.pf-v5-c-masthead__brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pf-v5-c-masthead__brand::after {
  content: "UCID Account Management";
  font-family: "Exo 2", sans-serif;
  font-size: 1.5rem;
  font-weight: 100;

  animation: ucid-gradient 2.5s infinite alternate;
  background-size: 300% auto;
  display: block;
  background-image: linear-gradient(90deg, #3F5EFB, #FC466B);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  white-space: nowrap;
  filter: brightness(1.35);
}

a.pf-v5-c-masthead__brand {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}

/* =========================================================
   Sidebar / Navigation
========================================================= */
.pf-v5-c-page__sidebar {
  background: #ffffff !important;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.pf-v5-c-nav,
.pf-v5-c-nav__list {
  background: transparent !important;
}

/* nav links */
.pf-v5-c-nav__link {
  color: var(--ucid-muted) !important;
  font-weight: 400;
}

.pf-v5-c-nav__link:hover {
  color: var(--ucid-blue) !important;
  background: rgba(79, 99, 255, 0.06);
}

/* active link */
.pf-v5-c-nav__link.pf-m-current {
  color: var(--ucid-blue) !important;
  font-weight: 500;
  background: rgba(79, 99, 255, 0.10) !important;
  box-shadow: inset 3px 0 0 var(--ucid-blue);
}

/* PF v5 dividers (softened) */
.pf-v5-c-nav__item::before {
  border-block-end-color: var(--ucid-divider) !important;
}

.pf-v5-c-nav__link::before {
  border-color: var(--ucid-divider) !important;
}

.pf-v5-c-nav {
  --pf-v5-c-nav__link--m-current--BackgroundColor: rgba(79, 99, 255, 0.10) !important;
}

.pf-v5-c-jump-links {
  display: none !important;
}

/* ===============================
   Global loading spinner centering
================================ */

.pf-v5-c-spinner {
  position: fixed;
  inset: 0;
  margin: auto;

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

  z-index: 9999;
}

.pf-v5-c-spinner {
  --pf-v5-c-spinner--Color: #4f63ff;
}

/* 全 spinner を物理的に消す */
.pf-v5-c-spinner,
.pf-v5-c-spinner__path {
  display: none !important;
  visibility: hidden !important;
}

#loading-text {
  font-family: "Exo 2", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 2.2rem;
  font-weight: 100;
  letter-spacing: 0.18em;

  animation: ucid-breathe 2.4s ease-in-out infinite;
  background: linear-gradient(90deg, #4f63ff, #e95b7c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  filter: brightness(1.35);
}

@keyframes ucid-breathe {
  0%   { opacity: 0.35; letter-spacing: 0.18em; }
  50%  { opacity: 0.9;  letter-spacing: 0.26em; }
  100% { opacity: 0.35; letter-spacing: 0.18em; }
}

/* =========================================================
   Cards
========================================================= */
.pf-v5-c-card {
  background: #ffffff !important;
  border-radius: var(--pf-v5-c-button--after--BorderRadius);
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}


/* =========================================================
   Buttons
========================================================= */
.pf-v5-c-button.pf-m-primary {
  background: linear-gradient(
    90deg,
    var(--ucid-blue),
    var(--ucid-pink)
  ) !important;
  border: none;
  border-radius: var(--pf-v5-c-button--after--BorderRadius);
  font-weight: 500;
  color: #fff;
}

.pf-v5-c-button.pf-m-primary:hover {
  opacity: 0.92;
}

.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-link {
  color: var(--ucid-blue);
}


/* =========================================================
   Forms
========================================================= */
.pf-v5-c-form-control {
  border-radius: 8px;
}

.pf-v5-c-form-control:focus {
  border-color: var(--ucid-blue);
  box-shadow: 0 0 0 1px rgba(79, 99, 255, 0.4);
}

/* =========================================================
   Masthead user menu – remove PF v5 pseudo border
========================================================= */
.pf-v5-c-masthead .pf-v5-c-menu-toggle::before {
  border-color: transparent !important;
}

/* =========================================================
   PF v5 Masthead MOBILE HARD OVERRIDE (FINAL)
========================================================= */
@media (max-width: 768px) {

  /* ① masthead 本体 */
  .pf-v5-c-masthead {
    padding: 0 !important;
    min-height: 56px;
  }

  /* ② 破壊犯：__main を完全に制御 */
  .pf-v5-c-masthead__main {
    display: grid !important;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    width: 100%;
  }

  /* ③ toggle */
  .pf-v5-c-masthead__toggle {
    grid-column: 1;
    justify-self: start;
  }

  /* ④ brand（真の中央） */
  .pf-v5-c-masthead__brand {
    grid-column: 2;
    justify-self: center;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
  }

  /* ロゴサイズ固定 */
  .pf-v5-c-masthead__brand img,
  .pf-v5-c-masthead__brand svg {
    height: 26px;
    width: auto;
  }

  /* UNCHAINED text */
  .pf-v5-c-masthead__brand::after {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 6px;

    font-size: 0.7rem;
    letter-spacing: 0.18em;
    white-space: nowrap;
  }

  /* ⑤ kebab */
  .pf-v5-c-masthead__content {
    grid-column: 3;
    justify-self: end;
  }

  .pf-v5-c-masthead__brand::after {
    content: none !important;
    display: none !important;
  }

  #nav-toggle {
    padding-left: 40px;
  }

  #loading-text {
    font-size: 1.2rem;
  }

}