/*
 * YTHT Reborn Dark Theme
 * 一塌糊涂之重生 — 修仙暗色主题
 *
 * CSS custom properties for consistent theming
 */

:root {
  --ytht-bg-base: #0d0d1a;
  --ytht-bg-surface: #16162e;
  --ytht-bg-elevated: #1a1a38;
  --ytht-bg-nav: #12122a;
  --ytht-bg-deep: #14142c;
  --ytht-text-primary: #c8c8d0;
  --ytht-text-secondary: #888;
  --ytht-text-muted: #666;
  --ytht-accent-gold: #e0c080;
  --ytht-accent-link: #6688cc;
  --ytht-accent-link-hover: #88aaee;
  --ytht-border: #333366;
  --ytht-border-subtle: #2a2a4a;
  --ytht-border-accent: #444488;
}

/* HTC Navbar */
.navbar-htc-display { font-family: "Noto Sans SC", sans-serif; }
.navbar-htc-display a:hover { color: #aabbee !important; }

/* YTHT Dark Theme Override */
body { background-color: var(--ytht-bg-base) !important; color: var(--ytht-text-primary) !important; }
.page-header { background: var(--ytht-bg-nav) !important; border-bottom: 1px solid var(--ytht-border) !important; }
.navbar, .navbar-default { background: var(--ytht-bg-nav) !important; border-color: var(--ytht-border) !important; }
.navbar-default .navbar-nav > li > a { color: var(--ytht-text-primary) !important; }
.navbar-default .navbar-nav > li > a:hover { color: var(--ytht-accent-gold) !important; }
.navbar-default .navbar-brand { color: var(--ytht-accent-gold) !important; }
.page-footer { background: #0a0a18 !important; border-top: 1px solid #222244 !important; }
.page-footer, .page-footer a { color: var(--ytht-text-muted) !important; }

/* Cards & Panels */
.panel, .panel-default { background: var(--ytht-bg-surface) !important; border-color: var(--ytht-border) !important; }
.panel-default > .panel-heading { background: var(--ytht-bg-elevated) !important; border-color: var(--ytht-border) !important; color: var(--ytht-accent-gold) !important; }
.panel-default > .panel-body { color: var(--ytht-text-primary) !important; }
.list-group-item { background: var(--ytht-bg-surface) !important; border-color: var(--ytht-border-subtle) !important; color: var(--ytht-text-primary) !important; }
.list-group-item:hover { background: #1e1e3e !important; }

/* Categories & Threads */
.category-header { color: var(--ytht-accent-gold) !important; }
.threads-list .thread-row { border-color: var(--ytht-border-subtle) !important; }
.threads-list .thread-row:hover { background: var(--ytht-bg-elevated) !important; }
a { color: var(--ytht-accent-link) !important; }
a:hover { color: var(--ytht-accent-link-hover) !important; }

/* Forms & Inputs */
.form-control { background: var(--ytht-bg-elevated) !important; border-color: var(--ytht-border) !important; color: var(--ytht-text-primary) !important; }
.btn-primary { background: var(--ytht-border) !important; border-color: var(--ytht-border-accent) !important; color: var(--ytht-accent-gold) !important; }
.btn-primary:hover { background: var(--ytht-border-accent) !important; }
.btn-default { background: var(--ytht-bg-elevated) !important; border-color: var(--ytht-border) !important; color: var(--ytht-text-primary) !important; }

/* Breadcrumbs */
.breadcrumb { background: var(--ytht-bg-nav) !important; }
.breadcrumb > li > a { color: var(--ytht-accent-link) !important; }
.breadcrumb > .active { color: var(--ytht-text-secondary) !important; }

/* Text Overrides */
h1, h2, h3, h4, h5, h6 { color: var(--ytht-accent-gold) !important; }
.text-muted { color: var(--ytht-text-muted) !important; }
.well { background: var(--ytht-bg-nav) !important; border-color: var(--ytht-border-subtle) !important; }

/* Tables */
.table > thead > tr > th { border-color: var(--ytht-border) !important; color: var(--ytht-accent-gold) !important; }
.table > tbody > tr > td { border-color: var(--ytht-border-subtle) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--ytht-bg-deep) !important; }

/* Alerts */
.alert-info { background: #1a2a3a !important; border-color: #2a4a6a !important; color: #66aacc !important; }
.alert-success { background: #1a2e1a !important; border-color: #2a4e2a !important; color: #66cc88 !important; }
.alert-danger { background: #2e1a1a !important; border-color: #4a2a2a !important; color: #cc6666 !important; }
.alert-warning { background: #2e2a1a !important; border-color: #4a442a !important; color: var(--ytht-accent-gold) !important; }

/* Pagination */
.pagination > li > a { background: var(--ytht-bg-surface) !important; border-color: var(--ytht-border) !important; color: var(--ytht-accent-link) !important; }
.pagination > .active > a { background: var(--ytht-border) !important; border-color: var(--ytht-border-accent) !important; color: var(--ytht-accent-gold) !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--ytht-bg-base); }
::-webkit-scrollbar-thumb { background: var(--ytht-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ytht-border-accent); }

/* Misago React Components */
[class*="page-"] { background: var(--ytht-bg-base) !important; }
.categories-list .category-main { background: var(--ytht-bg-surface) !important; border-color: var(--ytht-border-subtle) !important; }
.categories-list .category-main:hover { background: var(--ytht-bg-elevated) !important; }
.threads-list .thread-main { background: var(--ytht-bg-surface) !important; border-color: var(--ytht-border-subtle) !important; }
.threads-list .thread-main:hover { background: var(--ytht-bg-elevated) !important; }
.posting-dialog, .posting-dialog-body { background: var(--ytht-bg-nav) !important; border-color: var(--ytht-border) !important; }
.posting-dialog textarea { background: var(--ytht-bg-elevated) !important; color: var(--ytht-text-primary) !important; }
.markup-editor { background: var(--ytht-bg-elevated) !important; border-color: var(--ytht-border) !important; }
.markup-editor .toolbar { background: var(--ytht-bg-nav) !important; border-color: var(--ytht-border) !important; }
.markup-editor .toolbar .btn { color: var(--ytht-text-primary) !important; }
.markup-editor .toolbar .btn:hover { background: var(--ytht-border) !important; }

/* Post & Thread Display */
.post { background: var(--ytht-bg-surface) !important; border-color: var(--ytht-border-subtle) !important; }
.post-body { color: var(--ytht-text-primary) !important; }
.post-heading { color: var(--ytht-accent-gold) !important; }
.post-footer { border-color: var(--ytht-border-subtle) !important; }
.post-side { background: var(--ytht-bg-deep) !important; border-color: var(--ytht-border-subtle) !important; }
.post-side .user-title { color: var(--ytht-text-secondary) !important; }
.thread-header { background: var(--ytht-bg-nav) !important; }

/* Modals & Dropdowns */
.modal-content { background: var(--ytht-bg-surface) !important; border-color: var(--ytht-border) !important; }
.modal-header { background: var(--ytht-bg-nav) !important; border-color: var(--ytht-border) !important; color: var(--ytht-accent-gold) !important; }
.modal-footer { background: var(--ytht-bg-nav) !important; border-color: var(--ytht-border) !important; }
.dropdown-menu { background: var(--ytht-bg-surface) !important; border-color: var(--ytht-border) !important; }
.dropdown-menu > li > a { color: var(--ytht-text-primary) !important; }
.dropdown-menu > li > a:hover { background: var(--ytht-bg-elevated) !important; color: var(--ytht-accent-gold) !important; }

/* User Cards & Badges */
.user-card { background: var(--ytht-bg-surface) !important; border-color: var(--ytht-border-subtle) !important; }
.badge { background: var(--ytht-border) !important; color: var(--ytht-accent-gold) !important; }
.label { background: var(--ytht-border) !important; }

/* Selection & Focus */
::selection { background: var(--ytht-border); color: var(--ytht-accent-gold); }
.form-control:focus { border-color: var(--ytht-border-accent) !important; box-shadow: 0 0 0 2px rgba(68,68,136,0.3) !important; }

/* Empty State */
.empty-message { color: var(--ytht-text-muted) !important; }
.page-title { color: var(--ytht-accent-gold) !important; }

/* Button Variants */
.btn { background: var(--ytht-bg-elevated) !important; border-color: var(--ytht-border) !important; color: var(--ytht-text-primary) !important; }
.btn:hover { background: #252545 !important; color: var(--ytht-accent-gold) !important; }
.btn-light, .btn-outline-secondary { background: var(--ytht-bg-elevated) !important; border-color: var(--ytht-border) !important; color: var(--ytht-text-primary) !important; }
.btn-danger { background: #4a1a1a !important; border-color: #662222 !important; color: #cc6666 !important; }
.btn-danger:hover { background: #5a2222 !important; }
.btn-success { background: #1a3a1a !important; border-color: #226622 !important; color: #66cc88 !important; }
.btn-secondary { background: var(--ytht-bg-elevated) !important; border-color: var(--ytht-border-subtle) !important; color: #b0b0c0 !important; }
.btn-link { color: var(--ytht-accent-link) !important; background: transparent !important; border: none !important; }
.btn-icon { color: var(--ytht-text-secondary) !important; }
.btn-icon:hover { color: var(--ytht-accent-gold) !important; }
.btn-block { display: block !important; width: 100% !important; }
.btn-sm { min-height: auto !important; padding: 4px 10px !important; }
.btn-group .btn { border-color: var(--ytht-border) !important; }
.btn-group .btn.active { background: var(--ytht-border) !important; color: var(--ytht-accent-gold) !important; }

/* Forms Extended */
.form-group { margin-bottom: 12px; }
.help-block, .form-text { color: var(--ytht-text-secondary) !important; font-size: 12px; }
.has-error .form-control { border-color: #662222 !important; }
.has-error .help-block { color: #cc6666 !important; }
.input-group { background: transparent !important; }
.input-group-addon, .input-group-text { background: var(--ytht-bg-nav) !important; border-color: var(--ytht-border) !important; color: var(--ytht-text-secondary) !important; }
select.form-control { background: var(--ytht-bg-elevated) !important; color: var(--ytht-text-primary) !important; }
.custom-control-label { color: var(--ytht-text-primary) !important; }
label { color: #b0b0c0 !important; }

/* Posts Feed (thread view) */
.posts-feed-item { background: var(--ytht-bg-surface) !important; border-color: var(--ytht-border-subtle) !important; margin-bottom: 8px; }
[class*="posts-feed-item-post"] { background: var(--ytht-bg-surface) !important; }
.posts-feed-item-post-body { color: var(--ytht-text-primary) !important; }
.posts-feed-item-post-body-footer { border-color: var(--ytht-border-subtle) !important; color: var(--ytht-text-secondary) !important; }
[class*="posts-feed-item-post-bit"] { color: var(--ytht-text-secondary) !important; }
.post-edit-card { background: var(--ytht-bg-nav) !important; border-color: var(--ytht-border) !important; }

/* Thread List Items */
.threads-list-item { background: var(--ytht-bg-surface) !important; border-color: var(--ytht-border-subtle) !important; }
.threads-list-item:hover { background: var(--ytht-bg-elevated) !important; }
[class*="threads-list-item-"] { color: var(--ytht-text-primary) !important; }
.threads-list-blankslate { background: var(--ytht-bg-nav) !important; color: var(--ytht-text-muted) !important; }
.threads-list-category-label { color: var(--ytht-text-secondary) !important; }
.threads-list-category-link { color: var(--ytht-accent-link) !important; }

/* Thread Flags */
[class*="thread-flag-"] { opacity: 0.8; }
.thread-flag-pinned-globally, .thread-flag-pinned-locally { color: var(--ytht-accent-gold) !important; }
.thread-flag-closed { color: #cc6666 !important; }
.thread-flag-hidden, .thread-flag-unapproved { color: var(--ytht-text-secondary) !important; }

/* Badge Variants */
.badge-primary { background: var(--ytht-border) !important; color: var(--ytht-accent-gold) !important; }
.badge-success { background: #1a3a1a !important; color: #66cc88 !important; }
.badge-danger { background: #4a1a1a !important; color: #cc6666 !important; }
.badge-warning { background: #3a3a1a !important; color: var(--ytht-accent-gold) !important; }
.badge-info { background: #1a2a3a !important; color: #66aacc !important; }
.badge-dark { background: #1a1a2e !important; color: var(--ytht-text-primary) !important; }

/* User Components */
.user-card-avatar { border-color: var(--ytht-border) !important; }
.user-card-stats, .user-card-title { color: var(--ytht-text-secondary) !important; }
.user-card-username { color: var(--ytht-accent-gold) !important; }
.user-details { color: var(--ytht-text-primary) !important; }
.users-cards-list .user-card { background: var(--ytht-bg-surface) !important; }

/* Modal Extended */
.modal-body { background: var(--ytht-bg-surface) !important; color: var(--ytht-text-primary) !important; }
.modal-dialog { color: var(--ytht-text-primary) !important; }
.close, .btn-close { color: var(--ytht-text-secondary) !important; opacity: 0.8; }
.close:hover, .btn-close:hover { color: var(--ytht-accent-gold) !important; }

/* Breadcrumbs Extended */
.breadcrumbs-item { color: var(--ytht-text-secondary) !important; }
.breadcrumbs-item a { color: var(--ytht-accent-link) !important; }

/* Blankslate / Empty States */
.blankslate { background: var(--ytht-bg-nav) !important; color: var(--ytht-text-muted) !important; border-color: var(--ytht-border-subtle) !important; }
.blankslate h3, .blankslate h4 { color: var(--ytht-text-secondary) !important; }

/* Progress Bar */
.progress { background: var(--ytht-bg-elevated) !important; }
.progress-bar { background: var(--ytht-border) !important; }

/* Tooltip & Popover */
.tooltip-inner { background: var(--ytht-bg-elevated) !important; color: var(--ytht-text-primary) !important; border: 1px solid var(--ytht-border); }
.popover { background: var(--ytht-bg-surface) !important; border-color: var(--ytht-border) !important; }
.popover-header { background: var(--ytht-bg-nav) !important; color: var(--ytht-accent-gold) !important; border-color: var(--ytht-border) !important; }
.popover-body { color: var(--ytht-text-primary) !important; }

/* Card (Bootstrap 4+) */
.card { background: var(--ytht-bg-surface) !important; border-color: var(--ytht-border-subtle) !important; }
.card-header { background: var(--ytht-bg-nav) !important; border-color: var(--ytht-border) !important; color: var(--ytht-accent-gold) !important; }
.card-body { color: var(--ytht-text-primary) !important; }
.card-footer { background: var(--ytht-bg-nav) !important; border-color: var(--ytht-border) !important; }

/* Nav Tabs / Pills */
.nav-tabs { border-color: var(--ytht-border) !important; }
.nav-tabs .nav-link { color: var(--ytht-text-secondary) !important; }
.nav-tabs .nav-link.active { background: var(--ytht-bg-surface) !important; border-color: var(--ytht-border) !important; color: var(--ytht-accent-gold) !important; }
.nav-tabs .nav-link:hover { border-color: var(--ytht-border-accent) !important; color: var(--ytht-text-primary) !important; }
.nav-pills .nav-link.active { background: var(--ytht-border) !important; color: var(--ytht-accent-gold) !important; }

/* Text Utilities */
.text-danger { color: #cc6666 !important; }
.text-success { color: #66cc88 !important; }
.text-warning { color: var(--ytht-accent-gold) !important; }
.text-info { color: #66aacc !important; }
.text-primary { color: var(--ytht-accent-link) !important; }
.text-secondary { color: var(--ytht-text-secondary) !important; }
.text-small, small { color: var(--ytht-text-secondary) !important; }

/* Misago Site Nav */
.site-nav, .nav-container { background: var(--ytht-bg-nav) !important; }
.site-nav a { color: var(--ytht-text-primary) !important; }
.site-nav a:hover, .site-nav a.active { color: var(--ytht-accent-gold) !important; }
.navbar-branding { color: var(--ytht-accent-gold) !important; }

/* Misago Agreement/ToS */
[class*="agreement-"] { background: var(--ytht-bg-surface) !important; color: var(--ytht-text-primary) !important; }

/* Misago Message */
[class*="message-"] { color: var(--ytht-text-primary) !important; }

/* Code Blocks in Posts */
pre, code { background: var(--ytht-bg-nav) !important; color: #66cccc !important; border-color: var(--ytht-border) !important; }
blockquote { border-left: 3px solid var(--ytht-border) !important; color: #999 !important; background: var(--ytht-bg-nav) !important; padding: 8px 16px !important; }

/* HR Dividers */
hr { border-color: var(--ytht-border-subtle) !important; }

/* Misago Posting Dialog Extended */
.posting-dialog-header { background: var(--ytht-bg-nav) !important; color: var(--ytht-accent-gold) !important; }
.posting-dialog-close { color: var(--ytht-text-secondary) !important; }
.posting-dialog-close:hover { color: #cc6666 !important; }

/* Mobile Responsive (portrait phones) */
@media (max-width: 480px) {
  .ytht-ascii-title { display: none !important; }
  .ytht-mobile-title { display: block !important; }
  .ytht-welcome { padding: 12px !important; }
  .navbar-htc-display { font-size: 11px !important; gap: 4px !important; }
  .htc-nav-game-link { display: none !important; }
  .posting-dialog { position: fixed !important; top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important; margin: 0 !important; border-radius: 0 !important; }
  .posting-dialog textarea { min-height: 120px !important; font-size: 16px !important; }
  .form-control { font-size: 16px !important; }
  .btn { min-height: 44px !important; padding: 8px 16px !important; }
  .btn-primary { font-size: 14px !important; }
}

/* Tablet & small desktop */
@media (max-width: 768px) {
  .ytht-ascii-title pre { font-size: 9px !important; }
  .navbar-htc-display { font-size: 12px !important; }
  .post-side { display: none !important; }
  .post { padding: 8px !important; }
}

/* Touch-friendly targets */
@media (hover: none) and (pointer: coarse) {
  .btn, .pagination > li > a { min-height: 44px !important; }
  .dropdown-menu > li > a { padding: 10px 16px !important; }
  a { padding: 2px 0; }
}