/* ConditionBuilder.css */
/* All styles related to the condition builder component */

/* ---------- Exit Condition Builder ---------- */
.exit-conditions-label {
    padding-left: 10px;
    margin-bottom: 10px;
    display: block;
}

.exit-condition {
    display: flex;
    align-items: center;
    gap: 0px;
}

/* Base layout */
.exit-condition-drag-handle,
.exit-condition-trash-can {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
    margin-right: 4px;
}

.exit-condition-drag-handle {
    background-image: url("../../Icons/drag-handle.svg");
    cursor: grab;
}

.exit-condition-trash-can {
    background-image: url("../../Icons/trash.svg");
    cursor: pointer;
}

/* Full opacity when hovering the icon itself */
.exit-condition-drag-handle:hover,
.exit-condition-trash-can:hover,
.exit-condition-group-drag-handle:hover,
.exit-condition-group-trash-can:hover {
    opacity: 1;
}

/*-----------------------------for drag and drop formatting-----------------------------*/



.exit-condition,
.exit-condition-group-header {
    border-top: 3px solid transparent;
    padding-top: 3px;
    padding-bottom: 3px;
}

.condition-group-condition-list {
    padding-bottom: 6px;
    padding-top: 3px;
}



/* ----------------------------------------end drag and drop formatting code ---------------------------------------- */

.exit-conditions-list-section {
    padding: 0px;
}

.condition-set-title {
    border: none;
    border-bottom: 1px solid #000;
    background: transparent;
    font-size: 14px;
}


.exit-condition-set-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: #ffffff;
    position: relative;
}

.exit-condition-group-wrapper {
    padding-bottom: 15px;
}

.exit-condition-set-header .delete-icon {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.exit-condition-set-header .condition-set-title {
    flex: 1;
    border: none;
    border-bottom: 1px solid #000;
    background: transparent;
    font-size: 14px;
    padding: 4px;
}

.exit-condition-set-header .rightAnchorPoint {
    position: absolute;
    right: -40px;
}

/* indent nested groups for tree effect */
.condition-group-condition-list {
    margin-left: 25px;
    padding-bottom: 5px;
    border-left: 2px solid #b5b39a;
}

.add-controls::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 50%;
    border-left: 2px solid #b5b39a;
}

.add-condition-set {
    font-size: 14px;
    color: #999;
    cursor: pointer;
    text-align: left;
    margin-left: 10px;
}

.exit-condition-group-header {
    margin-bottom: 6px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.add-controls {
    margin-left: 25px;
    position: relative;
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: #999;
    cursor: pointer;
    align-items: center;
}

.approvalPhaseHead .exit-condition-group-header-text {
    white-space: nowrap;
}

.condition-line-item-stem {
    flex: 0 0 1.25em;
    height: 0;
    border-top: 2px solid #b5b39a;
    font-size: 13px;
}

/* Add spacing specifically where needed */
.exit-condition .condition-line-item-stem, 
.exit-condition-group-header .condition-line-item-stem {
    margin-right: 5px;
}

/* For group headers, use no extra margin and control spacing with label */
.exit-condition-group-header {
    gap: 0;
}

.exit-condition-group-header-text {
    margin-left: 4px;
}

.condition-group-type-select {
    border: none;
    background-color: #fff;
    font-size: 13px;
    border-radius: 15px;
    padding: 2px 5px;
    cursor: pointer;
}

/* hide stems in root (top-level) groups */
.exit-condition-set-wrapper > .exit-condition-group-wrapper > .exit-condition-group-header > .condition-line-item-stem {
    display: none;
}

/* ---------- Exit Condition Group Icons ---------- */
.exit-condition-group-drag-handle,
.exit-condition-group-trash-can {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
    margin-right: 4px;
}

.exit-condition-group-drag-handle {
    background-image: url("../../Icons/drag-handle.svg");
    cursor: grab;
}

.exit-condition-group-trash-can {
    background-image: url("../../Icons/trash.svg");
    cursor: pointer;
}

/* keep text shift on hover but remove icon opacity change */
.exit-condition-group-header:hover .exit-condition-group-header-text {
    margin-left: 4px;
    transition: margin-left 0.2s ease;
}

/* ------------ Condition Inputs ------------- */
.condition-type-select,
.condition-extra-fields select {
    border: none;
    background-color: #fff;
    font-size: 13px;
    border-radius: 15px;
    padding: 2px 5px;
    cursor: pointer;
    margin: 0 5px;
}



.condition-extra-fields input {
    border: none;
    background-color: #fff;
    font-size: 13px;
    border-radius: 10px;
    padding: 2px 5px;
    margin: 0 5px;
}

.condition-extra-fields .group-select-dropdown {
    background-color: var(--color-group-rule-lightest);
}

.condition-type-select,
.condition-extra-fields {
    display: inline-flex;
    align-items: center;
}