/*
 * Dark mode overrides for SMAPP custom CSS.
 *
 * Falcon ships a full `.dark` palette (see falcon/assets/css/theme.css) —
 * this file only patches our own hardcoded colors and inline styles that
 * don't pick up the Falcon variables automatically.
 *
 * Prefer Falcon vars (var(--falcon-100) .. var(--falcon-1100)) so palette
 * stays consistent in both modes. The vars auto-invert on `.dark`.
 */

/* ---------- Page surfaces ---------- *
 * Mirror light-mode layout: body is the base tone, top bar +
 * sidebar share an elevated tone via --falcon-bg-navbar-glass.
 * The natural y=80→y=96 gap (body shows through between top bar
 * and sidebar's visible inner container) IS the visual separator. */

:root.dark {
    --falcon-body-bg: #050d1a;
    --falcon-bg-navbar-glass: var(--falcon-200);
    --falcon-navbar-vertical-bg-color: var(--falcon-200);
}

.dark body.main-bg,
.dark .main-bg {
    background: #050d1a !important;
}

/* Full-width strip behind the top navbar (j2.base.pwa.html ships with #fff). */
.dark .navbar-bg {
    background-color: var(--falcon-200) !important;
}

/* CRM top navbar — match the dark body tone shown by the brand strip on the
 * left so the top edge reads as one continuous bar. PWA's nav uses
 * id="navbar-top" and keeps its falcon-200 glass tone unchanged. */
.dark .navbar-glass.navbar-top:not(#navbar-top) {
    background-color: var(--falcon-body-bg) !important;
}

/* CRM vibrant sidebar — agency-configured gradient + text color injected inline
 * by j2.base.bs5.html with !important. In dark mode we override both so the
 * sidebar matches falcon-200 and menu items stay readable. */
.dark .navbar-vertical.navbar-vibrant .navbar-collapse {
    background-image: none !important;
    background-color: var(--falcon-200) !important;
}

.dark .navbar-vertical.navbar-vibrant .navbar-nav .nav-item .nav-link {
    color: var(--falcon-700) !important;
}

.dark .navbar-vertical.navbar-vibrant .navbar-nav .nav-item.active .nav-link,
.dark .navbar-vertical.navbar-vibrant .navbar-nav .nav-item .nav-link.active {
    color: var(--falcon-1000) !important;
}

.dark .navbar-vertical.navbar-vibrant .navbar-nav .nav-item .nav-link.dropdown-indicator:after {
    border-color: var(--falcon-700) !important;
}

/* ---------- Cards, post boxes, panels ---------- */
.dark .card,
.dark .bg-white {
    background-color: var(--falcon-200) !important;
    color: var(--falcon-900);
}

.dark .post-box,
.dark .post-footer {
    background-color: var(--falcon-200) !important;
}

/* ---------- Text colors (custom utilities) ---------- */
.dark .color-black {
    color: var(--falcon-900);
}

.dark .color-gray-1 {
    color: var(--falcon-800);
}

.dark .color-gray-2,
.dark .color-gray-3,
.dark .color-gray-4 {
    color: var(--falcon-700);
}

.dark .black-header,
.dark .single-listing-name,
.dark .post-author-name,
.dark .post-body-text,
.dark .no-result-text,
.dark .profile-text,
.dark .brand-profile-text-sm,
.dark .notification-link {
    color: var(--falcon-900);
}

.dark .subscription-next-list > li::marker {
    color: var(--falcon-900);
}

/* ---------- Backgrounds on light-gray utility ---------- */
.dark .bg-light-gray {
    background: var(--falcon-200);
}

/* Falcon's .bg-light renders as ~25% alpha falcon-200 in dark — invisible
 * against cards. Used by collab list placeholders ("T" thumbnails). */
.dark .bg-light {
    background-color: var(--falcon-300) !important;
}

/* Profile page splits its card with a 16px white border-left (j2.pwa.profile.html
 * inline style hardcodes #f9fafd). In dark mode that line is glaringly white. */
.dark #profile-tabs-container {
    border-left-color: var(--falcon-body-bg) !important;
}

/* ---------- Chat panel ----------
 * _chat.scss hardcodes #000 text and #cfe5fe (light blue) author bubble. */
.dark .chat-message-text,
.dark .chat-panel .chat-editor-area .emojiarea-editor {
    color: var(--falcon-900);
}

.dark .bg-author-message {
    background-color: var(--falcon-soft-info);
}

.dark .bg-author-message a {
    color: var(--falcon-info);
}

/* Incoming chat bubbles use Falcon's .bg-200 — too close to chat-panel-body's
 * .bg-100 in dark mode (~6% lightness diff). Bump to falcon-300 for contrast. */
.dark .chat-message-text.bg-200 {
    background-color: var(--falcon-300) !important;
}

/* Archive section divider in chat sidebar — _chat.scss hardcodes #EEF3F8. */
.dark .archived-section-divider {
    background-color: var(--falcon-300);
}

/* ---------- Mobile bottom nav (hardcoded white bg, gray text) ---------- */
.dark .mobile-bottom-nav {
    background-color: var(--falcon-100);
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.4);
}

.dark .mobile-bottom-nav .nav-item a {
    color: var(--falcon-700);
}

.dark .mobile-bottom-nav .nav-item.active a {
    color: var(--falcon-1000);
}

/* ---------- Autocomplete / location search ---------- */
.dark .autocomplete-dropdown-container {
    background-color: var(--falcon-200);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    color: var(--falcon-900);
}

.dark .autocomplete-item,
.dark .autocomplete-dropdown-container li:not(:last-child) {
    border-bottom-color: var(--falcon-300);
}

.dark .autocomplete-item-highlight,
.dark .autocomplete-dropdown-container li:hover {
    background-color: var(--falcon-300);
}

.dark .current-location-label {
    background-color: var(--falcon-200);
    border-color: var(--falcon-300);
    color: var(--falcon-900);
}

.dark .search-history-label {
    color: var(--falcon-700);
    background-color: var(--falcon-200);
    border-bottom-color: var(--falcon-300);
}

/* ---------- Search field ---------- */
.dark .search-input-group-inline .input-group-text,
.dark .search-field {
    background-color: var(--falcon-200);
    border-color: var(--falcon-300);
    color: var(--falcon-900);
}

.dark .search-field::placeholder {
    color: var(--falcon-600);
}

/* ---------- Suggestion / connection card on mobile ---------- */
.dark #client_suggestions_card .btn,
.dark #client_suggestions_card .form-control {
    border-color: var(--falcon-300);
}

/* ---------- Feed banner ---------- */
.dark .bg-feed {
    background-color: var(--falcon-200);
}

/* Feed compose box — j2.feed.html hardcodes #EEF3F8. */
.dark #show_post_form {
    background: var(--falcon-300) !important;
}

.dark #recent_views_header {
    background-color: var(--falcon-200) !important;
}

/* ---------- Alerts ---------- */
.dark .alert-info-notifications {
    background-color: var(--falcon-200);
    border-color: var(--falcon-200);
    color: var(--falcon-900);
}

.dark .alert-warning {
    /* Keep warning tint but darker */
    background-color: var(--falcon-soft-warning);
    border-color: var(--falcon-soft-warning);
}

.dark .bg-success-subtle {
    background-color: var(--falcon-soft-success) !important;
}

.dark .bg-danger-subtle {
    background-color: var(--falcon-soft-danger) !important;
}

/* ---------- AI / certified badges ---------- */
.dark .ai-badge {
    background-color: var(--falcon-soft-info);
    color: var(--falcon-info);
}

/* ---------- Nav active state (hardcoded #0B1828) ---------- */
.dark .nav-link {
    color: var(--falcon-600) !important;
}

.dark .nav-link.active,
.dark .nav-item.active,
.dark .nav-item.active .nav-link,
.dark .inline-tabs-wrapper .nav-link.active {
    color: var(--falcon-900) !important;
}

/* ---------- Influencer profile header overlays ----------
 * The overlay sits on top of the cover photo with a hardcoded white text
 * color and a black-fading gradient. Pin badge tokens (and the ai-badge)
 * to their light-mode values inside the overlay so the compatibility
 * pill stays readable on the photo, same as in light mode. */
.dark .influencer-main-info {
    --falcon-badge-soft-success-background-color: #ccf6e4;
    --falcon-badge-soft-success-color: #00864e;
    --falcon-badge-soft-info-background-color: #d4f2ff;
    --falcon-badge-soft-info-color: #1978a2;
    --falcon-badge-soft-danger-background-color: #fad7dd;
    --falcon-badge-soft-danger-color: #932338;
    /* Falcon flips --falcon-white-rgb to 0,0,0 in dark mode, which makes
     * .text-white render black. Restore it here so the rating number and
     * the three-dots icon stay white over the cover photo. */
    --falcon-white-rgb: 255, 255, 255;
}

.dark .influencer-main-info .ai-badge {
    background-color: #d9f0fb;
    color: #1b74e4;
}

.dark .influencer-main-info .jform_field .dropdown.bootstrap-select,
.dark .influencer-main-info .jform_field .form-control {
    color: var(--falcon-1000);
}

/* ---------- Form inputs (bootstrap-select especially) ---------- */
.dark .bootstrap-select > .dropdown-toggle {
    background-color: var(--falcon-200);
    color: var(--falcon-900);
    border-color: var(--falcon-300);
}

.dark .bootstrap-select .dropdown-menu {
    background-color: var(--falcon-200);
    border-color: var(--falcon-300);
}

.dark .bootstrap-select .dropdown-menu li a {
    color: var(--falcon-900);
}

.dark .bootstrap-select .dropdown-menu li a:hover,
.dark .bootstrap-select .dropdown-menu li.selected a {
    background-color: var(--falcon-300);
}

/* ---------- Badges ---------- */
.dark .profile-badge,
.dark #match_group_tabs .badge-soft-dark,
.dark .inline-tabs .badge-soft-dark,
.dark .collab-type-badge {
    background-color: var(--falcon-300);
    color: var(--falcon-900);
}

/* ---------- Borders (utility classes used across templates) ---------- */
.dark .border-200,
.dark .border-bottom,
.dark .border-top,
.dark .border-start,
.dark .border-end,
.dark .border-dashed-bottom,
.dark .border-light-1 {
    border-color: var(--falcon-300) !important;
}

/* ---------- Dividers ---------- */
.dark .divider,
.dark .divider-thin {
    background-color: var(--falcon-300);
}

/* ---------- Google Maps InfoWindow ----------
 * The InfoWindow chrome (.gm-style-iw container, tip, close button) renders in
 * a separate Google-managed wrapper that ignores Map colorScheme. Override
 * the relevant gm- selectors so the popup matches our dark surface. */
.dark .gm-style .gm-style-iw,
.dark .gm-style .gm-style-iw-c,
.dark .gm-style .gm-style-iw-d {
    background-color: var(--falcon-200) !important;
    color: var(--falcon-900) !important;
}

/* Tip: GMaps renders it via .gm-style-iw-tc OR .gm-style-iw-t::after
 * (depending on API version) — cover both. */
.dark .gm-style .gm-style-iw-tc::after,
.dark .gm-style .gm-style-iw-t::after {
    background: var(--falcon-200) !important;
    box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

.dark .gm-style .gm-style-iw button.gm-ui-hover-effect > span {
    background-color: var(--falcon-700) !important;
}

/* InfoWindow inner has overflow:scroll inline — its OS scrollbar paints
 * a light strip in dark mode. Hide it (content fits anyway). */
.dark .gm-style .gm-style-iw-d::-webkit-scrollbar {
    display: none !important;
}

.dark .gm-style .gm-style-iw-d {
    scrollbar-width: none !important;
}

/* GMaps inlines padding-inline-end/bottom: 0 — content ends at the popup
 * edge. In dark mode that looks crowded, restore breathing room. */
.dark .gm-style .gm-style-iw-c {
    padding-inline-end: 18px !important;
    padding-bottom: 6px !important;
}

/* ---------- Dropdown menus on profile overlays ---------- */
.dark .dropdown-menu {
    background-color: var(--falcon-200);
    border-color: var(--falcon-300);
}

.dark .dropdown-item {
    color: var(--falcon-900);
}

.dark .dropdown-item:hover,
.dark .dropdown-item:focus {
    background-color: var(--falcon-300);
    color: var(--falcon-1000);
}

/* ---------- Link previews ---------- */
.dark .link-preview,
.dark .link-preview-img {
    background-color: var(--falcon-200);
}

.dark .link-preview-content h4 {
    color: var(--falcon-900);
}

.dark .link-preview-footer p,
.dark .site-name {
    color: var(--falcon-700);
}

.dark .link-preview-footer a {
    color: var(--falcon-info);
}

.dark .generating-preview {
    color: var(--falcon-info);
}

.dark .spinner-preview {
    border-color: rgba(255, 255, 255, 0.15);
    border-left-color: var(--falcon-900);
}

/* ---------- Segmented control (chips) ---------- */
.dark .segmented-item {
    background: var(--falcon-300);
    color: var(--falcon-900);
}

.dark .segmented-item:hover {
    background: var(--falcon-400);
}

.dark .segmented-item.active {
    background: var(--falcon-soft-info);
    color: var(--falcon-info);
}

/* ---------- FTS keyword highlight ---------- */
.dark .fts-match-keyword {
    color: var(--falcon-info);
    background-color: var(--falcon-soft-info);
}

/* ---------- Subscription / benefits ---------- */
.dark #subscription-data {
    background: var(--falcon-200);
}

@media (min-width: 768px) {
    .dark #benefits-list > li {
        background: var(--falcon-200);
    }
}

/* ---------- Stepper ---------- */
.dark .stepper-progress-line,
.dark .stepper-pending {
    background: var(--falcon-300);
}

/* ---------- Collab info / draft / dropzones ---------- */
.dark .collab-info-header,
.dark #collab_stats {
    background-color: var(--falcon-200) !important;
    border-color: var(--falcon-300);
}

.dark #collab-draft-info-box {
    background-color: var(--falcon-soft-info);
    border-color: var(--falcon-soft-info);
}

.dark .post_media_add_dropzone,
.dark .collab_media_add_dropzone {
    background-color: var(--falcon-200);
}

/* ---------- Info panel sticky footer ---------- */
.dark .info-panel-footer-buttons {
    background-color: var(--falcon-200);
}

/* ---------- Feed action hearts (gray sprite icons) ----------
 * Both halves of the double-heart are baked with #4D5969 (matching the
 * light-mode .color-gray-2 used by the single-heart FA icon). In dark
 * mode the FA icon resolves to --falcon-700 (#9da9bb), so swap each
 * SVG to a dark variant tinted to that exact tone — and the second
 * heart fills with --falcon-200 so it occludes the first heart with
 * the surrounding card bg. */
.dark img[src*="heart-light-cut"] {
    content: url('../img/heart-light-cut-dark.svg');
}

.dark .heart-container img.second-heart[src*="heart-light"] {
    content: url('../img/heart-light-dark.svg');
}

/* Liked state: heart-full-stroke has a white border that flares against
 * the dark bg. Swap to a variant whose stroke matches --falcon-200, so
 * the border occludes the underlying first heart with the card bg tone. */
.dark .heart-container img.second-heart[src*="heart-full-stroke"] {
    content: url('../img/heart-full-stroke-dark.svg');
}

/* Collab suggestion handshake (#4D5969 SVG) — swap to a dark variant
 * tinted to --falcon-700 (#9da9bb) so the inactive icon matches the
 * neighboring outline hearts and FA comment icon exactly. */
.dark img[src*="handshake-inactive"] {
    content: url('../img/handshake-inactive-dark.svg');
}

/* ---------- Carousel indicators (pager dots) ---------- */
.dark .carousel-indicators li {
    background-color: var(--falcon-500) !important;
}

.dark .carousel-indicators li.active {
    background-color: var(--falcon-info) !important;
}

/* ---------- Profile cover placeholder ---------- */
.dark .bg-influencer-cover,
.dark .bg-brand-cover,
.dark .bg-brand-my-cover {
    background-color: var(--falcon-200);
}

/* ---------- Misc text overrides for hardcoded #333 / #666 ---------- */
.dark .link-preview-content h4 {
    color: var(--falcon-900);
}

/* ---------- SweetAlert2 popup ---------- */
.dark .swal2-popup {
    background: var(--falcon-200) !important;
    color: var(--falcon-900) !important;
}

.dark .swal2-title,
.dark .swal2-html-container {
    color: var(--falcon-900) !important;
}

.dark .swal2-input,
.dark .swal2-textarea,
.dark .swal2-select,
.dark .swal2-file {
    background: var(--falcon-100) !important;
    color: var(--falcon-1000) !important;
    border-color: var(--falcon-300) !important;
}

.dark .swal2-input::placeholder,
.dark .swal2-textarea::placeholder {
    color: var(--falcon-600) !important;
}

.dark .swal2-validation-message {
    background: var(--falcon-100) !important;
    color: var(--falcon-900) !important;
}

.dark .swal2-close {
    color: var(--falcon-900) !important;
}

/* ---------- Bootstrap modal ---------- */
.dark .modal-content {
    background-color: var(--falcon-200);
    color: var(--falcon-900);
}

.dark .modal-header,
.dark .modal-footer {
    border-color: var(--falcon-300);
}

.dark .modal-header .btn-close,
.dark .btn-close {
    filter: invert(1) grayscale(1);
}

.dark .form-control,
.dark .form-select {
    background-color: var(--falcon-100);
    color: var(--falcon-1000);
    border-color: var(--falcon-300);
}

.dark .form-control::placeholder {
    color: var(--falcon-600);
}

.dark .form-control:focus,
.dark .form-select:focus {
    background-color: var(--falcon-100);
    color: var(--falcon-1000);
    border-color: var(--falcon-info);
}

.dark .input-group-text {
    background-color: var(--falcon-200);
    border-color: var(--falcon-300);
    color: var(--falcon-900);
}

/* ---------- Public profile page ----------
 * j2.public_profile.html extends j2.flat.bs5.html which doesn't ship
 * dark mode. The page-specific css/public-profile.css hardcodes the
 * fixed top header, body bg, and linktree-style link buttons in
 * light tones — patch them here so the page reads in dark mode for
 * viewers whose theme is set to dark. */
.dark .public-profile-header {
    background: var(--falcon-200) !important;
    border-bottom-color: var(--falcon-300);
}

.dark body {
    background: var(--falcon-body-bg) !important;
}

.dark .public-profile-link {
    background: var(--falcon-200);
    color: var(--falcon-1000) !important;
    border-color: var(--falcon-300);
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
}

.dark .public-profile-link:hover {
    box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.25);
}

.dark .public-profile-link:active {
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
}