/* Automation Plugin Styles - Integrated with WS Theme System */
/* Note: Page/component-specific styles are in scoped .razor.css files */
/*
 * NAMING CONVENTION (MANDATORY):
 * All CSS classes in this global file MUST be prefixed with "ws-automation-".
 * This prevents collisions with other plugins and platform styles.
 * Example: .ws-automation-page-header, .ws-automation-dialog
 * Scoped .razor.css files do NOT require the prefix (Blazor CSS isolation handles it).
 *
 * LAYOUT NOTE:
 * The Automation plugin uses the platform MainLayout (sidebar, appbar, nav menu).
 * Do NOT add custom layout/container/sidebar/nav CSS here — the platform handles it.
 */

/* ==============================================
   PAGE STYLES (prefixed)
   ============================================== */

.ws-automation-page-header {
    border-bottom: 2px solid var(--ws-border-muted);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.ws-automation-page-title {
    color: var(--ws-text-base);
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.ws-automation-page-title .oi {
    color: var(--ws-primary);
    margin-right: 1rem;
}

@media (max-width: 768px) {
    .ws-automation-page-title {
        font-size: 1.5rem;
    }
}

/* ==============================================
   TASK STATUS BADGES (prefixed, shared across pages)
   ============================================== */

.ws-automation-task-status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.ws-automation-task-status-pending {
    background-color: var(--ws-warning);
    color: white;
}

.ws-automation-task-status-inprogress {
    background-color: var(--ws-primary);
    color: white;
}

.ws-automation-task-status-completed {
    background-color: var(--ws-success);
    color: white;
}

.ws-automation-task-status-cancelled {
    background-color: var(--ws-text-muted);
    color: white;
}

.ws-automation-task-status-expired {
    background-color: var(--ws-danger);
    color: white;
}

/* ==============================================
   DIALOG BACKDROP (covers entire viewport including nav/appbar)
   ============================================== */

.ws-automation-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2050; /* Above AppBar (2000) and NavMenu (1001) */
    background-color: var(--ws-backdrop-color, rgba(0, 0, 0, 0.3));
    backdrop-filter: var(--ws-backdrop-filter, blur(4px));
    -webkit-backdrop-filter: var(--ws-backdrop-filter, blur(4px));
}

/* ==============================================
   SYNCFUSION DIALOG CUSTOMIZATIONS
   (scoped under .ws-automation-dialog)
   ============================================== */

.ws-automation-dialog {
    background-color: var(--ws-bg-base);
    color: var(--ws-text-base);
    border-color: var(--ws-border-muted);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--ws-border-muted);
    z-index: 2100; /* Above AppBar (2000) and NavMenu (1001) */
}

[data-bs-theme="dark"] .ws-automation-dialog {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.ws-automation-dialog .e-dlg-header {
    background-color: var(--ws-bg-alt);
    color: var(--ws-text-base);
    border-bottom-color: var(--ws-border-muted);
}

.ws-automation-dialog .e-dlg-header-content {
    background-color: var(--ws-bg-alt);
}

.ws-automation-dialog .e-dlg-content {
    background-color: var(--ws-bg-base);
    color: var(--ws-text-base);
}

.ws-automation-dialog .e-footer-content {
    background-color: var(--ws-bg-base);
    border-top-color: var(--ws-border-muted);
}

/* ==============================================
   DARK MODE - DIALOG OVERRIDES
   (scoped under .ws-automation-dialog)
   ============================================== */

/* All labels inside dialogs */
[data-bs-theme="dark"] .ws-automation-dialog .form-label,
[data-bs-theme="dark"] .ws-automation-dialog label,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .form-label,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content label,
[data-bs-theme="dark"] .ws-automation-dialog .ws-automation-node-config-content .form-label,
[data-bs-theme="dark"] .ws-automation-dialog .ws-automation-node-config-content label {
    color: var(--ws-text-base) !important;
}

/* Help text / muted text inside dialogs */
[data-bs-theme="dark"] .ws-automation-dialog small.text-muted,
[data-bs-theme="dark"] .ws-automation-dialog .text-muted,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content small.text-muted,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .text-muted,
[data-bs-theme="dark"] .ws-automation-dialog .ws-automation-node-config-content small.text-muted,
[data-bs-theme="dark"] .ws-automation-dialog .ws-automation-node-config-content .text-muted,
[data-bs-theme="dark"] .ws-automation-dialog .ws-automation-token-textbox-wrapper small.text-muted {
    color: var(--ws-text-muted) !important;
}

/* All text within dialog content.
   Note: color on .e-dlg-content cascades to children via CSS inheritance.
   Do NOT add broad span/div selectors here — they override Monaco editor
   token colors (.mtk* classes) which need to set their own colors for
   syntax highlighting. */
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content p,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content li,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content strong {
    color: var(--ws-text-base);
}

/* Syncfusion inputs inside dialogs — style only the outer wrapper border.
   The inner input must have border:none so there's no double-border effect. */
[data-bs-theme="dark"] .ws-automation-dialog .e-input-group,
[data-bs-theme="dark"] .ws-automation-dialog .e-input-group.e-control-wrapper,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .e-input-group,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .e-input-group.e-control-wrapper {
    background-color: var(--ws-bg-alt) !important;
    border-color: var(--ws-border-base) !important;
}

[data-bs-theme="dark"] .ws-automation-dialog .e-input-group .e-input,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .e-input-group .e-input {
    border: none !important;
    outline: none !important;
}

/* Dropdown & numeric controls — prevent double border from outline + border */
[data-bs-theme="dark"] .ws-automation-dialog .e-ddl.e-input-group.e-control-wrapper,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .e-ddl.e-input-group.e-control-wrapper,
[data-bs-theme="dark"] .ws-automation-dialog .e-numeric.e-input-group.e-control-wrapper,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .e-numeric.e-input-group.e-control-wrapper {
    outline: none !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .ws-automation-dialog .e-input-group input.e-input,
[data-bs-theme="dark"] .ws-automation-dialog .e-input-group textarea.e-input,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .e-input-group input.e-input,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .e-input-group textarea.e-input,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content input.e-input,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content textarea.e-input {
    background-color: var(--ws-bg-alt) !important;
    color: var(--ws-text-base) !important;
}

[data-bs-theme="dark"] .ws-automation-dialog .e-input-group input.e-input::placeholder,
[data-bs-theme="dark"] .ws-automation-dialog .e-input-group textarea.e-input::placeholder,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content input.e-input::placeholder,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content textarea.e-input::placeholder {
    color: var(--ws-text-muted) !important;
}

/* Dropdown icon inside dialog */
[data-bs-theme="dark"] .ws-automation-dialog .e-input-group-icon,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .e-input-group-icon {
    color: var(--ws-text-muted) !important;
    background-color: transparent !important;
}

/* Dropdown popup — renders at body level, NOT inside the dialog.
   Must target globally under dark mode. */
/* Dropdown popup — renders at body level, NOT inside the dialog.
   Target globally under dark mode. Syncfusion nests: .e-popup > .e-content > .e-ul > .e-list-item */
[data-bs-theme="dark"] .e-ddl.e-popup,
[data-bs-theme="dark"] .e-popup.e-control.e-dropdownbase {
    background-color: var(--ws-bg-base) !important;
    border: 1px solid var(--ws-border-muted) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    overflow: hidden !important;
}

/* Inner content and list containers — match the popup's rounded corners */
[data-bs-theme="dark"] .e-ddl.e-popup .e-content,
[data-bs-theme="dark"] .e-ddl.e-popup .e-ul,
[data-bs-theme="dark"] .e-ddl.e-popup .e-list-parent,
[data-bs-theme="dark"] .e-ddl.e-popup .e-scroller,
[data-bs-theme="dark"] .e-popup.e-control.e-dropdownbase .e-content,
[data-bs-theme="dark"] .e-popup.e-control.e-dropdownbase .e-ul,
[data-bs-theme="dark"] .e-popup.e-control.e-dropdownbase .e-list-parent,
[data-bs-theme="dark"] .e-popup.e-control.e-dropdownbase .e-scroller {
    background-color: var(--ws-bg-base) !important;
    border: none !important;
    border-radius: 4px !important;
}

/* Dropdown popup list items */
[data-bs-theme="dark"] .e-ddl.e-popup .e-list-item,
[data-bs-theme="dark"] .e-popup.e-control.e-dropdownbase .e-list-item {
    color: var(--ws-text-base) !important;
    background-color: transparent !important;
}

/* First and last items get rounded corners to match popup */
[data-bs-theme="dark"] .e-ddl.e-popup .e-list-item:first-child,
[data-bs-theme="dark"] .e-popup.e-control.e-dropdownbase .e-list-item:first-child {
    border-radius: 4px 4px 0 0 !important;
}

[data-bs-theme="dark"] .e-ddl.e-popup .e-list-item:last-child,
[data-bs-theme="dark"] .e-popup.e-control.e-dropdownbase .e-list-item:last-child {
    border-radius: 0 0 4px 4px !important;
}

/* Dropdown popup list item hover */
[data-bs-theme="dark"] .e-ddl.e-popup .e-list-item.e-hover,
[data-bs-theme="dark"] .e-ddl.e-popup .e-list-item:hover,
[data-bs-theme="dark"] .e-popup.e-control.e-dropdownbase .e-list-item.e-hover,
[data-bs-theme="dark"] .e-popup.e-control.e-dropdownbase .e-list-item:hover {
    background-color: var(--ws-bg-alt) !important;
    color: var(--ws-text-base) !important;
}

/* Dropdown popup selected/active item */
[data-bs-theme="dark"] .e-ddl.e-popup .e-list-item.e-active,
[data-bs-theme="dark"] .e-popup.e-control.e-dropdownbase .e-list-item.e-active {
    background-color: var(--ws-primary) !important;
    color: white !important;
}

/* Alert boxes inside dialogs */
[data-bs-theme="dark"] .ws-automation-dialog .alert,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .alert,
[data-bs-theme="dark"] .ws-automation-dialog .ws-automation-node-config-content .alert {
    color: var(--ws-text-base);
}

[data-bs-theme="dark"] .ws-automation-dialog .alert-info,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .alert-info,
[data-bs-theme="dark"] .ws-automation-dialog .ws-automation-node-config-content .alert-info {
    background-color: rgba(77, 212, 255, 0.1);
    border-color: rgba(77, 212, 255, 0.2);
    color: var(--ws-text-base);
}

[data-bs-theme="dark"] .ws-automation-dialog .alert-info strong,
[data-bs-theme="dark"] .ws-automation-dialog .ws-automation-node-config-content .alert-info strong {
    color: var(--ws-info);
}

[data-bs-theme="dark"] .ws-automation-dialog .alert-danger,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .alert-danger,
[data-bs-theme="dark"] .ws-automation-dialog .ws-automation-node-config-content .alert-danger {
    background-color: rgba(255, 107, 107, 0.1);
    border-color: rgba(255, 107, 107, 0.2);
    color: var(--ws-text-base);
}

[data-bs-theme="dark"] .ws-automation-dialog .alert-danger strong {
    color: var(--ws-danger);
}

/* Tabs inside dialogs */
[data-bs-theme="dark"] .ws-automation-dialog .e-tab .e-tab-header,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .e-tab .e-tab-header {
    background-color: var(--ws-bg-alt) !important;
    border-bottom-color: var(--ws-border-muted) !important;
}

[data-bs-theme="dark"] .ws-automation-dialog .e-tab .e-toolbar-item .e-tab-text,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .e-tab .e-toolbar-item .e-tab-text {
    color: var(--ws-text-base) !important;
}

[data-bs-theme="dark"] .ws-automation-dialog .e-tab .e-toolbar-item.e-active .e-tab-text,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .e-tab .e-toolbar-item.e-active .e-tab-text {
    color: var(--ws-primary) !important;
}

[data-bs-theme="dark"] .ws-automation-dialog .e-tab .e-content,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .e-tab .e-content {
    background-color: var(--ws-bg-base) !important;
    color: var(--ws-text-base) !important;
}

[data-bs-theme="dark"] .ws-automation-dialog .e-tab .e-indicator,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .e-tab .e-indicator {
    background-color: var(--ws-primary) !important;
}

/* Switch component inside dialogs */
[data-bs-theme="dark"] .ws-automation-dialog .e-switch-wrapper,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .e-switch-wrapper {
    color: var(--ws-text-base);
}

/* Numeric textbox inside dialogs */
[data-bs-theme="dark"] .ws-automation-dialog .e-numeric input.e-input,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .e-numeric input.e-input {
    background-color: var(--ws-bg-alt) !important;
    color: var(--ws-text-base) !important;
}

[data-bs-theme="dark"] .ws-automation-dialog .e-numeric .e-spin-up,
[data-bs-theme="dark"] .ws-automation-dialog .e-numeric .e-spin-down,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .e-numeric .e-spin-up,
[data-bs-theme="dark"] .ws-automation-dialog .e-dlg-content .e-numeric .e-spin-down {
    color: var(--ws-text-muted) !important;
}