/* =====================================================
   NEOK Loop — Black UI + White Text + Grey Border #4d4d4d
   ===================================================== */

:root {
  --loop-red: #d50023;           /* Accent red (links, icons, hovers) */
  --text-white: #ffffff;
  --black-bg: #000000;
  --panel-bg: #0d0f16;
  --button-bg: #10111c;          /* Button background */
  --border-grey: #4d4d4d;        /* UPDATED border color */
  --badge-bg: #575757;
}

/* ---------- GLOBAL TEXT ---------- */
body, div, p, span, label, h1, h2, h3, h4, h5, h6 {
  color: var(--text-white) !important;
}

body {
  background: var(--black-bg) !important;
}

/* Panels */
.column, .status, .drawer, .compose-form {
  background: var(--panel-bg) !important;
}

/* ---------- BUTTONS ---------- */

button,
.button,
.status__action-bar-button,
.compose-form__publish-button-wrapper button {
  background: var(--button-bg) !important;   /* #10111c */
  border: 2px solid var(--border-grey) !important; /* UPDATED to #4d4d4d */
  color: var(--text-white) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

/* Hover stays clean (no color shift) */
button:hover,
.button:hover,
.compose-form__publish-button-wrapper button:hover {
  background: var(--button-bg) !important;
  border-color: var(--border-grey) !important;
}

/* Compact Button */
.button--compact {
  font-size: 14px !important;
  line-height: normal !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  background: var(--button-bg) !important;
  border: 2px solid var(--border-grey) !important; /* grey border */
}

/* ---------- BADGES ---------- */
.icon-with-badge__badge {
  position: absolute !important;
  inset-inline-start: 9px !important;
  top: -13px !important;
  background: var(--badge-bg) !important;
  border: 2px solid var(--panel-bg) !important;
  padding: 1px 6px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 14px !important;
  color: #fff !important;
}

/* ---------- LINKS ---------- */
a {
  color: var(--text-white) !important;
}
a:hover {
  color: var(--loop-red) !important;
}

/* ---------- ICONS ---------- */
.icon-button {
  color: var(--text-white) !important;
}
.icon-button:hover {
  color: var(--loop-red) !important;
}
.icon-button.active {
  color: var(--loop-red) !important;
}

/* ---------- INPUT FIELDS ---------- */
input, textarea {
  background: #0b0c10 !important;
  color: #ffffff !important;
  border: 1px solid var(--border-grey) !important;
}

/* ---------- MASTODON LOGO → NEOK Logo ---------- */
.mastodon-brand-link svg {
  display: none !important;
}

.mastodon-brand-link {
  background-image: url("/themes/loop/logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 160px !important;
  height: 55px !important;
  display: block !important;
  margin-right: 10px;
}