/**
 * Custom Color Scheme for MyBB Forum
 * Based on: smartphonefreechildhoodus.com
 * Created: October 17, 2025
 * 
 * Color Palette:
 * - Dark Teal: #0E3B3B / #0C2F2E (text, headers, dark backgrounds)
 * - Bright Green: #00E085 (buttons, CTAs, hover states)
 * - Light Green: #D9F5C2 (accents, highlights)
 * - White: #FFFFFF (main backgrounds)
 * - Light Beige: #EDEAE4 (alternate backgrounds)
 */

/* ================================================
   CSS CUSTOM PROPERTIES
   ================================================ */
:root {
  /* Base Colors */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-dark-teal: #0E3B3B;
  --color-dark-teal-bg: #0C2F2E;
  --color-light-green: #D9F5C2;
  --color-bright-green: #00E085;
  --color-light-beige: #EDEAE4;
  --color-logo-bg: #EBF7C9;  /* Logo background color - experimental */
  
  /* Green-tinted replacements for grey (matches logo) */
  --color-gray-border: #C5E5A4;  /* Light green border instead of grey */
  --color-light-grey-bg: #F5FBEB;  /* Very light green instead of #EFEFEF */
  --color-dark-gray-text: #5A7A4A;  /* Green-tinted text instead of grey */
  --color-dark-border: #0E3B3B;  /* Use dark teal instead of black */
  --color-medium-gray: #7BA05B;  /* Muted green instead of grey */
  
  /* Semantic Colors */
  --primary-text: var(--color-dark-teal);
  --secondary-text: var(--color-dark-gray-text);
  --link-color: var(--color-dark-teal);
  --link-hover: var(--color-bright-green);
  --button-bg: var(--color-bright-green);
  --button-hover: var(--color-dark-teal-bg);
  --header-bg: var(--color-dark-teal-bg);
  --footer-bg: var(--color-dark-teal-bg);
  --accent-bg: var(--color-light-green);
  --alt-bg: var(--color-light-beige);
}

/* ================================================
   BODY & CONTAINER - EXPERIMENTAL LOGO COLOR
   ================================================ */
body {
  background: var(--color-logo-bg) !important;  /* Using logo color #EBF7C9 */
  color: var(--primary-text) !important;
}

#container {
  color: var(--primary-text) !important;
  background: var(--color-logo-bg) !important;  /* Soft green background */
}

#content {
  background: var(--color-white) !important;  /* Keep content white for readability */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* ================================================
   LINKS
   ================================================ */
a:link,
a:visited {
  color: var(--link-color) !important;
  text-decoration: none;
}

a:hover,
a:active {
  color: var(--link-hover) !important;
  text-decoration: none;
}

/* ================================================
   HEADER & LOGO - EXPERIMENTAL
   ================================================ */
#logo {
  background: var(--color-logo-bg) !important;  /* Match logo background */
  border-bottom: 2px solid var(--color-dark-teal) !important;
}

/* Logo Image Size */
#logo img,
#logo .logo img {
  max-width: 220px !important;
  width: 220px !important;
  height: auto !important;
}

#logo ul.top_links a:link,
#logo ul.top_links a:visited {
  color: var(--color-dark-teal) !important;
}

#logo ul.top_links a:hover,
#logo ul.top_links a:active {
  color: var(--color-bright-green) !important;
}

/* ================================================
   PANEL (User Navigation Bar)
   ================================================ */
#panel .upper {
  background: var(--header-bg) !important;
  color: var(--color-white) !important;
  border-top: 1px solid var(--color-bright-green) !important;
  border-bottom: 1px solid var(--color-dark-teal) !important;
}

#panel .upper a:link,
#panel .upper a:visited,
#panel .upper a:hover,
#panel .upper a:active {
  color: var(--color-white) !important;
}

#panel .upper a:hover {
  color: var(--color-bright-green) !important;
}

#panel .lower {
  background: var(--color-logo-bg) !important;  /* Experimental: logo color */
  color: var(--color-dark-teal) !important;
  border-bottom: 1px solid var(--color-gray-border) !important;
}

#panel .lower a:link,
#panel .lower a:visited {
  color: var(--color-dark-teal) !important;
}

#panel .lower a:hover,
#panel .lower a:active {
  color: var(--color-bright-green) !important;
}

/* ================================================
   SEARCH BOX
   ================================================ */
#search input.button {
  background: var(--color-bright-green) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-dark-teal) !important;
  border-radius: 4px;
  padding: 5px 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

#search input.button:hover {
  background: var(--color-dark-teal-bg) !important;
  border-color: var(--color-bright-green) !important;
}

#search input.textbox {
  border: 1px solid var(--color-gray-border) !important;
  border-radius: 4px;
  padding: 5px;
}

#search input.textbox:focus {
  border-color: var(--color-bright-green) !important;
  outline: none;
}

/* ================================================
   FOOTER
   ================================================ */
#footer .upper {
  background: var(--color-logo-bg) !important;  /* Experimental: logo color */
  border-top: 1px solid var(--color-gray-border) !important;
  border-bottom: 1px solid var(--color-gray-border) !important;
}

#footer .upper a:link,
#footer .upper a:visited {
  color: var(--color-dark-teal) !important;
}

#footer .upper a:hover,
#footer .upper a:active {
  color: var(--color-bright-green) !important;
}

#footer .lower {
  background: var(--footer-bg) !important;
  color: var(--color-white) !important;
}

#footer .lower a:link,
#footer .lower a:visited {
  color: var(--color-white) !important;
}

#footer .lower a:hover,
#footer .lower a:active {
  color: var(--color-bright-green) !important;
}

/* ================================================
   TABLES & FORUMS
   ================================================ */
.tborder {
  background: var(--color-white) !important;
  border: 1px solid var(--color-gray-border) !important;
}

.thead {
  background: var(--color-dark-teal-bg) !important;
  color: var(--color-white) !important;
  border-bottom: 2px solid var(--color-bright-green) !important;
}

.thead a:link,
.thead a:visited {
  color: var(--color-white) !important;
}

.thead a:hover,
.thead a:active {
  color: var(--color-bright-green) !important;
}

.tcat {
  background: var(--color-light-grey-bg) !important;  /* Light green tint instead of beige/grey */
  color: var(--color-dark-teal) !important;
  border-top: 1px solid var(--color-gray-border) !important;
  border-bottom: 1px solid var(--color-gray-border) !important;
}

.tcat a:link,
.tcat a:visited {
  color: var(--color-dark-teal) !important;
}

.tcat a:hover {
  color: var(--color-bright-green) !important;
}

.trow1 {
  background: var(--color-white) !important;
  border-bottom: 1px solid var(--color-gray-border) !important;
}

.trow2 {
  background: var(--color-logo-bg) !important;  /* Experimental: logo color for alternating rows */
  border-bottom: 1px solid var(--color-gray-border) !important;
}

.trow_shaded {
  background: var(--accent-bg) !important;
}

.trow_selected {
  background: var(--color-light-green) !important;
  border: 2px solid var(--color-bright-green) !important;
}

.tfoot {
  background: var(--color-light-grey-bg) !important;  /* Light green tint */
  color: var(--secondary-text) !important;
  border-top: 1px solid var(--color-gray-border) !important;
}

.tfoot a:link,
.tfoot a:visited {
  color: var(--color-dark-teal) !important;
}

.tfoot a:hover {
  color: var(--color-bright-green) !important;
}

/* ================================================
   BUTTONS
   ================================================ */
.button,
input.button,
button,
.submit_button {
  background: var(--color-bright-green) !important;
  color: var(--color-white) !important;
  border: 2px solid var(--color-bright-green) !important;
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.button:hover,
input.button:hover,
button:hover,
.submit_button:hover {
  background: var(--color-dark-teal-bg) !important;
  border-color: var(--color-bright-green) !important;
  color: var(--color-white) !important;
}

/* Secondary Button Style */
.button.secondary {
  background: transparent !important;
  color: var(--color-dark-teal) !important;
  border: 2px solid var(--color-dark-teal) !important;
}

.button.secondary:hover {
  background: var(--color-dark-teal) !important;
  color: var(--color-white) !important;
}

/* ================================================
   FORMS & INPUTS
   ================================================ */
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  border: 1px solid var(--color-gray-border) !important;
  border-radius: 4px;
  padding: 8px;
  color: var(--primary-text) !important;
  background: var(--color-white) !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  border-color: var(--color-bright-green) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 224, 133, 0.1);
}

/* ================================================
   POSTS & THREADS
   ================================================ */
.post {
  background: var(--color-white) !important;
  border: 1px solid var(--color-gray-border) !important;
  border-radius: 4px;
  margin-bottom: 10px;
}

.post_author {
  background: var(--alt-bg) !important;
  border-right: 1px solid var(--color-gray-border) !important;
}

.post_author a {
  color: var(--color-dark-teal) !important;
  font-weight: bold;
}

.post_author a:hover {
  color: var(--color-bright-green) !important;
}

.post_body {
  background: var(--color-white) !important;
  color: var(--primary-text) !important;
}

.post_controls {
  background: var(--alt-bg) !important;
  border-top: 1px solid var(--color-gray-border) !important;
}

/* ================================================
   STICKY & ANNOUNCEMENT THREADS
   ================================================ */
.sticky_thread,
.announcement {
  background: var(--accent-bg) !important;
  border-left: 4px solid var(--color-bright-green) !important;
}

/* ================================================
   PAGINATION
   ================================================ */
.pagination a {
  background: var(--color-white) !important;
  color: var(--color-dark-teal) !important;
  border: 1px solid var(--color-gray-border) !important;
  border-radius: 4px;
  padding: 5px 10px;
  margin: 0 2px;
  display: inline-block;
}

.pagination a:hover {
  background: var(--color-bright-green) !important;
  color: var(--color-white) !important;
  border-color: var(--color-bright-green) !important;
}

.pagination .current {
  background: var(--color-dark-teal-bg) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-dark-teal) !important;
  border-radius: 4px;
  padding: 5px 10px;
  margin: 0 2px;
  display: inline-block;
}

/* ================================================
   BREADCRUMB
   ================================================ */
.navigation {
  background: var(--alt-bg) !important;
  border: 1px solid var(--color-gray-border) !important;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}

.navigation a {
  color: var(--color-dark-teal) !important;
}

.navigation a:hover {
  color: var(--color-bright-green) !important;
}

/* ================================================
   FORUM ICONS & STATUS
   ================================================ */
.forum_status {
  border-radius: 50%;
}

.forum_on {
  background: var(--color-bright-green) !important;
}

.forum_off {
  background: var(--color-gray-border) !important;
}

.forum_offlink {
  background: var(--color-medium-gray) !important;
}

/* ================================================
   MODERATION & ADMIN
   ================================================ */
.moderation_notice {
  background: var(--accent-bg) !important;
  border: 2px solid var(--color-bright-green) !important;
  border-radius: 4px;
  padding: 10px;
  color: var(--color-dark-teal) !important;
}

.error {
  background: #FFE6E6 !important;
  border: 2px solid #FF4444 !important;
  border-radius: 4px;
  padding: 10px;
  color: #CC0000 !important;
}

.success {
  background: var(--accent-bg) !important;
  border: 2px solid var(--color-bright-green) !important;
  border-radius: 4px;
  padding: 10px;
  color: var(--color-dark-teal) !important;
}

/* ================================================
   QUICK REPLY
   ================================================ */
#quickreply {
  background: var(--alt-bg) !important;
  border: 1px solid var(--color-gray-border) !important;
  border-radius: 4px;
  padding: 15px;
}

/* ================================================
   USER CP & MOD CP
   ================================================ */
.usercp_nav,
.modcp_nav {
  background: var(--alt-bg) !important;
  border: 1px solid var(--color-gray-border) !important;
  border-radius: 4px;
}

.usercp_nav a,
.modcp_nav a {
  color: var(--color-dark-teal) !important;
  padding: 8px 12px;
  display: block;
  border-bottom: 1px solid var(--color-gray-border);
}

.usercp_nav a:hover,
.modcp_nav a:hover {
  background: var(--color-light-green) !important;
  color: var(--color-dark-teal) !important;
}

.usercp_nav a.active,
.modcp_nav a.active {
  background: var(--color-dark-teal-bg) !important;
  color: var(--color-white) !important;
  border-left: 4px solid var(--color-bright-green);
}

/* ================================================
   PROFILE
   ================================================ */
.profile_header {
  background: var(--color-dark-teal-bg) !important;
  color: var(--color-white) !important;
  border-radius: 4px 4px 0 0;
  padding: 15px;
}

.profile_content {
  background: var(--color-white) !important;
  border: 1px solid var(--color-gray-border) !important;
  border-radius: 0 0 4px 4px;
  padding: 15px;
}

/* ================================================
   ALERTS & NOTIFICATIONS
   ================================================ */
.red_alert {
  background: #FFE6E6 !important;
  border-left: 4px solid #FF4444 !important;
  color: #CC0000 !important;
}

.green_alert {
  background: var(--accent-bg) !important;
  border-left: 4px solid var(--color-bright-green) !important;
  color: var(--color-dark-teal) !important;
}

.blue_alert {
  background: #E6F3FF !important;
  border-left: 4px solid #0072BC !important;
  color: #004080 !important;
}

/* ================================================
   RESPONSIVE ADJUSTMENTS
   ================================================ */
@media screen and (max-width: 768px) {
  .button,
  input.button,
  button,
  .submit_button {
    padding: 10px 16px;
    font-size: 13px;
  }
  
  #panel .upper,
  #panel .lower {
    padding: 10px;
  }
}

/* ================================================
   HOVER EFFECTS & TRANSITIONS
   ================================================ */
a,
.button,
input.button,
button,
.submit_button,
input[type="text"],
input[type="password"],
textarea {
  transition: all 0.3s ease;
}

/* ================================================
   CUSTOM SCROLLBAR (Webkit browsers)
   ================================================ */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--alt-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-dark-teal);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-bright-green);
}

/* ================================================
   END OF CUSTOM COLORS
   ================================================ */