/* ==========================================================================
   THREAD (Meta Threads Rebrand for Mastodon v4.3 — LIGHT THEME)
   Aesthetic: Clean White (#FFFFFF), Minimalist Monochrome, Pure Black '%' Logo
   Signature: Black Pill Buttons, Clean Subtle Borders, Modern Card Layout
   ========================================================================== */

/* 1. GANTIKAN LOGO DI SEMUA TEMPAT KEPADA SIMBOL '%' (HITAM) */

/* A. Web App Main Feed (Lajur Kanan) */
.navigation-panel__logo,
.navigation-panel .column-link--logo,
.column-link--logo {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin-bottom: 16px !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMDAgMjAwJz4KICA8bGluZSB4MT0nMTQyJyB5MT0nNDAnIHgyPSc1OCcgeTI9JzE2MCcgc3Ryb2tlPScjMDAwMDAwJyBzdHJva2Utd2lkdGg9JzIyJyBzdHJva2UtbGluZWNhcD0ncm91bmQnLz4KICA8Y2lyY2xlIGN4PSc2NicgY3k9JzY2JyByPScyNycgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDAwMDAwJyBzdHJva2Utd2lkdGg9JzIyJy8+CiAgPGNpcmNsZSBjeD0nMTM0JyBjeT0nMTM0JyByPScyNycgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDAwMDAwJyBzdHJva2Utd2lkdGg9JzIyJy8+Cjwvc3ZnPg==") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 38px 38px !important;
}

.navigation-panel__logo svg,
.column-link--logo svg,
.navigation-panel__logo .logo--wordmark,
.navigation-panel__logo .logo--icon {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* B. Admin Panel Sidebar (Bucu Atas Kiri Admin) */
.admin-wrapper .sidebar .logo {
  display: block !important;
  width: 90px !important;
  height: 90px !important;
  margin: 24px auto !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMDAgMjAwJz4KICA8bGluZSB4MT0nMTQyJyB5MT0nNDAnIHgyPSc1OCcgeTI9JzE2MCcgc3Ryb2tlPScjMDAwMDAwJyBzdHJva2Utd2lkdGg9JzIyJyBzdHJva2UtbGluZWNhcD0ncm91bmQnLz4KICA8Y2lyY2xlIGN4PSc2NicgY3k9JzY2JyByPScyNycgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDAwMDAwJyBzdHJva2Utd2lkdGg9JzIyJy8+CiAgPGNpcmNsZSBjeD0nMTM0JyBjeT0nMTM0JyByPScyNycgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDAwMDAwJyBzdHJva2Utd2lkdGg9JzIyJy8+Cjwvc3ZnPg==") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 65px 65px !important;
  background-color: #F4F4F5 !important;
  border-radius: 24px !important;
  border: 1px solid #E4E4E7 !important;
}

.admin-wrapper .sidebar .logo svg,
.admin-wrapper .sidebar .logo--wordmark,
.admin-wrapper .sidebar .logo--icon {
  display: none !important;
  visibility: hidden !important;
}

/* C. Header Mobile & Landing */
.tabs-bar__link--logo svg,
.hero__logo svg,
.landing-page__logo svg {
  display: none !important;
}

.tabs-bar__link--logo,
.hero__logo,
.landing-page__logo {
  display: inline-block !important;
  width: 44px !important;
  height: 44px !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMDAgMjAwJz4KICA8bGluZSB4MT0nMTQyJyB5MT0nNDAnIHgyPSc1OCcgeTI9JzE2MCcgc3Ryb2tlPScjMDAwMDAwJyBzdHJva2Utd2lkdGg9JzIyJyBzdHJva2UtbGluZWNhcD0ncm91bmQnLz4KICA8Y2lyY2xlIGN4PSc2NicgY3k9JzY2JyByPScyNycgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDAwMDAwJyBzdHJva2Utd2lkdGg9JzIyJy8+CiAgPGNpcmNsZSBjeD0nMTM0JyBjeT0nMTM0JyByPScyNycgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDAwMDAwJyBzdHJva2Utd2lkdGg9JzIyJy8+Cjwvc3ZnPg==") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 34px 34px !important;
}

/* 2. LATAR BELAKANG PUTIH BERSIH ALA THREADS LIGHT */
html,
body,
body.theme-mastodon-light,
body.skin-mastodon-light,
body.theme-default,
.ui,
.layout-single-column,
.columns-area,
.column,
.column > .scrollable,
.columns-area__panels__pane,
.columns-area__panels__pane--navigational,
.columns-area__panels__pane--compositional,
.navigation-panel,
.compose-panel,
.drawer,
.drawer__inner,
.sidebar {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #111111 !important;
}

/* Navigation Links (Lajur Kanan) */
.column-header,
.column-header__back-button,
.tabs-bar,
.navigation-panel a,
.navigation-panel .navigation-panel__link {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-color: #E5E7EB !important;
  color: #111111 !important;
}

.navigation-panel .navigation-panel__link:hover {
  background: #F4F4F5 !important;
  color: #000000 !important;
}

.navigation-panel .navigation-panel__link.active {
  color: #000000 !important;
  font-weight: 700 !important;
}

/* Banner Notifikasi / Dismissable */
.dismissable-banner {
  background: #F4F4F5 !important;
  border: 1px solid #E4E4E7 !important;
  color: #27272A !important;
  border-radius: 12px !important;
}

/* 3. TIMELINE FEED & KAD STATUS */
.status,
.status__wrapper,
.detailed-status,
.detailed-status__action-bar,
.notification {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #ECECEC !important;
  color: #111111 !important;
}

.status:hover {
  background: #FAFAFA !important;
}

.status__content {
  color: #111111 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.status__display-name strong,
.account__display-name strong {
  color: #000000 !important;
  font-weight: 700 !important;
}

.account__header__username,
.status__display-name .display-name__account {
  color: #71717A !important;
}

.status__display-name .account__avatar,
.account__avatar,
.status__avatar {
  border-radius: 50% !important;
}

/* 4. BUTANG POST ALA THREADS LIGHT (Pill Hitam Pekat, Tulisan Putih Tebal) */
.button,
.button.button-primary,
.compose-form__publish-button .button,
.button--block {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 8px 22px !important;
  transition: all 0.15s ease-in-out !important;
}

.button:hover,
.button.button-primary:hover,
.compose-form__publish-button .button:hover {
  background: #27272A !important;
  background-color: #27272A !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
}

.button:active {
  transform: scale(0.98) !important;
}

/* 5. KOTAK TULIS STATUS (COMPOSE FORM) */
.compose-form {
  background: #FFFFFF !important;
  border: 1px solid #E4E4E7 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
  color: #000000 !important;
}

.compose-form .autosuggest-textarea__textarea {
  background: transparent !important;
  color: #000000 !important;
  border: none !important;
}

.compose-form .compose-form__modifiers {
  background: transparent !important;
}

/* 6. RUANGAN CARIAN (SEARCH PILL) */
.search__input {
  background: #F4F4F5 !important;
  border: 1px solid #E4E4E7 !important;
  border-radius: 9999px !important;
  color: #000000 !important;
}

.search__input:focus {
  background: #FFFFFF !important;
  border-color: #A1A1AA !important;
}

.search__icon .fa {
  color: #71717A !important;
}

/* 7. BUTANG REAKSI */
.status__action-bar__button,
.icon-button {
  color: #71717A !important;
}

.status__action-bar__button:hover,
.icon-button:hover {
  color: #000000 !important;
}

/* Repost (Boost) -> Hijau */
.status__action-bar__button.active.icon-button[aria-label*="Boost"],
.status__action-bar__button.active.icon-button[aria-label*="boost"],
.status__action-bar__button.icon-button.active i.fa-retweet {
  color: #00BA7C !important;
}

/* Like (Favorite) -> Merah */
.status__action-bar__button.active.icon-button[aria-label*="Favourite"],
.status__action-bar__button.active.icon-button[aria-label*="favourite"],
.status__action-bar__button.active.icon-button[aria-label*="Like"],
.status__action-bar__button.icon-button.active i.fa-star,
.status__action-bar__button.icon-button.active i.fa-heart {
  color: #FF3040 !important;
}

/* Links */
.status__content a {
  color: #000000 !important;
  text-decoration: underline !important;
  text-decoration-color: #A1A1AA !important;
}

.status__content a:hover {
  text-decoration-color: #000000 !important;
}


