app/main/default/lwc/triggerActionsExplorer/triggerActionsExplorer.css
/* Trigger Actions Explorer Component Styles */

/* Hide the flexiPageHeader - multiple approaches for Shadow DOM penetration */
.flexiPageHeader,
:host ::ng-deep .flexiPageHeader,
:host ::ng-deep .flexiPageHeader *,
:host ::ng-deep [class*="flexiPageHeader"],
:host ::ng-deep [class*="flexiPageHeader"] *,
:host ::ng-deep .slds-page-header,
:host ::ng-deep .slds-page-header * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Alternative approach using global CSS */
:global(.flexiPageHeader),
:global(.flexiPageHeader *),
:global([class*="flexiPageHeader"]),
:global([class*="flexiPageHeader"] *) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Builder Header Styling */
.slds-builder-header_container {
    background: #032d60;
    border-bottom: 1px solid #032d60;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
    margin-bottom: 0;
}

.slds-builder-header {
    padding: 0.75rem 1rem;
    min-height: auto;
    position: relative;
}

.slds-builder-header__item {
    display: flex;
    align-items: center;
}

.slds-builder-header__item-label {
    color: white;
}

.slds-builder-header h1 {
    color: white !important;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.2;
    margin: 0;
}


/* White Background Container */
.white-background-container {
    background-color: white;
    min-height: calc(100vh - 80px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

/* Content Container - Limit width and center */
.content-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Inline Dropdown Styling */
.inline-dropdown {
    display: inline-block;
    margin: 0 0.5rem;
    min-width: 150px;
}

.inline-dropdown .slds-combobox__input {
    border: 1px solid var(--lwc-colorBorder);
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
    background-color: white;
}

.inline-dropdown .slds-combobox__input:focus {
    border-color: var(--lwc-colorBrand);
    box-shadow: 0 0 0 1px var(--lwc-colorBrand);
}

/* Context Text Styling */
.context-text {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--lwc-colorTextWeak);
}

.context-text strong {
    color: var(--lwc-colorTextDefault);
    font-weight: 600;
}

/* Action Cards */
.action-card {
    margin-bottom: 1.5rem;
    border: 1px solid var(--lwc-colorBorder);
    border-radius: 0.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.action-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.2s ease;
}

.action-header {
    cursor: pointer;
    background-color: var(--lwc-colorBackground);
    border-bottom: 1px solid var(--lwc-colorBorder);
    padding: 1rem;
}

.action-header:hover {
    background-color: var(--lwc-colorBackgroundRowHover);
}

.action-details {
    padding: 0.75rem;
    border-left: 3px solid var(--lwc-colorBorder);
    margin-left: 1rem;
}

.action-meta {
    color: var(--lwc-colorTextLabel);
    font-size: 0.875rem;
}

.action-description {
    color: var(--lwc-colorTextWeak);
    font-style: italic;
    margin-top: 0.25rem;
}

.action-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.status-active {
    background-color: var(--lwc-colorSuccess);
}

.status-inactive {
    background-color: var(--lwc-colorTextWeak);
}

.empty-state {
    padding: 3rem;
    text-align: center;
    color: var(--lwc-colorTextWeak);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .slds-builder-header h1 {
        font-size: 1.1rem;
    }
    
    .context-text {
        font-size: 1.1rem;
    }
    
    .inline-dropdown {
        display: block;
        margin: 0.5rem 0;
        min-width: 100%;
    }
}

/* Clickable text styling */
.clickable-text {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    color: inherit;
    transition: color 0.2s ease;
}

.clickable-text:hover {
    color: #0176d3;
    text-decoration-color: #0176d3;
}

.clickable-text:focus {
    outline: 2px solid #0176d3;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Make comboboxes look like text when open */
.inline-dropdown-text {
    display: inline-block !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    position: relative !important;
}

.inline-dropdown-text .slds-combobox {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
    min-width: auto !important;
}

.inline-dropdown-text .slds-combobox__form-element {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

.inline-dropdown-text .slds-combobox__input-entity-icon {
    display: none !important;
}

.inline-dropdown-text .slds-combobox__input-entity-icon-container {
    display: none !important;
}

.inline-dropdown-text .slds-combobox__input {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
    text-decoration: underline !important;
    text-decoration-style: dotted !important;
    min-height: auto !important;
    height: auto !important;
}

.inline-dropdown-text .slds-combobox__input:focus {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    text-decoration: underline !important;
    text-decoration-style: solid !important;
    text-decoration-color: #0176d3 !important;
    color: #0176d3 !important;
}

.inline-dropdown-text .slds-combobox__input:hover {
    color: #0176d3 !important;
    text-decoration-color: #0176d3 !important;
}

/* Hide dropdown arrow and other combobox elements */
.inline-dropdown-text .slds-combobox__input-entity-icon,
.inline-dropdown-text .slds-combobox__input-entity-icon-container,
.inline-dropdown-text .slds-combobox__input-entity-icon-container .slds-icon,
.inline-dropdown-text .slds-combobox__input-entity-icon-container .slds-icon_container,
.inline-dropdown-text .slds-combobox__input-entity-icon-container .slds-icon_container .slds-icon,
.inline-dropdown-text .slds-combobox__input-entity-icon-container .slds-icon_container .slds-icon svg,
.inline-dropdown-text .slds-combobox__input-entity-icon-container .slds-icon_container .slds-icon use,
.inline-dropdown-text .slds-combobox__input-entity-icon-container .slds-icon_container .slds-icon use svg,
.inline-dropdown-text .slds-combobox__input-entity-icon-container .slds-icon_container .slds-icon use path {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide any remaining combobox styling */
.inline-dropdown-text .slds-combobox__input-entity-icon-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Ensure the input field itself looks like text */
.inline-dropdown-text .slds-combobox__input {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important;
    background-position: none !important;
    background-repeat: none !important;
    background-size: none !important;
}
