/* ==========================================================================
   Rule34 Classic Booru Theme for Szurubooru
   ========================================================================== */

:root {
    --r34-teal: #006666;
    --r34-teal-dark: #004d4d;
    --r34-teal-light: #008080;
    --r34-teal-hover: #009999;
    --r34-bg: #eef2f2;
    --r34-card-bg: #ffffff;
    --r34-border: #b0cccc;
    --r34-text: #222222;
    --r34-link: #006666;
    --r34-link-hover: #009999;
    --r34-tag-general: #0075f8;
    --r34-tag-artist: #c00000;
    --r34-tag-character: #00aa00;
    --r34-tag-copyright: #aa00aa;
    --r34-tag-meta: #ff8c00;
}

/* Base page background & typography */
body {
    background: var(--r34-bg) !important;
    color: var(--r34-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Iconic Top Navigation Bar */
nav#top-navigation {
    background: var(--r34-teal) !important;
    border-bottom: 2px solid var(--r34-teal-dark) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}

nav#top-navigation ul li a {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.95em !important;
    padding: 0 1.4em !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

nav#top-navigation ul li a:hover,
nav#top-navigation ul li.active a {
    background: var(--r34-teal-dark) !important;
    color: #aaeebb !important;
}

nav#top-navigation ul #mobile-navigation-toggle {
    color: #ffffff !important;
}

nav#top-navigation .thumbnail {
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* Sub-navigation & button bars */
nav.buttons,
#content-holder > .content-wrapper nav.buttons {
    background: rgba(0, 102, 102, 0.06) !important;
    border-bottom: 1px solid var(--r34-border) !important;
}

nav.buttons ul li a {
    color: var(--r34-teal) !important;
    font-weight: 500 !important;
}

nav.buttons ul li.active a {
    background: var(--r34-teal) !important;
    color: #ffffff !important;
}

nav.buttons ul li:not(.active) a:hover {
    background: rgba(0, 102, 102, 0.12) !important;
    color: var(--r34-teal-dark) !important;
}

/* Links */
a {
    color: var(--r34-link) !important;
}

a:hover {
    color: var(--r34-link-hover) !important;
}

a:focus {
    outline: 2px solid var(--r34-teal) !important;
}

/* Primary Buttons */
button,
input[type="button"],
input[type="submit"] {
    background: var(--r34-teal) !important;
    border: 1px solid var(--r34-teal-dark) !important;
    color: #ffffff !important;
    border-radius: 3px !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    transition: background 0.15s ease, transform 0.05s ease !important;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    background: var(--r34-teal-light) !important;
    border-color: var(--r34-teal) !important;
}

button:active,
input[type="button"]:active,
input[type="submit"]:active {
    background: var(--r34-teal-dark) !important;
    transform: translateY(1px) !important;
}

/* Form inputs */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
select:focus,
textarea:focus {
    border-color: var(--r34-teal) !important;
    box-shadow: 0 0 0 2px rgba(0, 102, 102, 0.25) !important;
}

/* Checkboxes and Radios */
.checkbox:hover:before,
.radio:hover:before,
input[type="checkbox"]:checked + .checkbox:before,
input[type="radio"]:checked + .radio:before,
input[type="checkbox"]:focus + .checkbox:before,
input[type="radio"]:focus + .radio:before {
    border-color: var(--r34-teal) !important;
}

.radio:after {
    background: var(--r34-teal) !important;
}

.checkbox:after {
    border-right-color: var(--r34-teal) !important;
    border-bottom-color: var(--r34-teal) !important;
}

/* Post Thumbnails - Classic Booru Style */
.post-list ul li {
    background: transparent !important;
}

.post-thumbnail,
.thumbnail {
    border: 1px solid var(--r34-border) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease !important;
    border-radius: 2px !important;
}

.post-list ul li a:hover .thumbnail,
.post-list ul li a:focus .thumbnail,
.post-list ul li a:active .thumbnail {
    border-color: var(--r34-teal) !important;
    outline: 3px solid var(--r34-teal) !important;
    box-shadow: 0 3px 8px rgba(0, 102, 102, 0.3) !important;
}

/* Autocomplete dropdown */
.autocomplete {
    border: 2px solid var(--r34-teal) !important;
}

.autocomplete ul li.active a,
.autocomplete ul li a:hover {
    background: var(--r34-teal) !important;
    color: #ffffff !important;
}

/* Progress bar */
#nprogress .bar {
    background: var(--r34-teal-hover) !important;
    height: 3px !important;
}

/* Sidebars & Panels */
.post-view > .sidebar,
.readonly-sidebar {
    border: 1px solid var(--r34-border) !important;
    border-radius: 4px !important;
    padding: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.post-view > .sidebar header,
.readonly-sidebar h2,
.readonly-sidebar h3 {
    color: var(--r34-teal-dark) !important;
    border-bottom: 2px solid var(--r34-teal) !important;
    padding-bottom: 4px !important;
}

/* Tag Categories - Rule34 standard colors */
.tag-category-general,
.tag-category-default,
a.tag[data-category="default"],
a.tag[data-category="general"] {
    color: var(--r34-tag-general) !important;
}

.tag-category-artist,
a.tag[data-category="artist"] {
    color: var(--r34-tag-artist) !important;
    font-weight: 500 !important;
}

.tag-category-character,
a.tag[data-category="character"] {
    color: var(--r34-tag-character) !important;
    font-weight: 500 !important;
}

.tag-category-copyright,
a.tag[data-category="copyright"] {
    color: var(--r34-tag-copyright) !important;
    font-weight: 500 !important;
}

.tag-category-meta,
a.tag[data-category="meta"] {
    color: var(--r34-tag-meta) !important;
}

/* Comments block */
.comment-container .comment {
    border: 1px solid var(--r34-border) !important;
    border-radius: 3px !important;
}

.comment-container .comment header {
    background: #e4eded !important;
    border-bottom: 1px solid var(--r34-border) !important;
    color: var(--r34-teal-dark) !important;
}

/* File Dropper */
.file-dropper.active,
input[type="file"]:active + .file-dropper,
input[type="file"]:focus + .file-dropper {
    border-color: var(--r34-teal) !important;
    background: rgba(0, 102, 102, 0.05) !important;
}

/* ==========================================================================
   Thumbnails: No borders for Art, Blue border for Videos
   ========================================================================== */

/* Remove default Szurubooru red/blue outlines & borders from all thumbnails */
.thumbnail-wrapper,
.thumbnail-wrapper .thumbnail,
.thumbnail-wrapper.no-tags,
.thumbnail-wrapper.no-tags .thumbnail,
.post-list ul li .thumbnail,
.post-list ul li a .thumbnail,
.post-list ul li a:hover .thumbnail,
.post-list ul li a:focus .thumbnail,
.post-list ul li a:active .thumbnail {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Images (Art): completely clean without borders */
.thumbnail-wrapper[data-type="image"],
.thumbnail-wrapper[data-type="image"] .thumbnail,
.thumbnail-wrapper:not(:has(.type[data-type="video"])) .thumbnail,
li:not([data-type="video"]) .thumbnail {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Videos: Bright Blue Border */
.thumbnail-wrapper[data-type="video"],
.thumbnail-wrapper[data-type="video"] .thumbnail,
.thumbnail-wrapper:has(.type[data-type="video"]),
.thumbnail-wrapper:has(.type[data-type="video"]) .thumbnail,
.thumbnail-wrapper:has(.type[data-type="flash"]) .thumbnail,
.thumbnail-wrapper:has(.type[data-type="animation"]) .thumbnail,
li[data-type="video"] .thumbnail,
li[data-type="video"] a .thumbnail {
    border: 3px solid #0075f8 !important;
    box-shadow: 0 0 8px rgba(0, 117, 248, 0.45) !important;
    box-sizing: border-box !important;
}

/* Hover on Video: brighter blue glow */
.thumbnail-wrapper[data-type="video"]:hover,
.thumbnail-wrapper[data-type="video"]:hover .thumbnail,
.thumbnail-wrapper:has(.type[data-type="video"]):hover .thumbnail,
li[data-type="video"] a:hover .thumbnail {
    border-color: #00b0ff !important;
    box-shadow: 0 0 14px rgba(0, 176, 255, 0.8) !important;
}

/* Hover on Art: subtle elevation without border */
.thumbnail-wrapper:not(:has(.type[data-type="video"])):hover .thumbnail,
li:not([data-type="video"]) a:hover .thumbnail {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}