/* ==========================================================================
   Rez-Chat Theme for Element Web
   Main Entry Point
   
   Usage: Import this file in Element Web to apply Rez-Chat styling
   ========================================================================== */

@import './rez-chat-tokens.css';
@import './rez-chat-components.css';

/* ==========================================================================
   ELEMENT WEB OVERRIDES
   These styles override Element Web's default styling
   ========================================================================== */

/* Base styles */
body {
  font-family: var(--rc-font-sans);
  background-color: var(--rc-bg);
  color: var(--rc-text);
}

/* Override Element's room list (sidebar) */
.mx_RoomList,
.mx_LeftPanel {
  background-color: var(--rc-sidebar) !important;
}

.mx_RoomList_iconContainer {
  color: var(--rc-text-inverse) !important;
}

/* Override room tiles */
.mx_RoomTile {
  border-radius: var(--rc-radius-sm);
  margin: 0 var(--rc-space-2);
}

.mx_RoomTile:hover {
  background-color: var(--rc-sidebar-hover) !important;
}

.mx_RoomTile_selected,
.mx_RoomTile[aria-selected="true"] {
  background-color: var(--rc-active-channel) !important;
}

.mx_RoomTile_title {
  color: var(--rc-text-inverse) !important;
  font-size: var(--rc-text-base);
}

.mx_RoomTile_badgeContainer .mx_NotificationBadge {
  background-color: var(--rc-unread-badge) !important;
  color: var(--rc-unread-badge-text) !important;
}

/* Override message tiles */
.mx_EventTile {
  padding: var(--rc-space-2) var(--rc-space-4);
}

.mx_EventTile:hover {
  background-color: var(--rc-hover);
}

.mx_EventTile_content {
  color: var(--rc-text);
  font-size: var(--rc-text-base);
  line-height: var(--rc-leading-relaxed);
}

.mx_SenderProfile_name {
  color: var(--rc-text) !important;
  font-weight: var(--rc-font-semibold);
  font-size: var(--rc-text-sm);
}

.mx_MessageTimestamp {
  color: var(--rc-text-muted) !important;
  font-size: var(--rc-text-xs);
}

/* Message composer */
.mx_MessageComposer {
  background-color: var(--rc-surface);
  border-top: 1px solid var(--rc-border-subtle);
  padding: var(--rc-space-3) var(--rc-space-4);
}

.mx_BasicMessageComposer_input {
  background-color: var(--rc-input) !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: var(--rc-radius-md) !important;
  color: var(--rc-text) !important;
  font-family: var(--rc-font-sans) !important;
}

.mx_BasicMessageComposer_input:focus {
  border-color: var(--rc-primary) !important;
  box-shadow: 0 0 0 3px var(--rc-primary-subtle) !important;
}

/* Send button */
.mx_MessageComposer_sendMessage {
  background-color: var(--rc-primary) !important;
  border-radius: var(--rc-radius-sm) !important;
}

.mx_MessageComposer_sendMessage:hover {
  background-color: var(--rc-primary-hover) !important;
}

/* Room header */
.mx_RoomHeader {
  background-color: var(--rc-surface);
  border-bottom: 1px solid var(--rc-border-subtle);
  padding: var(--rc-space-3) var(--rc-space-4);
}

.mx_RoomHeader_name {
  color: var(--rc-text) !important;
  font-size: var(--rc-text-lg);
  font-weight: var(--rc-font-semibold);
}

/* Avatar */
.mx_BaseAvatar {
  border-radius: var(--rc-radius-pill);
}

/* Buttons */
.mx_AccessibleButton_kind_primary {
  background-color: var(--rc-primary) !important;
  color: var(--rc-text-on-primary) !important;
  border-radius: var(--rc-radius-sm) !important;
}

.mx_AccessibleButton_kind_primary:hover {
  background-color: var(--rc-primary-hover) !important;
}

/* Focus states */
*:focus-visible {
  outline: 2px solid var(--rc-focus-ring) !important;
  outline-offset: 2px !important;
}

/* Dialog/Modal */
.mx_Dialog {
  background-color: var(--rc-surface);
  border-radius: var(--rc-radius-lg);
  box-shadow: var(--rc-shadow-xl);
}

/* Search */
.mx_SearchBar input {
  background-color: var(--rc-input);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-md);
  color: var(--rc-text);
}

/* Toast notifications */
.mx_Toast_toast {
  background-color: var(--rc-surface);
  border-radius: var(--rc-radius-md);
  box-shadow: var(--rc-shadow-lg);
}

/* Indigenous accent - add to key UI elements */
.mx_LeftPanel_filterContainer::after,
.mx_SpacePanel::after {
  content: '';
  display: block;
  height: 4px;
  background: var(--rc-accent-pattern);
  background-size: 80px 4px;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--rc-border);
  border-radius: var(--rc-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--rc-border-strong);
}

/* Dark mode scrollbar in sidebar */
.mx_LeftPanel ::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
}

.mx_LeftPanel ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   WELCOME PAGE OVERRIDES - Using exact Element class names
   ========================================================================== */

/* Page background - centered */
.mx_Welcome {
  background: #F5F3EF !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 24px !important;
  box-sizing: border-box !important;
}

/* Card wrapper - explicit reset of ALL spacing */
.mx_WelcomePage,
.mx_WelcomePage.mx_WelcomePage_guest {
  background: white !important;
  max-width: 400px !important;
  width: 100% !important;
  box-shadow: 0 8px 32px rgba(31, 72, 71, 0.12) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  align-self: center !important;
}

/* Accent bar at top */
.mx_WelcomePage::before,
.mx_WelcomePage.mx_WelcomePage_guest::before {
  content: '' !important;
  display: block !important;
  height: 5px !important;
  background: linear-gradient(90deg, #1D4746 0%, #1D4746 18%, #EC9E2A 18%, #EC9E2A 28%, #1D4746 28%, #1D4746 48%, #EC9E2A 48%, #EC9E2A 58%, #1D4746 58%, #1D4746 78%, #EC9E2A 78%, #EC9E2A 88%, #1D4746 88%, #1D4746 100%) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Body wrapper - explicit reset */
.mx_WelcomePage_body {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
}

/* Hide Matrix/Element footer */
.mx_AuthFooter,
[class*="powered"],
[class*="Powered"],
a[href*="matrix.org"]:not(.mx_ButtonParent) {
  display: none !important;
}

/* Parent container - the actual content */
.mx_Parent {
  padding: 28px 32px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* Hide Element logo link, show our logo via CSS */
.mx_Parent > a:first-child {
  display: block !important;
  width: 80px !important;
  height: 80px !important;
  margin: 0 auto 20px !important;
  background-image: url('/themes/rez-chat/logo.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.mx_Parent > a:first-child img,
.mx_Logo {
  display: none !important;
}

/* Title - replace "Welcome to Element" */
.mx_Header_title {
  font-size: 0 !important;
  visibility: hidden !important;
  margin: 0 !important;
}

.mx_Header_title::before {
  content: 'Welcome to Rez-Chat' !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #1D4746 !important;
  visibility: visible !important;
  display: block !important;
}

.mx_Header_title::after {
  content: '' !important;
  display: none !important;
}

/* Subtitle - replace Matrix description */
.mx_Header_subtitle {
  font-size: 0 !important;
  visibility: hidden !important;
  margin: 8px 0 0 !important;
  height: auto !important;
}

.mx_Header_subtitle::before {
  content: 'Secure communication for Six Nations communities' !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: #6B7B7A !important;
  visibility: visible !important;
  display: block !important;
}

/* Hide Matrix logo inside subtitle */
.mx_Header_subtitle a,
.mx_Header_subtitle img {
  display: none !important;
}

/* Button group */
.mx_ButtonGroup {
  margin-top: 24px !important;
}

/* Button row */
.mx_ButtonRow {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  margin: 0 !important;
}

/* All buttons - base style */
.mx_ButtonParent {
  flex: 1 !important;
  padding: 14px 20px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  width: auto !important;
  background-image: none !important;
}

.mx_ButtonLabel {
  margin-left: 0 !important;
}

/* Sign In button - deep teal */
.mx_ButtonSignIn {
  background-color: #1D4746 !important;
  color: white !important;
}

.mx_ButtonSignIn:hover {
  background-color: #2A5958 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(29, 71, 70, 0.3) !important;
}

/* Hide Create Account button */
.mx_ButtonCreateAccount {
  display: none !important;
}

/* Hide Explore rooms section */
.mx_WelcomePage_guestFunctions {
  display: none !important;
}

/* Hide language dropdown */
.mx_LanguageDropdown,
.mx_Welcome .mx_Dropdown {
  display: none !important;
}

/* Footer text */
.mx_Welcome::after {
  content: 'Rez-Chat · Six Nations Community Platform' !important;
  position: absolute !important;
  bottom: 16px !important;
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;
  font-size: 0.75rem !important;
  color: #8B9B9A !important;
  pointer-events: none !important;
}

/* Ensure Welcome page has relative positioning for footer */
.mx_Welcome {
  position: relative !important;
}

/* ==========================================================================
   AUTH / LOGIN PAGE OVERRIDES
   ========================================================================== */

.mx_AuthPage {
  background: var(--rc-bg) !important;
}

.mx_AuthPage_modal {
  background: var(--rc-surface) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 40px rgba(31, 72, 71, 0.12) !important;
  overflow: hidden !important;
}

.mx_AuthPage_modal::before {
  content: '' !important;
  display: block !important;
  height: 5px !important;
  background: var(--rc-accent-pattern) !important;
  background-size: 80px 5px !important;
}

.mx_AuthBody {
  padding: 32px !important;
}

/* Form fields */
.mx_Field input {
  background: var(--rc-input) !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  font-size: 1rem !important;
  color: var(--rc-text) !important;
}

.mx_Field input:focus {
  border-color: var(--rc-primary) !important;
  box-shadow: 0 0 0 3px rgba(29, 71, 70, 0.1) !important;
  outline: none !important;
}

.mx_Field label {
  color: var(--rc-text) !important;
  font-weight: 500 !important;
}

/* Primary buttons in auth forms */
.mx_Login_submit,
.mx_AuthBody button[type="submit"],
.mx_AccessibleButton_kind_primary {
  background-color: var(--rc-primary) !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 24px !important;
  font-weight: 600 !important;
  width: 100% !important;
  min-height: 48px !important;
}

.mx_Login_submit:hover,
.mx_AccessibleButton_kind_primary:hover {
  background-color: var(--rc-primary-hover) !important;
}

/* Links */
.mx_AuthBody a {
  color: var(--rc-primary) !important;
}

/* Error messages */
.mx_Login_error,
.mx_AuthBody_error {
  background: var(--rc-danger-subtle) !important;
  color: var(--rc-danger-text) !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  margin-bottom: 16px !important;
}