/* ============================================================
   Workflow Engine — Shared Page Styles
   Used by WorkflowDefinitionList, WorkflowRunsList, and other
   workflow engine admin pages. Theme-aware (LeptonX light/dark/dim).
   ============================================================ */

/* ---- Layout ---- */
.wfr-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.5rem 0 2rem;
}

/* ---- Header ---- */
.wfr-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--bs-border-color, #e9ecef);
}

.wfr-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--bs-heading-color, var(--bs-body-color));
    margin: 0;
    line-height: 1.3;
}

.wfr-subtitle {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
    margin: 0.125rem 0 0;
}

/* ---- Controls ---- */
.wfr-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.wfr-btn {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    padding: 0.4rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.4;
}

.wfr-btn:hover {
    border-color: var(--tog-primary-color, #36b3ac);
    color: var(--tog-primary-color, #36b3ac);
}

.wfr-btn--accent {
    background: var(--tog-primary-color, #36b3ac);
    color: #fff;
    border-color: var(--tog-primary-color, #36b3ac);
}

.wfr-btn--accent:hover {
    filter: brightness(1.1);
    color: #fff;
}

/* ---- Filters ---- */
.wfr-filters {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e9ecef);
    border-radius: 12px;
    margin-bottom: 1rem;
    /* Lift above the table panel so Autocomplete dropdown menus aren't covered.
       Both .wfr-filters and .wfr-panel get a stacking context from .wfr-animate's
       transform, so we have to rank them explicitly. */
    position: relative;
    z-index: 10;
}

.wfr-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
    min-width: 140px;
}

.wfr-filter-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color, #6c757d);
}

.wfr-filter-input select,
.wfr-filter-input input {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    background-color: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    width: 100%;
    transition: border-color 0.2s ease;
}

.wfr-filter-input select:focus,
.wfr-filter-input input:focus {
    outline: none;
    border-color: var(--tog-primary-color, #36b3ac);
    box-shadow: 0 0 0 3px rgba(54, 179, 172, 0.15);
}

.wfr-filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    padding-bottom: 1px;
}

.wfr-filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--bs-body-color, #212529);
    padding-bottom: 0.5rem;
}

/* ---- Panel ---- */
/* No `overflow: hidden` — it would clip row-action ButtonMenu dropdowns when the
   table is short. The `overflow-x-auto` utility on the markup handles horizontal
   scroll on narrow viewports without trapping the dropdown vertically. */
.wfr-panel {
    border: 1px solid var(--bs-border-color, #e9ecef);
    border-radius: 12px;
    background: var(--bs-body-bg, #fff);
    position: relative;
    z-index: 1;
}

/* ---- DataGrid Overrides ---- */
.wfr-panel .table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.wfr-panel .table > thead > tr > th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color, #6c757d);
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color, #e9ecef);
    background: transparent;
    white-space: nowrap;
}

.wfr-panel .table > tbody > tr > td {
    padding: 0.75rem 1.25rem;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.04));
    vertical-align: middle;
}

.wfr-panel .table > tbody > tr {
    transition: background 0.15s ease;
}

.wfr-panel--clickable .table > tbody > tr {
    cursor: pointer;
}

.wfr-panel .table > tbody > tr:hover {
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.02));
}

.wfr-panel .table > tbody > tr:last-child > td {
    border-bottom: none;
}

/* Pager overrides */
.wfr-panel nav {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--bs-border-color, #e9ecef);
}

/* ---- Cell Styles ---- */
.wfr-name {
    font-weight: 600;
    color: var(--bs-heading-color, var(--bs-body-color));
}

.wfr-name--child {
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 500;
    margin-left: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.wfr-muted {
    color: var(--bs-secondary-color, #6c757d);
    font-variant-numeric: tabular-nums;
}

.wfr-code {
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.75rem;
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.04));
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    color: var(--tog-primary-color, #36b3ac);
}

.wfr-user {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.wfr-user-name {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--bs-heading-color, var(--bs-body-color));
}

.wfr-user-detail {
    font-size: 0.6875rem;
    color: var(--bs-secondary-color, #6c757d);
}

.wfr-user-id {
    font-size: 0.625rem;
    opacity: 0.7;
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
}

.wfr-duration {
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--bs-heading-color, var(--bs-body-color));
}

/* ---- Status Badges ---- */
.wfr-status {
    display: inline-flex;
    align-items: center;
    padding: 0.175rem 0.625rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: capitalize;
}

.wfr-status--draft      { background: rgba(148, 163, 184, 0.12); color: #64748b; }
.wfr-status--enabled    { background: rgba(16, 185, 129, 0.1);   color: #10b981; }
.wfr-status--disabled   { background: rgba(245, 158, 11, 0.1);   color: #f59e0b; }
.wfr-status--error      { background: rgba(239, 68, 68, 0.1);    color: #ef4444; }
.wfr-status--pending    { background: rgba(148, 163, 184, 0.12); color: #64748b; }
.wfr-status--running    { background: rgba(59, 130, 246, 0.1);   color: #3b82f6; }
.wfr-status--completed  { background: rgba(16, 185, 129, 0.1);   color: #10b981; }
.wfr-status--failed     { background: rgba(239, 68, 68, 0.1);    color: #ef4444; }
.wfr-status--suspended  { background: rgba(245, 158, 11, 0.1);   color: #f59e0b; }
.wfr-status--cancelled  { background: rgba(148, 163, 184, 0.12); color: #94a3b8; }

/* ---- Animations ---- */
@keyframes wfr-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wfr-animate {
    animation: wfr-fade-up 0.45s ease-out forwards;
    opacity: 0;
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
    .wfr-filters {
        flex-direction: column;
    }

    .wfr-filter-field {
        min-width: 100%;
    }

    .wfr-filter-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ---- Dark Theme Overrides ---- */
.lpx-theme-dark .wfr-panel .table > tbody > tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.lpx-theme-dark .wfr-status--draft      { background: rgba(148, 163, 184, 0.15); }
.lpx-theme-dark .wfr-status--enabled    { background: rgba(16, 185, 129, 0.15); }
.lpx-theme-dark .wfr-status--disabled   { background: rgba(245, 158, 11, 0.15); }
.lpx-theme-dark .wfr-status--error      { background: rgba(239, 68, 68, 0.15); }
.lpx-theme-dark .wfr-status--pending    { background: rgba(148, 163, 184, 0.15); }
.lpx-theme-dark .wfr-status--running    { background: rgba(59, 130, 246, 0.15); }
.lpx-theme-dark .wfr-status--completed  { background: rgba(16, 185, 129, 0.15); }
.lpx-theme-dark .wfr-status--failed     { background: rgba(239, 68, 68, 0.15); }
.lpx-theme-dark .wfr-status--suspended  { background: rgba(245, 158, 11, 0.15); }
.lpx-theme-dark .wfr-status--cancelled  { background: rgba(148, 163, 184, 0.15); }

.lpx-theme-dark .wfr-filters {
    background: var(--bs-body-bg);
}

.lpx-theme-dark .wfr-filter-input select,
.lpx-theme-dark .wfr-filter-input input {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}