/* ===================================================
   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: linear-gradient(180deg, var(--bg) 0%, #ffffff 100%);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #111827;
}

/* ---  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: rgba(255,255,255,0.95);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #e6e9ef;
    font-size: 0.9rem;
    font-weight: 500;
    color: #111827;
    position: sticky;
    top: 0;
    z-index: 31;
}

/* When the banner is present the header sticks just below it */
.wpibg_page:has(.wpibg_global_banner) .wpibg_head {
    top: 3rem;
}

/* ---  Site header  --- */
.wpibg_head {
    padding: 0 1.25rem;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #e6e9ef;
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 3rem;
}

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

/* Brand */
.head-brand {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.head-brand:hover { 
    text-decoration: underline; 
}
.head-brand:active {
    text-decoration: underline;
}

/* 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.8rem;
    font-weight: 500;
    color: var(--primary);
    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 { 
    text-decoration: underline; 
}

.head-util-link--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    padding: 0;
    border-radius: 4px;
    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(0, 120, 212, 0.1);
    text-decoration: none;
}

.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.6rem;
    border-radius: var(--radius-sm);
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color 120ms ease, background 120ms ease, transform 120ms ease;
}

 .nav-app-link--root {
    font-weight: 700;
    color: #111827;
}

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

 .nav-app-link:hover {
    color: #fff;
    background: var(--primary);
    transform: translateY(-1px);
}

 .nav-app-link:active,
 .nav-app-link.active {
    color: #fff;
    background: var(--primary);
    transform: translateY(-1px);
}

 .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: var(--radius-sm);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: color 120ms ease, background 120ms ease;
}

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

.nav-more summary:hover,
.nav-more[open] summary {
    color: #fff;
    background: var(--primary);
}

.nav-more__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 160px;
    background: rgba(255,255,255,0.98);
    border: 1px solid #e6e9ef;
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px 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: 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: 0.85rem; }
    .head-util-link { font-size: 0.75rem; }
    .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: rgba(255,255,255,0.9);
    border-top: 1px solid #e9eef6;
}

/* 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: rgba(255, 255, 255, 0.5);
}

.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: var(--primary);
}

/* 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 * 110px + 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 * 110px + 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 * 110px + 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.3rem 0.6rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.65);
    font-size: 0.875rem;
    transition: color 120ms ease, background 120ms ease, transform 120ms ease;
}

.wpibg_footer_section.wpibg_footer_marketplace a:hover,
.wpibg_footer_section.wpibg_footer_site a:hover {
    color: #fff;
    background: rgba(255,255,255,0.12);
    transform: translateY(-2px);
}

.wpibg_footer_copyright {
    flex-basis: 100%;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

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

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

    .wpibg_head {
        padding: 0.6rem 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
   =================================================== */