/**
 * Stylesheet cho công cụ So Sánh & Merge Văn Bản (Text Compare & Merge Tool)
 */

.hihi-compare-container {
    --primary-indigo: #4f46e5;
    --primary-indigo-hover: #4338ca;
    --emerald-600: #059669;
    --rose-600: #e11d48;
}

/* Animations */
.animate-fadeIn {
    animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* Giao diện code (Dark Editor Theme) */
#diff-view-a,
#diff-view-b {
    background-color: #090d16; /* Slate 950 tối hơn */
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px !important;
    line-height: 22px; /* Chiều cao cố định của từng dòng */
}

/* Căn chỉnh các dòng diff */
.diff-line {
    display: flex;
    height: 22px; /* Khớp với line-height */
    line-height: 22px;
    white-space: pre; /* Bắt buộc không ngắt dòng để so sánh song song chính xác */
    padding: 0 10px;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}

/* Số thứ tự dòng (Line numbers) */
.diff-line-number {
    width: 45px;
    text-align: right;
    padding-right: 12px;
    color: #475569; /* Slate 600 */
    user-select: none;
    border-right: 1px solid #1e293b;
    margin-right: 10px;
    font-weight: bold;
    flex-shrink: 0;
}

/* Nội dung dòng */
.diff-line-content {
    flex-1: 1;
    overflow-x: auto;
    scrollbar-width: none; /* Ẩn scrollbar ngang dòng lẻ cho gọn */
}
.diff-line-content::-webkit-scrollbar {
    display: none;
}

/* Highlighting trạng thái dòng */
.diff-line.removed {
    background-color: rgba(225, 29, 72, 0.15) !important; /* Rose-600 15% */
}
.diff-line.removed .diff-line-content {
    color: #f43f5e; /* Rose 500 */
}
.diff-line.removed .diff-line-number {
    color: #f43f5e;
    opacity: 0.6;
}

.diff-line.added {
    background-color: rgba(16, 185, 129, 0.15) !important; /* Emerald-500 15% */
}
.diff-line.added .diff-line-content {
    color: #10b981; /* Emerald 500 */
}
.diff-line.added .diff-line-number {
    color: #10b981;
    opacity: 0.6;
}

/* Dòng trống giữ chỗ (Spacer) */
.diff-line.spacer {
    background-color: #030712 !important; /* Đen tuyền */
    background-image: repeating-linear-gradient(45deg, #090d16, #090d16 10px, #0f172a 10px, #0f172a 20px);
    opacity: 0.4;
}
.diff-line.spacer .diff-line-content {
    color: #334155;
    user-select: none;
}

/* Gutter Merge ở giữa */
#diff-gutter {
    background-color: #0f172a;
}

/* Hàng chứa nút merge */
.gutter-row {
    height: 22px; /* Khớp chính xác với dòng code */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid transparent;
}

/* Nút merge (Mũi tên) */
.btn-merge-action {
    background: var(--primary-indigo) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    width: 16px;
    height: 16px;
    font-size: 8px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    padding: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-merge-action:hover {
    background: var(--primary-indigo-hover) !important;
    transform: scale(1.2);
}

.btn-merge-action.merged {
    background: var(--emerald-600) !important;
    opacity: 0.5;
    cursor: default;
    transform: none;
}

/* Custom Scrollbar cho Editor */
.scrollbar-custom::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scrollbar-custom::-webkit-scrollbar-track {
    background: #090d16;
}

.scrollbar-custom::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 4px;
}

.scrollbar-custom::-webkit-scrollbar-thumb:hover {
    background: #334155;
}