/* Horizontal Card Layout for Context Panel */

/* TM Matches Horizontal Cards */
.tm-matches-horizontal {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Increased gap between cards */
    padding: 0.5rem; /* More padding for container */
    overflow-x: visible; /* Allow horizontal overflow if needed */
}

.tm-match-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 0.2rem 0.2rem 0.2rem 0.65rem; /* Extra bottom padding to prevent text cutoff */
    transition: all 0.2s ease;
    /* Removed min-height to allow dynamic sizing */
    cursor: pointer;
    box-sizing: border-box;
    overflow: visible;
}

.tm-match-card:hover {
    background: #f8f9fa;
    border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0,123,255,0.1);
}

.tm-match-card.has-shortcut {
    position: relative;
}

/* Category-based border colors matching tm_pretranslate.css */
.tm-match-card.tm-category-context {
    border-left: 3px solid #0d6832;  /* Darker green than exact match */
}

.tm-match-card.tm-category-exact {
    border-left: 3px solid var(--bs-success, #28a745);  /* Green */
}

.tm-match-card.tm-category-fuzzy {
    border-left: 3px solid var(--bs-warning, #ffc107);  /* Orange */
}

.tm-match-card.tm-category-partial {
    border-left: 3px solid #16CAF0;  /* Cyan - user specified color */
}

.tm-match-card.tm-category-low {
    border-left: 3px solid #6c757d;  /* Gray for low matches */
}

/* Score Badge */
/* TM Header - NEW */
.tm-match-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.1rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #f0f0f0;
}

.score-badge {
    font-size: 0.8rem;  /* Reduced from 1rem (20% smaller) */
    font-weight: 700;
    padding: 0.2rem 0.4rem;  /* Smaller padding */
    border-radius: 0.25rem;
    min-width: 40px;  /* Slightly smaller */
    text-align: center;
}

/* Secondary text in partial match labels */
.match-type-secondary {
    font-size: 0.65rem;  /* 30% smaller than main text */
    font-weight: 400;
    opacity: 0.8;
}

/* Category-based score badge colors */
.score-badge.perfect-match-context {
    background: #0d6832;  /* Darker green for context matches */
    color: white;
    font-weight: bold;
}

.score-badge.perfect-match {
    background: var(--bs-success, #28a745);  /* Green for exact match */
    color: white;
}

.score-badge.partial-match {
    background: #16CAF0;  /* Cyan for partial match */
    color: white;
}

.score-badge.fuzzy-match {
    background: var(--bs-warning, #ffc107);  /* Orange for fuzzy match */
    color: #333;
}

.score-badge.high-match {
    background: #fd7e14;  /* Orange variant for high fuzzy */
    color: white;
}

.score-badge.good-match {
    background: #ff9800;  /* Orange variant for good fuzzy */
    color: white;
}

.score-badge.low-match {
    background: #6c757d;  /* Gray for low matches */
    color: white;
}

/* Removed duplicate match-type-label */

/* Match Content */
.tm-match-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    margin-bottom: 0.2rem; /* Extra space at bottom */
}

.match-text-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.match-label {
    font-size: 0.7rem;  /* Original size */
    font-weight: 600;
    color: #6c757d;
    min-width: 28px;
    flex-shrink: 0; /* Prevent label from shrinking */
    text-transform: uppercase;
}

.match-text {
    flex: 1;
    font-size: 0.85rem;  /* Original size for better readability */
    line-height: 1.5; /* Increased for better readability */
    word-wrap: break-word;
    word-break: keep-all; /* Better for Korean text */
    white-space: normal;
    /* Removed max-width constraint for full width usage */
    padding-right: 0.25rem; /* Small padding to prevent edge touching */
}

.match-text.source {
    color: #495057;
}

.match-text.target {
    color: #0066cc;
    font-weight: 500;
}

/* Apply Button */
.apply-match-btn {
    padding: 0.2rem 0.4rem;  /* Smaller padding to match badge */
    font-size: 0.7rem;  /* Smaller font size */
    font-weight: 500;
    border-radius: 0.25rem;
    background: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.apply-match-btn:hover {
    background: #0056b3;
    transform: translateY(-1px);
}

/* Shortcut Badge */
.shortcut-indicator {
    position: absolute;
    top: -8px;
    left: -8px;
    background: #007bff;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Termbase Wrapper */
.termbase-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Termbase Horizontal Cards */
.termbase-matches-horizontal {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.25rem;
    width: 100%;
}

.termbase-card {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    transition: all 0.2s ease;
    min-height: 48px;
    cursor: pointer;
    width: 100%;
}

.termbase-card:hover {
    background: #f0f8ff;
    border-color: #17a2b8;
    box-shadow: 0 2px 4px rgba(23,162,184,0.1);
}

.termbase-card.has-shortcut {
    position: relative;
}

/* Termbase Score */
.termbase-score {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    margin-right: 0.5rem;
}

.termbase-score-badge {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    background: #17a2b8;
    color: white;
}

/* Termbase Content */
.termbase-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.term-pair {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.term-text {
    font-size: 0.85rem;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
}

.term-source {
    color: #495057;
    font-weight: 500;
}

.term-arrow {
    color: #6c757d;
    font-size: 0.9rem;
}

.term-target {
    color: #17a2b8;
    font-weight: 600;
}

/* Term Details (shown on hover/click) */
.term-details {
    display: none;
    margin-left: 45px;
    padding: 0.5rem 0;
    font-size: 0.75rem;
    color: #6c757d;
}

.termbase-card.expanded .term-details {
    display: block;
}

.term-meta {
    display: flex;
    gap: 1rem;
    margin-top: 0.25rem;
}

.term-meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.term-meta-item i {
    font-size: 0.7rem;
}

/* Apply Term Button */
.apply-term-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    background: #17a2b8;
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.apply-term-btn:hover {
    background: #138496;
    transform: translateY(-1px);
}

/* Expand/Collapse Button */
.expand-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.25rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    color: #6c757d;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.expand-more-btn:hover {
    background: #e9ecef;
    color: #495057;
}

.expand-more-btn i {
    margin-right: 0.25rem;
}

/* Hidden items */
.match-hidden {
    display: none;
}

.match-hidden.show {
    display: flex;
}

/* No matches message */
.no-matches {
    padding: 1rem;
    text-align: center;
    color: #6c757d;
    font-size: 0.85rem;
    background: #f8f9fa;
    border-radius: 0.25rem;
}

/* Scrollbar styling removed - context panel itself handles scrolling */