/* ============================================================================
   SSO Unismuh — tema Account Console (PatternFly v5)
   Seragam dengan halaman login: masthead biru + garis emas + logo Unismuh.
   Utilitas/setelan = tenang & disiplin; boldness dihabiskan di halaman login.
   Palet dari logo: biru #173b86 · emas #f5b301 · hijau #009a44.
   ============================================================================ */

:root {
  --u-blue-900: #0a1d4a;
  --u-blue-800: #0f2a63;
  --u-blue-700: #173b86;
  --u-blue-600: #1e4aa8;
  --u-gold:     #f5b301;
  --u-green:    #009a44;
  --u-ink:      #132241;
  --u-muted:    #5a6a88;
  --u-line:     #e4e8f1;

  /* Warna brand PatternFly global → biru Unismuh */
  --pf-v5-global--primary-color--100: #173b86;
  --pf-v5-global--primary-color--200: #0f2a63;
  --pf-v5-global--link--Color: #1e4aa8;
  --pf-v5-global--link--Color--hover: #173b86;
  --pf-v5-global--active-color--100: #173b86;
  --pf-v5-global--active-color--400: #1e4aa8;
  --pf-v5-global--BorderColor--100: #e4e8f1;
}

/* ---- masthead: pita identitas — biru royal (serasi latar login) + garis emas.
   Emas SENGAJA hanya hidup di pita ini (echo border-atas kartu login);
   area konten seluruhnya famili biru agar warna "nyambung". ----------------- */
.pf-v5-c-masthead,
.pf-v5-c-page__header {
  --pf-v5-c-masthead--BackgroundColor: #0f2a63;
  background: linear-gradient(90deg, #0a1d4a 0%, #0f2a63 60%, #173b86 100%);
  border-bottom: 3px solid var(--u-gold);
  color: #fff;
}
.pf-v5-c-masthead a,
.pf-v5-c-masthead button,
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle,
.pf-v5-c-masthead__content,
.pf-v5-c-masthead__content * {
  color: #fff !important;
}
.pf-v5-c-masthead__toggle .pf-v5-c-button { color: #fff !important; }

/* logo di masthead */
.pf-v5-c-masthead .pf-v5-c-brand,
.pf-v5-c-masthead img.pf-v5-c-brand,
.pf-v5-c-brand {
  height: 40px;
  width: auto;
}

/* avatar/nama pengguna kanan atas tetap terbaca */
.pf-v5-c-masthead .pf-v5-c-menu-toggle__text { color: #fff !important; }

/* ---- tombol utama --------------------------------------------------------- */
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: #173b86;
  --pf-v5-c-button--m-primary--hover--BackgroundColor: #0f2a63;
  --pf-v5-c-button--m-primary--active--BackgroundColor: #0f2a63;
  --pf-v5-c-button--m-primary--focus--BackgroundColor: #0f2a63;
  background: linear-gradient(180deg, #1e4aa8, #173b86);
  border: 0;
}
.pf-v5-c-button.pf-m-primary:hover { background: #0f2a63; }

.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-link {
  --pf-v5-c-button--m-secondary--Color: #173b86;
  --pf-v5-c-button--m-secondary--BorderColor: #173b86;
  --pf-v5-c-button--m-link--Color: #1e4aa8;
  color: #1e4aa8;
}

/* ---- sidebar: terang, serasi dengan konten (bukan gelap bawaan) ---------- */
.pf-v5-c-page__sidebar,
.pf-v5-c-page__sidebar.pf-m-dark,
.pf-v5-c-page__sidebar.pf-v5-theme-dark {
  --pf-v5-c-page__sidebar--BackgroundColor: #ffffff;
  background-color: #ffffff !important;
  border-right: 1px solid var(--u-line);
  color: var(--u-ink);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav,
.pf-v5-c-page__sidebar .pf-v5-c-nav__list { background: transparent; }

/* teks nav gelap di atas sidebar terang */
.pf-v5-c-page__sidebar .pf-v5-c-nav__link,
.pf-v5-c-page__sidebar .pf-v5-c-nav__toggle,
.pf-v5-c-page__sidebar .pf-v5-c-nav__subnav .pf-v5-c-nav__link {
  color: var(--u-ink) !important;
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__link:hover {
  background-color: #f2f5fb;
  color: var(--u-blue-700) !important;
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__toggle-icon,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link .pf-v5-c-nav__toggle-icon { color: var(--u-muted) !important; }

/* ---- navigasi: item aktif — teks biru + latar biru muda + garis emas ----- */
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
  --pf-v5-c-nav__link--m-current--Color: #173b86;
  color: #173b86 !important;
  background-color: #eaf0fb !important;
  font-weight: 600;
}
.pf-v5-c-nav__link.pf-m-current::before,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link::before,
.pf-v5-c-nav__link.pf-m-current::after,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link::after {
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--u-blue-700);
  border-color: var(--u-blue-700);
  border-left-color: var(--u-blue-700);
}

/* ---- tautan & tab --------------------------------------------------------- */
a { color: #1e4aa8; }
a:hover { color: #173b86; }

.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link {
  --pf-v5-c-tabs__item--m-current--link--Color: #173b86;
}
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after {
  --pf-v5-c-tabs__link--after--BorderColor: #173b86;
  border-color: #173b86;
}

/* ---- judul halaman -------------------------------------------------------- */
.pf-v5-c-title { color: var(--u-ink); }

/* ---- indikator progres / spinner brand ----------------------------------- */
.pf-v5-c-spinner { --pf-v5-c-spinner--Color: #173b86; }

/* ---- masthead: app-bar satu baris (toggle | logo | ... | pengguna) ------- */
.pf-v5-c-masthead {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: .5rem;
}
.pf-v5-c-masthead__toggle { flex: 0 0 auto; }
.pf-v5-c-masthead__main,
.pf-v5-c-masthead__brand { flex: 0 0 auto; width: auto !important; }
.pf-v5-c-masthead__content {
  margin-left: auto !important;
  width: auto !important;
  flex: 0 0 auto !important;
}
/* buang "kotak" biru flat pada toolbar di dalam masthead */
.pf-v5-c-masthead .pf-v5-c-toolbar,
.pf-v5-c-masthead .pf-v5-c-toolbar__content,
.pf-v5-c-masthead .pf-v5-c-toolbar__content-section,
.pf-v5-c-masthead .pf-v5-c-toolbar__item,
.pf-v5-c-masthead .pf-v5-c-toolbar__group { background: transparent !important; }
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-menu-toggle:hover,
.pf-v5-c-masthead .pf-v5-c-menu-toggle:focus,
.pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-expanded {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
}
.pf-v5-c-masthead .pf-v5-c-menu-toggle__text,
.pf-v5-c-masthead .pf-v5-c-menu-toggle__controls { color: #fff !important; }

/* panel dropdown akun (mis. "Keluar") tampil di atas latar putih → teks GELAP.
   Tanpa ini, aturan putih masthead di atas membuat teksnya putih (tak terbaca). */
.pf-v5-c-masthead .pf-v5-c-menu,
.pf-v5-c-masthead .pf-v5-c-menu * { color: var(--u-ink) !important; }
.pf-v5-c-masthead .pf-v5-c-menu { background-color: #fff !important; }
.pf-v5-c-masthead .pf-v5-c-menu__item:hover,
.pf-v5-c-masthead .pf-v5-c-menu__list-item:hover { background-color: #f2f5fb !important; }

/* --- chip akun: satukan FOTO + NAMA jadi satu unit di kanan masthead -------
   DOM: nama = toolbar__item (menu-toggle), foto = toolbar__item.pf-m-align-right
   terpisah. "pf-m-align-right" memberi margin-inline-start:auto → itu yang
   memisah foto jauh dari nama. Nolkan margin item, rapatkan, foto ke kiri. */
.pf-v5-c-masthead .pf-v5-c-toolbar,
.pf-v5-c-masthead .pf-v5-c-toolbar__content,
.pf-v5-c-masthead .pf-v5-c-toolbar__content-section {
  display: flex !important;
  align-items: center !important;
  gap: .45rem !important;
}
.pf-v5-c-masthead .pf-v5-c-toolbar__item { margin: 0 !important; }
.pf-v5-c-masthead .pf-v5-c-toolbar__item:empty { display: none !important; }
.pf-v5-c-masthead .pf-v5-c-toolbar__item:has(.pf-v5-c-avatar) { order: -1 !important; }
.pf-v5-c-masthead .pf-v5-c-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, .55);
  object-fit: cover;
}

/* ---- input modern (selaras dgn halaman login) ---------------------------- */
.pf-v5-c-form-control {
  border-radius: 10px !important;
  border: 1.5px solid var(--u-line) !important;
  background-color: #fff !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pf-v5-c-form-control::after,
.pf-v5-c-form-control::before { border: 0 !important; box-shadow: none !important; }
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select,
.pf-v5-c-form-control input,
.pf-v5-c-form-control select {
  background: transparent !important;
  padding: .5rem .75rem !important;
  min-height: 42px;
}
.pf-v5-c-form-control:focus-within {
  border-color: var(--u-blue-600) !important;
  box-shadow: 0 0 0 3px rgba(30, 74, 168, .28) !important;
}
.pf-v5-c-form-control.pf-m-disabled { background-color: #f2f5fb !important; color: var(--u-muted); }

/* dropdown di konten (mis. "Pilih lokal") — JANGAN kenai toggle di masthead */
.pf-v5-c-page__main .pf-v5-c-menu-toggle {
  border-radius: 10px !important;
  border: 1.5px solid var(--u-line) !important;
  min-height: 44px;
  background-color: #fff;
}
.pf-v5-c-page__main .pf-v5-c-menu-toggle:focus-within {
  border-color: var(--u-blue-600) !important;
  box-shadow: 0 0 0 3px rgba(30, 74, 168, .28) !important;
}

/* tombol sedikit membulat */
.pf-v5-c-button { border-radius: 8px; }

/* ---- daftar sesi/perangkat/aplikasi (DataList) sebagai kartu -------------- */
.pf-v5-c-data-list { border-block-start: 0 !important; }
.pf-v5-c-data-list__item {
  border: 1px solid var(--u-line) !important;
  border-radius: 12px;
  margin-block-end: .75rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(10, 29, 74, .06);
}
.pf-v5-c-data-list__item-row { padding-inline: .5rem; }

/* ---- penyesuaian mobile --------------------------------------------------- */
@media (max-width: 768px) {
  .pf-v5-c-masthead { min-height: 58px !important; padding-inline: .65rem !important; }
  .pf-v5-c-brand,
  .pf-v5-c-masthead img { height: 34px !important; }

  /* "Lompat ke seksi" tidak berguna di layar sempit → sembunyikan kolomnya */
  .pf-v5-l-grid__item:has(.pf-v5-c-jump-links) { display: none !important; }

  /* deskripsi (label/nilai) jadi 1 kolom di mobile — cegah overflow horizontal */
  .pf-v5-c-description-list {
    --pf-v5-c-description-list--GridTemplateColumns: 1fr !important;
    grid-template-columns: 1fr !important;
    --pf-v5-c-description-list--RowGap: .5rem;
  }

  /* baris header tabel "Aplikasi" tak berguna di mobile → sembunyikan */
  #applications-list-header { display: none !important; }

  /* CEGAH OVERFLOW HORIZONTAL di mobile: layout PatternFly (split/flex/grid)
     default TIDAK wrap & item ber-min-width:auto → konten meluber lalu
     ter-clip/scroll. Paksa wrap + izinkan item menyusut. */
  .pf-v5-c-page__main .pf-v5-l-split { flex-wrap: wrap !important; }
  .pf-v5-c-page__main .pf-v5-l-flex { flex-wrap: wrap !important; }
  .pf-v5-c-page__main .pf-v5-l-grid { grid-template-columns: 1fr !important; }
  .pf-v5-c-page__main .pf-v5-l-split__item,
  .pf-v5-c-page__main .pf-v5-l-flex__item,
  .pf-v5-c-page__main .pf-v5-l-grid__item {
    min-width: 0 !important;
    max-width: 100% !important;
    grid-column: auto / auto !important;
  }
  /* nilai panjang (URL/IP/dll.) tidak memaksa lebar */
  .pf-v5-c-description-list__description,
  .pf-v5-c-description-list__text { overflow-wrap: anywhere; word-break: break-word; }
  /* tombol aksi dalam kartu sesi: rata kiri, lebar seperlunya */
  .pf-v5-c-data-list__item .pf-v5-c-button { width: auto; justify-self: start; }

  /* rapatkan padding konten */
  .pf-v5-c-page__main-section { padding: 1.1rem 1rem !important; }

  /* tombol aksi form berbagi satu baris, lebih mudah dijangkau */
  .pf-v5-c-form__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
  .pf-v5-c-form__actions .pf-v5-c-button { flex: 1 1 auto; min-width: 8rem; }
}

/* ---- aksesibilitas: fokus biru di konten; emas hanya di pita masthead ----- */
:focus-visible { outline: 2px solid var(--u-blue-600); outline-offset: 2px; }
.pf-v5-c-masthead :focus-visible { outline-color: var(--u-gold); }