/*
 * PANJI Dark Surface Contrast Guards
 *
 * This layer is intentionally loaded last. It prevents global utility classes
 * such as .text-dark from producing dark text on charcoal, deep-blue, maroon,
 * or Bootstrap dark surfaces.
 */

:root {
    --panji-on-dark: #ffffff;
    --panji-on-dark-soft: rgba(255, 255, 255, 0.88);
    --panji-on-dark-muted: rgba(255, 255, 255, 0.7);
    --panji-on-dark-faint: rgba(255, 255, 255, 0.56);
}

/* Explicit semantic utility for future dark components. */
.panji-on-dark,
.panji-dark-surface {
    color: var(--panji-on-dark) !important;
    -webkit-text-fill-color: currentColor;
}

/* Bootstrap and PANJI utility surfaces that are visually dark. */
.panji-app :is(
    .bg-dark,
    .text-bg-dark,
    .bg-secondary,
    .text-bg-secondary,
    .bg-primary,
    .text-bg-primary,
    .btn-dark,
    .btn-secondary,
    .btn-primary,
    .badge.bg-dark,
    .badge.bg-secondary,
    .badge.bg-primary,
    .card-header.bg-dark,
    .card-header.bg-primary,
    .card-footer.bg-dark,
    .card-footer.bg-secondary,
    .table-dark,
    .list-group-item-dark,
    .alert-dark,
    .progress-bar
),
.chat-base-body :is(
    .bg-dark,
    .text-bg-dark,
    .bg-secondary,
    .text-bg-secondary,
    .bg-primary,
    .text-bg-primary,
    .btn-dark,
    .btn-secondary,
    .btn-primary,
    .badge.bg-dark,
    .badge.bg-secondary,
    .badge.bg-primary,
    .table-dark,
    .list-group-item-dark,
    .alert-dark,
    .progress-bar
) {
    color: var(--panji-on-dark) !important;
    -webkit-text-fill-color: currentColor;
}

/* Override legacy forced-dark utilities only when they sit on a dark surface. */
.panji-app :is(
    .bg-dark,
    .text-bg-dark,
    .bg-secondary,
    .text-bg-secondary,
    .bg-primary,
    .text-bg-primary,
    .card-header.bg-dark,
    .card-header.bg-primary,
    .card-footer.bg-dark,
    .card-footer.bg-secondary,
    .table-dark,
    .list-group-item-dark,
    .alert-dark,
    .panji-dark-surface
) :is(
    .text-dark,
    .text-body,
    .text-body-emphasis,
    .link-dark,
    .text-primary-emphasis,
    .panji-adaptive-text
),
.chat-base-body :is(
    .bg-dark,
    .text-bg-dark,
    .bg-secondary,
    .text-bg-secondary,
    .bg-primary,
    .text-bg-primary,
    .table-dark,
    .list-group-item-dark,
    .alert-dark,
    .panji-dark-surface
) :is(
    .text-dark,
    .text-body,
    .text-body-emphasis,
    .link-dark,
    .text-primary-emphasis,
    .panji-adaptive-text
) {
    color: var(--panji-on-dark) !important;
    -webkit-text-fill-color: currentColor;
}

.panji-app :is(
    .bg-dark,
    .text-bg-dark,
    .bg-secondary,
    .text-bg-secondary,
    .bg-primary,
    .text-bg-primary,
    .card-header.bg-dark,
    .card-header.bg-primary,
    .card-footer.bg-dark,
    .card-footer.bg-secondary,
    .table-dark,
    .list-group-item-dark,
    .alert-dark,
    .panji-dark-surface
) :is(.text-muted, .text-body-secondary, .small, small),
.chat-base-body :is(
    .bg-dark,
    .text-bg-dark,
    .bg-secondary,
    .text-bg-secondary,
    .bg-primary,
    .text-bg-primary,
    .table-dark,
    .list-group-item-dark,
    .alert-dark,
    .panji-dark-surface
) :is(.text-muted, .text-body-secondary, .small, small) {
    color: var(--panji-on-dark-muted) !important;
    -webkit-text-fill-color: currentColor;
}

/* Adaptive text inherits from its actual surface instead of forcing black. */
.panji-adaptive-text {
    color: inherit !important;
    -webkit-text-fill-color: currentColor;
}

/* Chat: sidebar and its active controls. */
.chat-base-body .chat-desktop-sidebar,
.chat-base-body .chat-desktop-sidebar a,
.chat-base-body .chat-sidebar-brand,
.chat-base-body .chat-sidebar-item,
.chat-base-body .chat-sidebar-item__heading strong,
.chat-base-body .chat-sidebar-item__preview,
.chat-base-body .chat-sidebar-item__preview b,
.chat-base-body .chat-sidebar-filters button.is-active,
.chat-base-body .chat-sidebar-filters button.is-active span,
.chat-base-body .chat-sidebar-avatar.is-group,
.chat-base-body .chat-sidebar-unread {
    color: var(--panji-on-dark) !important;
    -webkit-text-fill-color: currentColor;
}

.chat-base-body .chat-sidebar-item__meta,
.chat-base-body .chat-sidebar-time,
.chat-base-body .chat-sidebar-brand small,
.chat-base-body .chat-sidebar-empty,
.chat-base-body .chat-sidebar-no-results {
    color: var(--panji-on-dark-muted) !important;
    -webkit-text-fill-color: currentColor;
}

.chat-base-body .chat-sidebar-search,
.chat-base-body .chat-sidebar-search input,
.chat-base-body .chat-sidebar-search button {
    color: var(--panji-on-dark-soft) !important;
    -webkit-text-fill-color: currentColor;
}

.chat-base-body .chat-sidebar-search input::placeholder {
    color: var(--panji-on-dark-faint) !important;
    -webkit-text-fill-color: currentColor;
}

/* Chat: topbar and own-message bubbles are dark surfaces. */
.chat-base-body .chat-topbar,
.chat-base-body .chat-topbar .chat-identity,
.chat-base-body .chat-topbar .chat-identity strong,
.chat-base-body .chat-topbar .chat-icon-button,
.chat-base-body .chat-message.is-own .chat-bubble,
.chat-base-body .chat-message.is-own .chat-message-text,
.chat-base-body .chat-message.is-own .chat-reply-reference,
.chat-base-body .chat-message.is-own .chat-reply-author,
.chat-base-body .chat-message.is-own .chat-reply-excerpt,
.chat-base-body .chat-message.is-own .chat-message-meta,
.chat-base-body .chat-new-message-button {
    color: var(--panji-on-dark) !important;
    -webkit-text-fill-color: currentColor;
}

.chat-base-body .chat-topbar .chat-identity small,
.chat-base-body .chat-message.is-own .chat-message-meta {
    color: var(--panji-on-dark-muted) !important;
    -webkit-text-fill-color: currentColor;
}

/* Search highlights intentionally keep dark text on a light yellow marker. */
.chat-base-body .chat-message.is-own .chat-message-text .highlight {
    color: #42340b !important;
    -webkit-text-fill-color: #42340b;
}

/* Dark custom surfaces used outside the conversation detail page. */
.panji-app :is(
    .chat-management-hero,
    .group-profile-hero,
    .conversation-info-hero,
    .service-screening,
    .back-profile,
    .signal-core,
    .conversation-avatar.is-group,
    .btn-chat-primary,
    .btn-management-primary,
    .btn-conversation-primary,
    .personal-confirm-signal,
    .management-step-number,
    .download-btn
),
.chat-base-body :is(
    .chat-management-hero,
    .group-profile-hero,
    .conversation-info-hero,
    .signal-core,
    .conversation-avatar.is-group,
    .btn-chat-primary,
    .btn-management-primary,
    .btn-conversation-primary,
    .personal-confirm-signal,
    .management-step-number
) {
    color: var(--panji-on-dark) !important;
    -webkit-text-fill-color: currentColor;
}

.panji-app :is(
    .chat-management-hero,
    .group-profile-hero,
    .conversation-info-hero,
    .service-screening,
    .back-profile,
    .signal-core,
    .conversation-avatar.is-group
) :is(
    h1, h2, h3, h4, h5, h6,
    p, span, strong, b, small,
    a:not(.btn), i
),
.chat-base-body :is(
    .chat-management-hero,
    .group-profile-hero,
    .conversation-info-hero,
    .signal-core,
    .conversation-avatar.is-group
) :is(
    h1, h2, h3, h4, h5, h6,
    p, span, strong, b, small,
    a:not(.btn), i
) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor;
}

/* Ensure dark table headings cannot inherit black from nested utility classes. */
.panji-app .table-dark :is(th, td, a, span, small, strong, .text-dark),
.panji-app .table thead.table-dark :is(th, td, a, span, small, strong, .text-dark) {
    color: var(--panji-on-dark) !important;
    -webkit-text-fill-color: currentColor;
}

/* Light Bootstrap fields keep dark text even when nested in a dark semantic card. */
.panji-app .panji-dark-surface :is(.form-control, .form-select, .input-group-text),
.chat-base-body .panji-dark-surface :is(.form-control, .form-select, .input-group-text) {
    color: #252a2f !important;
    -webkit-text-fill-color: currentColor;
}

/* Bootstrap opacity helpers can turn primary/secondary backgrounds into light cards. */
.panji-app :is(.bg-primary, .bg-secondary, .bg-dark):is(
    .bg-opacity-10,
    .bg-opacity-25,
    .bg-opacity-50
):not(.text-white):not(.text-light),
.chat-base-body :is(.bg-primary, .bg-secondary, .bg-dark):is(
    .bg-opacity-10,
    .bg-opacity-25,
    .bg-opacity-50
):not(.text-white):not(.text-light) {
    color: var(--panji-ink, #252a2f) !important;
    -webkit-text-fill-color: currentColor;
}

.panji-app :is(.bg-primary, .bg-secondary, .bg-dark):is(
    .bg-opacity-10,
    .bg-opacity-25,
    .bg-opacity-50
) :is(.text-dark, .text-body, .text-body-emphasis, .panji-adaptive-text),
.chat-base-body :is(.bg-primary, .bg-secondary, .bg-dark):is(
    .bg-opacity-10,
    .bg-opacity-25,
    .bg-opacity-50
) :is(.text-dark, .text-body, .text-body-emphasis, .panji-adaptive-text) {
    color: var(--panji-ink, #252a2f) !important;
    -webkit-text-fill-color: currentColor;
}

@media (forced-colors: active) {
    .panji-on-dark,
    .panji-dark-surface,
    .chat-base-body .chat-topbar,
    .chat-base-body .chat-desktop-sidebar,
    .chat-base-body .chat-message.is-own .chat-bubble {
        color: CanvasText !important;
        border-color: CanvasText !important;
        forced-color-adjust: auto;
    }
}