/*
 * PANJI Clean Surface Layer
 * Keeps the 60/25/10/5 palette while moving large surfaces back to white,
 * translucent white, and soft neutral backgrounds. Charcoal is used for text
 * and structure; blue for ordinary interaction; red for brand and risk.
 */

:root {
    --panji-clean-white: rgba(255, 255, 255, 0.94);
    --panji-clean-glass: rgba(255, 255, 255, 0.86);
    --panji-clean-border: rgba(32, 36, 40, 0.10);
    --panji-clean-shadow: 0 0.45rem 1.35rem rgba(32, 36, 40, 0.075);
    --panji-clean-shadow-raised: 0 1rem 2.6rem rgba(32, 36, 40, 0.12);
}

html {
    background: #f8f9fb;
}

body.panji-app {
    background:
        radial-gradient(circle at 8% 1%, rgba(46, 111, 149, 0.025), transparent 22rem),
        #f8f9fb;
}

.panji-app main > .container {
    position: relative;
    min-width: 0;
}

/* Clean navigation: white glass, dark text, blue interaction, red badges. */
.panji-navbar {
    --bs-navbar-color: var(--panji-charcoal-muted);
    --bs-navbar-hover-color: var(--panji-blue-deep);
    --bs-navbar-active-color: var(--panji-blue-deep);
    --bs-navbar-brand-color: var(--panji-charcoal);
    --bs-navbar-brand-hover-color: var(--panji-charcoal);
    z-index: 1045;
    border-bottom: 1px solid var(--panji-clean-border);
    background: var(--panji-clean-glass) !important;
    box-shadow: 0 0.3rem 1.1rem rgba(32, 36, 40, 0.065);
    backdrop-filter: blur(16px) saturate(145%);
    -webkit-backdrop-filter: blur(16px) saturate(145%);
}

.panji-navbar .navbar-brand {
    padding: 0.28rem 0.4rem;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.panji-navbar .nav-link {
    color: var(--panji-charcoal-muted) !important;
}

.panji-navbar .nav-link:hover,
.panji-navbar .nav-link:focus-visible,
.panji-navbar .nav-link.show {
    background: var(--panji-blue-pale);
    color: var(--panji-blue-deep) !important;
}

.panji-navbar .navbar-nav > .nav-item > .nav-link {
    position: relative;
}

.panji-navbar .navbar-nav > .nav-item > .nav-link::before {
    position: absolute;
    right: 0.75rem;
    bottom: 0.18rem;
    left: 0.75rem;
    height: 2px;
    border-radius: 999px;
    background: transparent;
    content: "";
    transition: background-color 150ms ease;
}

.panji-navbar .navbar-nav > .nav-item > .nav-link:hover::before,
.panji-navbar .navbar-nav > .nav-item > .nav-link:focus-visible::before,
.panji-navbar .navbar-nav > .nav-item > .nav-link.show::before {
    background: var(--panji-red);
}

.panji-navbar .navbar-toggler {
    border-color: var(--panji-neutral-300);
    background: rgba(255, 255, 255, 0.88);
    color: var(--panji-charcoal);
}

.panji-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(46, 111, 149, 0.16);
}

.panji-navbar .badge.bg-danger {
    border-color: #fff;
}

.panji-navbar-avatar {
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--panji-neutral-300);
}

.panji-navbar .dropdown-menu {
    z-index: 1090;
    border-color: var(--panji-clean-border);
    background: rgba(255, 255, 255, 0.985);
    box-shadow: var(--panji-clean-shadow-raised);
    backdrop-filter: blur(14px);
}

/* Clean footer: transparent/white instead of a large charcoal block. */
.panji-footer {
    margin-top: auto;
    padding: 1.25rem 1rem 1rem;
    border: 1px solid var(--panji-clean-border);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.72);
    color: var(--panji-neutral-700);
    box-shadow: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.panji-footer .nav {
    border-color: var(--panji-neutral-200) !important;
}

.panji-footer .nav-link {
    color: var(--panji-neutral-700) !important;
}

.panji-footer .nav-link:hover,
.panji-footer .nav-link:focus-visible {
    background: var(--panji-blue-pale);
    color: var(--panji-blue-deep) !important;
}

.panji-footer .panji-footer-mark {
    color: var(--panji-charcoal);
}

/* Lighter common surfaces and more restrained elevation. */
.panji-app .card,
.panji-app .modal-content,
.panji-app .offcanvas,
.panji-app .accordion-item,
.panji-app .list-group-item {
    background-color: rgba(255, 255, 255, 0.97);
}

.panji-app .card {
    box-shadow: 0 0.3rem 1.1rem rgba(32, 36, 40, 0.055);
}

.panji-app .card:hover {
    border-color: rgba(46, 111, 149, 0.14);
}

.panji-app .card-header,
.panji-app .card-footer,
.panji-app .modal-header,
.panji-app .modal-footer,
.panji-app .offcanvas-header {
    background: rgba(248, 249, 251, 0.92);
}

.panji-app .panji-module-header,
.panji-app .blog-hero,
.panji-app .blog-topic-header,
.panji-app .authoring-header {
    background:
        radial-gradient(circle at 94% 8%, rgba(181, 30, 42, 0.045), transparent 13rem),
        linear-gradient(120deg, #fff, #f2f7fa);
}

.panji-app .dropdown-menu {
    z-index: 1085;
    max-width: calc(100vw - 1.25rem);
    border-color: var(--panji-clean-border);
    background: rgba(255, 255, 255, 0.99);
    box-shadow: var(--panji-clean-shadow-raised);
}

.panji-app .dropdown.show,
.panji-app .dropup.show,
.panji-app .dropend.show,
.panji-app .dropstart.show {
    z-index: 1080;
}

.panji-app .modal {
    z-index: 1095;
}

.panji-app .offcanvas {
    z-index: 1095;
}

/* Floating shortcut remains visible but its menu is clean and legible. */
.panji-floating-action .dropdown-menu {
    border-color: var(--panji-clean-border);
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: var(--panji-clean-shadow-raised);
}

.panji-floating-action .dropdown-item {
    color: var(--panji-charcoal-muted) !important;
}

.panji-floating-action .dropdown-item:hover,
.panji-floating-action .dropdown-item:focus {
    background: var(--panji-blue-pale);
    color: var(--panji-blue-deep) !important;
}

/* Blog cards and share overlays must escape their card boundary. */
.panji-app .blog-card {
    position: relative;
    z-index: 1;
    overflow: visible !important;
    isolation: isolate;
}

.panji-app .blog-card:hover,
.panji-app .blog-card:focus-within {
    z-index: 8;
}

.panji-app .blog-card.is-share-open,
.panji-app .blog-card:has(.dropdown-menu.show) {
    z-index: 1060;
    transform: none;
}

.panji-app .blog-card-image-link {
    overflow: hidden;
    border-radius: var(--bs-card-border-radius) var(--bs-card-border-radius) 0 0;
}

.panji-app .blog-share-menu {
    position: relative;
    z-index: 1065;
}

.panji-app .blog-share-menu .dropdown-menu {
    z-index: 1070;
    min-width: 13rem;
    max-width: min(18rem, calc(100vw - 1.5rem));
    max-height: min(26rem, calc(100vh - 2rem));
    overflow-y: auto;
}

.panji-app .blog-share-menu .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 2.55rem;
}

/* Other components that commonly contain overlays should not clip them. */
.panji-app .blog-filter-card,
.panji-app .conversation-card,
.panji-app .notification-card,
.panji-app .profile-action-card {
    overflow: visible;
}

.panji-app .table-responsive,
.panji-app .post-content table {
    border-radius: 0.8rem;
}

@media (max-width: 991.98px) {
    .panji-navbar .navbar-collapse {
        margin-top: 0.55rem;
        padding: 0.55rem;
        border: 1px solid var(--panji-clean-border);
        border-radius: 0.9rem;
        background: rgba(255, 255, 255, 0.985);
        box-shadow: var(--panji-clean-shadow);
    }

    .panji-navbar .navbar-nav > .nav-item > .nav-link::before {
        right: auto;
        width: 2.5rem;
    }
}

@media (max-width: 575.98px) {
    .panji-footer {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .panji-footer .nav {
        gap: 0.15rem;
    }

    .panji-footer .nav-link {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.78rem;
    }

    .panji-app .blog-share-menu .dropdown-menu {
        min-width: 12rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .panji-navbar .nav-link,
    .panji-navbar .navbar-nav > .nav-item > .nav-link::before {
        transition: none;
    }
}