/*
 * VibeForge launch polish
 *
 * Late-loaded, presentation-only refinements for shared member-facing surfaces.
 * Do not add layout, sticky, rail, or profile-customization rules here.
 */

:root {
  --vf-polish-ink: #17243a;
  --vf-polish-muted: #667892;
  --vf-polish-line: rgba(41, 67, 101, 0.12);
  --vf-polish-line-strong: rgba(41, 67, 101, 0.18);
  --vf-polish-surface: #ffffff;
  --vf-polish-soft: #f7f9fc;
  --vf-polish-shadow: 0 12px 28px rgba(23, 42, 68, 0.08);
  --vf-polish-shadow-hover: 0 16px 34px rgba(23, 42, 68, 0.12);
}

body:not(.night-mode) {
  background-color: #f2f6fa;
  background-image: linear-gradient(180deg, #f8fbfe 0%, #eef4f9 100%);
}

/* Shared content surfaces only. Navigation rails and profile studio surfaces retain their own rules. */
body:not(.night-mode):not(.vf-page-profile) #vf-main-content .sg-offcanvas-mainbar :is(.card, .post, .publisher),
body:not(.night-mode):not(.vf-page-profile) #vf-main-content .vf-side-rail :is(.card, .post, .publisher, .vf-side-card, .sidebar-meta-widget, .vf-sponsored-card),
body:not(.night-mode) #vf-main-content .modal-content,
body:not(.night-mode) #vf-main-content .dropdown-menu {
  border-color: var(--vf-polish-line) !important;
  box-shadow: var(--vf-polish-shadow) !important;
}

body:not(.night-mode):not(.vf-page-profile) #vf-main-content .sg-offcanvas-mainbar :is(.card, .post, .publisher),
body:not(.night-mode):not(.vf-page-profile) #vf-main-content .vf-side-rail :is(.card, .post, .publisher, .vf-side-card, .sidebar-meta-widget, .vf-sponsored-card) {
  background-color: var(--vf-polish-surface);
}

@media (hover: hover) and (pointer: fine) {
  body:not(.night-mode):not(.vf-page-profile) #vf-main-content .sg-offcanvas-mainbar :is(.card, .post):hover,
  body:not(.night-mode):not(.vf-page-profile) #vf-main-content .vf-side-rail :is(.card, .vf-side-card, .sidebar-meta-widget, .vf-sponsored-card):hover {
    box-shadow: var(--vf-polish-shadow-hover) !important;
  }
}

body:not(.night-mode) #vf-main-content :is(.card-header, .panel-heading) {
  border-bottom-color: var(--vf-polish-line) !important;
}

body:not(.night-mode) #vf-main-content :is(.card-footer, .panel-footer) {
  border-top-color: var(--vf-polish-line) !important;
  background-color: var(--vf-polish-soft) !important;
}

body:not(.night-mode) #vf-main-content :is(.text-muted, .post-meta, .post-time, .description, .card-text-muted) {
  color: var(--vf-polish-muted) !important;
}

body:not(.night-mode) #vf-main-content :is(.form-control, .form-select) {
  border-color: var(--vf-polish-line-strong) !important;
  background-color: #ffffff;
  color: var(--vf-polish-ink);
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.02);
}

body:not(.night-mode) #vf-main-content :is(.form-control, .form-select):hover {
  border-color: rgba(42, 89, 156, 0.28) !important;
}

body:not(.night-mode) #vf-main-content :is(.form-control, .form-select):focus {
  border-color: var(--vf-accent) !important;
  box-shadow: 0 0 0 3px rgba(76, 111, 255, 0.14) !important;
}

/* Buttons and action rows feel related without changing their color semantics. */
#vf-main-content .btn {
  font-weight: 750;
  letter-spacing: 0;
}

#vf-main-content .btn-light,
#vf-main-content .btn-outline-secondary {
  border-color: var(--vf-polish-line-strong);
}

#vf-main-content .btn-light:hover,
#vf-main-content .btn-outline-secondary:hover {
  border-color: rgba(42, 89, 156, 0.3);
  background-color: #f4f7fb;
}

body:not(.night-mode) #vf-main-content :is(.nav-tabs, .nav-pills, .page-tabs, .profile-tabs) {
  border-color: var(--vf-polish-line);
}

body:not(.night-mode) #vf-main-content :is(.nav-tabs .nav-link, .nav-pills .nav-link, .page-tabs a, .profile-tabs a) {
  color: #526681;
  font-weight: 750;
}

body:not(.night-mode) #vf-main-content :is(.nav-tabs .nav-link, .nav-pills .nav-link, .page-tabs a, .profile-tabs a):not(.active):hover {
  color: var(--vf-accent);
  background-color: rgba(76, 111, 255, 0.07);
}

/* Directory and discovery cards: predictable media framing and quieter overlays. */
body:not(.night-mode) #vf-main-content :is(.page-card, .group-card, .event-card, .user-card, .market-card, .product-card) {
  border-color: var(--vf-polish-line) !important;
  box-shadow: 0 8px 20px rgba(23, 42, 68, 0.07) !important;
}

body:not(.night-mode) #vf-main-content :is(.page-card, .group-card, .event-card, .user-card, .market-card, .product-card) :is(.card-title, .title) {
  color: var(--vf-polish-ink);
}

body:not(.night-mode) #vf-main-content :is(.empty-state, .no-data, .no-results, .no-posts) {
  border: 1px dashed var(--vf-polish-line-strong);
  background: rgba(255, 255, 255, 0.64);
  color: var(--vf-polish-muted);
}

/* Keep dropdowns readable above dense media and image cards. */
body:not(.night-mode) .dropdown-menu {
  border-color: var(--vf-polish-line-strong) !important;
  background-color: #ffffff;
}

body:not(.night-mode) .dropdown-menu .dropdown-item {
  color: #30445f;
  font-weight: 650;
}

body:not(.night-mode) .dropdown-menu .dropdown-item:hover,
body:not(.night-mode) .dropdown-menu .dropdown-item:focus {
  color: #173a74;
  background-color: rgba(76, 111, 255, 0.08);
}

/* Dark mode receives the same hierarchy without flattening customized profile themes. */
body.night-mode:not(.vf-page-profile) #vf-main-content .sg-offcanvas-mainbar :is(.card, .post, .publisher),
body.night-mode:not(.vf-page-profile) #vf-main-content .vf-side-rail :is(.card, .post, .publisher, .vf-side-card, .sidebar-meta-widget, .vf-sponsored-card) {
  border-color: rgba(148, 163, 184, 0.22) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode #vf-main-content :is(.card-header, .panel-heading, .card-footer, .panel-footer) {
  border-color: rgba(148, 163, 184, 0.18) !important;
}

body.night-mode #vf-main-content :is(.form-control, .form-select) {
  border-color: rgba(148, 163, 184, 0.3) !important;
}

@media (max-width: 767.98px) {
  body:not(.night-mode) {
    background-image: none;
    background-color: #f4f7fb;
  }

  /* Mobile keeps surfaces calm and avoids shadow buildup in a single-column flow. */
  body:not(.night-mode):not(.vf-page-profile) #vf-main-content .sg-offcanvas-mainbar :is(.card, .post, .publisher),
  body:not(.night-mode):not(.vf-page-profile) #vf-main-content .vf-side-rail :is(.card, .post, .publisher, .vf-side-card, .sidebar-meta-widget, .vf-sponsored-card) {
    box-shadow: 0 7px 18px rgba(23, 42, 68, 0.07) !important;
  }
}

/*
 * Sitewide component consistency
 *
 * This is intentionally presentation-only. It standardizes shared controls and
 * feedback surfaces without changing grid, rail, sticky, or profile-studio rules.
 */
:root {
  --vf-polish-primary: #2f6fed;
  --vf-polish-primary-hover: #245fd1;
  --vf-polish-primary-active: #1e40af;
  --vf-polish-success: #0f9d75;
  --vf-polish-warning: #b86a00;
  --vf-polish-danger: #c92d55;
  --vf-polish-info: #1769c2;
  --vf-polish-radius: 12px;
}

/* Shared text hierarchy inside the application, excluding member-customized profiles. */
body:not(.night-mode):not(.vf-page-profile) #vf-main-content :is(.card-title, .panel-title, .section-title, .widget-title, .modal-title, .form-label) {
  color: var(--vf-polish-ink);
}

body:not(.night-mode):not(.vf-page-profile) #vf-main-content :is(.card-subtitle, .help-block, .form-text, .small.text-muted, .description) {
  color: var(--vf-polish-muted) !important;
}

/* Buttons share an accessible, predictable state language. */
#vf-main-content .btn-primary,
#modal .btn-primary,
#external-link-modal .btn-primary,
.vf-share-slideout .btn-primary {
  border-color: var(--vf-polish-primary) !important;
  background-color: var(--vf-polish-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(47, 111, 237, 0.2);
}

#vf-main-content .btn-primary:hover,
#vf-main-content .btn-primary:focus,
#modal .btn-primary:hover,
#modal .btn-primary:focus,
#external-link-modal .btn-primary:hover,
#external-link-modal .btn-primary:focus,
.vf-share-slideout .btn-primary:hover,
.vf-share-slideout .btn-primary:focus {
  border-color: var(--vf-polish-primary-hover) !important;
  background-color: var(--vf-polish-primary-hover) !important;
  color: #ffffff !important;
}

#vf-main-content .btn-primary:active,
#vf-main-content .btn-primary.active,
#modal .btn-primary:active,
#modal .btn-primary.active,
#external-link-modal .btn-primary:active,
#external-link-modal .btn-primary.active,
.vf-share-slideout .btn-primary:active,
.vf-share-slideout .btn-primary.active {
  border-color: var(--vf-polish-primary-active) !important;
  background-color: var(--vf-polish-primary-active) !important;
}

#vf-main-content .btn-success,
#modal .btn-success,
#external-link-modal .btn-success {
  border-color: var(--vf-polish-success) !important;
  background-color: var(--vf-polish-success) !important;
  color: #ffffff !important;
}

#vf-main-content .btn-danger,
#modal .btn-danger,
#external-link-modal .btn-danger {
  border-color: var(--vf-polish-danger) !important;
  background-color: var(--vf-polish-danger) !important;
  color: #ffffff !important;
}

#vf-main-content .btn-warning,
#modal .btn-warning,
#external-link-modal .btn-warning {
  border-color: var(--vf-polish-warning) !important;
  background-color: var(--vf-polish-warning) !important;
  color: #ffffff !important;
}

/* A selected tab is always legible, even when page-specific colors are present. */
body:not(.night-mode):not(.vf-page-profile) #vf-main-content :is(.nav-pills, .nav-tabs, .page-tabs, .content-tabs) :is(.nav-link.active, li.active > a, a.active) {
  border-color: var(--vf-polish-primary) !important;
  background-color: var(--vf-polish-primary) !important;
  color: #ffffff !important;
}

body:not(.night-mode):not(.vf-page-profile) #vf-main-content :is(.nav-pills, .nav-tabs, .page-tabs, .content-tabs) :is(.nav-link.active, li.active > a, a.active) :is(i, svg, span) {
  color: inherit !important;
}

/* Form controls use the same border, focus, and validation language across pages and dialogs. */
body:not(.night-mode) :is(#vf-main-content, #modal, #external-link-modal, .vf-share-slideout) :is(.form-control, .form-select, .custom-select) {
  border-color: var(--vf-polish-line-strong) !important;
  border-radius: var(--vf-polish-radius) !important;
  color: var(--vf-polish-ink) !important;
  background-color: #ffffff;
}

body:not(.night-mode) :is(#vf-main-content, #modal, #external-link-modal, .vf-share-slideout) :is(.form-control, .form-select, .custom-select)::placeholder {
  color: #8796aa !important;
  opacity: 1;
}

body:not(.night-mode) :is(#vf-main-content, #modal, #external-link-modal, .vf-share-slideout) :is(.form-control, .form-select, .custom-select):focus {
  border-color: var(--vf-polish-primary) !important;
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.14) !important;
}

body:not(.night-mode) :is(#vf-main-content, #modal, #external-link-modal, .vf-share-slideout) input[type="checkbox"],
body:not(.night-mode) :is(#vf-main-content, #modal, #external-link-modal, .vf-share-slideout) input[type="radio"] {
  accent-color: var(--vf-polish-primary);
}

/* Menus are compact but not cramped, with reliable contrast over media-heavy pages. */
body:not(.night-mode) :is(.dropdown-menu, .action-dropdown-menu) {
  padding: 6px;
  border: 1px solid var(--vf-polish-line-strong) !important;
  border-radius: var(--vf-polish-radius) !important;
  background-color: #ffffff !important;
  box-shadow: 0 16px 34px rgba(23, 42, 68, 0.16) !important;
}

body:not(.night-mode) :is(.dropdown-menu, .action-dropdown-menu) .dropdown-item {
  min-height: 38px;
  margin: 1px 0;
  border-radius: 8px;
  color: #30445f !important;
  font-weight: 700;
}

body:not(.night-mode) :is(.dropdown-menu, .action-dropdown-menu) .dropdown-item:active,
body:not(.night-mode) :is(.dropdown-menu, .action-dropdown-menu) .dropdown-item.active,
body:not(.night-mode) :is(.dropdown-menu, .action-dropdown-menu) .dropdown-item:hover,
body:not(.night-mode) :is(.dropdown-menu, .action-dropdown-menu) .dropdown-item:focus {
  background-color: rgba(47, 111, 237, 0.1) !important;
  color: #183e80 !important;
}

/* Keep dialogs visually consistent without overriding branded or authentication backgrounds. */
#modal .modal-content,
#external-link-modal .modal-content,
.vf-share-slideout .vf-share-panel {
  border-color: var(--vf-polish-line-strong) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 56px rgba(10, 27, 51, 0.24) !important;
}

body:not(.night-mode) :is(#modal, #external-link-modal) :is(.modal-header, .modal-footer) {
  border-color: var(--vf-polish-line) !important;
}

body:not(.night-mode) :is(#modal, #external-link-modal) .modal-header .modal-title {
  color: var(--vf-polish-ink);
  font-weight: 800;
}

body:not(.night-mode) :is(#modal, #external-link-modal) .modal-header .btn-close,
body:not(.night-mode) :is(#modal, #external-link-modal) .modal-header .close {
  border-radius: 10px;
  opacity: 0.74;
}

body:not(.night-mode) :is(#modal, #external-link-modal) .modal-header .btn-close:hover,
body:not(.night-mode) :is(#modal, #external-link-modal) .modal-header .close:hover {
  background-color: rgba(47, 111, 237, 0.08);
  opacity: 1;
}

/* Feedback and status treatments use a limited, readable palette. */
body:not(.night-mode) #vf-main-content :is(.alert, .toast, .notice, .message) {
  border-radius: var(--vf-polish-radius);
}

body:not(.night-mode) #vf-main-content .alert-success,
body:not(.night-mode) #vf-main-content .alert-info {
  border-color: rgba(15, 157, 117, 0.22) !important;
  color: #075e48 !important;
  background-color: rgba(15, 157, 117, 0.09) !important;
}

body:not(.night-mode) #vf-main-content .alert-warning {
  border-color: rgba(217, 119, 6, 0.25) !important;
  color: #875000 !important;
  background-color: rgba(217, 119, 6, 0.1) !important;
}

body:not(.night-mode) #vf-main-content .alert-danger {
  border-color: rgba(201, 45, 85, 0.22) !important;
  color: #9f1d41 !important;
  background-color: rgba(201, 45, 85, 0.09) !important;
}

body:not(.night-mode) #vf-main-content :is(.badge, .label):not(.badge-light):not(.bg-light) {
  letter-spacing: 0.01em;
  font-weight: 750;
}

/* Dark mode preserves hierarchy and contrast instead of inheriting light-surface assumptions. */
body.night-mode :is(#vf-main-content, #modal, #external-link-modal, .vf-share-slideout) :is(.form-control, .form-select, .custom-select) {
  border-color: rgba(139, 164, 199, 0.34) !important;
  color: #edf4ff !important;
  background-color: #111d2e !important;
}

body.night-mode :is(#vf-main-content, #modal, #external-link-modal, .vf-share-slideout) :is(.form-control, .form-select, .custom-select):focus {
  border-color: #6c9bff !important;
  box-shadow: 0 0 0 3px rgba(108, 155, 255, 0.2) !important;
}

body.night-mode :is(.dropdown-menu, .action-dropdown-menu) {
  border-color: rgba(139, 164, 199, 0.28) !important;
  background-color: #162337 !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34) !important;
}

body.night-mode :is(.dropdown-menu, .action-dropdown-menu) .dropdown-item {
  color: #d8e4f3 !important;
}

body.night-mode :is(.dropdown-menu, .action-dropdown-menu) .dropdown-item:hover,
body.night-mode :is(.dropdown-menu, .action-dropdown-menu) .dropdown-item:focus,
body.night-mode :is(.dropdown-menu, .action-dropdown-menu) .dropdown-item.active {
  color: #ffffff !important;
  background-color: rgba(108, 155, 255, 0.16) !important;
}

body.night-mode #vf-main-content :is(.alert-success, .alert-info) {
  border-color: rgba(64, 220, 174, 0.28) !important;
  color: #9cf1d7 !important;
  background-color: rgba(15, 157, 117, 0.16) !important;
}

body.night-mode #vf-main-content .alert-warning {
  border-color: rgba(251, 191, 36, 0.3) !important;
  color: #fde5a2 !important;
  background-color: rgba(184, 106, 0, 0.18) !important;
}

body.night-mode #vf-main-content .alert-danger {
  border-color: rgba(251, 113, 133, 0.28) !important;
  color: #fec8d3 !important;
  background-color: rgba(201, 45, 85, 0.17) !important;
}

@media (max-width: 767.98px) {
  body:not(.night-mode) :is(.dropdown-menu, .action-dropdown-menu) .dropdown-item {
    min-height: 42px;
  }

  #modal .modal-content,
  #external-link-modal .modal-content,
  .vf-share-slideout .vf-share-panel {
    border-radius: 14px !important;
  }
}