/* Ping - Custom Theme for Ganger Dermatology */
/* Version 2.0 - Incorporates Design Expert Feedback */

:root {
    --cpd-color-brand-default: #3d4670 !important;
    --cpd-color-brand-bg: rgba(61, 70, 112, 0.15) !important;
    --accent: #3d4670 !important;
    --accent-color: #3d4670 !important;
    --ping-bg-primary: #0d1117;
    --ping-bg-secondary: #161b22;
    --ping-bg-card: #21262d;
    --ping-border: #30363d;
    --ping-accent: #3d4670;
    --ping-accent-hover: #4f5d8a;
    --ping-text-primary: #e6edf3;
    --ping-text-secondary: #8b949e;
    --ping-text-muted: #6e7681;
}

/* ============================================
   LOGIN PAGE - DARK THEME
   ============================================ */

.mx_AuthPage {
    background: #0d1117 !important;
}

.mx_AuthPage_modal,
.mx_AuthPage_modalBlur {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%) !important;
    border-radius: 12px !important;
    border: 1px solid #30363d !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* Force Dark Background for Auth Sidebar - Design Expert Fix */
.mx_AuthPage_modal > div:first-child,
.mx_AuthPage_modalHeader,
.mx_AuthHeaderLogo,
[class*="mx_AuthPage"] [class*="Logo"],
.mx_AuthPage_modalBlur > div:first-child,
.mx_AuthPage *,
.mx_Login,
.mx_Register,
.mx_Welcome {
    background-color: #161b22 !important;
    background: #161b22 !important;
}

/* Ping Logo */
.mx_AuthPage .mx_AuthHeaderLogo {
    display: block !important;
    visibility: visible !important;
    background-image: url("logo.svg?v=3") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 180px !important;
    height: 60px !important;
    margin: 0 auto 20px auto !important;
}

.mx_AuthPage .mx_AuthHeaderLogo img,
.mx_AuthPage .mx_AuthHeaderLogo svg {
    display: none !important;
}

/* Completely Hide Non-SSO Login Elements - Design Expert Enhanced */
.mx_Login_flow,
.mx_Login_type_container,
.mx_PasswordLogin,
.mx_AuthBody_fieldRow,
.mx_Field,
.mx_Login_field,
.mx_Login_submit,
input[type="text"],
input[type="password"],
.mx_ServerPicker,
.mx_ServerPicker_change,
.mx_ServerPicker_server,
.mx_ServerPicker_description,
.mx_AuthBody_serverPicker,
.mx_Login_forgot,
.mx_AuthBody_changeFlow,
.mx_AuthBody_separator,
.mx_AccessibleButton_kind_link[kind="link"],
a[href*="forgot"],
a[href*="register"],
.mx_Login_sso_separator,
.mx_AuthBody_loginRegister,
.mx_AuthBody_separator {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* SSO Button */
.mx_SSOButtons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-top: 30px !important;
    padding: 20px !important;
}

.mx_SSOButton,
.mx_SSOButtons .mx_SSOButton,
.mx_AccessibleButton_kind_primary_outline.mx_SSOButton {
    background: #e6edf3 !important;
    color: #3d4670 !important;
    font-weight: 600 !important;
    padding: 16px 48px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    border: 2px solid #3d4670 !important;
    width: 100% !important;
    max-width: 300px !important;
    text-align: center !important;
}

.mx_SSOButton:hover {
    background: #3d4670 !important;
    color: #e6edf3 !important;
}

/* Auth page text colors */
.mx_AuthPage h1, .mx_AuthPage h2, .mx_AuthPage h3,
.mx_AuthPage .mx_AuthBody_text, .mx_AuthPage label,
.mx_AuthPage span, .mx_AuthPage p {
    color: #e6edf3 !important;
}

/* ============================================
   ROOM LIST - SLACK DENSITY
   ============================================ */

.mx_LeftPanel,
.mx_LeftPanel_outerWrapper {
    background: #161b22 !important;
    min-width: 220px !important;
}

.mx_SpacePanel {
    padding: 4px !important;
}

.mx_SpaceButton {
    width: 32px !important;
    height: 32px !important;
    margin: 2px !important;
}

.mx_RoomListHeader {
    padding: 4px 8px !important;
    min-height: 28px !important;
}

.mx_RoomSublist_headerContainer {
    min-height: 24px !important;
    padding: 2px 8px !important;
}

.mx_RoomSublist_headerText {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.mx_RoomTile {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 8px !important;
    margin: 1px 4px !important;
    border-radius: 4px !important;
}

.mx_RoomTile:hover {
    background: #21262d !important;
}

.mx_RoomTile_selected, .mx_RoomTile_selected:hover {
    background: #21262d !important;
    border-left: 2px solid #3d4670 !important;
}

.mx_RoomTile .mx_DecoratedRoomAvatar,
.mx_RoomTile .mx_BaseAvatar {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
}

.mx_RoomTile .mx_BaseAvatar img,
.mx_RoomTile .mx_BaseAvatar .mx_BaseAvatar_initial {
    width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
}

.mx_RoomTile_titleContainer {
    margin-left: 6px !important;
}

.mx_RoomTile_title {
    font-size: 13px !important;
    line-height: 1.2 !important;
}

.mx_RoomTile_subtitle {
    display: none !important;
}

.mx_NotificationBadge {
    width: 16px !important;
    height: 16px !important;
    font-size: 10px !important;
    background: #3d4670 !important;
}

.mx_NotificationBadge_highlighted {
    background: #ec4899 !important;
}

.mx_RoomSublist {
    margin-bottom: 4px !important;
}

/* ============================================
   MESSAGE TIMELINE - SLACK DENSITY
   ============================================ */

.mx_RoomView, .mx_RoomView_body {
    background: #0d1117 !important;
}

.mx_EventTile {
    padding: 2px 20px 2px 64px !important;
    min-height: unset !important;
}

.mx_EventTile:hover {
    background: rgba(22, 27, 34, 0.5) !important;
}

.mx_EventTile .mx_BaseAvatar,
.mx_EventTile_avatar .mx_BaseAvatar {
    width: 28px !important;
    height: 28px !important;
}

.mx_EventTile_avatar {
    left: 20px !important;
}

.mx_MessageTimestamp {
    font-size: 10px !important;
    color: #6e7681 !important;
    opacity: 0 !important;
    transition: opacity 0.15s ease !important;
}

.mx_EventTile:hover .mx_MessageTimestamp {
    opacity: 1 !important;
}

.mx_DisambiguatedProfile {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 1px !important;
}

.mx_EventTile_body {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.mx_EventTile_continuation {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

.mx_EventTile_continuation .mx_EventTile_avatar {
    display: none !important;
}

.mx_ReactionsRow {
    margin-top: 2px !important;
    gap: 4px !important;
}

.mx_ReactionsRow_button {
    padding: 2px 6px !important;
    font-size: 12px !important;
    background: #21262d !important;
    border: 1px solid #30363d !important;
    border-radius: 10px !important;
    min-height: 22px !important;
}

.mx_ReactionsRow_button_selected {
    background: rgba(61, 70, 112, 0.3) !important;
    border-color: #3d4670 !important;
}

/* ============================================
   HEADER & COMPOSER
   ============================================ */

.mx_RoomHeader, .mx_LegacyRoomHeader {
    background: #161b22 !important;
    border-bottom: 1px solid #30363d !important;
    min-height: 48px !important;
    padding: 0 16px !important;
}

.mx_RoomHeader_name {
    font-size: 15px !important;
    font-weight: 600 !important;
}

.mx_MessageComposer {
    background: #0d1117 !important;
    border-top: 1px solid #30363d !important;
    padding: 8px 16px !important;
}

.mx_BasicMessageComposer_input {
    font-size: 14px !important;
    padding: 8px 12px !important;
    background: #21262d !important;
    border: 1px solid #30363d !important;
    border-radius: 6px !important;
}

.mx_BasicMessageComposer_input:focus {
    border-color: #3d4670 !important;
}

/* ============================================
   RIGHT PANEL
   ============================================ */

.mx_RightPanel {
    background: #161b22 !important;
    border-left: 1px solid #30363d !important;
}

.mx_RightPanel_header {
    background: #161b22 !important;
    border-bottom: 1px solid #30363d !important;
}

/* ============================================
   UI ELEMENTS
   ============================================ */

.mx_AccessibleButton_kind_primary {
    background: #3d4670 !important;
    color: #0d1117 !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

.mx_AccessibleButton_kind_primary:hover {
    background: #4f5d8a !important;
}

a {
    color: #3d4670 !important;
}

a:hover {
    color: #4f5d8a !important;
}

.mx_Dialog {
    background: #161b22 !important;
    border-radius: 12px !important;
    border: 1px solid #30363d !important;
}

.mx_Dialog_header,
.mx_Dialog_title {
    color: #e6edf3 !important;
}

pre, code {
    background: #21262d !important;
    border: 1px solid #30363d !important;
    border-radius: 4px !important;
    font-size: 13px !important;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0d1117;
}

::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6e7681;
}

.mx_Pill {
    background: rgba(61, 70, 112, 0.3) !important;
    color: #3d4670 !important;
    border-radius: 3px !important;
    padding: 0 4px !important;
}

.mx_PresenceLabel_online {
    color: #3d4670 !important;
}

/* ============================================
   HIDE VERIFICATION/ENCRYPTION UI
   Design Expert Enhanced Selectors
   ============================================ */

.mx_InteractiveAuthDialog,
.mx_SetupEncryptionDialog,
.mx_CompleteSecurity,
.mx_SetupEncryptionToast,
.mx_Toast_toast[class*="Security"],
.mx_Toast_toast[class*="Verification"],
.mx_Toast_toast[class*="encryption"],
.mx_DeviceVerifyButtons,
.mx_VerifySessionToast,
.mx_DeviceSecurityCard,
.mx_SessionManagerTab_deviceSecurityCard,
.mx_DeviceSecurityWarning,
[class*="DeviceSecurity"],
[class*="VerifySession"],
[class*="SetupEncryption"],
[class*="SecureBackup"],
[class*="CrossSigning"],
.mx_SecurityUserSettingsTab_deviceInfo,
.mx_SecurityTab_deviceInfo,
.mx_SessionManagerTab_securityRecommendations,
.mx_E2EIcon,
.mx_E2EIcon_warning,
.mx_E2EIcon_normal,
.mx_E2EIcon_verified,
.mx_E2EIcon_unverified,
[class*="E2EIcon"],
.mx_EncryptionInfo,
.mx_EventTile_e2eIcon,
.mx_RoomHeader_e2eStatus,
button[class*="verify" i],
button[class*="Verify" i],
.mx_AccessibleButton[aria-label*="Verify"],
.mx_AccessibleButton[aria-label*="verify"],
a[href*="verify"],
.mx_DeviceTile_verify,
.mx_DevicesPanel_verifyButton,
.mx_SettingsTab_section[data-testid*="security"],
.mx_SecurityTab,
.mx_DecoratedRoomAvatar_icon_warning,
.mx_RoomTile_iconWarning,
.mx_BaseAvatar_icon_warning,
[class*="icon_warning"],
[class*="iconWarning"],
div[class*="DeviceNotVerified"],
div[class*="deviceNotVerified"],
.mx_DeviceExpandedDetails,
.mx_DeviceTile_inactive,
.mx_SessionManagerTab .mx_DeviceSecurityCard,
.mx_SessionManagerTab .mx_SecurityRecommendations,
.mx_RoomTile_badgeEncryption,
.mx_RoomTile_encryptedRoom,
a[href*="security"],
a[href*="encryption"],
a[href*="verification"],
.mx_SecureBackupPanel,
.mx_CrossSigningPanel,
.mx_SecurityUserSettingsTab {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
}

/* Hide credits */
.mx_HelpUserSettingsTab_credits,
.mx_HelpUserSettingsTab_credits + p {
    display: none !important;
}

/* Ensure visibility */
.mx_MatrixChat, .mx_RoomView, .mx_MainSplit, #matrixchat {
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================
   WELCOME SCREEN & HOME PAGE FIX
   Force Navy Blue on All Buttons
   ============================================ */

/* Override Element Compound Design System colors */
:root {
    --cpd-color-text-action-accent: #3d4670 !important;
    --cpd-color-icon-accent-tertiary: #3d4670 !important;
    --cpd-color-bg-action-primary-rest: #3d4670 !important;
    --cpd-color-bg-action-primary-hovered: #4f5d8a !important;
    --cpd-color-bg-action-primary-pressed: #4f5d8a !important;
    --cpd-color-text-link-external: #3d4670 !important;
    --cpd-color-icon-primary: #e6edf3 !important;
}

/* Welcome screen buttons - force navy blue */
.mx_HomePage .mx_AccessibleButton,
.mx_Welcome .mx_AccessibleButton,
.mx_HomePage_button,
.mx_Welcome_button,
[class*="HomePage"] button,
[class*="Welcome"] button,
.mx_UserOnboardingButton,
.mx_UserOnboardingPage button,
.mx_HomePage .mx_AccessibleButton_kind_primary,
.mx_Welcome .mx_AccessibleButton_kind_primary,
.mx_UserOnboardingTask button,
.mx_UserOnboardingList button {
    background: #3d4670 !important;
    background-color: #3d4670 !important;
    color: #e6edf3 !important;
    border: none !important;
}

.mx_HomePage .mx_AccessibleButton:hover,
.mx_Welcome .mx_AccessibleButton:hover,
.mx_HomePage_button:hover,
.mx_UserOnboardingButton:hover,
.mx_UserOnboardingPage button:hover {
    background: #4f5d8a !important;
    background-color: #4f5d8a !important;
}

/* Fix avatar backgrounds on welcome screen */
.mx_HomePage .mx_BaseAvatar,
.mx_Welcome .mx_BaseAvatar,
.mx_UserOnboardingPage .mx_BaseAvatar,
[class*="HomePage"] .mx_BaseAvatar_initial,
[class*="Welcome"] .mx_BaseAvatar_initial {
    background-color: #3d4670 !important;
}

/* User onboarding page styling */
.mx_UserOnboardingPage {
    background: #0d1117 !important;
}

.mx_UserOnboardingPage_header,
.mx_UserOnboardingPage h1,
.mx_UserOnboardingPage h2,
.mx_UserOnboardingPage h3 {
    color: #e6edf3 !important;
}

/* Fix any remaining teal/accent colors globally */
[style*="00d4aa"],
[style*="00f5c4"],
[style*="0DBD8B"],
[style*="0dbd8b"] {
    color: #3d4670 !important;
    background-color: #3d4670 !important;
}

/* Ensure all primary buttons are navy */
button.mx_AccessibleButton_kind_primary,
.mx_AccessibleButton_kind_primary,
.mx_Dialog_primaryButton,
.mx_Button_primary {
    background: #3d4670 !important;
    background-color: #3d4670 !important;
    color: #e6edf3 !important;
}

button.mx_AccessibleButton_kind_primary:hover,
.mx_AccessibleButton_kind_primary:hover,
.mx_Dialog_primaryButton:hover,
.mx_Button_primary:hover {
    background: #4f5d8a !important;
    background-color: #4f5d8a !important;
}