/* workflow-template.css */
/* Workflow template selector styles */

/* ================================================
   Workflow Template Selector Styles
   ================================================ */

/* Activity Name + Workflow Template row */
.activity-name-template-row {
    display: flex;
    gap: var(--space-4);
    align-items: flex-end;
}

.activity-name-template-row > .form-group {
    margin-bottom: 0;
}

.activity-name-template-row > .form-group:first-child {
    flex: 1;
}

.activity-name-template-row .workflow-template-selector {
    flex: 0 0 75%; /* 3/4 of modal width */
    display: none; /* Hidden by default, shown in Edit mode via JS */
    margin-bottom: var(--space-4); /* Standard spacing below selector */
    padding-bottom: 0;
    border-bottom: none;
}

.workflow-template-selector .form-group {
    margin-bottom: 0;
}

.workflow-template-selector select {
    width: 100%;
}

/* Modified template indicator */
.workflow-template-selector select.template-modified {
    color: var(--text-tertiary);
    font-style: italic;
}

.workflow-template-selector select.template-modified option {
    color: var(--text-primary);
    font-style: normal;
}

/* Create Template Modal - must appear above Edit Activity modal */
#create-template-modal {
    z-index: 2200 !important;
}

#create-template-modal .modal-container {
    max-width: 450px;
}

#create-template-modal .checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

#create-template-modal .checkbox-label input[type='checkbox'] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

#create-template-modal .hint-text {
    margin-top: var(--space-1);
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.4;
}

/* Dropdown menu button for create/delete template */
#create-template-btn,
#delete-template-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    text-align: left;
}

#create-template-btn:hover,
#delete-template-btn:hover {
    background-color: var(--bg-hover);
}

#create-template-btn .material-icons,
#delete-template-btn .material-icons {
    font-size: 18px;
    color: var(--text-secondary);
}

#delete-template-btn .material-icons {
    color: var(--danger);
}

#delete-template-btn span {
    color: var(--danger);
}