/* FUTA Deluxe CSS theme V1.3; mostly taken directly from the RWBY Deluxe CSS, with only the Background code being changed. Credit to their CSSanons*/

/* ↓ This is where the custom wallpaper is. Everything here rests behind every other container. */
/* Base body styling with background + text shadow merged */
body {
  margin: 0;
  padding: 0 5px;
  min-height: 100vh;
  background-color: #013220; /* solid dark green background always visible */
  color: #D9D9D9;
  cursor: var(--cursor-default);
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 0px 1px 1px black, 0 0 3px grey;
  position: relative;
  z-index: 0; /* establish stacking context */
  overflow-x: hidden;
}

/* New background image behind everything else */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-color: #013220; /* fallback still dark green */
  background-image: url('/.media/01fe0fb77a759f1e8246ce020cfa280662e6ddb32d86bd6aa4cd13b302121834.png');
  background-repeat: no-repeat;
  background-position: 40% 100%;
  background-size: 90% auto;
  z-index: -3; /* ⬅️ move further behind everything */
  pointer-events: none;
}

/* Transparent PNG wallpaper (anchored bottom-right) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('/.media/a3b11578d1794ca7dd0a7e60e066f4292ffff8770a2ba835c664c916c8a42e15.png');
  background-repeat: no-repeat;
  background-position: right bottom;  /* bottom-right corner */
  background-size: auto;              /* keep original size */
  opacity: 1.0;
  z-index: -2; /* behind content but above ::before */
  pointer-events: none;
}


/*Header transparent*/
nav.navHeader { 
color: var(--navbar-text-color); 
 background-color: transparent !important; 
}

/* ↓ The fading parts of the navbar. Changed gradient fade to match the dark background color & theme. */
nav.navHeader > .nav-fade {
  background-image: linear-gradient(to right, #0000, #1a1a1a);
  border-right: 0.5em solid #1a1a1a;
}

/*Miscellaneous color adjustments*/
/*Text Shadow*/ 
body {
  text-shadow: 0px 1px 1px black, 0 0 3px grey;
} 

/*Post block color*/
.innerPost {
  display: inline-block;
  padding: 0.25em;
  max-width: 100%;

  background: #1d1f21 !important;
  color: #c5c8c6 !important;
   border: 1px solid #373b41 !important;
  border-top-width: 0;
  border-left-width: 0;
}

/*Link Color before/after hover*/
a, .glowOnHover { 
  color: #008bff;
  cursor: pointer;
  text-decoration: none; /* TODO tentative change */
}

a:hover, .glowOnHover:hover {
  color: #e0cd4c;
}

/* ↓ Post subject. */
.labelSubject {
  color: #E6E600;
  font-weight: bold;
}

/* ↓ The Post numbers. */
div.opHead.title a.linkQuote,
div.opHead.title a.linkSelf,
div.innerPost div.postInfo.title a.linkSelf,
.postCell div.innerPost div.postInfo.title a.linkQuote {
  color: #f1f1f1;
}
/* ↓ The Post numbers upon hovering over them. */
div.innerPost div.postInfo.title a.linkSelf:hover,
.postCell div.innerPost div.postInfo.title a.linkQuote:hover {
  color: var( --link-hover-color)
}

/* Apply Tomorrow theme background and text color to Side Catalog container */
.sideCatalogCell {
  background: #1d1f21 !important;
  color: #c5c8c6 !important;
  border-left: 1px solid #373b41 !important;
}

/* Apply Tomorrow theme styles to threads/items inside the Side Catalog */
.sideCatalogCell .catalog-thread {
  background: #1d1f21 !important;
  border: 1px solid #373b41 !important;
  color: #c5c8c6 !important;
}

/* Hover effect for catalog threads */
.sideCatalogCell .catalog-thread:hover {
  background: #282a2e !important;
}

/* Scrollbar styling for Side Catalog */
.sideCatalogCell::-webkit-scrollbar {
  width: 8px;
  background: #1d1f21;
}

.sideCatalogCell::-webkit-scrollbar-thumb {
  background: #373b41;
}

/* ↓ The board name. */
.boardHeader #labelName {
  color: #CD3B2B;
  text-shadow: 0px 1px 2px #E6E600;
  font-family: 'DOOM';
}

/* ↓ Hovering colors. Without them, the text wouldn't change. */
a#labelBoard:hover,
#welcomeMessage p a:hover,
.topBoards a:hover,
#dynamicLinks a:hover,
.splitField > * a:hover {
  color: inherit;
}

/*Header color*/
.boardHeader p,
#overboardId {
  color: #7239b3 !important;
  font-size: 160%;
}

/* ↓ Green text. For >implications */
.greenText {
  color: #6AF00A;
}
/* ↓ Red text. ==This is filth!== */
.redText {
  color: #AF0A0F;
  font-weight: bold;
  font-size: 125%;
  text-shadow: 0 0 1.5px black;
}

/* ↓ DOOM Text. [doom]for DOOM[/doom] */
.doomText {
  color: #AF0A0F;
  font-family: 'DOOM';
  text-shadow: 0 0 5px black;
}

/* ↓ Pink text. For <implications. Now a proper Orange */
.pinkText {
	color: #fc7905;
}

/* Custom Thumbnails */
/*  [DOCUMENTS] */
/* ↓ For downloadable document formats such as txt, pdf, epub, etc. Original site thumbnail size is 150px. */
img[src="/genericThumb.png"] {
  background: url("/.media/0e869cdd84b882efbbc19b1d5f144b9eac38aed8540efaf8f44ae66ba980d582.png") center/contain no-repeat;
  border: none !important;
  box-sizing: border-box;
  display: block;
  height: 128px;
  padding-left: 128px;
  width: 128px;
}

/*  [CAPTCHA Loading Screen] ↓ Replaces the default static Captcha loading image that appears before the actual code itself. */
.captchaImage {
  background-image: url('/.media/59cdd0ddd62f74ff933cd9d74f343a0b5749d645f8bf0e2aa9f1a1b80d1f3aa2.gif');
  background-size: 300px 100px;
  border: 1px solid black;
}

/* Infinity Bypass Spinner Color Change. Target the img element with the specified src and apply the filter */
body div.modalPanel div.modalInnerPanel form.modalForm img[src="/.static/spinner_infinity.svg"] {
    background-color: red; /* Changed from transparent to red */
    width: 300px;
    height: 100px;
    filter: invert(16%) sepia(95%) saturate(7491%) brightness(81%) hue-rotate(-5deg);
}

/* ↓ Oekaki button icon color*/
  --oekaki-button-active-color: #800000;
  --oekaki-button-boxshadow-color: #990000;
  --oekaki-button-color: #CC0000;
  --oekaki-button-focus-color: #FF4D4D;
  --oekaki-button-icon-active-color: whitesmoke;   /* <  Paintbrush icon color when clicked on  */
  --oekaki-button-icon-color: white;   /* <  Paintbrush icon color  */

/* ↓ Oekaki button */
.oekaki-btn {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.13)),
    radial-gradient(90% 7% at 50% 8%, rgba(255, 255, 255, 0.47) 25%, rgba(255, 255, 255, 0) 50%),
    var(--oekaki-button-color);
  border: 0;
  border-radius: 0.375em;
  box-shadow:
    0.2em 0.2em 0.5em rgba(0, 0, 0, 0.47),
    0 -0.1em 0 0.1em rgba(0, 0, 0, 0.27),
    0 0.1em 0 0.1em rgba(255, 255, 255, 0.27),
    -0.2em 0 0.2em var( --oekaki-button-boxshadow-color) inset,
    0 0.2em 0.2em rgba(255, 255, 255, 0.27) inset,
    0.2em 0 0.2em rgba(255, 255, 255, 0.27) inset,
    0 -0.2em 0.2em var( --oekaki-button-boxshadow-color) inset;
  color: var(--oekaki-button-icon-color);
  cursor: var(--cursor-pointer) !important;
  font-size: 16px;
  margin: 0 auto;
  padding: 0.75em 1em;
  text-shadow: 0 0 0.2em rgba(255, 255, 255, 0.47);
  transition-property: box-shadow;
  -webkit-tap-highlight-color: transparent;
}
.oekaki-btn,
.oekaki-btn span {
  display: block;
  transition-duration: 0.1s;
  transition-timing-function: linear;
}
.oekaki-btn:focus,
.oekaki-btn span:focus {
  outline: none;
}
.oekaki-btn span {
  transition-property: transform;
  will-change: transform;
}
.oekaki-btn:active {
  box-shadow:
    0 0 0 rgba(0, 0, 0, 0.47),
    0 -0.1em 0 0.1em rgba(0, 0, 0, 0.27),
    0 0.1em 0 0.1em rgba(255, 255, 255, 0.27),
    -0.2em 0 0.2em var(--oekaki-button-active-color) inset,
    0 0.2em 0.2em rgba(0, 0, 0, 0.27) inset,
    0.2em 0 0.2em rgba(0, 0, 0, 0.27) inset,
    0 -0.2em 0.2em var(--oekaki-button-active-color) inset;
  color: var(--oekaki-button-icon-active-color);
}
.oekaki-btn:active span {
  transform: scale(0.95);
}
.oekaki-btn:focus {
  color: var(--oekaki-button-focus-color);
  text-shadow: 0 0 0.2em rgba(157, 196, 255, 0.47);
}
/* ↓ The default Oekaki icon can be replaced with a custom icon of your own. Keep the size at 32x32 for best results.*/
.oekaki-btn:before {
    font-family: 'Icons';
    content:  url('/.media/97c09b2314923dd08112814f659fa58c351e705c272dd9da75de43c9859e5782.png');
}

/* ↓ Buttons (Cancel, OK, Post, Reload, & Report) */
input[value="Reload"],
input[type="submit"],
input[type="button"],
button {
  background-image: linear-gradient(180deg, #e0e0e0, #cccccc);
  border-radius: 0;
  border: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  box-sizing: border-box;
  color: #333;
  font: 600 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
  height: auto;
  max-width: 100%;
  padding: 2px 8px;
  transition:     box-shadow 0.2s ease,    transform 0.2s ease,    background 0.2s ease;
}
/* ↓ Hover effect for the buttons. */
input[value="Reload"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
  background-image: linear-gradient(180deg, #d4d4d4, #c0c0c0);
  cursor: var(--cursor-pointer) !important;
}
/* ↓ Active effect for the buttons. */
input[value="Reload"]:active,
input[type="submit"]:active,
input[type="button"]:active,
button:active {
  background-image: linear-gradient(180deg, #b3b3b3, #a0a0a0);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}
input[value="Reload"]:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
button:disabled {
  background-image: linear-gradient(180deg, #f0f0f0, #e0e0e0);
  box-shadow: none;
  color: #999;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ↓ File dropzone. */
#dropzone.dropzone,
#dropzoneQr.dropzone {
  color: #000;
  cursor: var(--cursor-pointer) !important;
  margin: auto;
  padding: 0 4px;
  text-align: center;
  min-height: 50px;
  max-height: 140px;
  transition: 
    background-color 0.3s ease,
    border-color 0.3s ease;
  background-color: rgba(200, 200, 200, 0.5);
  overflow-y: auto;
  border: 2px dashed rgba(125, 125, 125, 0.4);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  &:active {
    background-color: rgba(200, 200, 200, 0.8);
    border-color: rgba(125, 125, 125, 0.8);
  }
  
  &.dragover {
    background-color: rgba(200, 200, 200, 1);
    border-color: #7d7d7d;
    box-shadow: 0 0 10px rgba(125, 125, 125, 0.5);
  }
}
/* ↓ Hover effect for File dropzone. */
#dropzone.dropzone:hover,
#dropzoneQr.dropzone:hover {
  color: rgba(0, 0, 0, 0.5);
  cursor: var(--cursor-pointer) !important;
  border: 2px dashed rgba(125, 125, 125, 0.4);
} 

/* ↓ Affects the catalog and threads. */
#divThreads.catalogDiv div.catalogCell {
  background: rgba(182, 182, 182, 0.15);
  border: 2px solid rgba(111, 111, 111, 0.34);
  display: inline-block;
  font-size: auto;
  font-weight: normal;
  height: 300px;
  margin-bottom: 2px;
  margin-top: 2px;
  max-height: 300px;
  max-height:300px;
  overflow: hidden;
  padding: 2px;
  position: relative;
  text-align: center;
  vertical-align: top;
  width: 205px;
}

/* ↓ Changes color upon hovering. */
#divThreads.catalogDiv div.catalogCell:hover {
  background: #1a1a1a;
  border-color: #262626;
}


/* Adjusting only the report fieldset */
.reportFieldset {
  width: fit-content;
  margin-left: 0;
  margin-right: auto;
  display: block;
}

/*Cursor CSS adapted from /fur/, credit to them! Icons are original*/
html, *, hover, #postingForm th { 
  cursor: url(/.media/afd7bfb4609148f6ea37bc8cd3ef8aa3a1240e97db311a88018cb09f01eef109.png), default; 
}
 
a, .embedButton, select, .divRefresh input, #postingForm button, #qrbutton { 
  cursor: url(/.media/376049998dbfac844c3fea01eb883fe2b8bc06a56379dfc92ba99e61516b11c1.png), progress !important; 
}
 
label, img, .hideFileButton { 
  cursor: url(/.media/d692e1e489ba81e43005e17fce23e6b681637ba38da0c481647a04e7a2d68767.png), progress !important; 
}
 
#dropzone, #dropzoneQr {
  cursor: url(/.media/295aa9a7d3621ff286d339b5e4b30b44c383deef6f49955c04b9b489e5eb2bdb.png), progress !important;
  font-size: 14px;
} 

/* Apply Tomorrow theme to Quick Reply box */
#quick-reply {
  background: #1d1f21 !important; /* dark background */
  color: #c5c8c6 !important; /* light text */
  border: 1px solid #373b41 !important; /* subtle border */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* soft shadow for depth */
}

/* Optional: tweak input and textarea inside Quick Reply */
#quick-reply input[type="text"],
#quick-reply textarea {
  background: #282a2e !important; /* slightly lighter for contrast */
  color: #c5c8c6 !important;
  border: 1px solid #373b41 !important;
}

/* Optional: button styling */
#quick-reply button {
  background: #373b41 !important;
  color: #c5c8c6 !important;
  border: 1px solid #282a2e !important;
}

#quick-reply button:hover {
  background: #282a2e !important;
  color: #ffffff !important;
}

/* Selected cell styling to match Tomorrow theme */
.selectedCell {
  background: #373b41 !important; /* subtle contrast for selection */
  color: #ffffff !important; /* bright text for emphasis */
  border: 1px solid #282a2e !important; /* consistent border tone */
}

/* Name label styling to match Tomorrow theme */
.nameLabel {
  color: #c5c8c6 !important; /* light gray text */
  background: transparent !important; /* keep clean look */
  border-bottom: 1px solid #373b41 !important; /* subtle divider */
}