/*
================================================================
MASTODON BLACK & WHITE THEME - CUSTOM CSS
================================================================
Copy and paste this into your Admin -> Settings -> Appearance -> Custom CSS box.
*/
 
:root {
  /* Redefine the core color variables for a B&W theme */
  --primary-color: #ffffff; /* Use white as the primary "action" color */
  --secondary-color: #cccccc; /* A light grey for secondary info */
  --text-color: #ffffff; /* Main text color */
  --text-color-muted: #aaaaaa; /* Muted text like user handles */
  --bg-color: #000000; /* Main background color */
  --panel-bg: #111111; /* Background for columns, headers, etc. */
  --panel-bg-lighter: #222222; /* Lighter panel for hover/selection */
  --border-color: #333333; /* Border color for dividers */
}
 
/* --- 1. GENERAL PAGE & TEXT STYLES --- */
html, body, .main-container, .ui {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}
 
/* Make all links white and underline on hover */
a {
  color: var(--primary-color) !important;
}
a:hover {
  text-decoration: underline;
}
 
/* --- 2. COLUMNS AND PANELS --- */
/* Set background for columns, drawers, and headers */
.drawer, .columns-area, .column, .column-header, .search__input, .compose-form {
  background-color: var(--panel-bg) !important;
  border-color: var(--border-color) !important;
}
 
/* Column dividers */
.column-divider {
  background-color: var(--border-color) !important;
}
 
/* --- 3. BUTTONS --- */
/* This is the main button style you asked for */
.button {
  background-color: #ffffff !important; /* White background */
  color: #000000 !important;             /* Black text */
  border: 1px solid #ffffff !important;   /* White border */
}
 
/* Button hover effect */
.button:hover {
  background-color: #cccccc !important; /* Light grey on hover */
  border-color: #cccccc !important;
}
 
/* --- 4. POSTS / STATUSES --- */
/* General post styling */
.status__wrapper {
  border-bottom-color: var(--border-color) !important;
}
 
/* Change highlight color when a post is clicked/selected */
.status__wrapper.selected, .status__wrapper:hover {
  background-color: var(--panel-bg-lighter) !important;
}
 
/* Ensure usernames and display names are white */
.display-name__html, .account__display-name {
  color: var(--text-color) !important;
}
.account__acct {
  color: var(--text-color-muted) !important;
}
 
/* --- 5. INPUTS AND FORMS --- */
/* Style for text boxes like the search and compose areas */
textarea, input[type="text"], input[type="search"] {
  background-color: #222222 !important;
  color: #ffffff !important;
  border: 1px solid var(--border-color) !important;
}

/* --- 6. ICONS --- */
/* Set all icons to white */
.icon, .fa, .fa-fw, [class*="fa-"], [data-icon], svg {
  color: #ffffff !important;
  fill: #ffffff !important; /* For SVG icons */
}


/* Style for the 'Return to builder' button */
.builder-return-button {
  display: block;
  background-color: #ff5733;
  color: #ffffff !important;
  padding: 12px;
  margin-top: 10px;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
}
.builder-return-button:hover {
  background-color: #c74624;
}