:root {
    --brand-lightgray: #f5f5f5; /* standard light gray */
    --brand-darkgray: #212131; /* standard dark gray */
    --brand-deepblue: #111122; /* standard deep blue */
}

.strategy-table-page-wrapper {
    /*  min-height: 100vh;*/
    scrollbar-gutter: stable;
}

.app-container {
    /* display: flex;*/
    gap: 20px;
    /*  height: 100vh;*/
}

.strategy-panel {
    border-radius: 4px;
    width: 500px;
    min-width: 500px;
    height: fit-content;
}

    .strategy-panel.collapsed {
        width: 230px;
        min-width: 150px;
    }

.strategy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background: #fff;
}

    .strategy-header h3 {
        margin: 0;
        color: #333;
        font-size: 16px;
        font-weight: 500;
    }

.strategy-controls {
    display: flex;
    gap: 10px;
}

.collapse-btn {
    position: relative;
    top: 1px;
}

/* Collapsed state for strategy panel - affects StrategyTable page layout */
.strategy-panel.collapsed .strategy-objective-cell,
.strategy-panel.collapsed .strategy-rationale-cell {
    display: none;
}

.strategy-panel.collapsed th:nth-child(3),
.strategy-panel.collapsed th:nth-child(4) {
    display: none;
}

.strategy-table-board {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    flex: 1;
    position: relative;
    min-height: 400px; /* Ensure there's space to drop orphan columns */
}

    /* Strategy table board drop target (for orphan decision columns) */
    .strategy-table-board.drop-target {
        background-color: rgba(153, 153, 153, 0.02);
        outline: 2px dashed #999;
        outline-offset: -5px;
    }


.group-container {
    /* Width will be dynamically set by JavaScript based on decision count */
    /* Minimum width for 1 decision column: 135px + 2px padding */
    min-width: 130px;
    transition: width 0.3s ease;
    flex-shrink: 0;
}
    .group-container.dragging {
        opacity: 0.4;
        /* Removed transform rotation for cleaner drag effect */
    }

/* Headless Group Container - Invisible drop zones between groups */
.headless-group-container {
    min-width: 20px;
    padding-top: var(--group-header-height);
    width: 20px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

    /* Show drop zone feedback when dragging over headless container */
    .headless-group-container.drag-over {
        min-width: 145px;
        width: auto;
        background-color: rgba(153, 153, 153, 0.03);
        border: 2px dashed #999;
        border-radius: 8px;
        padding: 5px;
    }

/* Headless group table - similar to group-table but without group-box background */
.headless-group-table {
    display: flex;
    gap: 5px;
    width: fit-content;
    min-width: 40px;
    min-height: 50px;
    align-items: flex-start;
    transition: all 0.3s ease;
}

/* When headless container has decisions, expand to fit them */
.headless-group-container:has(.decision-column) {
    width: auto;
    min-width: 135px;
}

/* Show a subtle visual hint that this is a drop zone when empty */
.headless-group-container:not(:has(.decision-column))::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 100px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 2px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show the drop zone hint when dragging */
.headless-group-container.drag-over::before {
    opacity: 1;
    background: rgba(0, 123, 255, 0.2);
}
.group-box {
    background: rgba(100,100,100,0.35);
    border: 1px solid rgba(100, 100, 100, 0.2);
    padding: 1px;
    border-radius: 4px;
    position: relative;
    margin-bottom: 10px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    /*transform 0.2s ease;*/
}

[data-bs-theme="dark"] .group-box {
    background: rgba(150,150,150,0.35);
    border: 1px solid rgba(200, 200, 200, 0.2);
}
.group-box:hover {
    /*transform: translateY(-2px);*/
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: rgba(100, 100, 100, 0.4);
    cursor: grab;
}
.group-box:active {
    cursor: grabbing;
}

/* During in-group decision reordering a ghost column is temporarily injected
   into group-table, making it wider than the group-box header.
   Keep container resize instant, let group-box track temporary drag width,
   but clamp label/input width to the original estimated width so long text
   does not expand and create extra spacing. */
.group-container:has(.decision-column.dragging),
.group-container:has(.decision-column-ghost) {
    transition: none;
}

    .group-container:has(.decision-column-ghost) > .group-box {
        width: calc(var(--group-header-estimated-width, 130px) + 143px);
    }

    .group-container:has(.decision-column-ghost) .group-header-label,
    .group-container:has(.decision-column-ghost) .group-header-input {
        width: var(--group-header-estimated-width, 130px);
        max-width: var(--group-header-estimated-width, 130px);
        margin-left: auto;
        margin-right: auto;
    }

.group-table {
    display: flex;
    gap: 8px;
    width: fit-content;
    min-width: 130px; /* Ensure minimum width for drop zone when empty */
    min-height: 50px; /* Ensure group-table has minimum height even when empty */
    align-items: flex-start;
}
.decision-column {
    flex: 0 0 auto;
    min-width: 135px;
    min-height: 100px; /* PHASE 3: Full height for better drop zones */
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
}
/* Remove extra width from last decision column so group-box aligns perfectly */
.group-table .decision-column:last-child {
    min-width: 130px;
}
.headless-group-table .decision-column:last-child {
    min-width: 130px;
}
.decision-column:hover .decision-box {
    transform: translateY(-2px);
    cursor: grab;
}
.decision-column .decision-box:active {
    cursor: grabbing;
}
.decision-column.dragging {
    opacity: 0.4;
    /* Removed transform rotation for cleaner drag effect */
}

/* Highlight effect when navigating to a decision from Issues List */
/* Matches QA criteria header highlight styling with blue theme */
.decision-column.decision-highlight {
    background: var(--active) !important;
    position: relative;
    z-index: 2;
    isolation: isolate;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.25);
    animation: decisionHighlightPulse 0.6s ease-in-out;
}

    .decision-column.decision-highlight::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 10;
        box-shadow: inset 1px 0 0 var(--activeBorder), inset -1px 0 0 var(--activeBorder), inset 0 1px 0 var(--activeBorder), inset 0 -1px 0 var(--activeBorder);
    }

[data-bs-theme="dark"] .decision-column.decision-highlight {
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.35);
}

@keyframes decisionHighlightPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}


.decision-box {
    background: rgba(184, 220, 255, 0.5);
    border: 1px solid rgba(66,121,175,0.15);
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 6px;
    position: relative;
    height: 100px;
    width: 135px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}

    .decision-box:active {
        cursor: grabbing;
    }

    .decision-box .decision-label-text {
        cursor: text;
        display: inline-block;
        padding: 8px 12px;
    }

[data-bs-theme="dark"] .decision-box {
    background: rgba(50, 112, 171,0.15);
    border: 1px solid rgba(66,121,175,0.15);
}

.choice-box {
    background: #fff;
    padding: 8px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    position: relative;
    transition: transform 0.2s ease;
    height: 100px;
    width: 135px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none; /* Prevent text selection during drag */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

[data-bs-theme="dark"] .choice-box {
    background: rgba(0,0,0,0.15);
}
.choice-box * {
    pointer-events: none; /* Prevent child elements from interfering with drag */
}
.choice-box .circle span {
    pointer-events: auto; /* Allow interactions with circle spans */
}
.choice-box .editable {
    pointer-events: auto; /* Allow double-click on the label */
    cursor: pointer;
}
.choice-box .menu {
    pointer-events: auto; /* Allow menu interactions */
}
.choice-box:hover {
    transform: translateY(-1px);
    cursor: grab;
}
.choice-box:active {
    cursor: grabbing;
}
.choice-box.dragging {
    opacity: 0.4;
    /* Removed transform rotation for cleaner drag effect */
}
.choice-box-ghost {
    background: transparent;
    padding: 8px;
    margin: 5px 0;
    border: 2px dashed #999;
    border-radius: 6px;
    position: relative;
    height: 100px;
    width: 130px;
    box-sizing: border-box;
    opacity: 0.6;
    pointer-events: none;
    background-color: rgba(0, 123, 255, 0.05);
}

/* Decision column ghost placeholder */
.decision-column-ghost {
    background: rgba(153, 153, 153, 0.08);
    border: 2px dashed #999;
    border-radius: 8px;
    min-height: 300px;
    min-width: 135px;
    margin: 0 2.5px;
    box-sizing: border-box;
    opacity: 0.9;
    pointer-events: auto; /* Enable pointer events so ghost can receive drops */
    cursor: copy; /* Visual feedback that this is a drop zone */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #999;
    transition: all 0.2s ease;
}

    .decision-column-ghost:hover {
        background: rgba(153, 153, 153, 0.15);
        border-color: #999;
        transform: scale(1.02);
    }

/* Disable transition-heavy UI effects while dragging to prevent flicker */
body.st-drag-active .group-container,
body.st-drag-active .group-box,
body.st-drag-active .group-table,
body.st-drag-active .decision-column,
body.st-drag-active .decision-box,
body.st-drag-active .choice-box,
body.st-drag-active .empty-group,
body.st-drag-active .empty-group-placeholder,
body.st-drag-active .decision-column-ghost,
body.st-drag-active .group-ghost-placeholder,
body.st-drag-active .orphan-drop-zone {
    transition: none !important;
    animation: none !important;
}

    body.st-drag-active .decision-column-ghost:hover,
    body.st-drag-active .group-ghost-placeholder:hover,
    body.st-drag-active .choice-box:hover,
    body.st-drag-active .decision-column:hover .decision-box {
        transform: none !important;
    }

/* Drop zone styling for decision columns */
.decision-column.drop-target {
    background-color: rgba(153, 153, 153, 0.05);
    border: 2px dashed #999;
    border-radius: 6px;
}

/* Drop zone styling for group containers */
.group-container.drop-target {
    background-color: rgba(153, 153, 153, 0.05);
    border: 2px dashed #999;
    border-radius: 6px;
}
.editable {
    cursor: pointer;
}
    .editable:focus {
        outline: none;
        /*border-bottom: 1px dashed #000;*/
    }
.menu {
    position: absolute;
    top: 5px;
    right: 5px;
    display: none;
    cursor: pointer;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px 5px;
    font-size: 14px;
    z-index: 10;
}

.menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 9999;
    min-width: 120px;
    display: none;
    margin-top: 2px;
}

    .menu-dropdown.show {
        display: block;
    }

.menu-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    transition: background 0.2s ease;
}

    .menu-item:last-child {
        border-bottom: none;
    }

    .menu-item:hover {
        background: #f0f0f0;
    }

.group-container:hover .group-box .menu,
.group-box:hover .menu,
.decision-box:hover .menu,
.choice-box:hover .menu {
    display: block;
}
.circle {
    position: absolute;
    bottom: 5px;
    right: 2px;
    display: flex;
    gap: 4px;
}

    .circle span {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        color: white;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* ============================================================================
   EMPTY GROUPS AND ADD BUTTONS
   ============================================================================ */

/* Empty group container styling */
.empty-group {
    min-width: 150px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

    .empty-group:hover {
        opacity: 1;
    }

/* Empty group placeholder (where "+" button goes) */
.empty-group-placeholder {
    /* padding: 20px;*/
    text-align: center;
    border: 2px dashed #ccc;
    border-radius: 8px;
    margin-left: 5px;
    min-width: 135px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(200, 200, 200, 0.05);
    transition: all 0.2s ease;
}

    .empty-group-placeholder:hover {
        border-color: #999;
        background: rgba(200, 200, 200, 0.1);
    }

/* Add button with circular plus icon */
.add-strategy-button,
.add-decision-button,
.add-choice-button,
.add-group-button {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #000;
    background: white;
    transition: all 0.2s ease;
    user-select: none;
}

    .add-strategy-button:hover,
    .add-decision-button:hover,
    .add-choice-button:hover,
    .add-group-button:hover {
        border-color: #999;
        background: #f0f8ff;
        transform: scale(1.1);
    }

    .add-strategy-button:active,
    .add-decision-button:active,
    .add-choice-button:active,
    .add-group-button:active {
        transform: scale(0.95);
    }

.add-icon {
    font-size: 20px;
    font-weight: normal;
    color: #000;
    line-height: 2;
}

.add-strategy-button:hover .add-icon,
.add-decision-button:hover .add-icon,
.add-choice-button:hover .add-icon,
.add-group-button:hover .add-icon {
    color: #999;
}

/* Add choice button - centered in decision column */
.decision-column .add-choice-button {
    margin: 10px;
}


/* Add group button - positioned at far right of board, NO top padding */
.add-group-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*margin-left: 10px;*/
    align-self: flex-start; /* Align to top */
}

/* Add orphan decision button - positioned below add group, with half decision box padding */
.add-orphan-decision-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 30px; /* Half of decision box height (100px / 2) */
}

.add-strategy-footer {
    border: none !important;
}

/* Context Menu Styles */
.decision-context-menu {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
    min-width: 180px;
}

.context-menu-item {
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.2s;
}

    .context-menu-item:hover {
        background-color: #f5f5f5;
    }

    .context-menu-item i {
        font-size: 16px;
        width: 20px;
        text-align: center;
    }

/* Modal Styles */
.modal.fade.show.d-block {
    display: block;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1050;
}

.modal-backdrop.fade.show {
    opacity: 0.5;
}

/* Apply ellipsis to text content inside decision and choice boxes */
.decision-box > *,
.choice-box > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    word-break: normal;
    max-width: 100%;
    text-align: center;
}

.choice-box > .status-context-menu,
.choice-box > .context-menu-backdrop {
    overflow: visible;
    white-space: normal;
    max-width: none;
    text-align: left;
}

.group-container {
    margin-right: 10px;
}


[data-bs-theme="dark"] .add-btn {
    background-color: transparent;
}

/* Dark-mode: force black edit background + white text for group / decision / choice editing */
[data-bs-theme="dark"] .group-box .editable[contenteditable="true"],
[data-bs-theme="dark"] .group-box:focus-within,
[data-bs-theme="dark"] .group-box input:focus,
[data-bs-theme="dark"] .group-box textarea:focus,
[data-bs-theme="dark"] .decision-box .editable[contenteditable="true"],
[data-bs-theme="dark"] .decision-box:focus-within,
[data-bs-theme="dark"] .decision-box input:focus,
[data-bs-theme="dark"] .decision-box textarea:focus,
[data-bs-theme="dark"] .choice-box .editable[contenteditable="true"],
[data-bs-theme="dark"] .choice-box:focus-within,
[data-bs-theme="dark"] .choice-box input:focus,
[data-bs-theme="dark"] .choice-box textarea:focus {
    background-color: #000 !important;
    color: #fff !important;
    caret-color: #fff !important;
    outline: 2px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.02) inset !important;
}

[data-bs-theme="dark"] .group-box .editable:empty:before,
[data-bs-theme="dark"] .decision-box .editable:empty:before,
[data-bs-theme="dark"] .choice-box .editable:empty:before,
[data-bs-theme="dark"] .strategy-objective:empty:before,
[data-bs-theme="dark"] .strategy-rationale:empty:before,
[data-bs-theme="dark"] .strategy-name:empty:before {
    color: #cccccc !important;
}

[data-bs-theme="dark"] .group-box,
[data-bs-theme="dark"] .decision-box,
[data-bs-theme="dark"] .choice-box {
    background-clip: padding-box;
}

[data-bs-theme="dark"] .strategy-name:focus,
[data-bs-theme="dark"] .strategy-objective:focus,
[data-bs-theme="dark"] .strategy-rationale:focus,
[data-bs-theme="dark"] .editable-strategy[contenteditable="true"] {
    outline: 2px solid rgba(255,255,255,0.08);
    background: #000 !important;
    color: #fff !important;
    white-space: normal;
    cursor: text;
}

/* Dark mode: name scrollable in edit mode */
[data-bs-theme="dark"] .strategy-name:focus {
    overflow-y: auto;
    overflow-x: hidden;
    text-overflow: clip;
}

/* Dark mode: objective & rationale scrollable in edit mode */
[data-bs-theme="dark"] .strategy-objective:focus,
[data-bs-theme="dark"] .strategy-rationale:focus {
    overflow-y: auto;
    overflow-x: hidden;
}


/* Make strategy text readable in dark mode */
[data-bs-theme="dark"] .strategy-objective,
[data-bs-theme="dark"] .strategy-rationale {
    color: #ffffff !important;
    font-style: italic;
}

.group-container {
    margin-top: 10px;
    margin-right: 8px;
    padding-left: 5px;
}

:root {
    --strategy-table-scrollbar-width: 0px;
}

/* When vertical-scroll mode is active, increase table width by scrollbar width
   so columns keep their intended sizes instead of being squeezed by the scrollbar. */
.strategy-table.touch-footer-vertical table {
    table-layout: fixed;
    width: calc(100% + var(--strategy-table-scrollbar-width));
    min-width: 100%;
}

.strategy-table table col:nth-child(1) {
    min-width: 20px;
    width: 20px;
}

.strategy-table table col:nth-child(2) {
    min-width: 200px;
    width: 200px;
}

.strategy-table.touch-footer-vertical td,
.strategy-table.touch-footer-vertical th {
    min-width: 0;
}

/* Keep header sticky while vertically scrolling */
.strategy-table.touch-footer-vertical thead th {
    position: sticky;
    top: 0;
    background: white;
    z-index: 2;
}

/* Make strategy-table a positioned container so absolute positioning uses it as reference */
.strategy-table {
    position: relative;
}

/* Pin the add button to bottom of the table container (not the viewport) */
.add-strategy-footer.fixed-add-button {
    position: absolute;
    left: 16px; /* adjust horizontal offset as needed */
    right: 16px;
    bottom: 16px; /* distance from bottom of table container */
    z-index: 50;
    background: rgba(255,255,255,0.95);
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    display: flex;
    gap: 8px;
    align-items: center;
    pointer-events: auto;
}

.choice-box.click-highlight {
    position: relative;
    z-index: 1;
}

    .choice-box.click-highlight::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 6px;
        pointer-events: none;
        z-index: -1;
        transform: translateY(-4px);
        opacity: 1;
        animation: clickGlowBox 1.8s ease-in-out 1;
    }

    .choice-box.click-highlight * {
        animation: none !important;
        transform: none !important;
        box-shadow: none !important;
    }

.chip-pulse {
    animation: chipPulse 1s ease-in-out 1 !important;
    transform-origin: center center !important;
}

@keyframes clickGlowBox {
    0% {
        opacity: 0;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-4px);
    }

    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

@keyframes chipPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0,123,255,0.15);
    }

    50% {
        transform: scale(1.12);
        box-shadow: 0 0 10px 6px rgba(0,123,255,0.16);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0,123,255,0);
    }
}


.choice-context-highlight {
    background-color: #fff3cd;
    border-radius: 6px;
    transition: background-color 0.12s ease;
}

/* Dark theme */
[data-bs-theme="dark"] .choice-context-highlight {
    background-color: rgba(255,243,205,0.08);
}
/* Force visible highlight on choice when menu is open (debugging-safe) */
.choice-box.choice-context-highlight {
    background-color: #fff3cd !important;
    border-radius: 6px;
    transition: background-color 0.12s ease;
}

    /* Make common inner elements transparent so parent color is visible */
    .choice-box.choice-context-highlight .editable,
    .choice-box.choice-context-highlight .editable-input,
    .choice-box.choice-context-highlight .rationale-textbox,
    .choice-box.choice-context-highlight textarea,
    .choice-box.choice-context-highlight input,
    .choice-box.choice-context-highlight .comment-text,
    .choice-box.choice-context-highlight .strategy-circles,
    .choice-box.choice-context-highlight .em-c-avatar {
        background-color: transparent !important;
    }

    /* Keep delete icon clickable but not hide the highlight */
    .choice-box.choice-context-highlight .choice-delete-icon {
        background: transparent !important;
    }

.debug-info {
    font-size: 10px;
    color: #666;
    margin-bottom: 2px;
}