/* Heyaoi Micro — default dark mode (not Futaba)
 * Charcoal UI; buttons match Tor onion purple.
 */

:root {
  color-scheme: dark;
  --bg: #12141a;
  --bg-elevated: #1a1d26;
  --bg-card: #222632;
  --bg-input: #161922;
  --bg-btn: #3a2450;
  --bg-btn-hover: #7d4698;
  --border: #2e3440;
  --text: #e6e8ee;
  --text-muted: #9aa3b5;
  /* same palette as .onion-btn */
  --accent: #7d4698;
  --accent-soft: #2a1a38;
  --accent-hover: #9b5fba;
  --accent-deep: #3a2450;
  --onion: #7d4698;
  --onion-hover: #9b5fba;
  --onion-text: #ead8f5;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

body {
  min-height: 100vh;
}

/* Nav / footer keep .pink class; recolor to dark accent bar */
nav.pink,
footer.page-footer.pink,
.page-footer.pink {
  background-color: #1b1520 !important;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

footer.page-footer.pink {
  border-bottom: none;
  border-top: 1px solid var(--border);
  background-color: #151018 !important;
}

/* Kill Materialize pink — map to onion purple */
.pink,
.pink.darken-1,
.pink.darken-2,
.pink.darken-3,
.pink.darken-4,
.pink.lighten-1,
.pink.lighten-2,
.pink.accent-1,
.pink.accent-2,
.pink.accent-3,
.pink.accent-4 {
  background-color: var(--bg-btn) !important;
}

.pink-text,
.pink-text.text-lighten-1,
.pink-text.text-lighten-2,
.pink-text.text-lighten-3,
.pink-text.text-darken-1,
.pink-text.text-darken-2,
#main-copy a,
a {
  color: var(--accent-hover) !important;
}

#main-copy a:hover {
  color: #d4b0ec !important;
}

.brand-logo,
.brand-logo span,
nav .white-text,
nav i.mdi {
  color: var(--text) !important;
}

nav ul li.active {
  background-color: rgba(125, 70, 152, 0.22) !important;
}

/* Cards / panels */
.card,
.card-panel,
.modal,
.modal .modal-footer,
.collection,
.collection .collection-item {
  background-color: var(--bg-card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow);
}

.card .card-content,
.card .card-action,
.modal-content,
.modal-footer {
  background-color: transparent !important;
  color: var(--text) !important;
  border-top-color: var(--border) !important;
}

.collection .collection-item {
  border-bottom: 1px solid var(--border) !important;
}

/* Inputs */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="url"],
textarea,
textarea.materialize-textarea,
.file-path-wrapper input {
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
}

input:focus:not([readonly]),
textarea:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 1px solid var(--accent) !important;
  box-shadow: 0 1px 0 0 var(--accent) !important;
}

label,
.label,
.helper-text {
  color: var(--text-muted) !important;
}

input:focus:not([readonly]) + label,
textarea:focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label {
  color: var(--accent) !important;
}

/* Chips / tags */
.chip,
.chip.pink,
.chip.pink.lighten-4 {
  background-color: var(--accent-soft) !important;
  color: var(--onion-text) !important;
  border: 1px solid rgba(125, 70, 152, 0.45);
}

nav .chip {
  background-color: var(--bg-elevated) !important;
  color: var(--text) !important;
}

/* ── Buttons — same purple as onion button ───────────────────── */

.btn,
.btn-large,
.btn-floating,
.btn.pink,
.btn-large.pink,
.btn-floating.pink,
.btn.waves-effect,
.btn-large.waves-effect,
.btn.waves-light,
.btn-large.waves-light,
a.btn,
a.btn-large,
a.btn-floating,
a.btn.pink,
a.btn-large.pink,
a.btn-large.waves-effect.waves-light.pink,
button.btn,
button.btn-large,
button.btn.pink,
button.btn-large.pink {
  background-color: var(--bg-btn) !important;
  background-image: none !important;
  color: var(--onion-text) !important;
  border: 1px solid rgba(157, 95, 186, 0.45) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
  text-shadow: none !important;
}

.btn:hover,
.btn-large:hover,
.btn-floating:hover,
.btn.pink:hover,
.btn-large.pink:hover,
.btn.waves-light:hover,
.btn-large.waves-light:hover,
a.btn:hover,
a.btn-large:hover,
a.btn-large.pink:hover,
button.btn:hover,
button.btn-large:hover {
  background-color: var(--bg-btn-hover) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
}

.btn:focus,
.btn-large:focus,
.btn-floating:focus {
  background-color: var(--bg-btn-hover) !important;
}

/* Force light icon/text inside buttons */
.btn .mdi,
.btn-large .mdi,
.btn-floating .mdi,
.btn .white-text,
.btn-large .white-text,
.btn i,
.btn-large i,
.btn span,
.btn-large span,
a.btn.pink .mdi,
a.btn-large.pink .mdi,
a.btn-large.pink .white-text {
  color: var(--onion-text) !important;
}

.btn:hover .mdi,
.btn-large:hover .mdi,
.btn:hover .white-text,
.btn-large:hover .white-text,
.btn:hover i,
.btn-large:hover i {
  color: #fff !important;
}

/* Flat / modal actions */
.btn-flat,
.modal-action.btn-flat,
a.btn-flat,
button.btn-flat {
  background-color: transparent !important;
  color: var(--accent-hover) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

.btn-flat:hover,
.modal-action.btn-flat:hover {
  background-color: rgba(125, 70, 152, 0.15) !important;
  color: #d4b0ec !important;
  text-decoration: none !important;
}

/* Floating compose button */
.fixed-action-btn .btn-floating,
.fixed-action-btn .btn-floating.pink,
a.btn-floating.pink {
  background-color: var(--bg-btn) !important;
  color: var(--onion-text) !important;
  border: 1px solid rgba(157, 95, 186, 0.45) !important;
}

.fixed-action-btn .btn-floating:hover,
a.btn-floating.pink:hover {
  background-color: var(--bg-btn-hover) !important;
}

.fixed-action-btn .btn-floating i,
.fixed-action-btn .btn-floating .mdi,
.fixed-action-btn .btn-floating .white-text {
  color: var(--onion-text) !important;
}

/* Card icon buttons (reply / menu) */
.icon-button,
.icon-button i,
.icon-button .mdi,
.post-buttons a,
.post-buttons a i,
.post-buttons .mdi {
  color: var(--text-muted) !important;
}

.icon-button:hover,
.icon-button:hover i,
.icon-button:hover .mdi,
.post-buttons a:hover,
.post-buttons a:hover i {
  color: var(--onion-hover) !important;
}

/* Tag submit chips on cards */
.card .card-action input {
  color: var(--accent-hover) !important;
}

.card .card-action input:hover {
  color: #d4b0ec !important;
}

/* Collection / report buttons */
.fakelinkcollection {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}

.fakelinkcollection:hover:not(.active) {
  background-color: var(--bg-elevated) !important;
  color: var(--onion-hover) !important;
}

.collection-item.fakelinkcollection .mdi,
.collection-item .mdi {
  color: var(--text-muted) !important;
}

/* Waves ripple less harsh on dark */
.waves-effect .waves-ripple {
  background-color: rgba(255, 255, 255, 0.25) !important;
}

/* Pagination / active */
.pagination li {
  color: var(--text) !important;
}

.pagination li.active,
.pagination li.active.pink {
  background-color: var(--bg-btn) !important;
}

.pagination li a,
.pagination li button,
.fakelink {
  color: var(--text) !important;
}

.fakelink:hover {
  color: var(--onion-hover) !important;
}

/* Captcha field */
.captcha-field {
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
}

.captcha-field label {
  color: var(--text-muted) !important;
}

/* Progress */
.progress,
.progress.pink.lighten-4 {
  background-color: var(--accent-soft) !important;
}

.progress .indeterminate,
.progress .indeterminate.pink {
  background-color: var(--accent) !important;
}

/* Dropdowns */
.dropdown-content {
  background-color: var(--bg-elevated) !important;
}

.dropdown-content li > a,
.dropdown-content li > span {
  color: var(--text) !important;
}

.dropdown-content li:hover,
.dropdown-content li.active {
  background-color: rgba(125, 70, 152, 0.15) !important;
}

/* Homepage hero */
.parallax-container,
.index-banner,
#index-banner {
  background: linear-gradient(160deg, #1b1520 0%, #12141a 55%, #0e1016 100%) !important;
}

#index-banner .header.light,
.parallax-container .header.light,
.parallax-container h5 {
  color: var(--text) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}

/* ── Onion button + icon ─────────────────────────────────────── */

.onion-icon {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  vertical-align: middle;
  background-color: currentColor;
  /* stylized onion layers (mask) */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2c1.2 2.1 2 4.3 2 6.5 0 1.2-.3 2.3-.8 3.3.8.4 1.5 1 2 1.8 1.3-1.1 2.3-2.6 2.8-4.3.3 1.5.2 3.1-.4 4.6-.5 1.3-1.4 2.4-2.5 3.2 1 .7 1.7 1.7 2.1 2.9-1.6-.4-3-.3-4.3.4-.4.2-.8.5-1.1.8-.3-.3-.7-.6-1.1-.8-1.3-.7-2.7-.8-4.3-.4.4-1.2 1.1-2.2 2.1-2.9-1.1-.8-2-1.9-2.5-3.2C5 11.9 4.9 10.3 5.2 8.8c.5 1.7 1.5 3.2 2.8 4.3.5-.8 1.2-1.4 2-1.8-.5-1-.8-2.1-.8-3.3 0-2.2.8-4.4 2-6.5z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2c1.2 2.1 2 4.3 2 6.5 0 1.2-.3 2.3-.8 3.3.8.4 1.5 1 2 1.8 1.3-1.1 2.3-2.6 2.8-4.3.3 1.5.2 3.1-.4 4.6-.5 1.3-1.4 2.4-2.5 3.2 1 .7 1.7 1.7 2.1 2.9-1.6-.4-3-.3-4.3.4-.4.2-.8.5-1.1.8-.3-.3-.7-.6-1.1-.8-1.3-.7-2.7-.8-4.3-.4.4-1.2 1.1-2.2 2.1-2.9-1.1-.8-2-1.9-2.5-3.2C5 11.9 4.9 10.3 5.2 8.8c.5 1.7 1.5 3.2 2.8 4.3.5-.8 1.2-1.4 2-1.8-.5-1-.8-2.1-.8-3.3 0-2.2.8-4.4 2-6.5z'/></svg>") center / contain no-repeat;
}

.onion-icon-sm {
  width: 1em;
  height: 1em;
  margin-right: 0.35em;
  position: relative;
  top: -1px;
}

.onion-icon-btn {
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.45em;
}

/* Nav onion control */
.onion-nav-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
}

.onion-nav-link .onion-icon {
  color: #c9a0e0;
  width: 1.45em;
  height: 1.45em;
}

.onion-nav-link:hover .onion-icon {
  color: #e2c4f5 !important;
}

/* Onion CTA — identical to primary buttons now */
.onion-btn,
a.onion-btn.btn-large,
a.btn-large.onion-btn {
  background-color: var(--bg-btn) !important;
  color: var(--onion-text) !important;
  border: 1px solid rgba(157, 95, 186, 0.45) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.onion-btn:hover,
a.onion-btn.btn-large:hover {
  background-color: var(--bg-btn-hover) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.onion-btn .onion-icon,
.onion-btn .onion-icon-btn {
  background-color: var(--onion-text);
}

.onion-btn:hover .onion-icon,
.onion-btn:hover .onion-icon-btn {
  background-color: #fff;
}

.onion-footer-link {
  display: inline-flex;
  align-items: center;
}

.onion-footer-link .onion-icon {
  color: var(--text-muted);
  background-color: var(--text-muted);
}

.onion-footer-link:hover .onion-icon {
  color: var(--accent-hover);
  background-color: var(--accent-hover);
}

/* Scrollbar (webkit) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: #3a4050;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: #525a6c;
}

/* Tooltips readable on dark */
.material-tooltip {
  background-color: #2a2f3c !important;
  color: var(--text) !important;
}

/* Select */
select {
  background-color: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
}

/* Break long posts */
.break-word {
  color: var(--text);
}

/* Keep attachment / secondary text muted */
.grey-text,
.grey-text.text-lighten-3,
.grey-text.text-lighten-4 {
  color: var(--text-muted) !important;
}

/* Homepage icon blocks */
.icon-block h5,
.icon-block p {
  color: var(--text) !important;
}

.icon-block .pink-text,
.icon-block h2 .mdi {
  color: var(--accent-hover) !important;
}

/* Slider dark frame */
.slider .slides {
  background-color: var(--bg-elevated) !important;
}

/* File field button contrast */
.file-field .btn,
.file-field .btn.pink {
  background-color: var(--bg-btn) !important;
  color: var(--onion-text) !important;
  border: 1px solid rgba(157, 95, 186, 0.45) !important;
}

/* Progress bars purple too */
.progress .indeterminate.pink,
.indeterminate.pink {
  background-color: var(--onion) !important;
}