/**
 * Workflow Planning Styles
 */

/* Allow card containers to show tooltips */
#workflowCanvas .card-container {
    overflow: visible !important; /* Allow tooltips to extend beyond card boundaries */
}

/* Card Header (Learn/Think/Do sections) */
.card-header {
    padding: 10px;
    padding-left: 20px;
    overflow: visible !important; /* Allow tooltips to extend beyond card boundaries */
}

/* Modal Overlay - Workflow-specific override
   Note: components.css sets opacity: 0 by default for transition support.
   Workflow modals use direct display:flex toggling, so we override opacity here.
   z-index comes from components.css (1000) - do not override globally. */
.modal-overlay {
    opacity: 1;  /* Override components.css opacity: 0 for workflow direct toggling */
}

/* Modal Container - visual overrides only; sizing from components.css */
.modal-container {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Modal Header */
.modal-header {
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    border-radius: 0;
    
}

.modal-header h2 {
    margin: 0;
    _color: #1a2234;
    font-size: 24px;
}

.modal-close {
    background: none;
    border: none;
    font-size: 32px;
    _color: #666;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.modal-close:hover {
    color: #1a2234;
}

/* Modal Content */
.modal-content {
    padding: 20px;
}

/* Modal Actions */
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

/* Form Groups */
.form-group {
    margin-bottom: 20px;
}

/* Toast Notifications — moved to components.css */

/* Workflow Arrow Overlay */
.workflow-arrow-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;  /* CRITICAL: Arrows won't block mouse interactions */
    z-index: 1;            /* Above workflow nodes to be visible */
    overflow: visible;     /* Allow arrows to extend beyond container */
}

/* Individual arrow paths - solid blue by default */
.workflow-arrow-path {
    fill: none;
    stroke-width: 2;
    /* Stroke color set by JavaScript - blue for inactive, category color for active */
    opacity: 1.0;          /* Solid, no transparency */
    transition: opacity 0.3s ease, stroke-width 0.2s ease, stroke 0.3s ease;
    pointer-events: none;
    stroke-linecap: round;    /* Rounded line caps for smooth appearance */
    stroke-linejoin: round;   /* Rounded joints for smooth curves */
}

/* Arrow animation when active - use origin category colors */
.workflow-arrow-path.active {
    /* opacity controlled via JavaScript inline style for upstream flow visualization */
    stroke-width: 3;
    stroke-dasharray: 8 4;
    animation: dash-march 1s linear infinite;
    /* Stroke color set by JavaScript based on origin category */
}

/* Fade inactive arrows when hovering a node */
.workflow-arrow-path.inactive-fade {
    opacity: 0.15;
    transition: opacity 0.3s ease;
}

/* Marching dashes animation */
@keyframes dash-march {
    from {
        stroke-dashoffset: 12;
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* Arrow markers (arrowheads) */
.workflow-arrow-marker {
    pointer-events: none;
}

/* Fade node text when arrows are visible */
.workflow-node.arrows-visible .node-text {
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

/* Verbose Mode - Hide node details by default */
.workflow-node .node-text {
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* Show node details in verbose mode */
.verbose-mode .workflow-node .node-text {
    display: block;
    max-height: 200px;  /* Arbitrary large value for animation */
}

/* Info Tooltip Container */
.info-tooltip {
    position: relative;
    display: inline-block;
}

/* Info Tooltip Content (hidden by default) */
.info-tooltip-content {
    visibility: hidden;
    opacity: 0;
    position: fixed;  /* Changed from absolute to fixed to escape container clipping */
    margin-top: 8px;
    width: 280px;
    background-color: #333;
    color: white;
    text-align: left;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    white-space: normal;
    word-wrap: break-word;
}

/* Arrow pointing up to the info icon */
.info-tooltip-content::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #333;
}

/* Show tooltip on hover */
.info-tooltip:hover .info-tooltip-content {
    visibility: visible;
    opacity: 1;
}


/* ============================================================================
   COST ESTIMATE STYLES (Super User Only)
   ============================================================================ */

/* Floating Cost Toggle Button (Hidden by default, shown when pressing C three times quickly) */
.cost-toggle-floating-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    font-size: 20px;
    z-index: 1000;
    transition: all 0.3s ease;

    /* Hidden by default */
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

/* Visible state (when 'C' key is held or when active) */
.cost-toggle-floating-btn.visible {
    opacity: 0.7;
    pointer-events: auto;
    transform: scale(1);
}

.cost-toggle-floating-btn.visible:hover {
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* Active state (cost view enabled) */
.cost-toggle-floating-btn.active {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
    animation: pulse 2s infinite;
}

.cost-toggle-floating-btn.active:hover {
    transform: scale(1.05);
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    }
    50% {
        box-shadow: 0 4px 20px rgba(40, 167, 69, 0.6);
    }
}

/* Cost Badge on Workflow Nodes - positioned in node-actions area */
.workflow-node-cost-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    display: none; /* Hidden by default, shown via JavaScript */
}

/* Cost badge button - styled like btn-node-action but with cost indicator */
.workflow-node-cost-badge .btn-cost {
    background: none;
    border: none;
    color: var(--color-success, #28a745);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: color 0.2s, background-color 0.2s;
    border-radius: 4px;
    white-space: nowrap;
}

.workflow-node-cost-badge .btn-cost:hover {
    color: white;
    background-color: var(--color-success, #28a745);
}

/* Empty cost badge (no estimate yet) */
.workflow-node-cost-badge .btn-cost-empty {
    color: var(--color-text-secondary, #9ca3af);
}

.workflow-node-cost-badge .btn-cost-empty:hover {
    color: white;
    background-color: var(--color-warning, #f59e0b);
}

/* Cardinality badge (database count, not a cost) */
.workflow-node-cost-badge .btn-cost-cardinality {
    color: var(--color-info, #3b82f6);
}

.workflow-node-cost-badge .btn-cost-cardinality:hover {
    color: white;
    background-color: var(--color-info, #3b82f6);
}

/* Hide regular node actions when in cost mode */
.node-actions.cost-mode-hidden {
    display: none !important;
}

/* Legacy cost badge styles (keeping for backwards compat) */
.cost-badge-empty,
.cost-badge-cardinality {
    cursor: pointer;
}

/* Cost Total Display */
.cost-total {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.cost-total:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

/* Cost Detail (execution count) */
.cost-detail {
    font-size: 11px;
    color: #666;
    text-align: right;
    margin-top: 4px;
    font-weight: 500;
}

/* No Estimate Badge */
.cost-no-estimate {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: #333;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(255, 193, 7, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.cost-no-estimate:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
}

/* Cost Summary Panel */
#workflow-cost-summary {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Simple Table for Cost Breakdown Modal */
.simple-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.simple-table thead {
    background-color: #f8f9fa;
}

.simple-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
}

.simple-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #dee2e6;
}

.simple-table tbody tr:hover {
    background-color: #f8f9fa;
}

.simple-table tfoot {
    background-color: #f8f9fa;
    font-weight: 600;
}

.simple-table tfoot th {
    padding: 12px;
    border-top: 2px solid #dee2e6;
    border-bottom: none;
}

/* Category Badges in Cost Breakdown */
.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-learn {
    background-color: #d4edda;
    color: #155724;
}

.badge-think {
    background-color: #d1ecf1;
    color: #0c5460;
}

.badge-do {
    background-color: #fff3cd;
    color: #856404;
}

/* Form Row for Side-by-Side Inputs */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* ============================================================================
   WORKFLOW COLUMN HEADER STYLES
   ============================================================================ */

/* Base workflow column header styles */
.workflow-column-header {
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.workflow-column-header h3 {
    margin: 0;
    font-size: 18px;
}

/* Actions container in column headers */
.workflow-header-actions {
    display: flex;
    gap: 8px;
}

/* Column headers - Colors controlled by theme CSS */
.workflow-column-header-learn {
    background-color: var(--workflow-learn-header-bg, #4CAF50);
}

.workflow-column-header-think {
    background-color: var(--workflow-think-header-bg, #2196F3);
}

.workflow-column-header-do {
    background-color: var(--workflow-do-header-bg, #FF9800);
}

/* ============================================================================
   WORKFLOW NODE STYLES
   (Migrated from inline styles in workflow_list.html)
   ============================================================================ */

.workflow-node {
    background-color: #f8f9fa;
    border-left: 4px solid var(--accent-primary, #1a2234);
    padding: 8px 10px;
    margin-bottom: 30px;
    border-radius: 4px;
    transition: background-color 0.2s;
    cursor: move;
    position: relative;
    font-size: 13px;
    line-height: 1.4;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.workflow-node:hover {
    background-color: #e9ecef;
}

/* Category-specific node borders - Colors controlled by theme CSS */
#learn-nodes .workflow-node {
    border-left-color: var(--workflow-learn-color, #4CAF50);
    border-left-width: var(--workflow-node-border-width, 4px);
}

#think-nodes .workflow-node {
    border-left-color: var(--workflow-think-color, #2196F3);
    border-left-width: var(--workflow-node-border-width, 4px);
}

#do-nodes .workflow-node {
    border-left-color: var(--workflow-do-color, #FF9800);
    border-left-width: var(--workflow-node-border-width, 4px);
}

.workflow-ghost-slot {
    background-color: transparent;
    border: 2px dashed #dee2e6;
    padding: 8px 10px;
    margin-bottom: 30px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    font-size: 13px;
    line-height: 1.4;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
}

.workflow-ghost-slot:hover {
    background-color: #f8f9fa;
    border-color: var(--accent-primary, #1a2234);
}

.workflow-ghost-slot.sortable-chosen {
    background-color: var(--accent-info-light, #e0f2fe);
    border-color: var(--accent-primary, #1a2234);
}

.node-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    gap: 8px;
}

.node-title-content {
    font-weight: 600;
    color: var(--accent-primary, #1a2234);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.node-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    visibility: hidden;
    pointer-events: none;
}

.workflow-node:hover .node-actions {
    visibility: visible;
    pointer-events: auto;
}

.node-label {
    font-weight: 600;
    flex-shrink: 0;
    min-width: 62px;
}

.truncate-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.truncate-text.expanded {
    white-space: normal;
    word-wrap: break-word;
}

/* Sortable.js states */
.sortable-ghost {
    opacity: 0.4;
    background-color: var(--accent-primary, #1a2234) !important;
}

.sortable-drag {
    opacity: 0.8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sortable-container {
    min-height: 100px;
}

/* Highlighted states for agent-node connections */
.highlighted-agent {
    border-color: var(--accent-primary, #1a2234) !important;
    box-shadow: 0 0 15px rgba(61, 79, 149, 0.5) !important;
    transform: scale(1.05);
}

.highlighted-node {
    background-color: #E8ECFA !important;
    border-left-color: var(--accent-primary, #1a2234) !important;
    border-left-width: 6px !important;
    box-shadow: 0 2px 8px rgba(61, 79, 149, 0.3);
    transform: scale(1.02);
}

/* Resource badge on nodes */
.resource-badge {
    background-color: var(--accent-info-light, #e0f2fe);
    color: var(--badge-info-text, #075985);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
}

.resource-badge:hover {
    background-color: var(--accent-info, #0284c7);
    color: white;
}

/* Workflow agent cards */
.workflow-agent-card {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 2px solid #e0e0e0;
    transition: all 0.2s;
    min-width: 180px;
    flex: 1 1 180px;
    max-width: 220px;
    position: relative;
}

.workflow-agent-card:hover {
    border-color: var(--accent-primary, #1a2234);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Small action button variant */
.btn-action-sm {
    font-size: 14px;
    padding: 8px 12px;
}

/* Header action buttons (used in column headers) */
.btn-header-action {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-header-action:hover {
    background-color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

/* Workflow template selection cards */
.workflow-template-card {
    background-color: #f8f9fa;
    padding: 30px;
    border-radius: 8px;
    border: 2px solid #e0e0e0;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.workflow-template-card:hover {
    border-color: var(--accent-primary, #1a2234);
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.template-name {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--accent-primary, #1a2234);
}

.template-description {
    font-size: 13px;
    color: var(--content-text-muted, #666);
    line-height: 1.5;
}

/* Placeholder agent cards (dashed border style) */
.placeholder-agent-card {
    border: 2px dashed #ccc !important;
    background-color: #fafafa !important;
    opacity: 0.85;
}

.placeholder-agent-card:hover {
    border-color: #999 !important;
    opacity: 1;
}

/* Creation option cards in modal */
.creation-option-card {
    background-color: #f8f9fa;
    padding: 25px 15px;
    border-radius: 8px;
    border: 2px solid #e0e0e0;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.creation-option-card:hover {
    border-color: var(--accent-primary, #1a2234);
    background-color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(61, 79, 149, 0.15);
}

/* Agent assignment cards in modal */
.agent-assignment-card {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 12px;
    transition: all 0.2s;
}

.agent-assignment-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.agent-card-collapsed {
    padding: 15px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.agent-card-collapsed:hover {
    background-color: #f8f9fa;
}

.agent-card-expanded {
    border-top: 1px solid #e0e0e0;
}

/* =========================================
   Agent Canvas - Node-based agent visualization
   Compact 3-column layout (inputs | agent | outputs)
   ========================================= */

/* Canvas view container - toggle visibility */
.agent-canvas-view {
    display: none;
}

.agent-canvas-view.active {
    display: block;
}

/* Canvas header with back button */
.agent-canvas-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--content-border, #e0e0e0);
}

.agent-canvas-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--page-heading-color, #1a2234);
    flex: 1;
}

/* Canvas edit mode button - light styling, floats right */
.canvas-edit-mode-btn {
    padding: 6px 14px;
    font-size: 0.85rem;
    background: var(--content-background-alt, #f3f4f6);
    border: 1px solid var(--content-border, #d1d5db);
    border-radius: 6px;
    color: var(--content-text-muted, #6b7280);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.canvas-edit-mode-btn:hover {
    background: var(--content-background, #ffffff);
    border-color: var(--content-text-muted, #9ca3af);
    color: var(--page-heading-color, #1a2234);
}

.canvas-edit-mode-btn.active {
    background: var(--page-heading-color, #1a2234);
    border-color: var(--page-heading-color, #1a2234);
    color: #ffffff;
}

/* Canvas header action buttons group */
.canvas-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Canvas area - 3-column flexbox layout */
.agent-canvas-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 40px;
    background: var(--content-background, #f8f9fa);
    border-radius: 8px;
    border: 1px solid var(--content-border, #e0e0e0);
    min-height: 350px;
}

/* Left column: inputs - anchored to left edge */
.canvas-inputs-column {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 200px;
}

/* Center column: agent - centered with flex growth */
.canvas-agent-column {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Right column: outputs - anchored to right edge */
.canvas-outputs-column {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 200px;
}

/* Central agent node - dark prominent styling */
.canvas-agent-center {
    background: var(--page-heading-color, #1a2234);
    color: white;
    text-align: center;
    padding: 20px 24px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.canvas-agent-center:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.canvas-agent-icon {
    font-size: 1.75rem;
    margin-bottom: 8px;
    opacity: 0.9;
}

.canvas-agent-name {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 4px;
}

.canvas-agent-type {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Input/output node base styling - clean, readable cards */
.canvas-node {
    padding: 10px 12px;
    background: white;
    border: 1px solid var(--content-border, #e0e0e0);
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.canvas-node:hover {
    border-color: var(--accent-primary, #1a2234);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Node type left-border colors - subtle in default theme */
.canvas-node-connector {
    border-left: 3px solid var(--canvas-connector-color, #9ca3af);
}

.canvas-node-fact {
    border-left: 3px solid var(--canvas-fact-color, #9ca3af);
}

.canvas-node-user_input {
    border-left: 3px solid var(--canvas-input-color, #9ca3af);
}

.canvas-node-resource {
    border-left: 3px solid var(--canvas-resource-color, #9ca3af);
}

.canvas-node-visualization {
    border-left: 3px solid var(--canvas-viz-color, #9ca3af);
}

/* Node content styling */
.canvas-node-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.canvas-node-icon {
    color: var(--content-text-muted, #6b7280);
    font-size: 0.85rem;
}

.canvas-node-title {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--page-heading-color, #1a2234);
}

.canvas-node-subtitle {
    font-size: 0.7rem;
    color: var(--content-text-muted, #6b7280);
}

/* Category labels for grouping nodes */
.canvas-category-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--content-text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 4px;
    margin-top: 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--content-border, #e0e0e0);
}

.canvas-category-label:first-child {
    margin-top: 0;
}

/* Status indicator dot - inline with node header */
.canvas-node-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: auto;
    flex-shrink: 0;
}

.canvas-node-status.status-active {
    background: #10b981;
}

.canvas-node-status.status-inactive {
    background: #9ca3af;
}

/* Connection indicator - shows linked agents */
.canvas-connection-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--content-background-alt, #f3f4f6);
    color: var(--content-text-muted, #6b7280);
    font-size: 0.65rem;
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
    transition: all 0.15s ease;
    border: 1px solid var(--content-border, #e5e7eb);
}

.canvas-connection-indicator:hover {
    background: var(--page-heading-color, #1a2234);
    color: var(--content-background, #ffffff);
    border-color: var(--page-heading-color, #1a2234);
    transform: scale(1.1);
}

.canvas-connection-indicator i {
    font-size: 0.6rem;
    color: inherit;
}

/* SVG arrow overlay for canvas - positioned relative to canvas area */
.canvas-arrow-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
}

.canvas-arrow-path {
    fill: none;
    stroke: var(--canvas-arrow-color, #6b7280);
    stroke-width: 2;
    opacity: 0.7;
}

/* Data annotation indicators for workflow nodes */
.node-data-indicators {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.data-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.65rem;
    cursor: help;
}

.data-indicator-fact {
    background: var(--color-fact, #10b981);
    color: white;
}

.data-indicator-connector {
    background: var(--color-connector, #6366f1);
    color: white;
}

.data-indicator-resource {
    background: var(--color-resource, #8b5cf6);
    color: white;
}

/* Empty state for canvas */
.canvas-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-secondary, #6b7280);
}

.canvas-empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.canvas-empty-state h3 {
    margin: 0 0 8px 0;
    color: var(--color-text, #1f2937);
}

/* Canvas legend */
.canvas-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.canvas-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--color-text-secondary, #6b7280);
}

.canvas-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.canvas-legend-fact { background: var(--canvas-fact-color, #9ca3af); }
.canvas-legend-resource { background: var(--canvas-resource-color, #9ca3af); }
.canvas-legend-connector { background: var(--canvas-connector-color, #9ca3af); }
.canvas-legend-input { background: var(--canvas-input-color, #9ca3af); }
.canvas-legend-viz { background: var(--canvas-viz-color, #9ca3af); }

/* Canvas edit mode styles */
.canvas-node-remove {
    background: none;
    border: none;
    color: var(--color-text-secondary, #9ca3af);
    cursor: pointer;
    padding: 2px 4px;
    margin-left: auto;
    font-size: 0.75rem;
    opacity: 0.6;
    transition: all 0.2s;
}

.canvas-node-remove:hover {
    color: var(--color-danger, #ef4444);
    opacity: 1;
}

.canvas-node-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.canvas-add-connector-btn {
    width: 100%;
    padding: 8px 12px;
    margin-top: 8px;
    background: var(--content-background-alt, #f3f4f6);
    border: 1px dashed var(--content-border, #d1d5db);
    border-radius: 6px;
    color: var(--content-text-muted, #6b7280);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.canvas-add-connector-btn:hover {
    background: var(--page-heading-color, #1a2234);
    border-color: var(--page-heading-color, #1a2234);
    color: #ffffff;
}

/* Connector option in modal */
.connector-options-list {
    max-height: 300px;
    overflow-y: auto;
}

.connector-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--content-border, #e0e0e0);
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.connector-option:hover {
    background: var(--color-surface, #f3f4f6);
    border-color: var(--color-primary, #2563eb);
}

.connector-option:last-child {
    margin-bottom: 0;
}

.connector-option i {
    font-size: 1.25rem;
    color: var(--color-primary, #2563eb);
    width: 24px;
    text-align: center;
}

.connector-option-info {
    flex: 1;
}

.connector-option-name {
    font-weight: 500;
    color: var(--color-text, #1f2937);
}

.connector-option-type {
    font-size: 0.8rem;
    color: var(--color-text-secondary, #6b7280);
}

/* Annotation indicators on workflow nodes */
.annotation-indicators {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.annotation-icon {
    font-size: 0.7rem;
    opacity: 0.8;
    cursor: help;
}

.annotation-icon:hover {
    opacity: 1;
}

.annotation-icon-fact {
    color: var(--canvas-fact-color, #9ca3af);
}

.annotation-icon-resource {
    color: var(--canvas-resource-color, #9ca3af);
}

.annotation-icon-connector {
    color: var(--canvas-connector-color, #9ca3af);
}

.annotation-icon-user-input {
    color: var(--canvas-input-color, #9ca3af);
}

.annotation-icon-visualization {
    color: var(--canvas-viz-color, #9ca3af);
}

/* Frameless node action buttons */
.btn-node-action {
    background: none;
    border: none;
    color: var(--color-text-secondary, #9ca3af);
    cursor: pointer;
    padding: 4px;
    font-size: 0.8rem;
    transition: color 0.2s;
}

.btn-node-action:hover {
    color: var(--color-primary, #2563eb);
}

/* Annotation button (uses primary blue) */
.btn-annotate {
    background: none;
    border: none;
    color: var(--color-text-secondary, #9ca3af);
    cursor: pointer;
    padding: 4px;
    font-size: 0.8rem;
    transition: color 0.2s;
}

.btn-annotate:hover {
    color: var(--color-primary, #2563eb);
}

/* Edit button (uses primary blue) */
.btn-node-edit:hover {
    color: var(--color-primary, #2563eb);
}

/* Delete button (uses red) */
.btn-node-delete:hover {
    color: var(--color-danger, #ef4444);
}

/* Swap agent option styles for placeholder modal */
.swap-agent-option {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--content-border, #e0e0e0);
}

.swap-agent-option:last-child {
    border-bottom: none;
}

.swap-agent-option:hover {
    background: var(--color-surface, #f9fafb);
}

.swap-agent-option input[type="radio"] {
    margin-right: 12px;
    width: 16px;
    height: 16px;
}

.swap-agent-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.swap-agent-info i {
    color: var(--page-heading-color, #1a2234);
    font-size: 1.1em;
}

.badge-assigned {
    font-size: 0.75em;
    color: var(--color-text-muted, #6b7280);
    background: var(--content-background-alt, #f3f4f6);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Annotation modal checkbox styles */
.annotation-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--color-surface, #f9fafb);
    border-radius: 6px;
}

.annotation-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    background: white;
    border: 1px solid var(--content-border, #e5e7eb);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.annotation-checkbox:hover {
    border-color: var(--color-primary, #3b82f6);
    background: #e0e7ff;
}

.annotation-checkbox:hover .annotation-label strong,
.annotation-checkbox:hover .annotation-meta {
    color: var(--color-text, #1f2937);
}

.annotation-checkbox input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.annotation-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.annotation-label strong {
    font-size: 0.9rem;
    color: var(--color-text, #1f2937);
}

.annotation-meta {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #6b7280);
}

.annotation-empty {
    padding: 12px;
    text-align: center;
    color: var(--color-text-secondary, #9ca3af);
    font-size: 0.85rem;
    font-style: italic;
}

/* Agent actions cell in agents list table */
.agent-actions-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-canvas-view {
    color: var(--color-text-secondary, #6b7280);
    font-size: 1rem;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-canvas-view:hover {
    color: var(--color-primary, #2563eb);
    background: var(--color-surface, #f3f4f6);
}

/* Canvas button in workflow agent cards */
.agent-card .agent-canvas-btn {
    position: absolute;
    top: 8px;
    right: 8px;
}

/* CSS variables for canvas theming (add to core.css if not present) */
:root {
    --color-connector: #6366f1;
    --color-fact: #10b981;
    --color-user-input: #f59e0b;
    --color-resource: #8b5cf6;
    --color-viz: #ec4899;
}

/* ===== Agent Commons View ===== */

.agents-commons-view {
    display: none;
}

.agents-commons-view.active {
    display: block;
}

.commons-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.commons-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.commons-header-left h2 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--color-text, #1f2937);
}

.commons-workflow-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.commons-tab {
    padding: 6px 14px;
    border: 1px solid var(--content-border, #e5e7eb);
    border-radius: 20px;
    background: white;
    color: var(--color-text-secondary, #6b7280);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.commons-tab:hover {
    border-color: var(--color-primary, #3b82f6);
    color: var(--color-primary, #3b82f6);
}

.commons-tab.active {
    background: var(--color-primary, #3b82f6);
    border-color: var(--color-primary, #3b82f6);
    color: white;
}

.commons-canvas-container {
    background: white;
    border: 1px solid var(--content-border, #e5e7eb);
    border-radius: 8px;
    min-height: 500px;
    overflow: auto;
}

.commons-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    color: var(--color-text-secondary, #6b7280);
}

.commons-loading i {
    font-size: 2rem;
    margin-bottom: 15px;
}

.commons-svg {
    display: block;
}

/* Commons nodes */
.commons-agent-node {
    cursor: pointer;
}

.commons-node-rect {
    fill: white;
    stroke: var(--content-border, #e5e7eb);
    stroke-width: 2;
    transition: all 0.2s;
}

.commons-agent-node:hover .commons-node-rect {
    stroke: var(--color-primary, #3b82f6);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.commons-agent-node.orphan .commons-node-rect {
    stroke-dasharray: 4 2;
    opacity: 0.7;
}

.commons-node-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}

.commons-node-icon {
    font-size: 1.25rem;
    color: var(--color-text-secondary, #6b7280);
    margin-bottom: 6px;
}

.commons-node-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text, #1f2937);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Commons connections */
.commons-connection {
    cursor: pointer;
}

.commons-arrow-path {
    fill: none;
    stroke: var(--color-text-secondary, #9ca3af);
    stroke-width: 2;
    transition: stroke 0.2s;
}

.commons-connection:hover .commons-arrow-path {
    stroke: var(--color-primary, #3b82f6);
}

.commons-badge-bg {
    fill: white;
    stroke: var(--content-border, #e5e7eb);
    stroke-width: 1;
}

.commons-connection:hover .commons-badge-bg {
    stroke: var(--color-primary, #3b82f6);
}

.commons-badge-text {
    font-size: 10px;
    fill: var(--color-text, #1f2937);
}

.commons-badge-icon {
    fill: var(--color-text-secondary, #9ca3af);
    font-size: 8px;
}

/* Commons popover */
.commons-popover {
    position: fixed;
    background: white;
    border: 1px solid var(--content-border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 15px;
    z-index: 10000;
    max-width: 300px;
}

.commons-popover-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--color-text-secondary, #6b7280);
    cursor: pointer;
    line-height: 1;
}

.commons-popover-close:hover {
    color: var(--color-text, #1f2937);
}

.commons-popover-content {
    font-size: 0.85rem;
    color: var(--color-text, #1f2937);
}

.commons-detail-item {
    display: inline-block;
    background: var(--color-surface, #f3f4f6);
    padding: 2px 8px;
    border-radius: 4px;
    margin: 3px 3px 0 0;
    font-size: 0.8rem;
}

/* Commons canvas button on nodes */
.commons-canvas-btn {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 4px;
    background: var(--color-surface, #f3f4f6);
    color: var(--color-text-secondary, #6b7280);
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.commons-canvas-btn:hover {
    background: var(--color-primary, #3b82f6);
    color: white;
}

/* Commons badge content with icons */
.commons-badge-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 3px;
    font-size: 11px;
}

.commons-badge-fact-icon {
    color: var(--canvas-fact-color, #9ca3af);
    font-size: 9px;
}

.commons-badge-resource-icon {
    color: var(--canvas-resource-color, #9ca3af);
    font-size: 9px;
}

.commons-badge-count {
    font-weight: 600;
    color: var(--color-text, #1f2937);
}

.commons-connection-badge {
    cursor: pointer;
}

.commons-connection-badge:hover .commons-badge-bg {
    stroke: var(--color-primary, #3b82f6);
}

/* ============================================================================
   Placeholder Action Sections (Convert to Mock, Swap with Agent)
   ============================================================================ */

.placeholder-action-section {
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    margin-bottom: 12px;
    background: var(--color-bg-light, #f9fafb);
    transition: all 0.2s ease;
}

.placeholder-action-section:hover {
    border-color: var(--color-primary, #3b82f6);
    background: #f0f7ff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.placeholder-action-section > summary {
    padding: 12px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--color-text, #374151);
    transition: color 0.2s ease;
    list-style: none;
}

.placeholder-action-section > summary::-webkit-details-marker {
    display: none;
}

.placeholder-action-section > summary::before {
    content: '\f054';  /* FontAwesome chevron-right */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    color: var(--color-text-muted, #9ca3af);
    transition: transform 0.2s ease;
}

.placeholder-action-section[open] > summary::before {
    transform: rotate(90deg);
}

.placeholder-action-section:hover > summary {
    color: var(--color-primary, #3b82f6);
}

.placeholder-action-section > summary i {
    color: var(--color-primary, #3b82f6);
}

.placeholder-action-section > div {
    padding: 0 15px 15px 15px;
}

/* Loading state for action buttons */
.btn-action.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}

.btn-action.btn-loading::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    top: 50%;
    left: 50%;
    margin-left: -7px;
    margin-top: -7px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}