/* Ping - Custom Theme Overrides for Ganger Dermatology */
/* This CSS is injected globally to override Element branding */

:root {
    /* Core brand colors */
    --cpd-color-brand-default: #00d4aa !important;
    --cpd-color-brand-bg: rgba(0, 212, 170, 0.15) !important;
    --accent: #00d4aa !important;
    --accent-color: #00d4aa !important;
}

/* Force dark background everywhere */
body {
    background-color: #0d1117 !important;
}

/* Hide Element branding in auth pages */
.mx_AuthPage_modalBlur {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%) !important;
}

/* SSO button styling */
.mx_SSOButtons .mx_SSOButton {
    background: #00d4aa !important;
    color: #0d1117 !important;
    font-weight: 600 !important;
    padding: 14px 24px !important;
    border-radius: 8px !important;
    border: none !important;
}

.mx_SSOButtons .mx_SSOButton:hover {
    background: #00f5c4 !important;
}

/* Hide "or" separator */
.mx_AuthBody_separator {
    display: none !important;
}

/* Primary buttons */
.mx_AccessibleButton_kind_primary {
    background: #00d4aa !important;
    color: #0d1117 !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

.mx_AccessibleButton_kind_primary:hover {
    background: #00f5c4 !important;
}

/* Room list sidebar */
.mx_LeftPanel, .mx_LeftPanel_outerWrapper {
    background: #161b22 !important;
}

/* Room tiles */
.mx_RoomTile {
    border-radius: 8px !important;
}

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

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

/* Main timeline */
.mx_RoomView_body {
    background: #0d1117 !important;
}

/* Headers */
.mx_RoomHeader, .mx_LegacyRoomHeader {
    background: #161b22 !important;
    border-bottom: 1px solid #30363d !important;
}

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

/* Message composer */
.mx_MessageComposer {
    background: #0d1117 !important;
    border-top: 1px solid #30363d !important;
}

/* Links */
a {
    color: #00d4aa !important;
}

a:hover {
    color: #00f5c4 !important;
}

/* Hide credits and Element branding */
.mx_HelpUserSettingsTab_credits,
.mx_HelpUserSettingsTab_versions,
p:has(a[href*="element.io"]),
p:has(a[href*="creativecommons"]) {
    display: none !important;
}

/* Hide labs settings link */
.mx_SettingsTab_section:has(a[href="#/settings/labs"]) {
    display: none !important;
}

/* Notification badges */
.mx_NotificationBadge {
    background: #00d4aa !important;
    color: #0d1117 !important;
}

/* Reactions */
.mx_ReactionsRow_button_selected {
    background: rgba(0, 212, 170, 0.2) !important;
    border-color: #00d4aa !important;
}

/* Pills (mentions) */
.mx_Pill {
    background: #00d4aa !important;
    color: #0d1117 !important;
}

/* Scrollbars */
::-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;
}

/* Code blocks */
pre, code {
    background: #21262d !important;
    border: 1px solid #30363d !important;
    border-radius: 6px !important;
}

/* Input fields */
.mx_Field input, .mx_Field textarea {
    background: #21262d !important;
    border: 1px solid #30363d !important;
    color: #e6edf3 !important;
}

.mx_Field input:focus, .mx_Field textarea:focus {
    border-color: #00d4aa !important;
}

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

/* Spaces */
.mx_SpacePanel {
    background: #0d1117 !important;
}

/* Online status */
.mx_PresenceLabel_online {
    color: #00d4aa !important;
}

/* FORCE HIDE device verification dialogs */
.mx_CompleteSecurity,
.mx_SetupEncryptionDialog,
.mx_SetupEncryptionBody,
.mx_Dialog:has(.mx_SetupEncryptionBody),
.mx_Dialog:has(.mx_CompleteSecurity),
.mx_VerificationPanel,
.mx_SetupEncryptionToast,
div[class*="SetupEncryption"],
div[class*="CompleteSecurity"] {
    display: none !important;
    visibility: hidden !important;
}

/* Hide verification toasts */
.mx_ToastContainer .mx_Toast_toast:has(button[data-testid="toast-verify-button"]) {
    display: none !important;
}

/* Hide footer/powered by */
.mx_AuthFooter,
.mx_AuthPage_footer,
footer,
.mx_Footer,
[class*="Footer"],
.mx_AuthBody_footer {
    display: none !important;
}

/* Hide "powered by Matrix" */
[class*="PoweredBy"],
a[href*="matrix.org"]:not(.mx_Pill),
.mx_AuthPage a[href*="matrix.org"] {
    display: none !important;
}

/* COMPACT ROOM LIST - Match Slack density */

/* Reduce room tile height and padding */
.mx_RoomTile {
    min-height: 28px !important;
    height: 28px !important;
    padding: 2px 8px !important;
    margin: 1px 4px !important;
    border-radius: 4px !important;
}

/* Smaller room avatars */
.mx_RoomTile .mx_DecoratedRoomAvatar,
.mx_RoomTile .mx_BaseAvatar {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    font-size: 11px !important;
}

.mx_RoomTile .mx_BaseAvatar_image {
    width: 20px !important;
    height: 20px !important;
}

/* Smaller room name text */
.mx_RoomTile_title {
    font-size: 13px !important;
    line-height: 1.2 !important;
}

/* Reduce subtitle/preview text */
.mx_RoomTile_subtitle {
    font-size: 11px !important;
    line-height: 1.1 !important;
    display: none !important; /* Hide preview for max density */
}

/* Compact notification badges */
.mx_NotificationBadge {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    font-size: 10px !important;
}

/* Reduce section headers */
.mx_RoomSublist_headerContainer {
    min-height: 24px !important;
    padding: 4px 8px !important;
}

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

/* Compact left panel width */
.mx_LeftPanel {
    min-width: 200px !important;
}

/* Tighten space panel (home icon area) */
.mx_SpacePanel {
    padding: 4px !important;
}

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

/* Filter tabs (Unreads, People, Rooms) */
.mx_RoomListHeader {
    padding: 4px 8px !important;
}

.mx_AccessibleButton.mx_RoomListHeader_filterButton {
    padding: 4px 8px !important;
    font-size: 12px !important;
}

/* Reduce DM section spacing */
.mx_RoomSublist {
    margin-bottom: 4px !important;
}

/* Hide room list expand buttons for cleaner look */
.mx_RoomSublist_showMoreButton,
.mx_RoomSublist_showLessButton {
    height: 20px !important;
    font-size: 11px !important;
}

/* Compact the room info tooltip */
.mx_RoomTile_details {
    gap: 2px !important;
}