/* ==============================================================================================================================
   [ WORKFLOW CANVAS ]
   ============================================================================================================================== */

.task-workflow {
    position: relative;
    background: rgb(4 4 4 / 82%);
    overflow: hidden;
    min-height: 600px;

    /* Remove the "frame" borders on the sides */
    border: none;
    box-shadow: none;
    border-radius: 0;

    transition: none;
}

.task-workflow:hover {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

#task-workflow-canvas {
    position: relative;
    left: 0;
    top: 0;
    width: 3000px;
    height: 2000px;

    /* Cards and connections should not be clipped by the canvas box */
    overflow: visible;
}

#task-workflow-links {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: auto;
    z-index: 1;

    /* Allow SVG content to render beyond its own box (prevents the "wall") */
    overflow: visible;
}

.workflow-dragging {
    opacity: 0.85;
    cursor: grabbing;
}

.task-board-card {
    z-index: 2;
}

.task-connection-handle {
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #1976d2;
    border-radius: 50%;
    cursor: crosshair;
    z-index: 5;
}

.task-connection-handle:hover {
    box-shadow: 0 0 0 4px rgb(25 118 210 / 20%);
}

.task-connection-handle.connection-active {
    background: #2e7d32;
    box-shadow: 0 0 0 4px rgb(46 125 50 / 25%);
}

.debug-connection-marker {
    pointer-events: none;
}

.task-connection-line {
    cursor: pointer;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==============================================================================================================================
   [ CONNECTION MODAL ]
   ============================================================================================================================== */

.fex-connection-modal {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 55%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.fex-connection-modal-box {
    width: 420px;
    max-width: calc(100% - 24px);
    background: #fff;
    border-radius: var(--radius-tiny);
    padding: 14px;
    box-shadow: 0 10px 30px rgb(0 0 0 / 25%);
}

.fex-connection-modal-title {
    font-weight: 700;
    margin-bottom: 12px;
}

.fex-connection-modal-field label {
    display: block;
    font-size: 13px;
    margin-bottom: 6px;
    color: #333;
}

.fex-connection-modal-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #dee2e6;
    border-radius: var(--radius-tiny);
    outline: none;
}

.fex-connection-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.fex-connection-modal-hint {
    margin-top: 10px;
    font-size: 12px;
    color: #6c757d;
}

/* ==============================================================================================================================
   [ CONNECTION UX ]
   ============================================================================================================================== */

.task-connection-line {
    transition: stroke-width 120ms ease, opacity 120ms ease;
}

.task-connection-line.is-hovered {
    stroke-width: 4 !important;
    opacity: 1;
    filter: drop-shadow(0 0 4px rgb(0 0 0 / 35%));
}

.task-board-card.connection-highlight {
    box-shadow: 0 0 0 3px rgb(255 255 255 / 22%), 0 10px 25px rgb(0 0 0 / 25%);
    z-index: 3;
}

/* ==============================================================================================================================
   [ CONNECTION PIVOT HANDLE ]
   ============================================================================================================================== */

.task-connection-pivot {
    cursor: grab;
}

.task-connection-pivot:active {
    cursor: grabbing;
}

.task-connection-pivot-circle {
    fill: #ffffff;
    stroke-width: 2;
}

.task-connection-pivot.is-hovered .task-connection-pivot-circle {
    filter: drop-shadow(0 0 4px rgb(0 0 0 / 35%));
}

/* ==============================================================================================================================
   [ WORLD ]
   ============================================================================================================================== */

#task-workflow-world {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(0px, 0px);
    will-change: transform;

    /* Ensure the SVG can visually exceed its own bounds inside the world */
    overflow: visible;

    transform-origin: 0 0;
}

.task-workflow.is-panning {
    cursor: grabbing;
}

.task-workflow.is-panning * {
    cursor: grabbing !important;
}

/* ==============================================================================================================================
   [ WORKFLOW HEADER | FEX STYLE ]
   ============================================================================================================================== */

.task-workflow-area {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;

    border-radius: 0;
    overflow: hidden;
}


.task-workflow-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    background: linear-gradient(
        135deg,
        var(--color-blue-primary),
        var(--color-blue-light)
    );

    color: #fff;
    font-weight: 600;
    font-size: 13px;

    padding: 10px 12px;

    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.25);
    letter-spacing: 0.3px;
}

/* Workflow header - left area (icon + title) */
.task-workflow-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* FEX standard icon style (same visual language as .section-title i) */
.task-workflow-header-left i {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--color-gray-light);
    color: var(--color-blue-primary);

    font-size: 18px;
    line-height: 1;
}

.task-workflow-header-left i::before {
    display: block;
    transform: translate(0px, 0px);
}

.task-workflow-header-left span {
    color: #fff;
    opacity: 0.98;
}

.task-workflow-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-workflow-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 28px;

    border-radius: var(--radius-tiny);
    border: 1px solid rgba(255,255,255,0.35);

    background: rgba(255,255,255,0.10);
    color: #fff;

    cursor: pointer;
    transition: all 0.18s ease;
}

.task-workflow-header-btn i {
    color: #fff;
    opacity: 0.95;
    font-size: 13px;
}

.task-workflow-header-btn:hover {
    background: rgba(255,255,255,0.20);
    border: 1px solid rgba(255,255,255,0.55);
    transform: translateY(-1px);
}

.task-workflow-header-btn:active {
    transform: translateY(0px);
}

/* ==============================================================================================================================
   [ WORKFLOW FULLSCREEN | FIX ]
   ============================================================================================================================== */

body.workflow-fullscreen {
    overflow: hidden !important;
}

/* Opcional (ajuda muito a não "cortar" por padding do app) */
body.workflow-fullscreen #app {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Esconde lista filtrada e o menu submodule no fullscreen */
body.workflow-fullscreen #menu-submodule,
body.workflow-fullscreen .task-board-filtered {
    display: none !important;
}

/* A área do workflow vira tela cheia */
body.workflow-fullscreen .task-workflow-area {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    /* Leave room for Modal overlays */
    z-index: 90000 !important;

    background: var(--color-gray-light);

    /* Transition always enabled; states are controlled by enter/exit/active classes */
    transition: opacity 200ms ease, transform 200ms ease;
    opacity: 1;
    transform: translateY(0px) scale(1);
}

/* Initial enter state (before becoming active) */
body.workflow-fullscreen .task-workflow-area.workflow-fullscreen-enter {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
}

/* Active state (entered) */
body.workflow-fullscreen .task-workflow-area.workflow-fullscreen-active {
    opacity: 1;
    transform: translateY(0px) scale(1);
}

/* Exit state (leaving) */
body.workflow-fullscreen .task-workflow-area.workflow-fullscreen-exit {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
}

/* O board ocupa o resto abaixo do header */
body.workflow-fullscreen .task-workflow {
    min-height: unset;
    height: calc(100vh - 48px - 8px);
}

/* Garante que não tem "limite" escondendo coisas */
body.workflow-fullscreen #task-workflow-world,
body.workflow-fullscreen #task-workflow-canvas,
body.workflow-fullscreen #task-workflow-links {
    max-height: none !important;
}

/* ==============================================================================================================================
   [ MODAL ALWAYS ABOVE FULLSCREEN ]
   ============================================================================================================================== */

/* Você pode ajustar os seletores para o nome real do seu Modal,
   mas a ideia é: qualquer overlay/modal tem que ficar acima do workflow fullscreen. */
body.workflow-fullscreen .modal,
body.workflow-fullscreen .modal-overlay,
body.workflow-fullscreen .modal-backdrop,
body.workflow-fullscreen .modal-container,
body.workflow-fullscreen .fex-modal,
body.workflow-fullscreen .fex-modal-overlay,
body.workflow-fullscreen .fex-modal-backdrop {
    z-index: 100000 !important;
}

/* Maximize state (board wrapper becomes fixed but DOES NOT break global layout) */
body.workflow-maximized {
    overflow: hidden;
}

/* Use a single wrapper for the workflow board */
.workflow-board-wrapper {
    position: relative;
    width: 100%;
    height: 100%;

    /* Animation base (works for BOTH directions) */
    transition: transform 160ms ease, opacity 160ms ease;
    transform: scale(1);
    opacity: 1;
}

/* Maximized layout */
body.workflow-maximized .workflow-board-wrapper {
    position: fixed;
    inset: 64px 0 0 64px; /* adjust if your topbar/sidebar sizes differ */
    z-index: 9000;
    background: #fff;
}

/* "Entering" animation (only for maximize) */
body.workflow-maximized.workflow-max-enter .workflow-board-wrapper {
    transform: scale(0.985);
    opacity: 0.2;
}

/* After enter tick, it animates to this */
body.workflow-maximized .workflow-board-wrapper {
    transform: scale(1);
    opacity: 1;
}

/* Guarantee dropdown above SVG lines, but below modal */
.workflow-board-wrapper .dropdown {
    position: relative;
    z-index: 9100;
}

/* Modal MUST be above the maximized board */
.modal-overlay,
.modal-backdrop,
.modal-container {
    z-index: 20000 !important;
}