/* Navigation and footer styles are separate from the page components. */
@media screen {
  .portal-shell { position: sticky; top: 0; z-index: 1030; font-family: Inter, system-ui, sans-serif; }
  .portal-shell .portal-topbar {
    min-height: 76px; padding: 14px clamp(16px, 2.5vw, 36px);
    background: #0f172a;
    border-bottom: 1px solid rgb(255 255 255 / 8%);
  }
  .portal-shell .portal-brand { gap: 12px; color: #fff; text-decoration: none; flex-shrink: 0; }
  .portal-shell .portal-brand-symbol { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; font-size: 20px; color: #bfdbfe; background: rgb(96 165 250 / 15%); border: 1px solid rgb(147 197 253 / 22%); }
  .portal-shell .portal-brand h3 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.025em; }
  .portal-shell .portal-brand-kicker { display: block; margin-top: 3px; color: #94a3b8; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
  .portal-shell .portal-topbar-right { gap: 10px; }
  .portal-shell .notification-icon { width: 42px; height: 42px; padding: 0; border-radius: 12px; border: 1px solid rgb(255 255 255 / 13%); background: rgb(255 255 255 / 5%); }
  .portal-shell .notification-icon:hover { background: rgb(255 255 255 / 12%); }
  .portal-shell .notification-dot { width: 9px; height: 9px; top: 8px; right: 9px; border: 2px solid #172554; background: #fb7185; }
  .portal-shell .portal-profile-toggle { gap: 10px; padding: 5px 10px 5px 6px; border-radius: 12px; border: 1px solid rgb(255 255 255 / 13%); background: rgb(255 255 255 / 5%); transition: background-color .15s ease; }
  .portal-shell .portal-profile-toggle:hover { background: rgb(255 255 255 / 12%); }
  .portal-shell .portal-profile-toggle img { width: 34px; height: 34px; margin-right: 0 !important; border: 2px solid rgb(255 255 255 / 20%); }
  .portal-shell .portal-profile-text .fw-bold { max-width: 180px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 600 !important; }
  .portal-shell .portal-profile-text .small { color: #a5b4cf; font-size: 10px; }
  .portal-shell .announcement-pill { animation: none; border-radius: 12px; padding: 9px 12px; border-color: rgb(255 255 255 / 13%); background: rgb(255 255 255 / 5%); }
  .portal-shell .announcement-pill-text-wrap { width: 170px; }
  .portal-shell .announcement-pill-text { padding-left: 0; animation: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
  .portal-shell .announcement-pill-count { border-color: #172554; }
  .portal-shell .portal-navbar { padding: 8px 0; min-height: 58px; background: #fff !important; border-bottom: 1px solid #e2e8f0; box-shadow: 0 4px 12px rgb(15 23 42 / 4%); }
  .portal-shell .portal-navbar > .container-fluid { padding-inline: clamp(16px, 2.5vw, 36px); }
  .portal-shell .portal-navbar .navbar-nav { gap: 4px; flex-wrap: wrap; }
  .portal-shell .portal-navbar .navbar-nav > .nav-item > .nav-link { display: flex; align-items: center; gap: 5px; padding: 10px 14px; border-radius: 10px; color: #64748b; font-size: 13px; font-weight: 600; }
  .portal-shell .portal-navbar .navbar-nav > .nav-item > .nav-link:hover { background: #f1f5f9; color: #1e293b; }
  .portal-shell .portal-navbar .navbar-nav > .nav-item > .nav-link.active,
  .portal-shell .portal-navbar .navbar-nav > .nav-item.active > .nav-link { background: #eff6ff; color: #2563eb; box-shadow: inset 0 0 0 1px #dbeafe; }
  .portal-shell .portal-navbar .nav-link::after { margin-left: 5px; }
  .portal-shell .dropdown-menu, .pp-legacy-navbar .dropdown-menu { border: 1px solid #e2e8f0; border-radius: 14px; padding: 7px; box-shadow: 0 16px 40px rgb(15 23 42 / 12%) !important; }
  .portal-shell .portal-navbar .dropdown-menu-flyout-root { margin-top: 8px; }
  .portal-shell .dropdown-item, .pp-legacy-navbar .dropdown-item { padding: 10px 12px; border-radius: 8px; font-size: 13px; color: #475569; }
  .portal-shell .dropdown-item:hover, .pp-legacy-navbar .dropdown-item:hover { background: #f1f5f9; color: #1e293b; }
  .portal-shell .dropdown-item.active, .pp-legacy-navbar .dropdown-item.active { background: #eff6ff; color: #2563eb; }
  .portal-shell .dropdown-divider { margin: 7px 4px; border-color: #edf1f5; }
  .portal-shell .portal-notification-menu { width: 380px; min-width: 0 !important; max-width: calc(100vw - 24px); max-height: none; overflow: hidden; }
  .portal-shell .portal-notification-menu .list-group-item { padding: 14px 16px; border-color: #edf1f5; }
  .portal-shell .portal-notification-menu .list-group-item:hover { background: #f8fafc; }
  .portal-shell .portal-notification-menu .btn { border-radius: 8px; font-size: 12px; }
  .portal-shell .portal-notification-menu .avatar { border-radius: 11px; }
  .portal-shell .notification-icon:focus-visible, .portal-shell .portal-profile-toggle:focus-visible,
  .portal-shell .portal-brand:focus-visible, .portal-shell .announcement-pill:focus-visible { outline: 2px solid #93c5fd !important; outline-offset: 4px; }
  .portal-shell .nav-link:focus-visible, .portal-shell .dropdown-item:focus-visible, .pp-legacy-navbar .nav-link:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
  .portal-shell .navbar-toggler { padding: 9px 12px; border: 1px solid #e2e8f0; border-radius: 10px; color: #475569; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
  .portal-shell .pp-mobile-menu-symbol { display: flex; flex-direction: column; justify-content: space-between; width: 18px; height: 14px; flex: 0 0 18px; }
  .portal-shell .pp-mobile-menu-symbol > span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
  .portal-shell .pp-mobile-menu-label { display: flex; flex-direction: column; gap: 4px; text-align: left; }
  .portal-shell .pp-mobile-menu-label strong { font-size: 13px; font-weight: 650; }
  .portal-shell .pp-mobile-menu-label small { font-size: 10px; color: #64748b; }
  .portal-shell .pp-mobile-menu-chevron { margin-left: auto; flex-shrink: 0; transition: transform .18s ease; }
  .portal-shell .navbar-toggler[aria-expanded="true"] .pp-mobile-menu-chevron { transform: rotate(180deg); }
  .portal-shell .navbar-toggler[aria-expanded="true"] .pp-mobile-menu-symbol > span:first-child { transform: translateY(6px) rotate(45deg); }
  .portal-shell .navbar-toggler[aria-expanded="true"] .pp-mobile-menu-symbol > span:nth-child(2) { opacity: 0; }
  .portal-shell .navbar-toggler[aria-expanded="true"] .pp-mobile-menu-symbol > span:last-child { transform: translateY(-6px) rotate(-45deg); }
  .pp-legacy-navbar { background: #0f172a !important; color: #fff; padding: 12px 24px; font-family: Inter, system-ui, sans-serif; box-shadow: 0 4px 12px rgb(15 23 42 / 8%); }
  .pp-legacy-navbar .navbar-brand img { width: 180px; max-width: 100%; height: auto; }
  .pp-legacy-navbar .navbar-nav { gap: 4px; flex-wrap: wrap; }
  .pp-legacy-navbar .navbar-nav > .nav-item > .nav-link { padding: 10px 12px; border-radius: 10px; color: #e2e8f0; font-size: 13px; font-weight: 600; }
  .pp-legacy-navbar .navbar-nav > .nav-item > .nav-link:hover { background: rgb(255 255 255 / 10%); color: #fff; }
  .pp-legacy-navbar .navbar-nav > .nav-item > .nav-link.active { background: rgb(96 165 250 / 20%); color: #fff; }
  .pp-ui-site-footer { margin-top: 24px; clear: both; }
  .pp-modern-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; width: 100%; padding: 20px clamp(16px, 2.5vw, 36px); margin-top: 12px; border-top: 1px solid #e2e8f0; color: #64748b; font-family: Inter, system-ui, sans-serif; font-size: 12px; line-height: 1.6; text-align: left; }
  .pp-modern-footer-brand { display: flex; align-items: center; gap: 10px; }
  .pp-modern-footer-symbol { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; border: 1px solid #dbeafe; background: #eff6ff; color: #2563eb; font-size: 10px; font-weight: 700; }
  .pp-modern-footer-title { color: #334155; font-size: 12px; font-weight: 650; }
  .pp-modern-footer-company { color: #94a3b8; font-size: 11px; }
  .pp-modern-footer-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 11px; }
  .pp-modern-footer-version { padding: 3px 8px; border: 1px solid #e2e8f0; border-radius: 6px; color: #64748b; background: #fff; font-size: 10px; }
  @media (min-width: 992px) { .portal-shell .navbar-toggler { display: none; } }
  @media (max-width: 991.98px) {
    .portal-shell .portal-topbar { min-height: 68px; padding-block: 11px; }
    .portal-shell .portal-navbar { padding: 10px 0; min-height: 0; }
    .portal-shell .portal-navbar > .container-fluid { display: flex; flex-wrap: wrap; gap: 0; }
    .portal-shell .portal-navbar .navbar-toggler {
      position: static; display: flex; align-items: center; justify-content: flex-start;
      width: 100%; min-height: 48px; height: auto; padding: 10px 14px; margin: 0;
      gap: 12px; color: #334155; background: #f8fafc; border: 1px solid #e2e8f0;
      border-radius: 12px; line-height: 1.2; transform: none; box-shadow: none;
    }
    .portal-shell .portal-navbar .navbar-toggler:hover { background: #f1f5f9; }
    .portal-shell .portal-navbar .navbar-toggler[aria-expanded="true"] { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; }
    .portal-shell .portal-navbar .navbar-toggler:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
    .portal-shell .portal-navbar .navbar-collapse {
      flex-basis: 100%; width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px);
      overflow-y: auto; overflow-x: hidden; margin-top: 10px; border-radius: 14px; background: #fff;
    }
    .portal-shell .portal-navbar .navbar-collapse.show { border: 1px solid #e2e8f0; box-shadow: 0 8px 20px rgb(15 23 42 / 5%); }
    .portal-shell .portal-navbar .navbar-nav { gap: 4px; padding: 8px; width: 100%; }
    .portal-shell .portal-navbar .navbar-nav > .nav-item { width: 100%; }
    .portal-shell .portal-navbar .navbar-nav > .nav-item > .nav-link { min-height: 44px; padding: 12px; white-space: normal; }
    .portal-shell .portal-navbar .nav-link.dropdown-toggle::after { margin-left: auto; }
    .portal-shell .portal-navbar .dropdown-menu-flyout-root {
      position: static !important; inset: auto !important; transform: none !important; float: none;
      width: 100%; min-width: 0; margin: 4px 0 8px; padding: 6px;
    }
    .portal-shell .portal-navbar .dropdown-item { min-height: 42px; white-space: normal; overflow-wrap: anywhere; }
    .portal-shell .portal-navbar .dropdown-submenu > .dropdown-menu { min-width: 0; width: calc(100% - 12px); margin-left: 12px; }
    .portal-shell .portal-navbar .dropdown-submenu:not(.show-submenu) > .dropdown-menu { display: none !important; }
    .portal-shell .portal-navbar .dropdown-menu-flyout-root { box-shadow: none !important; border-radius: 10px; background: #f8fafc; }
    .portal-shell .portal-navbar .dropdown-submenu > .dropdown-menu { box-shadow: none !important; background: transparent; border-top: 0; border-right: 0; border-bottom: 0; border-left: 2px solid #dbeafe; }
  }
  @media (max-width: 575.98px) {
    .portal-shell .portal-brand h3 { font-size: 15px; }
    .portal-shell .portal-brand-kicker { font-size: 8px; }
    .portal-shell .portal-brand-symbol { width: 34px; height: 34px; font-size: 17px; border-radius: 10px; }
    .portal-shell .portal-brand { gap: 8px; }
    .portal-shell .portal-topbar-right { gap: 6px; }
    .portal-shell .notification-icon { width: 36px; height: 36px; }
    .portal-shell .portal-profile-toggle { padding: 3px; gap: 3px; }
    .portal-shell .portal-profile-toggle img { width: 28px; height: 28px; }
    .portal-shell .portal-profile-toggle::after { display: none; }
    .portal-shell .announcement-pill { padding: 7px; }
    .portal-shell .portal-topbar-right > .dropdown { position: static; }
    .portal-shell .portal-notification-menu { width: calc(100vw - 24px); }
    .pp-modern-footer { flex-direction: column; align-items: flex-start; padding-block: 16px; }
    .pp-legacy-navbar { padding: 12px 16px; }
  }
  @media (prefers-reduced-motion: reduce) { .portal-shell *, .pp-legacy-navbar * { animation: none !important; transition: none !important; } }
}
@media print { .portal-shell, .pp-legacy-navbar, .pp-modern-footer, .pp-ui-site-footer { display: none !important; } }