/* Shared component rules live in main.css. Only palette changes and
   remaining legacy/component exceptions belong here. */
html.dark {
  color-scheme: dark;
  --shadow: #111116;
  --canvas: #191c1f;
  --surface: #1b1e20;
  --surface-2: #242628;
  --inset: #191c20;
  --header: #17191c;
  --header-surface: var(--header);
  --text: #edf0f3;
  --muted: #abb1ba;
  --faint: #7f8792;
  --contrast-surface: #111116;
  --warn: rgb(249,174,88);
  --danger: rgb(236,95,102);
  --border: #41474f;
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-faint: var(--border);
  --accent-strong: rgb(42,79,97);
  --accent: #8fa9bd;
  --accent-hover: #b7cad8;
  --message-surface: var(--surface-2);
  --customer-message-surface: var(--accent-strong);
  --message-border: var(--border);
  --page-surface: var(--canvas);
  --empty-canvas: var(--canvas);
  --panel-surface: var(--surface);
  --panel-border: var(--border-soft);
  --header-border: var(--border-soft);
  --footer-surface: var(--header);
  --footer-bottom-surface: var(--header);
  --footer-link: var(--muted);
  --footer-link-hover: var(--accent-hover);
  --footer-bottom-link-hover: var(--accent-hover);
  --footer-heading: var(--faint);
  --menu-surface: var(--surface-2);
  --menu-border: var(--border);
  --menu-divider: var(--border-soft);
  --control-surface: var(--inset);
  --control-focus-border: var(--accent);
  --control-focus-shadow: 0 0 0 2px rgba(143, 169, 189, 0.16);
  --caption-text: var(--text);
  --caption-shadow: none;
  --theme-toggle-border: var(--border);
  --theme-toggle-text: var(--muted);
  --theme-toggle-hover-border: var(--accent);
  --theme-toggle-hover-text: var(--accent-hover);
  background: var(--canvas);
}

/* Legacy canvas layers, header effects, and navigation. */
html.dark #pageWrap { min-height: 100vh; }
html.dark .contentWrap, html.dark #mainCol, html.dark #pjax-container { background: var(--canvas); }
html.dark #headerWrap { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03); }
html.dark #header .logo { opacity: 0.96; }
html.dark .site-nav a { color: var(--muted); text-shadow: none; }
html.dark .site-nav a:hover, html.dark .site-nav a.current { color: var(--text); }
html.dark #footerWrap { border-top: 1px solid var(--border-soft); }
html.dark .leftNav { background: var(--surface); border-color: var(--border-soft); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); }
html.dark .leftNav a, html.dark .leftNav span { color: var(--muted); text-shadow: none; font-weight: 500; }
html.dark .leftNav a:hover, html.dark .leftNav a.linkAdd:hover { color: var(--accent-hover); background-color: rgba(143, 169, 189, 0.08); }
html.dark .leftNav a.linkAdd { color: var(--accent); }
html.dark .leftNav li.linkBorder { border-color: var(--border-soft); }
html.dark .leftNav .linkPart a.mainLink:hover,
html.dark .leftNav .linkFull a.mainLink:hover { color: var(--accent); cursor: pointer; }

/* Legacy typography selectors still override inherited colors. */
html.dark h1, html.dark h2, html.dark h3, html.dark h5, html.dark h6, html.dark strong { color: var(--text); }
html.dark a, html.dark .contentBox a { color: var(--accent); }
html.dark a:hover, html.dark .contentBox a:hover { color: var(--accent-hover); }
html.dark .summaryTitle a, html.dark .txt15, html.dark .seqNav a { color: var(--text); }
html.dark .summaryTitle a:hover, html.dark .txt15:hover { color: var(--accent-hover); }
html.dark .contentBoxHeader, html.dark .contentBoxHeaderLink1 { border-color: var(--border-soft); color: var(--text); }
html.dark .contentBoxFooter { border-top-color: var(--border-soft); }
html.dark .contentBox .hub-block-title { background-color: var(--accent-strong); }
html.dark .contentBox .hub-block-title.small-block,
html.dark .contentBox .member-list-tools.hub-block-title.small-block { background: var(--surface-2); border-color: var(--border-soft); color: var(--text); }
html.dark .rowItem, html.dark .buggybox { background: transparent; }
html.dark .rowItem.alternateItem { background: rgb(255,255,255,0.03); }
html.dark .replyPost, html.dark form.reply_form { border-color: var(--border-soft); }
html.dark .postMeta ul.active li { color: var(--text); }
html.dark .postMeta ul.active li:hover { background: var(--surface); }

/* Controls with more specific legacy or third-party styles. */
html.dark input[type=text], html.dark input[type=password], html.dark input[type=email],
html.dark input[type=number], html.dark input[type=url], html.dark textarea, html.dark select {
  background: var(--inset); color: var(--text); box-shadow: none;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: var(--faint); }
html.dark input[type=text]:focus, html.dark input[type=password]:focus, html.dark input[type=email]:focus,
html.dark textarea:focus, html.dark select:focus {
  background: var(--inset); border-color: var(--control-focus-border); box-shadow: var(--control-focus-shadow); outline: none;
}
html.dark .contentBoxFooter a:hover, html.dark a.add-hub-link:hover { color: var(--text); text-shadow: none; background: var(--surface-2); }
html.dark .linkBorder { background: var(--border); }
html.dark .tab-links { border-color: var(--border); }
html.dark .centerLineLight { background: var(--border); border-color: var(--border); }
html.dark .contentBox a.btn, html.dark .btn { background: var(--inset); border-color: var(--border); }
html.dark .btn:hover { color: var(--accent-hover); border-color: var(--accent-hover); }
html.dark .hub-avatar-set-chooser a.selected { background-color: var(--bright); }
html.dark .unviewed .postText p, html.dark .unviewed .postText p * { color: #ccc; }
html.dark form#login { background: var(--surface); border-color: var(--border-soft); color: var(--text); }
html.dark .translucent-form textarea, html.dark .translucent-form input { color: var(--text); }
html.dark .linkHolder, html.dark .photoViewer { background: none; border-color: var(--border); }
html.dark .replyPost.dynamic textarea { border-color: var(--border); }
html.dark .big.button:not(.green), html.dark a.button:not(.green), html.dark button:not(.green) { color: var(--text); }
html.dark .big.button:not(.green):hover, html.dark a.button:not(.green):hover, html.dark button:not(.green):hover { color: var(--accent-hover); }

/* Tables, notices, menus and avatars. */
html.dark table th { background: var(--surface-2); border-color: var(--border-soft); color: var(--text); }
html.dark table td { border-color: var(--border-soft); }
html.dark #member-list-container a { color: var(--accent); }
html.dark #member_list tbody tr:hover, html.dark .hub-settings tbody tr:hover { background: var(--border-soft); }
html.dark table tr:hover td { background: rgba(143, 169, 189, 0.06); }
html.dark .memberAvatar, html.dark a.remove-card { background: var(--surface-2); border-color: var(--border); color: var(--muted); }
html.dark .unviewed-count.unviewed a, html.dark .tab-link, html.dark h1.homeHeader, html.dark .leftNav a { text-shadow: 0 1px var(--shadow); }
html.dark .testimonial-wrapper .testimonial { box-shadow: 0 5px 25px rgba(255,255,255,0.05); }
html.dark .testimonial-wrapper .testimonial .quote { color: #e9e8e4; }
html.dark .testimonial-arrow { background: #1b1c1d; }
html.dark .card-row { border-bottom-color: var(--border-soft); }
html.dark #head-flash .flash { background: var(--surface-2); border-color: var(--border); color: var(--text); }
html.dark #member_list td, html.dark .hub-settings td { border-top: dotted 1px var(--border); }
html.dark #head-flash .flash .dismiss { color: var(--muted); }
html.dark .admin-tool .export-counts, html.dark #mayflower-import .export-counts { border-top-color: var(--border-soft); color: var(--muted); }
html.dark .tag-input-container, html.dark .tag-input-autocomplete, html.dark dialog.reveal-modal { background: var(--surface); border-color: var(--border); color: var(--text); }
html.dark .tag-input-tag { background: rgba(143, 169, 189, 0.12); border-color: rgba(143, 169, 189, 0.32); color: var(--text); }
html.dark .tag-input-suggestion:hover, html.dark .tag-input-suggestion.active { background: var(--surface-2); }
html.dark dialog.reveal-modal::backdrop { background: rgba(8, 10, 12, 0.78); }
html.dark dialog.reveal-modal .close-reveal-modal:hover { color: var(--text); background: var(--danger); }
html.dark .hero-bg { opacity: 0.7; }
html.dark .payment-warning { background: #3a2527; border-color: #82434a; }
html.dark .payment-warning h1 { background: #8f3943; color: #fff3f3; }
html.dark .payment-warning p { color: #e4b8bd; }
html.dark .payment-warning p.pay-for-hub a { background: #b84a54; color: #fff3f3; }
html.dark .payment-warning p.pay-for-hub a:hover { background: #cc5963; }
html.dark .profileTabs a { background: none; border: solid 1px var(--border); color: var(--text); cursor: pointer; }
html.dark .profileTabs a.active { background: var(--accent-strong); }
html.dark .profileTabs a:hover { background: var(--accent-strong); color: var(--text); text-decoration: none; }
html.dark .LNBtm a { border-color: var(--border); }
html.dark .fileUpload a { background: none; border: solid 1px var(--border); }

/* Calendar and selected states still have component-specific palettes. */
html.dark .toggleLink, html.dark .toggleLink.selected, html.dark .tab-link, html.dark .tab-link.selected { background: var(--surface-2); border-color: var(--border-soft); text-shadow: none; }
html.dark .contentBox .toggleLink a, html.dark .contentBox a.tab-link { color: var(--accent); }
html.dark .toggleLink.selected, html.dark .tab-link.selected { background: var(--surface); }
html.dark body.calendar .contentBox { background: var(--surface); }
html.dark .calendar-month, html.dark .small-calendar.calendar-month { background: var(--surface); border-color: var(--border-soft); }
html.dark .day, html.dark .small-calendar.calendar-month .day { background: var(--surface); border-color: var(--border-soft); color: var(--muted); }
html.dark .small-calendar.calendar-month .day.day-name,
html.dark .small-calendar.calendar-month .day.day-name:hover { background: var(--accent-strong); color: var(--muted); }
html.dark .day:hover { background: var(--surface-2); }
html.dark .day.next-month, html.dark .day.previous-month { background: #24282d; }
html.dark .day.day-name { background-color: var(--border); }
html.dark .small-calendar .day-number { color: var(--muted); font-size: 15px; }
html.dark .day a.new-event { background: var(--surface-2); border-color: var(--border); color: var(--accent); }
html.dark .year-month-picker { background: var(--surface-2); border-color: var(--border); }
html.dark .tooltip { background: var(--inset); }
html.dark .searchResult .view-post { background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgb(29, 29, 29) 36%); }
html.dark .searchResult { border-color: var(--border); }
html.dark #oldest_first.selected, html.dark div#recent_link.selected,
html.dark #newest_first.selected, html.dark div#unread_link.selected { border: solid 1px #505557; border-width: 1px 1px 0px 1px; }
html.dark img { opacity: 0.96; }