/* BloomTrack Community - Custom Element Theme */
/* Emerald/Green brand palette matching BloomTrack's main app */

:root {
  /* Override Element's accent color to BloomTrack emerald */
  --cpd-color-text-action-accent: #059669 !important;
  --cpd-color-bg-action-primary-rest: #059669 !important;
  --cpd-color-bg-action-primary-hovered: #047857 !important;
  --cpd-color-bg-action-primary-pressed: #065f46 !important;
  --cpd-color-icon-accent-tertiary: #10b981 !important;
  --cpd-color-text-link-external: #059669 !important;
  --accent: #059669 !important;
  --accent-color: #059669 !important;
}

/* ===== Light Theme ===== */
.cpd-theme-light,
[class*="mx_ThemeLight"],
body:not(.cpd-theme-dark) {
  --cpd-color-text-action-accent: #059669 !important;
  --cpd-color-bg-action-primary-rest: #059669 !important;
  --cpd-color-bg-action-primary-hovered: #047857 !important;
  --cpd-color-bg-action-primary-pressed: #065f46 !important;
  --cpd-color-icon-accent-tertiary: #10b981 !important;
}

/* ===== Dark Theme ===== */
.cpd-theme-dark,
[class*="mx_ThemeDark"] {
  --cpd-color-text-action-accent: #34d399 !important;
  --cpd-color-bg-action-primary-rest: #059669 !important;
  --cpd-color-bg-action-primary-hovered: #10b981 !important;
  --cpd-color-bg-action-primary-pressed: #047857 !important;
  --cpd-color-icon-accent-tertiary: #6ee7b7 !important;
}

/* Room list sidebar header - subtle brand gradient */
.mx_LeftPanel .mx_LeftPanel_filterContainer,
.mx_SpacePanel {
  border-bottom: 2px solid #059669 !important;
}

/* Send button - emerald */
.mx_MessageComposer_sendMessage {
  background-color: #059669 !important;
}
.mx_MessageComposer_sendMessage:hover {
  background-color: #047857 !important;
}

/* Read receipts, presence indicators */
.mx_Pill {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #059669 !important;
}

/* Notification badge */
.mx_NotificationBadge {
  background-color: #059669 !important;
}
.mx_NotificationBadge_highlighted {
  background-color: #dc2626 !important;
}

/* Room tile active/selected state */
[class*="mx_RoomTile"][class*="selected"],
[class*="mx_RoomTile"][class*="Active"],
.mx_RoomTile_selected {
  background-color: rgba(16, 185, 129, 0.1) !important;
}
.mx_RoomTile_selected .mx_RoomTile_title {
  color: #059669 !important;
}

/* Toggle switches */
.mx_ToggleSwitch_on {
  background-color: #059669 !important;
}

/* Links */
a:not([class]) {
  color: #059669 !important;
}
a:not([class]):hover {
  color: #047857 !important;
}

/* Auth page branding */
.mx_AuthPage {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%) !important;
}
.cpd-theme-dark .mx_AuthPage {
  background: linear-gradient(135deg, #022c22 0%, #064e3b 50%, #065f46 100%) !important;
}

/* Auth body card */
.mx_AuthPage .mx_AuthBody {
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(5, 150, 105, 0.15) !important;
}

/* Welcome/home page */
.mx_HomePage .mx_HomePage_default {
  text-align: center;
}

/* Scrollbar styling */
::-webkit-scrollbar-thumb {
  background-color: rgba(16, 185, 129, 0.3) !important;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(16, 185, 129, 0.5) !important;
}

/* Power level indicators */
.mx_PowerSelector .mx_PowerSelector_button {
  color: #059669 !important;
}

/* Typing indicator */
.mx_WhoIsTypingTile_typingDot {
  background-color: #10b981 !important;
}

/* Room header */
.mx_RoomHeader {
  border-bottom: 1px solid rgba(16, 185, 129, 0.2) !important;
}

/* Unread room indicator */
.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon::before {
  border-color: #059669 !important;
}

/* Toast notifications */
.mx_Toast_toast {
  border-left: 4px solid #059669 !important;
}

/* Space panel selected */
.mx_SpaceButton.mx_SpaceButton_active {
  background-color: rgba(16, 185, 129, 0.15) !important;
}

/* Reaction button */
.mx_ReactionsRowButton_selected {
  border-color: #059669 !important;
  background-color: rgba(16, 185, 129, 0.1) !important;
}

/* User info panel */
.mx_UserInfo .mx_UserInfo_profile h2 {
  color: #059669 !important;
}
