:root {
    --sidebar-width: 240px;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: #F9FAFB;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
}

/* Stage card transitions */
.stage-card {
    transition: all 0.2s ease;
}
.stage-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Workflow connector line */
.workflow-node::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: calc(100% - 32px);
    height: 2px;
    background: #E5E7EB;
    transform: translateY(-50%);
    z-index: 0;
}
.workflow-node:last-child::after {
    display: none;
}
.workflow-node.completed::after {
    background: #10B981;
}
.workflow-node.current::after {
    background: linear-gradient(to right, #F47920 50%, #E5E7EB 50%);
}

/* Pulse for current stage */
@keyframes subtlePulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(244, 121, 32, 0.35);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(244, 121, 32, 0);
    }
}
.current-stage-pulse {
    animation: subtlePulse 2.5s infinite;
}

/* Read-only field styling */
.readonly-field {
    background-color: #F9FAFB;
    border: 1px dashed #D1D5DB;
    cursor: not-allowed;
    user-select: none;
    position: relative;
}
.readonly-field::after {
    content: 'Read Only';
    position: absolute;
    top: -10px;
    right: 12px;
    font-size: 10px;
    font-weight: 600;
    color: #9CA3AF;
    background: #F9FAFB;
    padding: 0 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Mobile sidebar overlay */
.sidebar-overlay {
    display: none;
}
@media (max-width: 768px) {
    .sidebar-overlay.active {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 40;
    }
    .sidebar {
        transform: translateX(-100%);
        position: fixed;
        z-index: 50;
        height: 100vh;
        transition: transform 0.25s ease;
    }
    .sidebar.open {
        transform: translateX(0);
    }
}

/* Phase type card selection */
input[type="radio"][name="phaseType"]:checked + .phase-type-card {
    border-color: #F47920 !important;
    background-color: #FFF7F0 !important;
    box-shadow: 0 0 0 1px #F47920;
}

input[type="radio"][name="phaseType"]:checked + .phase-type-card .w-10 {
    background-color: #F47920 !important;
}

input[type="radio"][name="phaseType"]:checked + .phase-type-card .text-gray-700 {
    color: #C2410C !important;
}

input[type="radio"][name="phaseType"]:checked + .phase-type-card .text-gray-400 {
    color: #F47920 !important;
}

input[type="radio"][name="phaseType"]:checked + .phase-type-card .text-brand-700 {
    color: #C2410C !important;
}

input[type="radio"][name="phaseType"]:checked + .phase-type-card .text-brand-500 {
    color: #F47920 !important;
}

/* Drag handle for phase reordering */
.drag-handle {
    cursor: grab;
    color: #9CA3AF;
    transition: color 0.15s ease;
}
.drag-handle:hover {
    color: #6B7280;
}
.drag-handle:active {
    cursor: grabbing;
}
.phase-row {
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.phase-row.dragging {
    opacity: 0.4;
    transform: scale(0.98);
}
.phase-row.drag-over {
    border-top: 2px solid #89481a;
}