/* Global Merge appearance layer. The existing stylesheet remains the light-theme source of truth. */
:root {
  --bg-page: #f7f8fc;
  --bg-surface: #ffffff;
  --bg-surface-secondary: #f8f9fc;
  --bg-elevated: #ffffff;
  --text-primary: #171b2b;
  --text-secondary: #69758d;
  --text-muted: #9299a8;
  --border-primary: #dfe3eb;
  --border-subtle: #eceef2;
  --accent: #6d5ef8;
  --accent-hover: #5d4fec;
  --accent-soft: #eeeaff;
  --success: #18a966;
  --success-soft: #d8f8e8;
  --warning: #e99700;
  --warning-soft: #fff1ce;
  --danger: #d84d55;
  --danger-soft: #ffe8e8;
  --info: #3478df;
  --info-soft: #e7f1ff;
  --input-bg: #ffffff;
  --input-border: #dfe3eb;
  --card-bg: #ffffff;
  --interactive-surface-hover: #faf9ff;
  --sidebar-bg: #ffffff;
  --overlay: rgba(20, 24, 38, .48);
  --shadow: 0 8px 28px rgba(24, 31, 51, .08);
}

html[data-theme="dark"] {
  --bg-page: #0d0f15;
  --bg-surface: #171b25;
  --bg-surface-secondary: #1c2130;
  --bg-elevated: #202636;
  --text-primary: #f1f3f8;
  --text-secondary: #aeb6c7;
  --text-muted: #7f899d;
  --border-primary: #2a3141;
  --border-subtle: #232a39;
  --accent: #7465ff;
  --accent-hover: #897cff;
  --accent-soft: #24213f;
  --success: #35cf82;
  --success-soft: #123c2b;
  --warning: #ffb321;
  --warning-soft: #3a2c13;
  --danger: #ff7279;
  --danger-soft: #402126;
  --info: #6aa1ff;
  --info-soft: #192d4c;
  --input-bg: #121620;
  --input-border: #333b4d;
  --card-bg: #171b25;
  --interactive-surface-hover: #1c212d;
  --sidebar-bg: #11141c;
  --overlay: rgba(2, 4, 9, .76);
  --shadow: 0 12px 34px rgba(0, 0, 0, .28);
  --lavender: #151528;
  --surface: var(--bg-page);
  --white: var(--bg-surface);
  --primary: var(--accent);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border-primary);
  --icon-bg: #23263d;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  color: var(--text-primary);
  background: var(--bg-page);
}

@media (prefers-reduced-motion: no-preference) {
  body,
  .search-page,
  .search-sidebar,
  input,
  textarea,
  select,
  button,
  [class*="card"],
  [class*="panel"],
  [class*="modal"] {
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }
}

/* App shell and navigation */
html[data-theme="dark"] :where(.page-shell, .action-panel, .search-page, .search-workspace, .events-workspace, .chats-workspace, .projects-workspace, .profile-workspace, .settings-workspace) {
  color: var(--text-primary);
  background: var(--bg-page);
}

html[data-theme="dark"] :where(.story-panel, .search-sidebar) {
  color: var(--text-primary);
  border-color: var(--border-primary);
  background: var(--sidebar-bg);
}

html[data-theme="dark"] .search-navigation button {
  color: var(--text-secondary);
}

html[data-theme="dark"] .search-navigation button:not(.active) svg path {
  stroke: var(--text-secondary) !important;
}

html[data-theme="dark"] .search-navigation button:is(:hover, .active) {
  color: #8f82ff;
  background: var(--accent-soft);
}

html[data-theme="dark"] :where(.sidebar-user small, .project-profile-progress span, .project-profile-progress b) {
  color: var(--text-muted);
}

html[data-theme="dark"] .project-profile-progress {
  border-color: #3a345d;
  background: #eae7ff;
}

/* Shared typography */
html[data-theme="dark"] :where(.search-workspace, .events-workspace, .chats-workspace, .projects-workspace, .profile-workspace, .settings-workspace, .dialog, .registration-card, .autocomplete-list) :where(h1, h2, h3, strong, label) {
  color: var(--text-primary);
}

html[data-theme="dark"] :where(.search-workspace, .events-workspace, .chats-workspace, .projects-workspace, .profile-workspace, .settings-workspace) :where(p, small) {
  color: var(--text-secondary);
}

/* Shared elevated surfaces */
html[data-theme="dark"] :where(
  .registration-card, blockquote, .feature-compact, .complete-action,
  .search-filter-card, .search-mode-tabs, .person-card, .insight-card, .search-empty,
  .events-search-panel, .current-event-card, .events-promo-card, .event-card, .event-side-card, .events-cta-card, .events-empty,
  .event-detail-hero, .event-detail-section, .event-seekers-panel, .event-seeker-card, .event-detail-empty, .event-detail-state,
  .dialogs-panel, .chats-header, .chat-conversation-header, .chat-composer,
  .projects-header, .projects-stats, .projects-toolbar, .project-card, .project-detail-hero, .project-detail-panel, .projects-empty,
  .profile-hero-card, .profile-panel, .profile-loading, .profile-error,
  .settings-group, .settings-row,
  .chat-modal, .project-modal, .profile-modal, .settings-modal, .dialog, .autocomplete-list, .search-filter-menu
) {
  color: var(--text-primary);
  border-color: var(--border-primary);
  background: var(--card-bg);
  box-shadow: var(--shadow);
}

html[data-theme="dark"] :where(.settings-row + .settings-row, .recommended-person + .recommended-person, .recent-card > div + div, .dialog-item + .dialog-item) {
  border-color: var(--border-subtle);
}

/* Clickable surface rows should lift only slightly instead of flashing light. */
html[data-theme="dark"] .settings-row.settings-link-row:hover {
  color: var(--text-primary);
  background: var(--interactive-surface-hover);
}

/* Kazakh labels are often longer; keep controls inside their existing responsive containers. */
html[lang="kk"] :where(button, .settings-row strong, .settings-row p, .settings-row small, .search-navigation span, .person-actions button, .event-card button, .project-card button, .profile-panel button) {
  white-space: normal;
  overflow-wrap: anywhere;
}

html[lang="kk"] :where(.settings-row, .person-actions, .event-card footer, .project-card footer, .profile-hero-actions) > * {
  min-width: 0;
}

html[lang="kk"] :where(.settings-select, .settings-select select) {
  max-width: 100%;
}

/* Inputs, dropdowns and form controls */
html[data-theme="dark"] :where(input, textarea, select, .signup-field > input, .password-wrap input, .birthday-fields input, .code-fields input, .skill-search input, .study-search input, .custom-interest-row input, .autocomplete > input, .projects-toolbar input, .chat-composer textarea, .profile-modal-form input, .profile-modal-form textarea, .profile-modal-form select, .project-modal-form input, .project-modal-form textarea, .project-modal-form select, .settings-modal-form input) {
  color: var(--text-primary);
  border-color: var(--input-border);
  background: var(--input-bg);
  caret-color: var(--accent);
}

html[data-theme="dark"] :where(input, textarea)::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

html[data-theme="dark"] select {
  color-scheme: dark;
}

html[data-theme="dark"] :where(input, textarea, select):focus-visible {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 44%, transparent);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

html[data-theme="dark"] :where(input, textarea, select):disabled {
  color: #6f788b;
  background: #151923;
}

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill {
  -webkit-text-fill-color: var(--text-primary);
  box-shadow: 0 0 0 1000px var(--input-bg) inset;
  transition: background-color 9999s ease-out;
}

/* Neutral buttons, tabs, chips and rows */
html[data-theme="dark"] :where(
  .secondary-button, .social-button, .complete-action-button,
  .filter-row button, .popular-tags button, .sort-tabs button, .search-clear,
  .events-filter-button, .events-filter-tags button, .events-sort button, .events-load-more, .events-filter-popover button,
  .current-event-actions button, .promo-footer button, .event-card footer button, .event-detail-actions a, .event-detail-actions button, .event-seeker-card button,
  .project-filter-tabs button, .projects-sort, .project-view-tabs button, .projects-header-actions button, .project-card footer button, .project-owner-actions button, .project-status-actions button, .project-task > button, .project-resource-button,
  .profile-hero-actions button, .profile-add-project, .profile-link-item > button, .profile-modal-actions button,
  .settings-outline-action, .settings-select select, .settings-modal-actions button,
  .chat-load-older, .chat-history-empty button, .recommended-person button, .insight-link, .person-actions button,
  .admission-options button, .interest-options button, .skill-options button, .referral-options button, .study-country-option
) {
  color: var(--text-secondary);
  border-color: var(--border-primary);
  background: var(--bg-elevated);
}

html[data-theme="dark"] :where(.filter-row button, .popular-tags button, .sort-tabs button, .events-filter-tags button, .events-sort button, .project-filter-tabs button, .project-view-tabs button):is(:hover, .active, .selected) {
  color: #9185ff;
  border-color: #665bc5;
  background: var(--accent-soft);
}

html[data-theme="dark"] :where(button, a):focus-visible {
  outline: 2px solid #9d93ff;
  outline-offset: 2px;
}

/* Secondary surfaces and data rows */
html[data-theme="dark"] :where(
  .search-input-row label, .person-project, .skill-cloud > span, .stats-card > div,
  .event-detail-facts > div, .deadline-card > div, .recommended-events-card > div, .events-stats-grid span,
  .dialog-summary, .dialog-list-item, .active-discussions span, .chat-empty-state, .chat-messages, .chat-user-results button, .chat-system-message,
  .project-card-activity, .project-detail-empty, .project-task, .project-resource-list a, .project-user-results > button,
  .profile-hero-avatar, .profile-skill-chips span, .profile-project-row, .profile-achievements-card li, .profile-link-item
) {
  color: var(--text-secondary);
  border-color: var(--border-subtle);
  background: var(--bg-surface-secondary);
}

html[data-theme="dark"] :where(.person-tags span, .event-labels span, .event-member-skills span, .event-required-skills span, .project-card header p span, .review-chips > span) {
  color: var(--text-secondary);
  background: #222838;
}

html[data-theme="dark"] :where(.person-interests span, .profile-skill-chips span.selected, .profile-skill-chips span[data-selected="true"]) {
  color: #998fff;
  border-color: #524a96;
  background: #272445;
}

/* Semantic statuses retain meaning with dark soft backgrounds. */
html[data-theme="dark"] :where(.availability.available, .event-status.open, .event-detail-status.open, .project-status-badge.active, .recent-card em) { color: var(--success); background: var(--success-soft); }
html[data-theme="dark"] :where(.event-status.soon, .event-detail-status.soon, .task-priority.high) { color: var(--warning); background: var(--warning-soft); }
html[data-theme="dark"] :where(.availability.busy, .event-status.closed, .event-detail-status.closed) { color: var(--danger); background: var(--danger-soft); }
html[data-theme="dark"] :where(.availability.open, .project-status-badge.prepare, .project-status) { color: var(--info); background: var(--info-soft); }
html[data-theme="dark"] :where(.event-status.finished, .event-detail-status.finished, .project-status-badge.finished) { color: var(--text-muted); background: #252b38; }

/* Profile */
html[data-theme="dark"] .profile-hero-card {
  background: #181d27;
}

html[data-theme="dark"] :where(.profile-panel h2, .profile-hero-copy h1, .profile-project-row strong, .profile-achievements-card strong) {
  color: var(--text-primary);
}

html[data-theme="dark"] :where(.profile-completion-track, .project-card-progress, .progress-track) {
  background: #303747;
}

html[data-theme="dark"] .profile-hero-avatar {
  color: #d8dce6;
  background: #9da6b6;
}

/* Messenger keeps sent and received bubbles distinct. */
html[data-theme="dark"] :where(.dialogs-panel, .chat-conversation) {
  border-color: var(--border-primary);
  background: var(--bg-page);
}

html[data-theme="dark"] :where(.dialog-list-item:hover, .dialog-list-item.active) {
  background: #202637;
}

html[data-theme="dark"] .chat-message.theirs > div {
  color: var(--text-primary);
  border-color: var(--border-primary);
  background: #202635;
}

html[data-theme="dark"] .chat-message.mine > div {
  color: #ffffff;
  border-color: #7465ff;
  background: #6657ee;
}

html[data-theme="dark"] .chat-message.mine p,
html[data-theme="dark"] .chat-message.mine strong {
  color: #ffffff;
}

/* Settings and destructive actions */
html[data-theme="dark"] .settings-switch i {
  border-color: var(--border-primary);
  background: #303747;
}

html[data-theme="dark"] .settings-switch input:checked + i {
  background: var(--accent);
}

html[data-theme="dark"] :where(.settings-danger-section .settings-group, .settings-modal-actions button.danger, .profile-modal-actions .danger) {
  color: var(--danger);
  border-color: #67333b;
  background: var(--danger-soft);
}

html[data-theme="dark"] :where(.dialog-backdrop, .chat-modal-backdrop, .project-modal-backdrop, .profile-modal-backdrop, .settings-modal-backdrop) {
  background: var(--overlay);
}

/* Loading, empty and error states */
html[data-theme="dark"] :where(.events-loading, .search-skeleton, .profile-loading) {
  color: var(--text-secondary);
  background: linear-gradient(90deg, #171b25, #222838, #171b25);
}

html[data-theme="dark"] :where(.form-error, .settings-feedback.error, [data-settings-form-error], .project-modal-feedback.error, .profile-modal-feedback.error) {
  color: #ff8990;
}

html[data-theme="dark"] ::selection {
  color: #ffffff;
  background: #5f51db;
}

html[data-theme="dark"] * {
  scrollbar-color: #3b4354 #121620;
}

html[data-theme="dark"] *::-webkit-scrollbar-track { background: #121620; }
html[data-theme="dark"] *::-webkit-scrollbar-thumb { border-radius: 99px; background: #3b4354; }

@media (max-width: 760px) {
  html[data-theme="dark"] :where(.search-sidebar, .chats-header, .chat-conversation-header) {
    background: var(--sidebar-bg);
  }
}