/* =============================================================================
 * Honey Badger — Custom Element Web Theme
 * =============================================================================
 * Amber/gold accents on dark charcoal with honeycomb motifs.
 * "Honey Badger don't care" about your plaintext messages.
 * ============================================================================= */

/* --- Override accent colors to amber/gold --- */
:root {
  --cpd-color-text-action-accent: #d4a017 !important;
  --cpd-color-bg-action-primary-rest: #d4a017 !important;
  --cpd-color-bg-action-primary-hovered: #b8860b !important;
  --cpd-color-bg-action-primary-pressed: #9a7209 !important;
  --cpd-color-text-link-external: #d4a017 !important;
  --cpd-color-icon-accent-tertiary: #d4a017 !important;
}

/* --- Sidebar branding --- */
.mx_LeftPanel {
  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%) !important;
}

/* --- Room list hover states --- */
.mx_RoomTile:hover {
  background-color: rgba(212, 160, 23, 0.08) !important;
}

/* --- Active room highlight --- */
.mx_RoomTile_selected,
.mx_RoomTile[aria-selected="true"] {
  background-color: rgba(212, 160, 23, 0.15) !important;
}

/* --- Header bar --- */
.mx_RoomHeader {
  border-bottom: 1px solid rgba(212, 160, 23, 0.2) !important;
}

/* --- Message send button --- */
.mx_MessageComposer_sendMessage {
  background-color: #d4a017 !important;
}

.mx_MessageComposer_sendMessage:hover {
  background-color: #b8860b !important;
}

/* --- Scrollbar styling --- */
::-webkit-scrollbar-thumb {
  background-color: rgba(212, 160, 23, 0.3) !important;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(212, 160, 23, 0.5) !important;
}

/* --- Encryption badge styling --- */
.mx_E2EIcon_verified {
  color: #d4a017 !important;
}

/* --- User avatar ring for verified users --- */
.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon::before {
  border-color: #d4a017 !important;
}

/* --- Notification badges --- */
.mx_NotificationBadge {
  background-color: #d4a017 !important;
}

/* --- Welcome/home page background --- */
.mx_HomePage {
  background: url('/themes/img/background.png') center center / cover no-repeat !important;
  background-color: #0d0d0d !important;
}

/* --- Auth page styling --- */
.mx_AuthPage {
  background: url('/themes/img/background.png') center center / cover no-repeat !important;
  background-color: #0d0d0d !important;
}

/* --- Dialog/modal accent --- */
.mx_Dialog_primary {
  background-color: #d4a017 !important;
}

.mx_Dialog_primary:hover {
  background-color: #b8860b !important;
}

/* --- Toggle switches --- */
.mx_ToggleSwitch_on {
  background-color: #d4a017 !important;
}

/* --- Power level badges --- */
.mx_PowerSelector {
  color: #d4a017 !important;
}

/* --- Subtle honeycomb pattern on empty states --- */
.mx_RoomView_body:empty::before,
.mx_HomePage_default::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5L52 17.5V42.5L30 55L8 42.5V17.5L30 5Z' fill='none' stroke='%23d4a017' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  pointer-events: none;
}

/* --- Link colors --- */
a {
  color: #d4a017;
}

a:hover {
  color: #f0c040;
}

/* --- Selection highlight --- */
::selection {
  background-color: rgba(212, 160, 23, 0.3) !important;
}