/* Government Builder Styles extracted from styles/new-project.css */

/* Container for custom government builder */
.government-builder {
    position: relative;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    border-radius: 16px;
    border: 2px solid #e0e0e0;
    overflow: hidden;
}

/* Controls */
.add-step-select {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    padding: 8px 12px;
    font-size: 14px;
    color: #333;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    min-width: 160px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 32px;
}

.add-step-select:hover {
    border-color: #4a90e2;
}

.add-step-select:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

/* Canvas container that houses the very large scrollable/zoomable area */
.canvas-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.canvas-content {
    --grid-line-width: 1px;
    --grid-size: 50px;
    --grid-line-width-large: 1px;
    --grid-size-large: 500px;

    position: absolute;
    width: 10000px;
    height: 10000px;
    transform-origin: 0 0;
    left: 0;
    top: 0;
    margin: 0;
    transform: translate(0, 0) scale(1);
    background: #f0f0f0;
    background-image:
        linear-gradient(to right, rgba(180, 180, 180, 0.7) var(--grid-line-width), transparent var(--grid-line-width)),
        linear-gradient(to bottom, rgba(180, 180, 180, 0.7) var(--grid-line-width), transparent var(--grid-line-width));
    background-size: var(--grid-size) var(--grid-size);
    background-position: 0 0;
}

.canvas-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(to right, rgba(180, 180, 180, 0.9) var(--grid-line-width-large), transparent var(--grid-line-width-large)),
        linear-gradient(to bottom, rgba(180, 180, 180, 0.9) var(--grid-line-width-large), transparent var(--grid-line-width-large));
    background-size: var(--grid-size-large) var(--grid-size-large);
    background-position: 0 0;
    pointer-events: none;
}

.canvas-element {
    position: absolute;
    cursor: move;
    user-select: none;
    z-index: 1;
}

.canvas-element.dragging {
    opacity: 0.8;
    z-index: 1000;
}

/* ------------- NODE STYLES ------------- */
.node {
    font-family: Arial, sans-serif;
    width:300px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.node-header {
    position: relative;
    height: 24px;
    margin-bottom: 5px;
    background: #f8f8f8;
    border-radius: 4px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #999;
    font-size: 12px;
}

.node-label {
    text-align: left;
    flex: 1;
}

.drag-icon {
    width: 24px;
    height: 16px;
    transform: translateX(-50%) rotate(90deg);
    position: absolute;
    left: 50%;
}

.help-icon, .copy-icon, .node-header .delete-icon {
    margin-left: 8px;
    margin-right:0px;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.node-body {
    border-radius: 10px;
    padding: 15px 10px;
    color: #000;
    text-align: center;
    margin-bottom: 10px;
    background-color: #ff0000;
}

.whoCanAmendHead .node-body, .whoCanViewHead .node-body, .whoCanSuggestHead .node-body{
    background-color: #9EC5FF;
}

.variableDefinition .node-body{
    background-color: #FFB770;
}

.groupDefinition .node-body{
    background-color: #BEE895;
}

/* Approval Phase node */
.approvalPhaseHead .node-body{
    background-color: #FFF69B;
}

/* Accept node */
.acceptHead .node-body{
    background-color: #90EE90; /* light green */
}

.acceptHead .variable-toggle{
    margin-top: 20px;
}

.acceptHead .toggle-btn {
    background-color: #C8E6C9; /* muted light green */
    color: #000;
}

.acceptHead .toggle-btn.selected {
    background-color: #81C784; /* muted darker green */
    color: #fff;
    border: 1px solid #202020;
}

.accept-description{
    text-align: center;
    color: #666;
    font-size: 12px;
    margin: 0;
    line-height: 1.4;
}

/* Decline node */
.declineEnd .node-body{
    background-color: #ff6161; /* light red */
}

.declineEnd .variable-toggle{
    margin-top: 20px;
}

.declineEnd .toggle-btn {
    background-color: #ffc4c4; /* muted light red */
    color: #000;
}

.declineEnd .toggle-btn.selected {
    background-color: #ff7979; /* muted darker red */
    color: #fff;
    border: 1px solid #202020;
}

.decline-description{
    text-align: center;
    color: #666;
    font-size: 12px;
    margin: 0;
    line-height: 1.4;
}

.node-group-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dropdown-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.dropdown-wrapper .delete-icon {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    order: -1;
    margin-left: 0;
}

.group-select {
    flex: 1;
    padding: 6px;
    border-radius: 10px;
    border: none;
    font-size: 14px;
    background-color: #BEE895;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.group-select.group-selected {
    border: 2px solid #FF6F6F;
}

.delete-icon {
    cursor: pointer;
    margin-right: 0px;
    margin-left: 0px;
}

.add-group {
    font-size: 14px;
    color: #999;
    cursor: pointer;
    text-align: left;
    padding: 4px;
}

.who-can-nominate-groups{
    background-color: #e9f7da;
    border-radius: 10px;
}


.reaction-types{
    background-color: #FFF9C4; /* light yellow */
    border-radius: 10px;
}

.icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    cursor: pointer;
}


.rightAnchorPoint {
    position: absolute;
    right: -15px;
    width: 20px;
    height: 30px;
    background-color: #fff;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-left: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

/* Optional inner indicator */
.rightAnchorPoint::after {
    content: '';
    width: 6px;
    height: 6px;
    background-color: #007BFF;
    border-radius: 50%;
}

.leftAnchorPoint {
    position: absolute;
    left: -15px;
    width: 20px;
    height: 30px;
    background-color: #fff;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-right: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

/* Optional inner indicator */
.leftAnchorPoint::after {
    content: '';
    width: 6px;
    height: 6px;
    background-color: #007BFF;
    border-radius: 50%;
}


/* ---------- Variable Definition Custom UI ---------- */
.variable-input-wrapper {
    position: relative;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spacer {
    width: 16px; /* same as icon width */
}

.variable-title-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #000000;
    background: transparent;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 4px 22px 4px 4px; /* space for icon on the right */
    color: #000;
}

.variable-title-input:focus {
    outline: none;
    border-color: #000;
}

.variable-input-icon {
    position: absolute;
    right: 4px;
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.variable-toggle {
    display: flex;
    width: 100%;
}

.toggle-btn {
    flex: 1;
    padding: 6px 4px;
    font-size: 12px;
    border: none;
    cursor: pointer;
    background-color: #FFD89E; /* light orange */
    color: #000;
    transition: background-color 0.2s ease;
}

.toggle-btn.selected {
    background-color: #FF9F43; /* darker orange */
    color: #fff;
    border: 1px solid #202020;
}

.toggle-btn:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.toggle-btn:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.numerical-input-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.numerical-input-label {
    font-size: 13px;
    color: #444;
    margin-bottom: 5px;
}

.numerical-input {
    width: 80%;
    padding: 5px;
    border: 1px solid #000;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
}

.group-list-type-label{
    font-size: 13px;
    color: #444;
    margin-bottom: 5px;
}

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

/* ---------- Group Definition Toggle Palette ---------- */
.groupDefinition .toggle-btn {
    background-color: #D4F4B6; /* light green */
    color: #000;
}

.groupDefinition .toggle-btn.selected {
    background-color: #A7D86C; /* darker green */
    color: #fff;
    border: 1px solid #202020;
}

.group-select option.separator-option {
    color: #888;
}

.rightAnchorPoint.hidden-anchor {
    display: none !important;
}

/* Membership Info Widget Styles */
.Membership-Info {
    margin: 18px 0 8px 0;
    padding: 10px 0 0 0;
}

.Membership-Report {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.Membership-Report-Labels {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.Membership-Report-Label,
.Membership-Count {
    font-size: 12px;
    margin-bottom: 0;
}

.Edit-Group-Membership-Button {
    margin-top: 4px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background: #99C969;
    color: #2d4d1c;
    border: none;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.Membership-Test-Tool {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 8px;
    margin-bottom: 8px;
}

.Membership-Test-Tool-Label {
    font-size: 13px;
    color: #333;
    margin-bottom: 4px;
    font-weight: 500;
}

.Membership-Test-Tool-Input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #99C969;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
    margin-bottom: 6px;
}

.Membership-Test-Tool-Bottom {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.Membership-Status-Label {
    font-size: 12px;
    color: #6a6a6a;
    font-style: italic;
}

.Add-Remove-User-Button {
    background: #99C969;
    color: #2d4d1c;
    border: none;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
}
.Add-Remove-User-Button:hover, .Edit-Group-Membership-Button:hover {
    background: #a0c88a;
}

.reaction-type-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.reaction-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.reaction-wrapper .delete-icon {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    order: -1;
    margin-right: 0;
    margin-left:0;
}

.emoji-select {
    width: 38px;
    padding: 4px;
    border-radius: 6px;
    border: none;
    background: #FFF9C4; /* light yellow */
    flex-shrink: 0;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.reaction-title-input {
    flex: 1;
    border: none;
    border-bottom: 1px solid #000;
    background: transparent;
    font-size: 14px;
    padding: 4px;
}

.add-reaction {
    font-size: 14px;
    color: #999;
    cursor: pointer;
    text-align: left;
    padding: 4px;
}

.top-node-setting-section{
    padding: 10px;
    padding-top: 5px;
    margin-bottom: 10px;
}

.middle-node-setting-section{
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.bottom-node-setting-section{
    padding: 10px;
    padding-bottom: 5px;
    margin-top: 10px;
}

.only-node-setting-section{
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* ---------- Exit Condition Builder ---------- */
.exit-conditions-label{
    font-size: 13px;
    color: #444;
    padding-left: 10px;
}

.exit-condition:hover {
    background-color: #f0f0f0;
    border-radius: 10px;
}

.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-icon.png");
    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;
}

/* Highlight entire condition group when its header is hovered (handled via JS by toggling .hovered) */
.exit-condition-group-wrapper.hovered {
    background-color: #f0f0f0;
    border-radius: 10px;
}

/* Animate statement shift */
.exit-condition-statement {
    transition: margin-left 0.2s ease;
    font-size: 13px;
}

.exit-condition:hover .exit-condition-statement {
    margin-left: 4px;
}

.exit-conditions-list-section{
    padding: 10px;
    background-color: #ededed;
    border-radius: 10px;
    padding-top: 10px;
}

.exit-condition-set-wrapper{
    background:#FFF9C4;
    border:1px solid #ddd;
    border: none;
    border-radius: 15px;
    padding:10px;
    margin-top:10px;
}

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

.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;
}


/* 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;
    padding-top: 10px;
    padding-bottom: 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{
    width:max-content;
    min-width:300px;
}

.approvalPhaseHead .group-list-type-label,
.approvalPhaseHead .exit-conditions-label,
.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-icon.png");
    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;
}

/* Ensure alignment and spacing */
.exit-condition{
    margin:5px 0;
}

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