/* ===================================================
   MainLayout.razor.css – Page shell and layout styles
   for the outer web site
   =================================================== */

/* ---  Page shell  --- */
.wpibg_page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #ffffff;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #111111;
}

.wpibg_top {
    position: sticky;
    top: 0;
    z-index: 30;
}
.wpibg_footer_section__title{
    font-size: 1.6rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}
/* Allow the full cookie notice to scroll on short and narrow screens. */
.wpibg_top:has(.cookie-notice) {
    position: relative;
}

/* ---  Global message banner (above top nav)  --- */
.wpibg_global_banner {
    width: 100%;
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.6rem 1.25rem;
    background: #eeece6;
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #e6e9ef;
    font-size: 0.9rem;
    font-weight: 500;
    color: #111827;
}

/* ---  Site header  --- */
.wpibg_head {
    padding: 0 2rem;
    background: #f8f7f3;
    border-bottom: 1px solid #dfddd8;
    position: relative;
    min-height: 4.2rem;
}

.wpibg_head__inner {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    height: 4.2rem;
    flex-wrap: nowrap;
    min-width: 0;
}

/* Brand */
.head-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1.95rem;
    font-weight: 700;
    color: #161616;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}

.head-brand__ibg {
    line-height: 1;
}

.head-brand__divider {
    width: 1px;
    height: 1rem;
    background: #d2cdc2;
}

.head-brand__marketplace {
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    color: #454545;
}

.head-brand:hover {
    color: #000;
}

.head-brand:active {
    color: #000;
}

/* Separator pipe */
.head-sep {
    flex-shrink: 0;
    display: inline-block;
    width: 1px;
    height: 1.4rem;
    background: #d1d5db;
    margin: 0 0.25rem;
}

/* App nav (icon + name + sub-links) */
.head-app-nav,
.head-site-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 1;
    min-width: 0;
    overflow: visible;
}

/* Pushes user/links to the far right */
.head-spacer { flex: 1; }

/* Current user string */
.head-user {
    font-size: 0.8rem;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Account / Logout links — also used on <button> elements */
.head-util-link {
    font-size: 0.88rem;
    font-weight: 500;
    color: #292929;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    /* reset button defaults */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.head-util-link:hover {
    color: #111;
    text-decoration: none;
}

.head-util-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.head-apps-menu { position: relative; display: inline-flex; }
.head-apps-dropdown { position: absolute; right: 0; top: 100%; z-index: 1000; width: min(320px, calc(100vw - 2rem)); padding: 1.25rem; border: 1px solid #d2c8b7; background: #f8f7f3; box-shadow: 0 12px 32px rgba(17, 17, 17, .14); box-sizing: border-box; visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity 150ms ease, transform 150ms ease, visibility 150ms; }
.head-util-icons:not(.head-util-icons--dismissed) .head-apps-menu:hover .head-apps-dropdown,
.head-util-icons:not(.head-util-icons--dismissed) .head-apps-menu:focus-within .head-apps-dropdown { visibility: visible; opacity: 1; transform: none; }
.head-util-icons--dismissed .head-apps-dropdown { transition: none; }
.head-util-icons:has(.head-apps-menu:hover) .head-apps-menu:not(:hover) .head-apps-dropdown { visibility: hidden; opacity: 0; transform: translateY(6px); transition: none; }
.head-apps-dropdown__title { margin: 0 0 .75rem; color: #806447; font-size: .7rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.head-apps-dropdown__list { max-height: min(60vh, 420px); overflow-y: auto; }
.head-apps-dropdown__item { display: flex; align-items: center; gap: .85rem; padding: .75rem .5rem; color: #292929; font-size: .85rem; text-decoration: none; }
.head-apps-dropdown__item > .bi { width: 1.25rem; color: #806447; text-align: center; flex-shrink: 0; }
.head-apps-dropdown__item:hover { background: #efe8dc; color: #111111; }
.head-apps-dropdown__all { display: flex; justify-content: space-between; gap: 1rem; margin-top: .75rem; padding-top: 1rem; border-top: 1px solid #d2c8b7; color: #806447; font-size: .75rem; text-decoration: none; }
.head-apps-dropdown a:focus-visible { outline: 2px solid #806447; outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
    .head-apps-dropdown { transition: none; }
}

.head-util-link--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 999px;
    text-decoration: none !important;
}

.head-util-link--icon > .bi {
    font-size: 0.95rem;
    line-height: 1;
}

.head-util-link--icon:hover,
.head-util-link--icon:active {
    background: rgba(17, 17, 17, 0.08);
    text-decoration: none;
}

.head-util-link--login {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0 1.1rem;
    border: 1px solid #d2cdc2;
    background: #f8f7f3;
    color: #1d1d1d;
}

.head-util-link--login:hover {
    border-color: #bfb7a7;
    background: #ffffff;
}

.head-util-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    background: #dc2626;
    color: #fff;
    font-size: 0.6rem;
    line-height: 16px;
    text-align: center;
    font-weight: 600;
}

/* System app quick-link icon in header */
.head-util-link--system {
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.2rem;
    border-radius: 4px;
    transition: background 120ms ease, color 120ms ease;
    text-decoration: none !important;
}
.head-util-link--system:hover {
    background: rgba(0, 120, 212, 0.1);
}

/* ---  Main content area  --- */
.wpibg_main {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    flex: 1;
    /* children stretch to fill – no explicit width needed on children */
}

/* ---  Application nav links (shared between header and elsewhere)  --- */

.nav-app-group__divider {
    flex-shrink: 0;
    display: inline-block;
    width: 1px;
    height: 1.2rem;
    background: rgba(16,24,40,0.12);
    margin: 0 0.15rem;
}

/* Individual nav links (rendered by the NavLink component, hence ) */
 .nav-app-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.3rem;
    border-radius: 0;
    border-bottom: 1px solid transparent;
    color: #505050;
    text-decoration: none;
    font-size: 0.96rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color 120ms ease, border-color 120ms ease;
}

 .nav-app-link--root {
    font-weight: 500;
    color: #1f1f1f;
}

 .nav-app-link--sub {
    font-size: 0.82rem;
}

 .nav-app-link:hover {
    color: #171717;
    border-bottom-color: #171717;
}

 .nav-app-link:active,
 .nav-app-link.active {
    color: #171717;
    border-bottom-color: #171717;
}

 .nav-app-link__icon {
    font-size: 1rem;
    flex-shrink: 0;
}

 .nav-app-link__label {
    font-size: 0.9rem;
}

/* ---  Sub-nav overflow "More" dropdown  --- */
.nav-more {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    list-style: none;
}

.nav-more summary {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0;
    color: #505050;
    border-bottom: 1px solid transparent;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: color 120ms ease, border-color 120ms ease;
}

.nav-more summary::-webkit-details-marker { display: none; }

.nav-more summary:hover,
.nav-more[open] summary {
    color: #171717;
    border-bottom-color: #171717;
}

.nav-more__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 160px;
    background: rgba(255,255,255,0.98);
    border: 1px solid #dfddd8;
    border-radius: 0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.10);
    z-index: 50;
    padding: 0.25rem 0;
    display: flex;
    flex-direction: column;
}

.nav-more__panel  .nav-app-link {
    border-radius: 0;
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    width: 100%;
    justify-content: flex-start;
}

.nav-more__panel  .nav-app-link:hover,
.nav-more__panel  .nav-app-link.active {
    transform: none;
}

/* ---  Responsive header  --- */

/* Utility helpers driven by breakpoints */
.head-hide-sm { }                 /* visible by default */
.head-show-sm { display: none; } /* hidden by default, shown on mobile */

/* Hamburger button */
.head-burger {
    display: none;
    background: none;
    border: none;
    padding: 0.25rem 0.4rem;
    cursor: pointer;
    font-size: 1.3rem;
    color: var(--primary);
    flex-shrink: 0;
    line-height: 1;
}

/* Mobile dropdown nav */
.head-mobile-menu {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.98);
    border-top: 1px solid #e6e9ef;
    padding: 0.5rem 0;
}

 .head-mobile-link {
    display: block;
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #111827;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}

 .head-mobile-link:hover,
 .head-mobile-link.active {
    background: var(--primary);
    color: #fff;
}

/* Tablet / large phone */
@media (max-width: 910px) {
    .head-hide-sm { display: none !important; }
    .head-show-sm { display: revert; }
    .head-burger  { display: flex; align-items: center; }
     .nav-app-link--root { font-size: 0.85rem; }
    .wpibg_head__inner { gap: 0.35rem; }
}

@media (max-width: 767px) {
    .head-hide-sm { display: none !important; }
    .head-show-sm { display: revert; }
    .head-burger  { display: flex; align-items: center; }
     .nav-app-link--root { font-size: 0.85rem; }
    .wpibg_head__inner { gap: 0.35rem; }
}

/* Small phone */
@media (max-width: 479px) {
    .head-brand     { font-size: 1.35rem; }
    .head-brand__marketplace { font-size: 0.58rem; letter-spacing: 0.2em; }
    .head-util-link { font-size: 0.8rem; }
    .wpibg_head__inner { gap: 0.2rem; }
}

/* ---  Body content panel  --- */
.wpibg_content {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.wpibg_access_pending {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: #9ca3af;
    padding: 3rem 1.25rem;
    text-align: center;
    flex: 1;
}

.wpibg_access_pending .bi {
    font-size: 2rem;
    color: #d1d5db;
}

.wpibg_access_pending p {
    margin: 0;
    font-size: 0.95rem;
    color: #6b7280;
}

/* ---  Application footer bar  --- */
.wpibg_app_footer {
    padding: 0.55rem 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 2.5rem;
    border-top: 1px solid #e9eef6;
}

.app-footer-group__message {
    font-size: 0.8rem;
    color: var(--muted);
    padding-left: 0.6rem;
    border-left: 2px solid rgba(0,120,212,0.2);
}

.app-footer-sub {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #059669;
    font-weight: 500;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(5, 150, 105, 0.08);
    border: 1px solid rgba(5, 150, 105, 0.22);
}

.app-footer-sub .bi {
    font-size: 0.85rem;
    flex-shrink: 0;
}

.app-footer-sub__expiry {
    color: var(--muted);
    font-weight: 400;
    font-size: 0.75rem;
}

.app-footer-rights {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1e40af;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.07);
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.app-footer-rights .bi {
    font-size: 0.8rem;
    flex-shrink: 0;
}

.app-footer-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    border: 1px solid #dbe4f3;
    background: #fff;
    color: #1e40af;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.app-footer-more-list {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ---  Site-wide footer  --- */
.wpibg_footer {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.25rem 0 0; /* no horizontal padding — sitebar fills edge-to-edge */
    margin-top: 0;
    background: #f8f7f3;
    border-top: 1px solid #ece9e2;
}

/* When the My Apps section is hidden, remove the top gap and border */
.wpibg_footer--no-apps {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

.wpibg_footer_section {
    flex: 1 1 180px;
    min-width: 0; /* allow flex shrink */
}

.wpibg_footer_section h2 {
    margin: 0 0 0.5rem 0;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #68615a;
}

.wpibg_footer_section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wpibg_footer_section li {
    margin: 0.25rem 0;
}

.wpibg_footer_section a:hover {
    color: #151515;
}

/* Applications section – full width row, horizontal tiles */
.wpibg_footer_section.wpibg_footer_apps {
    flex-basis: 100%;
    padding: 0.45rem 1.25rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wpibg_footer_section.wpibg_footer_apps .app-tiles {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0.5rem auto 0;
    max-width: calc(5 * 132px + 4 * 0.75rem);
}

@media (max-width: 700px) {
    .wpibg_footer_section.wpibg_footer_apps .app-tiles {
        grid-template-columns: repeat(3, 1fr);
        max-width: calc(3 * 132px + 2 * 0.75rem);
    }
}

@media (max-width: 420px) {
    .wpibg_footer_section.wpibg_footer_apps .app-tiles {
        grid-template-columns: repeat(2, 1fr);
        max-width: calc(2 * 132px + 0.75rem);
    }
}

/* Marketplace + Site – columns inside the sitebar */

.wpibg_footer_section.wpibg_footer_marketplace ul,
.wpibg_footer_section.wpibg_footer_site ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.4rem 0 0;
}

.wpibg_footer_section.wpibg_footer_marketplace a,
.wpibg_footer_section.wpibg_footer_site a {
    display: inline-block;
    padding: 0.15rem 0;
    border-radius: 0;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    color: #3d3d3d;
    font-size: 0.88rem;
    transition: color 120ms ease, border-color 120ms ease;
}

.wpibg_footer_section.wpibg_footer_marketplace a:hover,
.wpibg_footer_section.wpibg_footer_site a:hover {
    color: #101010;
    border-bottom-color: #101010;
}

.wpibg_footer_copyright {
    flex-basis: 100%;
    text-align: center;
    font-size: 0.8rem;
    color: #7a7269;
    padding-top: 0.75rem;
    border-top: 1px solid #e4dfd4;
}

/* ---  Sitebar (Marketplace + Site + copyright)  --- */
.wpibg_footer_sitebar {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: #eeece6;
    border-top: 1px solid #ece9e2;
}

/* ---  Responsive  --- */
@media (max-width: 768px) {
    .wpibg_main {
        padding: 0;
        gap: 0;
    }

    .wpibg_head {
        padding: 0 0.75rem;
    }

    .wpibg_footer {
        padding: 1rem 0; /* keep horizontal padding at 0 so the dark sitebar fills edge-to-edge */
    }
}

/* ===================================================
   MainLayout.razor.css – End MainLayout styles
   =================================================== */