/*
 * rule34.css — vichan 5.1.4 User CSS Theme
 * Accurately based on rule34.xxx's native default theme
 *
 * Install: Options → User CSS → paste this file's contents
 *
 * Core palette (sourced from rule34.xxx actual stylesheet & community research):
 *   body bg:        #aae5a4  (THE rule34 green — page background)
 *   section bg:     #c2ebbe  (lighter tint for panels)
 *   alt row/post:   #f0f0f0
 *   header bg:      #2a2a2a  (dark topbar)
 *   accent green:   #aae5a4  (THE rule34 green — literally named "Rule 34" on colornames.org)
 *   link:           #0066cc
 *   tag-artist:     #aa0000
 *   tag-copyright:  #aa00aa
 *   tag-character:  #00aa00
 *   tag-general:    #0000ee
 *   tag-metadata:   #ee6600
 */

/* ─── Root variables ─────────────────────────────────────────── */
:root {
  --r34-bg:          #aae5a4;   /* rule34.xxx page background — the iconic green */
  --r34-bg-panel:    #c2ebbe;   /* lighter tint for panels */
  --r34-bg-alt:      #93d98d;   /* slightly darker alt rows */
  --r34-bg-post:     #baeab6;   /* reply post bg */
  --r34-bg-op:       #d0f0cd;   /* OP post bg — lightest so content is readable */
  --r34-header:      #2a2a2a;
  --r34-header-text: #ffffff;
  --r34-green:       #aae5a4;
  --r34-green2:      #7fcf79;
  --r34-green-dark:  #4a9944;
  --r34-link:        #0066cc;
  --r34-link-h:      #003d99;
  --r34-text:        #1a1a1a;
  --r34-muted:       #666666;
  --r34-border:      #cccccc;
  --r34-border-dark: #aaaaaa;
  --r34-red:         #cc0000;
  --r34-purple:      #aa00aa;
  --r34-radius:      2px;
  --r34-font:        Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --r34-mono:        'Courier New', Courier, monospace;
  --tag-artist:      #aa0000;
  --tag-copyright:   #aa00aa;
  --tag-character:   #00aa00;
  --tag-general:     #0000ee;
  --tag-metadata:    #ee6600;
}

/* ─── Global ─────────────────────────────────────────────────── */
html, body {
  background-color: var(--r34-bg) !important;
  background-image: none !important;  /* kill vichan's default gradient */
  color: var(--r34-text) !important;
  font-family: var(--r34-font) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 0;
  padding: 0;
}

a, a:visited {
  color: var(--r34-link) !important;
  text-decoration: none !important;
}
a:hover {
  color: var(--r34-link-h) !important;
  text-decoration: underline !important;
}

/* ─── Header / Boardlist ─────────────────────────────────────── */
/* vichan wraps boardlist in a div with inline styles + background images,
   so we need to nuke background-image and target every variant */
#header,
#boardlist,
div#boardlist,
div#boardlist > div,
.boardlist,
div.boardlist,
#page-header {
  background: var(--r34-header) !important;
  background-image: none !important;  /* kill vichan's blue gradient */
  border-bottom: 3px solid var(--r34-green) !important;
  padding: 5px 8px !important;
  font-size: 11px !important;
  color: var(--r34-header-text) !important;
}
#header a, #boardlist a {
  color: var(--r34-green) !important;
}
#header a:hover, #boardlist a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* ─── Navigation bar ─────────────────────────────────────────── */
#navtopright, #navbotright, .navLinks, div.navLinks {
  color: var(--r34-muted) !important;
  font-size: 11px !important;
  background: var(--r34-bg-panel) !important;
  border-bottom: 1px solid var(--r34-border) !important;
  padding: 3px 8px !important;
}
#navtopright a, #navbotright a, .navLinks a {
  color: var(--r34-link) !important;
}
#navtopright a:hover, #navbotright a:hover, .navLinks a:hover {
  color: var(--r34-link-h) !important;
}

/* ─── Page title ─────────────────────────────────────────────── */
h1 {
  color: var(--r34-text) !important;
  font-size: 22px !important;
  font-weight: bold !important;
  border-bottom: 2px solid var(--r34-green) !important;
  padding-bottom: 4px !important;
  margin-bottom: 10px !important;
}
h2 {
  color: var(--r34-text) !important;
  font-size: 16px !important;
  font-weight: bold !important;
}

/* ─── Subtitle ───────────────────────────────────────────────── */
.subtitle, p.subtitle, div.subtitle {
  color: var(--r34-muted) !important;
  font-size: 11px !important;
}

/* ─── Thread container ───────────────────────────────────────── */
.thread, div.thread {
  margin-bottom: 14px !important;
}

/* OP Post */
div.post.op, .post.op {
  background: var(--r34-bg-op) !important;
  border: 1px solid var(--r34-border) !important;
  border-left: 4px solid var(--r34-green) !important;
  border-radius: var(--r34-radius) !important;
  padding: 8px 10px !important;
  margin-bottom: 4px !important;
}

/* Reply posts */
div.post.reply, .post.reply {
  background: var(--r34-bg-post) !important;
  border: 1px solid var(--r34-border) !important;
  border-left: 3px solid var(--r34-bg-alt) !important;
  border-radius: var(--r34-radius) !important;
  padding: 6px 10px !important;
  margin: 3px 0 3px 20px !important;
  transition: border-left-color 0.15s ease, background 0.15s ease !important;
}
div.post.reply:hover, .post.reply:hover {
  border-left-color: var(--r34-green2) !important;
  background: #f0faf0 !important;
}

/* You */
div.post.highlighted, .post.highlighted {
  background: #fffde7 !important;
  border-left-color: var(--r34-green-dark) !important;
}

/* ─── Post header info ───────────────────────────────────────── */
.post .post_no, .post a.post_no {
  color: var(--r34-muted) !important;
  font-size: 11px !important;
}
.post .post_no:hover { color: var(--r34-link) !important; }

.post .name, .name {
  color: #117743 !important;
  font-weight: bold !important;
}
.post .postertrip, .postertrip {
  color: #228855 !important;
}
.post .capcode, .capcode {
  color: var(--r34-red) !important;
  font-weight: bold !important;
}
.post .postInfo, .postInfo, div.postInfo {
  color: var(--r34-muted) !important;
  font-size: 11px !important;
  margin-bottom: 4px !important;
}
.post .subject, .subject {
  color: #00539b !important;
  font-weight: bold !important;
}
.post .dateTime, .dateTime {
  color: var(--r34-muted) !important;
  font-size: 11px !important;
}

/* ─── Post body ──────────────────────────────────────────────── */
.post .body, .body, div.body {
  color: var(--r34-text) !important;
  font-size: 13px !important;
  word-break: break-word !important;
}

/* Greentext */
.body .quote, span.quote {
  color: #789922 !important;
}

/* Dead links */
.body .deadlink {
  color: var(--r34-red) !important;
  text-decoration: line-through !important;
}

/* Quotelinks */
.body a[href*="#p"], a.quotelink {
  color: var(--r34-link) !important;
}
.body a[href*="#p"]:hover, a.quotelink:hover {
  color: var(--r34-link-h) !important;
}

/* Spoiler */
.body s, s.spoiler, .spoiler {
  background: var(--r34-text) !important;
  color: var(--r34-text) !important;
  padding: 0 2px !important;
}
.body s:hover, s.spoiler:hover, .spoiler:hover {
  color: var(--r34-bg) !important;
}

/* Code */
.body pre, .body code {
  background: var(--r34-bg-alt) !important;
  border: 1px solid var(--r34-border) !important;
  color: #333333 !important;
  font-family: var(--r34-mono) !important;
  font-size: 12px !important;
  padding: 4px 6px !important;
  border-radius: var(--r34-radius) !important;
}

/* ─── File info / Thumbnails ─────────────────────────────────── */
.file, div.file { margin-bottom: 6px !important; }
.file .fileinfo, p.fileinfo {
  color: var(--r34-muted) !important;
  font-size: 11px !important;
}
.file .fileinfo a { color: var(--r34-link) !important; }
.file .fileinfo a:hover { color: var(--r34-link-h) !important; }

.post img.thumb, img.thumb {
  border: 2px solid var(--r34-border) !important;
  border-radius: var(--r34-radius) !important;
  transition: border-color 0.15s ease !important;
}
.post img.thumb:hover, img.thumb:hover {
  border-color: var(--r34-green-dark) !important;
}

/* ─── Reply / Quick-reply form ───────────────────────────────── */
#post-form-wrapper, div#post-form-wrapper,
#quick-reply, div#quick-reply {
  background: var(--r34-bg-panel) !important;
  border: 1px solid var(--r34-border-dark) !important;
  border-top: 3px solid var(--r34-green) !important;
  border-radius: var(--r34-radius) !important;
  padding: 10px 12px !important;
}
#post-form table, #quick-reply table { border-collapse: collapse !important; }
#post-form td, #quick-reply td {
  padding: 3px 6px !important;
  color: var(--r34-text) !important;
}
#post-form input[type="text"],
#post-form input[type="email"],
#post-form input[type="password"],
#post-form input[type="file"],
#post-form textarea,
#quick-reply input[type="text"],
#quick-reply textarea {
  background: var(--r34-bg) !important;
  border: 1px solid var(--r34-border-dark) !important;
  border-radius: var(--r34-radius) !important;
  color: var(--r34-text) !important;
  font-family: var(--r34-font) !important;
  font-size: 13px !important;
  padding: 3px 5px !important;
  outline: none !important;
  transition: border-color 0.15s ease !important;
}
#post-form input:focus,
#post-form textarea:focus,
#quick-reply input:focus,
#quick-reply textarea:focus {
  border-color: var(--r34-green-dark) !important;
  box-shadow: 0 0 0 2px rgba(170,229,164,0.4) !important;
}

#post-form input[type="submit"],
#quick-reply input[type="submit"],
button[type="submit"] {
  background: var(--r34-green) !important;
  border: 1px solid var(--r34-green2) !important;
  border-radius: var(--r34-radius) !important;
  color: #1a1a1a !important;
  cursor: pointer !important;
  font-family: var(--r34-font) !important;
  font-size: 13px !important;
  font-weight: bold !important;
  padding: 4px 14px !important;
  transition: background 0.15s ease !important;
}
#post-form input[type="submit"]:hover,
#quick-reply input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--r34-green2) !important;
}

/* ─── Catalog ────────────────────────────────────────────────── */
.catalogCell, div.catalogCell {
  background: var(--r34-bg-panel) !important;
  border: 1px solid var(--r34-border) !important;
  border-radius: var(--r34-radius) !important;
  padding: 6px !important;
  transition: border-color 0.12s ease !important;
}
.catalogCell:hover { border-color: var(--r34-green-dark) !important; }
.catalogCell .subject { color: var(--r34-link) !important; }
.catalogCell .meta { color: var(--r34-muted) !important; font-size: 11px !important; }

/* ─── Pagination ─────────────────────────────────────────────── */
.pages, div.pages, .pagelist, div.pagelist {
  color: var(--r34-muted) !important;
  font-size: 12px !important;
  margin: 8px 0 !important;
}
.pages a, .pagelist a {
  background: var(--r34-bg-panel) !important;
  border: 1px solid var(--r34-border-dark) !important;
  border-radius: var(--r34-radius) !important;
  color: var(--r34-link) !important;
  display: inline-block !important;
  padding: 2px 7px !important;
  margin: 1px !important;
  transition: background 0.12s ease !important;
}
.pages a:hover, .pagelist a:hover,
.pages a.selected, .pagelist a.selected {
  background: var(--r34-green) !important;
  border-color: var(--r34-green2) !important;
  color: #1a1a1a !important;
  text-decoration: none !important;
}

/* ─── Omitted posts ──────────────────────────────────────────── */
.omitted, span.omitted {
  color: var(--r34-muted) !important;
  font-size: 11px !important;
}

/* ─── Full image ─────────────────────────────────────────────── */
.full-image, img.full-image {
  border: 2px solid var(--r34-border-dark) !important;
  border-radius: var(--r34-radius) !important;
}

/* ─── Post hover preview ─────────────────────────────────────── */
.post-hover, div.post-hover {
  background: var(--r34-bg) !important;
  border: 1px solid var(--r34-border-dark) !important;
  border-top: 3px solid var(--r34-green) !important;
  border-radius: var(--r34-radius) !important;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.2) !important;
  padding: 8px 10px !important;
  max-width: 600px !important;
  z-index: 9999 !important;
}

/* ─── Global announcements ───────────────────────────────────── */
.global-message, #globalMessage, .boardmessage {
  background: #f5fff4 !important;
  border: 1px solid var(--r34-green2) !important;
  border-radius: var(--r34-radius) !important;
  color: #2a6a2a !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  margin-bottom: 8px !important;
}

/* ─── Tag category colors (matching rule34.xxx exactly) ──────── */
.tag-type-artist a, a.tag-type-artist       { color: var(--tag-artist)    !important; }
.tag-type-copyright a, a.tag-type-copyright { color: var(--tag-copyright) !important; }
.tag-type-character a, a.tag-type-character { color: var(--tag-character) !important; }
.tag-type-general a, a.tag-type-general     { color: var(--tag-general)   !important; }
.tag-type-metadata a, a.tag-type-metadata   { color: var(--tag-metadata)  !important; }

/* ─── Mod/admin capcodes ─────────────────────────────────────── */
.capcodeAdmin, .admin { color: var(--r34-red) !important; font-weight: bold !important; }
.capcodeMod, .mod     { color: #007700 !important; font-weight: bold !important; }
.capcodeDev, .dev     { color: var(--r34-purple) !important; font-weight: bold !important; }

/* ─── Ban notice ─────────────────────────────────────────────── */
.ban, div.ban {
  background: #fff0f0 !important;
  border: 1px solid var(--r34-red) !important;
  border-radius: var(--r34-radius) !important;
  color: var(--r34-red) !important;
  padding: 6px 10px !important;
  font-weight: bold !important;
  margin-top: 6px !important;
}

/* ─── Report/Delete forms ────────────────────────────────────── */
#report-form, #delete-form, .delete-form {
  background: var(--r34-bg-panel) !important;
  border: 1px solid var(--r34-border) !important;
  border-radius: var(--r34-radius) !important;
  padding: 8px 10px !important;
  color: var(--r34-text) !important;
}
#report-form input, #delete-form input {
  background: var(--r34-bg) !important;
  border: 1px solid var(--r34-border-dark) !important;
  color: var(--r34-text) !important;
  border-radius: var(--r34-radius) !important;
  padding: 3px 5px !important;
}

/* ─── Options panel ──────────────────────────────────────────── */
#options, div#options {
  background: var(--r34-bg) !important;
  border: 1px solid var(--r34-border-dark) !important;
  border-top: 3px solid var(--r34-green) !important;
  border-radius: var(--r34-radius) !important;
  color: var(--r34-text) !important;
  padding: 10px 14px !important;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.15) !important;
}
#options h3 {
  color: var(--r34-text) !important;
  font-size: 13px !important;
  font-weight: bold !important;
  margin: 0 0 8px !important;
  border-bottom: 1px solid var(--r34-border) !important;
  padding-bottom: 4px !important;
}
#options label { color: var(--r34-text) !important; font-size: 12px !important; }
#options input[type="text"], #options textarea {
  background: var(--r34-bg) !important;
  border: 1px solid var(--r34-border-dark) !important;
  color: var(--r34-text) !important;
  border-radius: var(--r34-radius) !important;
  padding: 3px 5px !important;
  font-size: 12px !important;
}
#options input[type="checkbox"] { accent-color: var(--r34-green-dark) !important; }
#options a { color: var(--r34-link) !important; }

/* ─── Scrollbars ─────────────────────────────────────────────── */
* {
  scrollbar-width: thin !important;
  scrollbar-color: var(--r34-border-dark) var(--r34-bg-alt) !important;
}
::-webkit-scrollbar { width: 7px !important; height: 7px !important; }
::-webkit-scrollbar-track { background: var(--r34-bg-alt) !important; }
::-webkit-scrollbar-thumb { background: var(--r34-border-dark) !important; border-radius: 3px !important; }
::-webkit-scrollbar-thumb:hover { background: var(--r34-green-dark) !important; }

/* ─── HR ─────────────────────────────────────────────────────── */
hr {
  border: none !important;
  border-top: 1px solid var(--r34-border) !important;
  margin: 8px 0 !important;
}
hr.light { border-top-color: var(--r34-green) !important; }

/* ─── Selection ──────────────────────────────────────────────── */
::selection {
  background: rgba(170,229,164,0.5) !important;
  color: #1a1a1a !important;
}

/* ─── Footer ─────────────────────────────────────────────────── */
#footer, footer {
  background: var(--r34-bg-panel) !important;
  border-top: 2px solid var(--r34-green) !important;
  color: var(--r34-muted) !important;
  font-size: 11px !important;
  padding: 6px 8px !important;
  text-align: center !important;
}
#footer a { color: var(--r34-link) !important; }
#footer a:hover { color: var(--r34-link-h) !important; }