/*
 * Portal Pendidikan v169
 * Mobile header branding, uniform icon-only Premium control, and a
 * scroll-safe Portal Yayasan dock.
 */

@media (max-width: 850px) {
  /* Portal Admin Sekolah: the complete role wordmark replaces icon + HTML text. */
  html[data-portal-brand="sekolah"] .app main > header {
    min-width: 0 !important;
    overflow: visible !important;
  }

  html[data-portal-brand="sekolah"] .admin-mobile-brand {
    display: flex !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: min(47vw, 190px) !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  html[data-portal-brand="sekolah"] .admin-mobile-brand > b,
  html[data-portal-brand="sekolah"] .admin-mobile-brand > span {
    display: none !important;
  }

  html[data-portal-brand="sekolah"]
    .admin-mobile-brand
    > img.portal-role-logo--wordmark {
    display: block !important;
    width: min(47vw, 190px) !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: 38px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  html[data-portal-brand="sekolah"] .app main > header .admin {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin-left: auto !important;
  }

  /*
   * Admin subscription text is updated dynamically with textContent.
   * Keep that accessible label in the DOM, but render the same Lucide crown
   * used by Portal Guru as the only visible mobile content.
   */
  html[data-portal-brand="sekolah"]
    .app
    main
    > header
    .subscription-shortcut.portal-premium-status {
    display: inline-grid !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    flex: 0 0 42px !important;
    place-items: center !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 0 !important;
    line-height: 0 !important;
    white-space: nowrap !important;
    animation: none !important;
  }

  html[data-portal-brand="sekolah"]
    .app
    main
    > header
    .subscription-shortcut.portal-premium-status::before {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    background: currentColor !important;
    -webkit-mask:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E")
      center / contain no-repeat !important;
    mask:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E")
      center / contain no-repeat !important;
  }
}

@media (max-width: 767px) {
  /*
   * Portal Guru (individual and school accounts): keep only the crown SVG.
   * This comes after the readable-type layer, so its generic button size
   * cannot bring the Premium text back.
   */
  html[data-portal-brand="guru"] #root header .portal-premium-status {
    display: inline-flex !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    flex: 0 0 42px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 0 !important;
    line-height: 0 !important;
    white-space: nowrap !important;
    animation: none !important;
  }

  html[data-portal-brand="guru"] #root header .portal-premium-status > svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
  }

  /* Keep the small upgrade indicator in its original corner. */
  html[data-portal-brand="guru"]
    #root
    header
    .portal-premium-status
    > span {
    font-size: 0 !important;
  }
}

@media (max-width: 760px) {
  /*
   * The Foundation wordmark belongs to the desktop sidebar. Hiding it in the
   * mobile dock gives the entire bar back to its scrollable menu.
   */
  html[data-portal-brand="yayasan"]
    .foundation-app:not(.hidden)
    > aside
    > .foundation-logo-only {
    display: none !important;
  }

  html[data-portal-brand="yayasan"] body:has(.foundation-app:not(.hidden)) {
    width: 100% !important;
    height: var(--portal-viewport-height, 100dvh) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html[data-portal-brand="yayasan"] .foundation-app:not(.hidden) {
    display: block !important;
    width: 100% !important;
    height: var(--portal-viewport-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--portal-viewport-height, 100dvh) !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  html[data-portal-brand="yayasan"] .foundation-app:not(.hidden) > main {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  html[data-portal-brand="yayasan"]
    .foundation-app:not(.hidden)
    > main
    > header {
    flex: 0 0 auto !important;
  }

  html[data-portal-brand="yayasan"]
    .foundation-app:not(.hidden)
    > main
    > .content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

  html[data-portal-brand="yayasan"] .foundation-app:not(.hidden) > aside {
    display: block !important;
    height: calc(78px + env(safe-area-inset-bottom)) !important;
    min-height: calc(78px + env(safe-area-inset-bottom)) !important;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom)) !important;
  }

  html[data-portal-brand="yayasan"]
    .foundation-app:not(.hidden)
    #foundationNav {
    display: flex !important;
    width: 100% !important;
    height: 60px !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    touch-action: pan-x;
  }

  html[data-portal-brand="yayasan"]
    .foundation-app:not(.hidden)
    #foundationNav::-webkit-scrollbar {
    display: none;
  }

  html[data-portal-brand="yayasan"]
    .foundation-app:not(.hidden)
    #foundationNav
    > button {
    flex: 0 0 68px !important;
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 58px !important;
    min-height: 58px !important;
    scroll-snap-align: center;
  }
}

@media (max-width: 359px) {
  html[data-portal-brand="sekolah"] .admin-mobile-brand,
  html[data-portal-brand="sekolah"]
    .admin-mobile-brand
    > img.portal-role-logo--wordmark {
    width: min(43vw, 154px) !important;
    max-width: min(43vw, 154px) !important;
  }

  html[data-portal-brand="guru"] #root header .portal-premium-status,
  html[data-portal-brand="sekolah"]
    .app
    main
    > header
    .subscription-shortcut.portal-premium-status {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    flex-basis: 40px !important;
  }
}