/* Custom CSS overriding Bootstrap variables for Drawflow */

/* Background grid for Drawflow canvas */
#drawflow {
    background-image: radial-gradient(#333 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 1; /* Explicit Z-index */
}

/* Modules in Accordion */
.module-item {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor: grab;
    transition: background-color 0.2s;
    user-select: none;
    color: #e0e0e0;
}
.module-item:hover {
    background-color: rgba(255,255,255,0.1);
}
.module-item:active {
    cursor: grabbing;
}

/* Drawflow Nodes Override */
.drawflow-node {
    background: #333 !important;
    border-radius: 8px !important;
    color: white !important;
    border: 1px solid #555 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
    z-index: 2 !important; /* Above canvas grid */
}
.drawflow-node.selected {
    border: 1px solid #198754 !important; /* Bootstrap success color */
}
.drawflow-node .title {
    border-bottom: 1px solid #444;
    padding: 8px;
    font-weight: bold;
    color: #198754;
}
.drawflow-node .content {
    padding: 10px;
    font-size: 0.8em;
    color: #bbb;
}

/* Drawflow Connections */
.drawflow .connection .main-path {
    stroke: #888 !important;
    stroke-width: 3px !important;
}
.drawflow .connection .main-path:hover {
    stroke: #198754 !important;
}

/* Output / Input Labels */
.output-labels {
    position: absolute;
    right: -130px;
    top: 0;
    pointer-events: none;
    width: 120px;
}
.output-label {
    position: absolute;
    right: 0;
    font-size: 10px;
    background: rgba(25, 135, 84, 0.8); /* Bootstrap success */
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: all 0.2s;
    z-index: 5;
}
.output-label:hover {
    background: rgba(25, 135, 84, 1);
    z-index: 10;
    transform: scale(1.1);
}

.input-label {
    position: absolute;
    left: -130px;
    top: 30px;
    font-size: 10px;
    background: rgba(13, 202, 240, 0.8); /* Bootstrap info */
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
}

/* Bootstrap Overrides for Accordion */
.accordion-button:not(.collapsed) {
    background-color: rgba(255,255,255,0.05) !important;
    color: white !important;
    box-shadow: none !important;
}
.accordion-button::after {
    filter: invert(1);
}

/* Logs Panel Animations */
.logs-panel.expanded {
    height: 250px !important;
}
.logs-panel.expanded .toggle-icon {
    transform: rotate(180deg);
}
.logs-panel.expanded .logs-content {
    display: block !important;
}

/* Flow item in Load Modal (Legacy styling, for Phase 2 compatibility) */
.flow-item {
    padding: 10px 15px;
    background-color: #333;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
    border: 1px solid #444;
}
.flow-item:hover {
    background-color: #444;
    border-left: 3px solid #0dcaf0;
}

/* jqGrid Dark Theme — scoped to #modal-load and #modal-runners */
#modal-load .ui-jqgrid, #modal-runners .ui-jqgrid {
    background-color: #1a1a1a;
    border: 1px solid #444;
}
#modal-load .ui-jqgrid-view,
#modal-load .ui-jqgrid-bdiv,
#modal-load .ui-jqgrid-hdiv,
#modal-load .ui-jqgrid-titlebar,
#modal-load .ui-widget-content,
#modal-load .ui-widget-header,
#modal-runners .ui-jqgrid-view,
#modal-runners .ui-jqgrid-bdiv,
#modal-runners .ui-jqgrid-hdiv,
#modal-runners .ui-jqgrid-titlebar,
#modal-runners .ui-widget-content,
#modal-runners .ui-widget-header {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
/* Header row */
#modal-load .ui-jqgrid-htable th,
#modal-load .ui-jqgrid-htable th.ui-th-column,
#modal-runners .ui-jqgrid-htable th,
#modal-runners .ui-jqgrid-htable th.ui-th-column {
    background-color: #2d3748 !important;
    color: #ffffff !important;
    border-color: #444 !important;
}
/* Data rows */
#modal-load .ui-jqgrid-btable td,
#modal-runners .ui-jqgrid-btable td {
    background-color: #1a1a1a !important;
    color: #cccccc !important;
    border-color: #444 !important;
}
#modal-load .ui-jqgrid-btable tbody tr:hover td,
#modal-runners .ui-jqgrid-btable tbody tr:hover td {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}
/* Selected row */
#modal-load .ui-jqgrid-btable .ui-state-highlight td,
#modal-load .ui-jqgrid-btable .ui-state-highlight,
#modal-runners .ui-jqgrid-btable .ui-state-highlight td,
#modal-runners .ui-jqgrid-btable .ui-state-highlight {
    background-color: #0d6efd !important;
    color: #ffffff !important;
    border-color: #0a58ca !important;
}
/* Pager */
#modal-load .ui-jqgrid-pager,
#modal-load .ui-pager-control,
#modal-runners .ui-jqgrid-pager,
#modal-runners .ui-pager-control {
    background-color: #2a2a2a !important;
    border-top: 1px solid #444 !important;
    color: #ffffff !important;
}
#modal-load .ui-paging-info,
#modal-load .ui-pg-table,
#modal-runners .ui-paging-info,
#modal-runners .ui-pg-table {
    color: #ffffff !important;
}
#modal-load .ui-pg-input,
#modal-load .ui-pg-selbox,
#modal-runners .ui-pg-input,
#modal-runners .ui-pg-selbox {
    background-color: #333 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
    border-radius: 4px;
    padding: 2px 4px;
}
#modal-load .ui-pg-button .ui-icon,
#modal-runners .ui-pg-button .ui-icon {
    filter: brightness(0) invert(1);
}
#modal-load .ui-pg-button:hover,
#modal-runners .ui-pg-button:hover {
    background-color: #3a3a3a !important;
    color: #fff !important;
}
/* Filter toolbar search inputs */
#modal-load .ui-search-input input,
#modal-runners .ui-search-input input {
    background-color: #333 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
    border-radius: 4px;
    width: 100%;
    padding: 4px;
}