/* Module-level alignment for templates that carry their own legacy colors. */

.panji-module-header {
    border: 1px solid var(--panji-border);
    background:
        radial-gradient(circle at 92% 10%, rgba(181, 30, 42, 0.08), transparent 12rem),
        linear-gradient(120deg, var(--panji-neutral-0), var(--panji-blue-pale));
    box-shadow: var(--panji-shadow-sm);
}

.panji-module-eyebrow {
    color: var(--panji-red);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Notification and message center */
.panji-notification-list {
    gap: 0.65rem;
}

.panji-notification-item {
    overflow: hidden;
    border: 1px solid var(--panji-border) !important;
    border-radius: 1rem !important;
    box-shadow: var(--panji-shadow-sm);
}

.panji-notification-item.is-read {
    background: var(--panji-neutral-0) !important;
}

.panji-notification-item.is-unread {
    border-left: 4px solid var(--panji-red) !important;
    background:
        linear-gradient(90deg, var(--panji-red-soft), var(--panji-neutral-0) 28%) !important;
}

.panji-notification-avatar {
    width: 2.65rem;
    height: 2.65rem;
    display: grid;
    place-items: center;
    object-fit: cover;
    border: 2px solid var(--panji-neutral-0);
    border-radius: 50%;
    background: var(--panji-blue-soft);
    color: var(--panji-blue-deep);
    box-shadow: 0 0 0 1px rgba(46, 111, 149, 0.2);
}

.panji-notification-avatar.is-placeholder {
    font-size: 1.1rem;
}

.panji-notification-link {
    max-width: 100%;
    color: var(--panji-ink) !important;
}

.panji-notification-link small {
    color: var(--panji-neutral-500);
}

.panji-notification-badge {
    display: inline-flex;
    margin-bottom: 0.35rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: var(--panji-blue-soft);
    color: var(--panji-blue-deep);
    font-size: 0.68rem;
    font-weight: 750;
}

.panji-notification-badge a {
    color: inherit;
}

.panji-notification-badge.type-system,
.panji-notification-badge.type-other {
    background: var(--panji-red-soft);
    color: var(--panji-red-strong);
}

.panji-notification-badge.type-follow,
.panji-notification-badge.type-post,
.panji-notification-badge.type-comment,
.panji-notification-badge.type-comment_reply,
.panji-notification-badge.type-blog_rate {
    background: var(--panji-blue-soft);
    color: var(--panji-blue-deep);
}

.panji-notification-empty {
    padding: 2.5rem 1rem;
    border-style: dashed !important;
    border-radius: 1rem !important;
    background: var(--panji-neutral-25) !important;
    color: var(--panji-neutral-500);
    text-align: center;
}

/* Blog authoring */
.panji-app .authoring-header {
    border-color: rgba(46, 111, 149, 0.16);
    background:
        radial-gradient(circle at top right, rgba(181, 30, 42, 0.08), transparent 38%),
        linear-gradient(135deg, var(--panji-neutral-25), var(--panji-blue-pale));
}

.panji-app .authoring-security-card {
    border-color: rgba(46, 111, 149, 0.23);
    background: rgba(255, 255, 255, 0.86);
}

.panji-app .section-number {
    background: var(--panji-blue);
}

.panji-app .quote-result-item:hover,
.panji-app .quote-result-item:focus-visible,
.panji-app .quote-result-item.is-selected {
    border-color: rgba(46, 111, 149, 0.52);
    background: var(--panji-blue-pale);
    box-shadow: 0 0 0 0.2rem rgba(46, 111, 149, 0.1);
}

.panji-app .selected-quote-card {
    border-color: rgba(46, 111, 149, 0.2);
    border-left-color: var(--panji-red);
    background: linear-gradient(145deg, var(--panji-blue-soft), var(--panji-neutral-50));
}

.panji-app .selected-quote-card::before {
    color: var(--panji-red);
}

.panji-app .authoring-mobile-actions {
    border-top-color: var(--panji-border);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -0.5rem 1.5rem rgba(32, 36, 40, 0.1);
}

/* Quotes */
.panji-app #add-quote-card {
    border-color: rgba(46, 111, 149, 0.2);
    background: var(--panji-blue-pale) !important;
}

.panji-app #add-quote-card .bi-plus-circle {
    color: var(--panji-blue) !important;
}

.panji-app #quote-form .btn-success,
.panji-app .edit-quote-form .btn-primary {
    background: var(--panji-blue);
    border-color: var(--panji-blue);
}

.panji-app #quotes-button .btn-outline-warning {
    border-color: rgba(46, 111, 149, 0.45);
    color: var(--panji-blue);
}

.panji-app #quotes-button .btn-outline-warning:hover,
.panji-app #quotes-button .btn-outline-warning:focus-visible {
    background: var(--panji-blue);
    color: #fff;
}

.panji-app .blockquote .bi-quote {
    color: var(--panji-red);
}

/* Monitoring */
.panji-app .download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.75rem;
    background: var(--panji-blue) !important;
    color: #fff !important;
    box-shadow: 0 0.45rem 1rem rgba(46, 111, 149, 0.2);
}

.panji-app .download-btn:hover,
.panji-app .download-btn:focus-visible {
    background: var(--panji-blue-strong) !important;
}

.panji-app #table-title,
.panji-app #judul-tabel,
.panji-app #judul-bulan,
.panji-app #judul-provinsi,
.panji-app #judul-kabupaten,
.panji-app #judul-kecamatan {
    color: var(--panji-charcoal);
}

.panji-app .map-card,
.panji-app .chart-card,
.panji-app .filter-card,
.panji-app #results-container {
    border-color: var(--panji-border);
}

/* Profile and relationship lists */
.panji-app #profileTab .nav-link.active {
    color: var(--panji-blue-deep);
    box-shadow: inset 0 -3px 0 var(--panji-red);
}

.panji-app #profileTab .nav-link:not(.active) {
    color: var(--panji-neutral-500);
}

.panji-app .profile-picture-placeholder {
    background: var(--panji-charcoal-muted) !important;
}

.panji-app a.bg-success-subtle,
.panji-app .bg-success-subtle {
    border-color: rgba(46, 111, 149, 0.22) !important;
    background: var(--panji-blue-pale) !important;
    color: var(--panji-blue-deep) !important;
}

/* Screening */
.panji-app .questionnaire-card,
.panji-app .screening-card,
.panji-app .result-card {
    border-color: var(--panji-border) !important;
    background: var(--panji-neutral-0) !important;
    box-shadow: var(--panji-shadow-sm);
}

.panji-app .screening-progress .progress-bar,
.panji-app .questionnaire-progress .progress-bar {
    background: linear-gradient(90deg, var(--panji-blue), #4e8eae);
}

.panji-app .screening-result-positive,
.panji-app .risk-high {
    border-color: rgba(181, 30, 42, 0.24) !important;
    background: var(--panji-red-soft) !important;
    color: var(--panji-red-strong) !important;
}

.panji-app .screening-result-neutral,
.panji-app .risk-low {
    border-color: rgba(46, 111, 149, 0.22) !important;
    background: var(--panji-blue-pale) !important;
    color: var(--panji-blue-deep) !important;
}

/* Auth and social account pages */
.panji-app .account-shell,
.panji-app .socialaccount-shell,
.panji-app .auth-shell {
    color: var(--panji-ink);
}

.panji-app .account-shell .card,
.panji-app .socialaccount-shell .card,
.panji-app .auth-shell .card {
    border-color: var(--panji-border);
    box-shadow: var(--panji-shadow);
}

/* Share buttons retain recognizable network identity as deliberate exceptions. */
.panji-app .panji-social-facebook {
    border-color: #315fa8 !important;
    background: #315fa8 !important;
}

.panji-app .panji-social-whatsapp {
    border-color: #238b57 !important;
    background: #238b57 !important;
}

.panji-app .panji-social-x {
    border-color: #202428 !important;
    background: #202428 !important;
}

@media (max-width: 575.98px) {
    .panji-notification-item > .d-flex {
        align-items: flex-start !important;
    }

    .panji-notification-page .btn-link {
        font-size: 0.82rem;
    }
}