/*
 * Hiếu's Habitica theme.
 *
 * Light keeps upstream colors. Dark is a purple-black surface with the same
 * brand header. Task value colors (red → orange → yellow → green → blue)
 * are NOT recolored: those strips stay the Habitica scale so a glance still
 * reads strength. Pixel-art <img> sprites are not filtered.
 *
 * Custom tabs must use the variables below for both themes. Do not hardcode
 * a light-only background in custom UI.
 */

:root,
html[data-theme="light"] {
  --h-bg: #f9f9f9;
  --h-surface: #ffffff;
  --h-surface-2: #edecec;
  --h-text: #1a181d;
  --h-muted: #4e4a57;
  --h-border: #e1e0e3;
  --h-header: #36205d;
  --h-header-text: #d5c8ff;
  --h-accent: #6133b4;
  --h-card: #ffffff;
  --h-input: #ffffff;
  --h-link: #4f2a93;
  --h-shadow: 0 2px 2px rgba(26, 24, 29, 0.16);
  color-scheme: light;
}

html[data-theme="dark"] {
  --h-bg: #16121c;
  --h-surface: #221b30;
  --h-surface-2: #2c2340;
  --h-text: #f6f2fc;
  --h-muted: #d4c8ea;
  --h-border: #5a4c78;
  --h-header: #241536;
  --h-header-text: #f3e9ff;
  --h-accent: #d5c8ff;
  --h-card: #2c2340;
  --h-input: #1b1528;
  --h-link: #e4d4ff;
  --h-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
  background-color: var(--h-bg);
}

html[data-theme="dark"] body {
  background: var(--h-bg) !important;
  color: var(--h-text);
}

html[data-theme="dark"] #loading-screen,
html[data-theme="dark"] #loading-screen-inapp {
  background-color: var(--h-header) !important;
  color: var(--h-header-text) !important;
}

/* Brand bar stays purple, darkened so it sits in the dark page. */
html[data-theme="dark"] #app-header,
html[data-theme="dark"] #habitica-menu,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .navbar-collapse,
html[data-theme="dark"] .top-bar {
  background-color: var(--h-header) !important;
  color: var(--h-header-text) !important;
  border-color: transparent !important;
}

html[data-theme="dark"] #app-header a,
html[data-theme="dark"] #habitica-menu a,
html[data-theme="dark"] .navbar .nav-link,
html[data-theme="dark"] .menu-item {
  color: var(--h-header-text);
}

html[data-theme="dark"] .standard-page,
html[data-theme="dark"] .static-view,
html[data-theme="dark"] #app {
  background-color: var(--h-bg);
  color: var(--h-text);
}

html[data-theme="dark"] .standard-sidebar,
html[data-theme="dark"] .tasks-list,
html[data-theme="dark"] .column-background {
  background: var(--h-surface) !important;
  color: var(--h-text);
}

html[data-theme="dark"] .column-title,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .sub-header,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3 {
  color: var(--h-accent);
}

html[data-theme="dark"] .filter {
  color: var(--h-muted) !important;
}

html[data-theme="dark"] .filter.active,
html[data-theme="dark"] .filter:hover {
  color: var(--h-accent) !important;
  border-bottom-color: var(--h-accent) !important;
}

/* Task cards. Colored score controls keep their own backgrounds. */
html[data-theme="dark"] .task {
  background: var(--h-card) !important;
  color: var(--h-text);
  box-shadow: var(--h-shadow);
}

html[data-theme="dark"] .task .task-content,
html[data-theme="dark"] .task .task-title,
html[data-theme="dark"] .task .task-notes,
html[data-theme="dark"] .task .checklist-item,
html[data-theme="dark"] .task .markdown,
html[data-theme="dark"] .task .markdown p {
  color: var(--h-text);
}

html[data-theme="dark"] .task .checklist-item-done,
html[data-theme="dark"] .task .small-text,
html[data-theme="dark"] .column-background h3,
html[data-theme="dark"] .column-background .small-text {
  color: var(--h-muted) !important;
}

html[data-theme="dark"] .quick-add {
  background: var(--h-input) !important;
  color: var(--h-text) !important;
  border-color: var(--h-border) !important;
}

html[data-theme="dark"] .quick-add::placeholder {
  color: var(--h-muted);
}

html[data-theme="dark"] .quick-add:focus,
html[data-theme="dark"] .quick-add:active {
  background: var(--h-input) !important;
  color: var(--h-text) !important;
  border-color: var(--h-accent) !important;
}

html[data-theme="dark"] .quick-add-tip {
  color: var(--h-muted);
}

html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-footer {
  background-color: var(--h-surface) !important;
  color: var(--h-text) !important;
  border-color: var(--h-border) !important;
}

html[data-theme="dark"] .modal-dialog .title,
html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .dialog-title {
  color: var(--h-accent) !important;
}

html[data-theme="dark"] .modal-dialog .text,
html[data-theme="dark"] .dialog-disclaimer {
  color: var(--h-muted) !important;
}

html[data-theme="dark"] .modal-backdrop {
  background-color: #0c0a12 !important;
}

html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .popover-body,
html[data-theme="dark"] .b-dropdown-form,
html[data-theme="dark"] .habitica-menu-dropdown .dropdown-menu {
  background-color: var(--h-surface-2) !important;
  color: var(--h-text) !important;
  border-color: var(--h-border) !important;
}

html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .dropdown-header {
  color: var(--h-text) !important;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .dropdown-item.active {
  background-color: #3a2d55 !important;
  color: var(--h-header-text) !important;
}

html[data-theme="dark"] .tooltip-inner {
  background-color: #3a2d55;
  color: var(--h-text);
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select {
  background-color: var(--h-input) !important;
  color: var(--h-text) !important;
  border-color: var(--h-border) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #b7a9d4;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: var(--h-accent) !important;
  box-shadow: 0 0 0 1px var(--h-accent);
}

html[data-theme="dark"] .table,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .settings-label,
html[data-theme="dark"] .settings-value {
  color: var(--h-text) !important;
  border-color: var(--h-border) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .well,
html[data-theme="dark"] .box {
  background-color: var(--h-card) !important;
  color: var(--h-text) !important;
  border-color: var(--h-border) !important;
}

html[data-theme="dark"] a {
  color: var(--h-link);
}

html[data-theme="dark"] a:hover {
  color: #ffffff;
}

html[data-theme="dark"] .close,
html[data-theme="dark"] .btn-close {
  color: var(--h-text);
  opacity: 0.85;
}

html[data-theme="dark"] .notification-holder .notification,
html[data-theme="dark"] .popover.notification {
  background-color: var(--h-surface-2);
  color: var(--h-text);
  border: 1px solid var(--h-border);
}

html[data-theme="dark"] .alert {
  background-color: var(--h-surface-2);
  color: var(--h-text);
  border-color: var(--h-border);
}

html[data-theme="dark"] hr {
  border-color: var(--h-border);
}

html[data-theme="dark"] .edit-link {
  color: var(--h-accent) !important;
}

/* Auth pages: white marketing panels become dark surfaces. Sprites untouched. */
html[data-theme="dark"] .static-view section,
html[data-theme="dark"] .static-view .container,
html[data-theme="dark"] .auth-form,
html[data-theme="dark"] #login-form {
  color: var(--h-text);
}

html[data-theme="dark"] {
  scrollbar-color: #6d5b93 var(--h-bg);
}

html[data-theme="dark"] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background: var(--h-bg);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #6d5b93;
  border: 2px solid var(--h-bg);
  border-radius: 8px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #8b74b8;
}

/* Pixel art stays exact. */
html[data-theme="dark"] img.pixel-art,
html[data-theme="dark"] .pet,
html[data-theme="dark"] .mount,
html[data-theme="dark"] .avatar {
  filter: none;
}

/*
 * Dark-theme audit. These rules load with !important so they beat upstream
 * whites that are painted after this file (NPC bubbles, modal bodies,
 * avatar sheets, shops, settings).
 */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .justin-message,
html[data-theme="dark"] #avatar-modal .customize-section,
html[data-theme="dark"] #avatar-modal .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .popover-body,
html[data-theme="dark"] .popover-header,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .b-toaster,
html[data-theme="dark"] .notification-holder .notification,
html[data-theme="dark"] .filter-panel,
html[data-theme="dark"] .message-card,
html[data-theme="dark"] .standard-page,
html[data-theme="dark"] .standard-sidebar,
html[data-theme="dark"] .tasks-list,
html[data-theme="dark"] .card,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .well,
html[data-theme="dark"] .box,
html[data-theme="dark"] .item,
html[data-theme="dark"] .selectable-card,
html[data-theme="dark"] .shop,
html[data-theme="dark"] .modal-dialog .text,
html[data-theme="dark"] .dialog-title,
html[data-theme="dark"] .dialog-disclaimer {
  background-color: var(--h-surface) !important;
  color: var(--h-text) !important;
}

html[data-theme="dark"] .modal-body p,
html[data-theme="dark"] .modal-body li,
html[data-theme="dark"] .modal-body h1,
html[data-theme="dark"] .modal-body h2,
html[data-theme="dark"] .modal-body h3,
html[data-theme="dark"] .modal-body h4,
html[data-theme="dark"] .modal-body .small,
html[data-theme="dark"] .modal-body strong,
html[data-theme="dark"] .justin-message,
html[data-theme="dark"] .justin-message p,
html[data-theme="dark"] #avatar-modal .customize-section,
html[data-theme="dark"] #avatar-modal .customize-section strong,
html[data-theme="dark"] #avatar-modal .customize-menu strong,
html[data-theme="dark"] #avatar-modal h3,
html[data-theme="dark"] #avatar-modal .small,
html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .dropdown-header,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .popover-body,
html[data-theme="dark"] .settings-label,
html[data-theme="dark"] .settings-value,
html[data-theme="dark"] .table,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] label {
  color: var(--h-text) !important;
}

html[data-theme="dark"] .modal-body .text-muted,
html[data-theme="dark"] .dialog-disclaimer,
html[data-theme="dark"] .quick-add-tip,
html[data-theme="dark"] .column-background h3,
html[data-theme="dark"] .column-background .small-text {
  color: var(--h-muted) !important;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-success {
  color: #ffffff !important;
}

html[data-theme="dark"] #avatar-modal .option,
html[data-theme="dark"] .customize-options .option {
  background-color: #2c2340 !important;
}

/* Habit value scale stays vivid. Icons on those chips stay dark. */
html[data-theme="dark"] .task-worst-control-bg { background: #de3f3f !important; }
html[data-theme="dark"] .task-worse-control-bg { background: #ff6165 !important; }
html[data-theme="dark"] .task-bad-control-bg { background: #ff944c !important; }
html[data-theme="dark"] .task-neutral-control-bg { background: #ffbe5d !important; }
html[data-theme="dark"] .task-good-control-bg { background: #24cc8f !important; }
html[data-theme="dark"] .task-best-control-bg { background: #50b5e9 !important; }

html[data-theme="dark"] .task .habit-control,
html[data-theme="dark"] .task .daily-todo-control,
html[data-theme="dark"] .task .habit-control .svg-icon,
html[data-theme="dark"] .task .daily-todo-control .svg-icon,
html[data-theme="dark"] .task [class*="control-icon"],
html[data-theme="dark"] .task [class*="control-checkbox"] {
  color: #1a181d !important;
}

html[data-theme="dark"] .task-content {
  background: #2c2340 !important;
  color: #f6f2fc !important;
}

html[data-theme="dark"] .dropdown-toggle,
html[data-theme="dark"] .select-list .btn {
  background-color: #1b1528 !important;
  color: #f6f2fc !important;
  border-color: #5a4c78 !important;
}

html[data-theme="dark"] .white,
html[data-theme="dark"] #profile .modal-header,
html[data-theme="dark"] #profile .modal-body,
html[data-theme="dark"] #profile .modal-content,
html[data-theme="dark"] #profile .header,
html[data-theme="dark"] #profile .state-pages,
html[data-theme="dark"] #profile .standard-page,
html[data-theme="dark"] #profile .profile,
html[data-theme="dark"] #profile .name {
  background-color: #221b30 !important;
  color: #f6f2fc !important;
}

html[data-theme="dark"] #profile .member-details,
html[data-theme="dark"] .profile .member-details,
html[data-theme="dark"] #profile .modal-header,
html[data-theme="dark"] #profile___BV_modal_body_,
html[data-theme="dark"] #profile___BV_modal_content_ {
  background-color: #221b30 !important;
  color: #f6f2fc !important;
}

html[data-theme="dark"] #profile .character-name,
html[data-theme="dark"] #profile .character-level,
html[data-theme="dark"] #profile .small-text,
html[data-theme="dark"] #profile .nav-item,
html[data-theme="dark"] #profile h1,
html[data-theme="dark"] #profile h2,
html[data-theme="dark"] #profile h4,
html[data-theme="dark"] #profile p,
html[data-theme="dark"] #profile .name {
  color: #f6f2fc !important;
}

html[data-theme="dark"] #profile .nav-item.active,
html[data-theme="dark"] #profile .nav-item:hover {
  color: #e4d4ff !important;
  border-bottom-color: #e4d4ff !important;
}

html[data-theme="dark"] .secondary-menu {
  background: #2c2340 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .secondary-menu .nav-link {
  color: #f6f2fc !important;
}

html[data-theme="dark"] .secondary-menu .nav-link.active,
html[data-theme="dark"] .secondary-menu .nav-link:hover {
  color: #e4d4ff !important;
  background: transparent !important;
}

html[data-theme="dark"] #avatar-modal .modal-content,
html[data-theme="dark"] #avatar-modal .modal-body,
html[data-theme="dark"] #avatar-modal .customize-section,
html[data-theme="dark"] #avatar-modal .customize-options,
html[data-theme="dark"] #avatar-modal .outer-option-background.locked,
html[data-theme="dark"] #avatar-modal .justin-message,
html[data-theme="dark"] #avatar-modal .justin-message p {
  background-color: #221b30 !important;
  color: #f6f2fc !important;
}

html[data-theme="dark"] #avatar-modal h2,
html[data-theme="dark"] #avatar-modal h3,
html[data-theme="dark"] #avatar-modal strong,
html[data-theme="dark"] #avatar-modal .small,
html[data-theme="dark"] #avatar-modal label {
  color: #f6f2fc !important;
}

html[data-theme="dark"] .task .task-title,
html[data-theme="dark"] .task .task-title p,
html[data-theme="dark"] .task .task-notes,
html[data-theme="dark"] .task .task-notes p,
html[data-theme="dark"] .task .checklist-item {
  color: #f6f2fc !important;
}

html[data-theme="dark"] .gold,
html[data-theme="dark"] .gold-amount {
  color: #ffb445 !important;
}