/*!
 * NovaPhoenix — shared UI layer. Re-skins the Bootstrap/Myngul components every page uses (modals, forms,
 * buttons, dropdown widgets, side widgets, alerts, tabs, tables) with the design's tokens and component rules.
 * Component values mirror the design's .btn / .input / .dialog / .card / .tag / .table rules in novaphoenix.css.
 */

/* Bootstrap 5.3 theme variables → design tokens (so unstyled Bootstrap pieces inherit the look) */
html[data-bs-theme="dark"], body.night-mode {
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-emphasis-color: var(--color-neutral-100);
  --bs-secondary-color: var(--color-neutral-400);
  --bs-secondary-bg: var(--color-surface);
  --bs-tertiary-color: var(--color-neutral-500);
  --bs-tertiary-bg: var(--color-surface);
  --bs-border-color: var(--color-divider);
  --bs-border-color-translucent: var(--color-divider);
  --bs-link-color: var(--color-accent);
  --bs-link-hover-color: var(--color-accent-400);
  --bs-link-color-rgb: 210, 160, 114;
  --bs-link-hover-color-rgb: 221, 179, 136;
  --bs-primary: var(--color-accent);
  --bs-primary-rgb: 210, 160, 114;
  --bs-font-sans-serif: var(--font-body);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-dropdown-bg: var(--color-surface);
  --bs-dropdown-color: var(--color-text);
  --bs-dropdown-link-color: var(--color-text);
  --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--color-text) 6%, transparent);
  --bs-dropdown-link-hover-color: var(--color-text);
  --bs-dropdown-border-color: transparent;
  --bs-dropdown-divider-bg: var(--color-divider);
  --bs-modal-bg: var(--color-surface);
  --bs-modal-color: var(--color-text);
  --bs-modal-border-color: transparent;
  --bs-modal-header-border-color: var(--color-divider);
  --bs-modal-footer-border-color: var(--color-divider);
  --bs-card-bg: var(--color-surface);
  --bs-list-group-bg: transparent;
  --bs-list-group-color: var(--color-text);
  --bs-list-group-border-color: var(--color-divider);
  --bs-table-bg: transparent;
  --bs-table-color: var(--color-text);
  --bs-table-border-color: var(--color-divider);
  --bs-nav-link-color: var(--color-neutral-400);
  --bs-nav-link-hover-color: var(--color-text);
  --bs-pagination-bg: transparent;
  --bs-pagination-color: var(--color-neutral-400);
  --bs-pagination-border-color: var(--color-divider);
  --bs-pagination-hover-bg: color-mix(in srgb, var(--color-text) 7%, transparent);
  --bs-pagination-active-bg: var(--color-accent-900);
  --bs-pagination-active-border-color: var(--color-accent);
  --bs-pagination-active-color: var(--color-accent-200);
}

/* buttons: Myngul's brand buttons take the design's outlined primary / secondary treatment */
body.night-mode .btn { line-height: 1.2; border-radius: var(--radius-md); font-family: var(--font-heading); font-weight: var(--font-heading-weight); min-width: 0; }
body.night-mode .btn-main, body.night-mode .btn-main.show, body.night-mode .btn-main:focus, body.night-mode .btn-primary, body.night-mode .btn-primary.show, body.night-mode .btn-primary:focus,
body.night-mode .btn-main:disabled, body.night-mode .btn-primary:disabled, body.night-mode .btn-main.disabled, body.night-mode .btn-primary.disabled {
  background: transparent; color: var(--color-accent); border: 1px solid var(--color-accent); opacity: 1;
}
body.night-mode .btn-main:hover, body.night-mode .btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); opacity: 1; }
body.night-mode .btn-main:active, body.night-mode .btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
body.night-mode .btn-main:disabled, body.night-mode .btn-primary:disabled, body.night-mode .btn-main.disabled, body.night-mode .btn-primary.disabled { opacity: .45; cursor: not-allowed; }
body.night-mode .btn-gray, body.night-mode .btn-secondary, body.night-mode .btn-light, body.night-mode .btn-outline-secondary {
  background: transparent; color: var(--color-text); border: 1px solid var(--color-divider);
}
body.night-mode .btn-gray:hover, body.night-mode .btn-secondary:hover, body.night-mode .btn-light:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
body.night-mode .btn-danger { background: transparent; color: var(--color-accent-300); border: 1px solid var(--color-accent-700); }
body.night-mode .btn-danger:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent-200); }
body.night-mode .btn-sm { padding: 4px 10px; font-size: 12.5px; }
body.night-mode .btn-lg { padding: 9px 20px; font-size: 15px; }
body.night-mode .btn-close { filter: invert(1) grayscale(1); opacity: .6; }

/* forms: design .input */
body.night-mode .form-control, body.night-mode .form-select, body.night-mode .input-group-text {
  min-height: 36px; padding: 6px 10px; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background-color: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); box-shadow: none;
}
body.night-mode .form-control:hover, body.night-mode .form-select:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
body.night-mode .form-control:focus, body.night-mode .form-select:focus { border-color: var(--color-accent); box-shadow: none; color: var(--color-text); background-color: var(--color-surface); }
body.night-mode .form-control::placeholder { color: var(--color-neutral-500); }
body.night-mode .form-floating > label { color: color-mix(in srgb, var(--color-text) 70%, transparent); }
body.night-mode .form-check-input { background-color: transparent; border-color: var(--color-divider); }
body.night-mode .form-check-input:checked { background-color: var(--color-accent); border-color: var(--color-accent); }
body.night-mode .form-check-input:focus { box-shadow: none; border-color: var(--color-accent); }

/* modals: design .dialog (surface, 14px radius, shadow-lg; bottom sheet on phones) */
body.night-mode .modal-content {
  background: var(--color-surface); color: var(--color-text); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
body.night-mode .modal-content:before { display: none; }
body.night-mode .modal-header, body.night-mode .modal-footer { border-color: var(--color-divider); }
body.night-mode .modal-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; }
.modal-backdrop { --bs-backdrop-bg: var(--color-neutral-900); --bs-backdrop-opacity: .6; backdrop-filter: blur(4px); }
@media (max-width: 575.98px) {
  body.night-mode .modal-dialog { margin: 0; align-items: flex-end; min-height: 100%; }
  body.night-mode .modal-content { border-radius: 22px 22px 0 0; }
}

/* dropdowns + dropdown widgets (notifications, messages, search results): design menu card */
body.night-mode .dropdown-menu {
  padding: 6px; border: 0; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-md); color: var(--color-text);
}
body.night-mode .dropdown-menu .dropdown-item { border-radius: var(--radius-md); padding: 9px 12px; font-size: 14px; color: var(--color-text); }
body.night-mode .dropdown-menu .dropdown-item:hover, body.night-mode .dropdown-menu .dropdown-item:focus { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text); }
body.night-mode .dropdown-menu .dropdown-item.active, body.night-mode .dropdown-menu .dropdown-item:active { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); }
body.night-mode .dropdown-divider { border-color: var(--color-divider); opacity: 1; }
body.night-mode .dropdown-widget { padding: 0; min-width: 380px; overflow: hidden; }
body.night-mode .dropdown-widget-header { padding: 14px 16px; border-bottom: 0; background: linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px; }
body.night-mode .dropdown-widget-header .title { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-neutral-400); font-family: var(--font-body); font-weight: 400; }
body.night-mode .dropdown-widget-footer { padding: 12px 16px; text-align: center; font-size: 13px; color: var(--color-accent); background: none; border: 0; }
body.night-mode .dropdown-widget-footer:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
body.night-mode .dropdown-widget-body li, body.night-mode .dropdown-widget-body .feeds-item { border-radius: var(--radius-md); }
body.night-mode .dropdown-widget-body li:hover, body.night-mode .dropdown-widget-body .feeds-item:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
@media (max-width: 575.98px) { body.night-mode .dropdown-widget { min-width: 0; width: 100vw; } }

/* side widgets (design: 16px card, 10.5px kicker titles) */
.js_sticky-sidebar { display: flex; flex-direction: column; gap: 14px; }
.js_sticky-sidebar > .content, .js_sticky-sidebar > div > .content, body.night-mode .js_sticky-sidebar .content {
  padding: 16px; border: 0; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); margin: 0 0 14px;
}
.np-content .side_widget_title, .np-content .content > .headline-font, .js_sticky-sidebar .side_widget_title {
  font-family: var(--font-body) !important; font-size: 10.5px !important; font-weight: 400 !important; letter-spacing: .16em; text-transform: uppercase; color: var(--color-neutral-400);
}
.js_sticky-sidebar .x_user_info img.rounded-circle { width: 36px; height: 36px; object-fit: cover; background: var(--color-neutral-800); }
.js_sticky-sidebar .x_user_info .fw-semibold, .js_sticky-sidebar .x_user_info a.body-color { font-size: 13.5px; font-weight: 500; }
.js_sticky-sidebar .btn-sm, .js_sticky-sidebar .btn { padding: 4px 10px; font-size: 12.5px; }

/* alerts, badges, tags */
body.night-mode .alert { border: 0; border-radius: var(--radius-md); background: var(--color-neutral-900); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-neutral-800); }
body.night-mode .alert-danger { color: var(--color-accent-300); box-shadow: inset 0 0 0 1px var(--color-accent-800); }
body.night-mode .alert-success, body.night-mode .alert-info, body.night-mode .alert-warning { box-shadow: inset 0 0 0 1px var(--color-accent-800); }
body.night-mode .badge { border-radius: calc(var(--radius-md) * .75); font-weight: 400; letter-spacing: .02em; }
body.night-mode .badge.bg-primary, body.night-mode .badge.bg-main, body.night-mode .badge.bg-danger, body.night-mode .badge.bg-success { background: var(--color-accent-800) !important; color: var(--color-accent-100); }

/* tabs / pills / pagination (design: seg control + accent underline) */
body.night-mode .nav-tabs { border-color: var(--color-divider); }
body.night-mode .nav-tabs .nav-link, body.night-mode .nav-pills .nav-link { color: var(--color-neutral-400); border: 0; border-radius: var(--radius-md); background: none; }
body.night-mode .nav-tabs .nav-link:hover, body.night-mode .nav-pills .nav-link:hover { color: var(--color-text); }
body.night-mode .nav-tabs .nav-link.active, body.night-mode .nav-pills .nav-link.active { color: var(--color-text); background: var(--color-surface); box-shadow: inset 0 -2px 0 var(--color-accent); }
body.night-mode .page-link { border-radius: var(--radius-md); }

/* tables: design .table (fading row rules) */
body.night-mode .table { --bs-table-bg: transparent; font-size: 14px; border-color: transparent; }
body.night-mode .table > :not(caption) > * > * { border-bottom-color: transparent; padding: var(--space-2); background: none; box-shadow: none; }
body.night-mode .table thead th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
body.night-mode .table tbody tr { background: linear-gradient(to right, transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px, color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px; }
body.night-mode .table-hover > tbody > tr:hover > * { background: color-mix(in srgb, var(--color-text) 4%, transparent); color: var(--color-text); }

/* empty states + toasts + progress */
body.night-mode .no-data { background: none; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--color-neutral-800); color: var(--color-neutral-500); }
body.night-mode .toast { background: var(--color-surface); border: 0; border-radius: 12px; box-shadow: var(--shadow-md); color: var(--color-text); }
body.night-mode .progress { background: var(--color-neutral-900); border-radius: 2px; }
body.night-mode .progress-bar { background: var(--color-accent); box-shadow: 0 0 10px rgba(210,160,114,.5); }

/* posts-filter bar above the feed: keep the filter, drop the legacy title (design has none) */
.np-content .posts-filter { padding: 0 0 12px !important; justify-content: flex-end; }
.np-content .posts-filter .side_widget_title { display: none; }
.np-content .posts-filter .btn { color: var(--color-neutral-400); }

/* signed-out page lives in np-auth.css; registration custom fields keep floating labels as label-above-input */
.np-auth .form-floating { display: flex; flex-direction: column-reverse; margin: 0; }
.np-auth .form-floating > label { position: static; height: auto; padding: 0; margin-bottom: 5px; font-size: 12px; transform: none !important; opacity: 1 !important; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.np-auth .form-floating > .form-control, .np-auth .form-floating > .form-select { height: auto; min-height: 36px; padding: 6px 10px; }
.np-auth .form-floating > .form-control::placeholder { color: var(--color-neutral-500); }

/* comments (footer of a post) */
body.night-mode .post-comments .comment .comment-replace, body.night-mode .comment-body { background: var(--color-bg); border-radius: 12px; color: var(--color-text); }
body.night-mode .post-comments textarea, body.night-mode .comment-form textarea { background: var(--color-bg); color: var(--color-text); border-radius: var(--radius-md); }
body.night-mode .post-footer { border-color: transparent; background: linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent) no-repeat top / 100% 1px; }

/* ── profile / page / group / event header (design: profile card — rounded surface, glow cover, overlapping avatar, underline tabs) ── */
body.night-mode .np-content .profile-header, .np-content .profile-header {
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 18px; background: var(--color-surface) !important; box-shadow: var(--shadow-sm); color: var(--color-text);
}
.np-content .profile-cover-wrapper {
  height: auto !important; aspect-ratio: 1296 / 360; min-height: 120px; max-height: 300px; border-radius: 0 !important;
  background: radial-gradient(500px 200px at 80% 0%, rgba(210,160,114,.16), transparent 70%), var(--color-bg);
}
.np-content .profile-cover-wrapper img.js_position-cover-cropped { display: block; }
.np-content .profile-cover-buttons .btn.bg-black { background: color-mix(in srgb, var(--color-neutral-900) 70%, transparent) !important; backdrop-filter: blur(6px); }
.np-content .profile-header > .p-3 { padding: 0 20px 18px !important; display: flex; flex-direction: column; gap: 8px; }
body.night-mode .np-content .profile-avatar-wrapper, .np-content .profile-avatar-wrapper {
  width: 104px; height: 104px; margin-top: -48px; margin-bottom: 4px !important; padding: 0 !important;
  background: var(--color-accent-800) !important; box-shadow: 0 0 0 4px var(--color-surface);
}
.np-content .profile-avatar-wrapper img { object-fit: cover; }
.np-content .profile-avatar-change { bottom: 0; inset-inline-end: 0; }
.np-content .profile-name-wrapper { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.np-content .profile-name-wrapper > a.h3, .np-content .profile-name-wrapper .h3 { font-family: var(--font-heading); font-size: 23px; font-weight: 500 !important; letter-spacing: -.01em; color: var(--color-text); }
.np-content .profile-name-wrapper .verified-badge { color: var(--color-cool); }
.np-content .profile-header > .p-3 > p.text-muted, .np-content .profile-header > .p-3 > .text-muted:first-of-type { font-size: 13.5px; color: var(--color-neutral-500) !important; }
.np-content .profile-header > .p-3 { font-size: 14px; color: var(--color-neutral-300); }
.np-content .profile-header > .p-3 svg { color: var(--color-neutral-500); }
.np-content .profile-header > .p-3 a:not(.btn):not(.body-color):not(.badge) { color: var(--color-accent); }
.np-content .profile-buttons-wrapper { top: 14px; inset-inline-end: 20px; }
.np-content .profile-buttons-wrapper .btn { line-height: 1.2; min-height: 36px; padding: 8px 14px; border-radius: var(--radius-md); font-size: 14px; }
.np-content .profile-header .no-avatar, .np-content .profile-header.no-avatar > .p-3 { padding-top: 16px !important; }

/* tabs: left-aligned underline row with the design's fading top rule; scrolls when long */
body.night-mode .np-content .profile-tabs-wrapper, .np-content .profile-tabs-wrapper {
  top: 64px; z-index: 5; margin: -18px 0 18px; padding: 0 12px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--color-surface) !important;
  background-image: linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent) !important;
  background-repeat: no-repeat !important; background-position: top !important; background-size: 100% 1px !important; background-color: var(--color-surface) !important;
  box-shadow: var(--shadow-sm); overflow-x: auto; scrollbar-width: none;
}
.np-content .profile-header .profile-tabs-wrapper { margin: 0; box-shadow: none; border-radius: 0; }
.np-content .profile-tabs-wrapper::-webkit-scrollbar { display: none; }
.np-content .profile-tabs-wrapper > .d-flex { justify-content: flex-start !important; gap: 2px; flex-wrap: nowrap; }
.np-content .profile-tabs-wrapper > .d-flex > div { flex: none; }
.np-content .profile-tabs-wrapper a { padding: 0 12px; font-size: 14px; font-weight: 400; color: var(--color-neutral-400) !important; background: none !important; white-space: nowrap; }
.np-content .profile-tabs-wrapper a:hover { color: var(--color-text) !important; }
.np-content .profile-tabs-wrapper .active a { color: var(--color-text) !important; }
.np-content .profile-tabs-wrapper a > span { padding: 12px 0 !important; }
.np-content .profile-tabs-wrapper .active a > span { box-shadow: inset 0 -2px 0 var(--color-accent); }
.np-content .profile-tabs-wrapper .active a > span::after, .np-content .profile-tabs-wrapper a > span::before { display: none !important; }
.np-content .profile-tabs-wrapper .fw-semibold { font-weight: 400 !important; }

@media (max-width: 1059.98px) {
  .np-content .profile-header { border-radius: var(--radius-lg); margin-top: 4px; }
  .np-content .profile-buttons-wrapper { position: relative !important; top: auto; inset-inline-end: auto; margin-top: 6px; }
  .np-content .profile-tabs-wrapper { top: 56px; }
}