/**
 * ==========================================================================
 * TEMPLATE FORMS STYLES
 * ==========================================================================
 * 
 * Shared styles for template pages (create, edit, select, etc.)
 * Core form styles are in components/forms.css
 * Moved from css/template-forms.css during 2026-02-05 reorganization.
 * 
 * @package Verimus
 * @since 2.0.0
 * ==========================================================================
 */

/* Page Titles */
.create-title,
.edit-title,
.select-title,
.page-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-8);
}

/* Form Containers */
.collection-form,
.task-form,
.edit-form {
    max-width: 650px;
}

#pd-selection-panel,
#template-fields-container,
#contract-fields-container {
    max-width: 650px;
}

/* Contract creation: all sections same width */
#contract-fields-container+.send-document-bottom,
#contract-fields-container #template-fields-container,
.content-body #contract-fields-container #create-document-form,
.contract-template-selection {
    max-width: 650px;
}

#template-fields-container #create-document-form,
#contract-fields-container form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--spacing-6, 24px);
}

@media (min-width: 768px) {
    #template-fields-container #create-document-form {
        grid-template-columns: repeat(2, 1fr);
    }

    #template-fields-container #create-document-form .form-group[data-field-type="textarea"],
    #template-fields-container #create-document-form .form-group[data-field-type="html"],
    #template-fields-container #create-document-form .form-actions {
        grid-column: 1 / -1;
    }
}

/* Contract creation: single column layout */
#contract-fields-container form,
#contract-fields-container #create-document-form {
    grid-template-columns: 1fr;
}

#template-fields-container .form-group,
#contract-fields-container .form-group {
    max-width: 100%;
}

/* Template page specific form controls */
.template-page .form-control {
    border: var(--input-border-width) solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    padding: var(--input-padding-y) var(--input-padding-x);
    font-size: var(--input-font-size);
    background-color: var(--input-bg);
    height: var(--input-height);
}

.template-page .form-control::placeholder {
    color: var(--input-placeholder-color);
}

/* Primary Save Button */
.save-btn {
    background-color: var(--color-primary);
    color: var(--white);
    padding: var(--spacing-3) var(--spacing-6);
    border-radius: var(--radius-md);
    border: none;
    font-weight: var(--font-weight-medium);
    transition: background-color var(--transition-base);
}

.save-btn:hover:not(:disabled) {
    background-color: var(--color-primary-dark);
    color: var(--white);
}

.save-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Cancel/Secondary Button */
.cancel-btn {
    background-color: transparent;
    color: var(--text-secondary);
    padding: var(--spacing-2) var(--spacing-6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.cancel-btn:hover {
    background-color: var(--gray-100);
}

/* Note: .form-actions is defined in components/forms.css */

/* Task Section */
.tasks-section {
    background-color: var(--gray-50);
    border-radius: var(--radius-md);
    padding: var(--spacing-6);
}

.tasks-section h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

#tasks-table {
    background-color: var(--white);
    border-radius: var(--radius-md);
}

/* Documents Selection */
.documents-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
}

.documents-filters {
    display: flex;
    gap: var(--spacing-4);
}

.search-container {
    width: 300px;
}

/* Category Tags */
.category-tag {
    background-color: var(--color-info-light);
    color: var(--color-info);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
}

/* DataTables Overrides */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-image: none !important;
}

.search-box {
    min-width: 250px;
}

/* Candidate Portal Specifics */
.candidate-portal {
    background: var(--gray-100);
    min-height: calc(100vh - 100px);
    padding: var(--spacing-10) 0;
}

.candidate-portal .contract-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(255, 128, 48, 0.15);
}

.candidate-portal .btn:hover {
    background: var(--color-primary-dark) !important;
}

.candidate-portal .sidebar-content {
    display: none !important;
}

/* Dark mode support */
.dark-mode .candidate-portal {
    background: var(--dark-bg-primary);
}

.dark-mode .candidate-portal .contract-item {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

.dark-mode .create-title,
.dark-mode .edit-title,
.dark-mode .select-title,
.dark-mode .page-title {
    color: var(--dark-text-primary);
}

.dark-mode .tasks-section {
    background-color: var(--dark-bg-secondary);
}

.dark-mode #tasks-table {
    background-color: var(--dark-bg-tertiary);
}