/* MSE Dashboard - Template Management Styles */
/* Replaces html.Style() functionality with external CSS */

.template-management-page {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    padding: 20px 0;
}

.border-dashed {
    border-style: dashed !important;
    border-width: 2px !important;
}

.stats-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

.enhanced-tabs .nav-link {
    transition: all 0.3s ease;
}

.enhanced-tabs .nav-link:hover {
    background-color: #f8f9fa;
    transform: translateY(-1px);
}

.template-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.template-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

/* WBS Editor Styles */
.wbs-item-enhanced {
    transition: all 0.2s ease;
    border-width: 2px !important;
}

.wbs-item-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

.drag-handle:hover {
    color: #007bff !important;
    cursor: grab !important;
}

.action-btn {
    transition: all 0.2s ease;
}

.action-btn:hover {
    transform: scale(1.1);
}

/* WBS scroll container for Step 2 editor */
#template-wbs-hierarchy-display {
    max-height: 900px; /* phù hợp chiều cao viewport thẻ card bên phải */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px; /* tránh che nội dung bởi scrollbar */
}

/* Nâng cao UX: thanh cuộn mượt và mảnh trên WebKit */
#template-wbs-hierarchy-display::-webkit-scrollbar {
    width: 8px;
}
#template-wbs-hierarchy-display::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.15);
    border-radius: 8px;
}
#template-wbs-hierarchy-display::-webkit-scrollbar-track {
    background: transparent;
}

/* Delete button specific styles */
.btn-danger.btn-sm {
    transition: all 0.2s ease;
}

.btn-danger.btn-sm:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

/* Fix for missing styles */
.template-management-error {
    padding: 2rem;
}