/**
 * Teamim Page Styles
 * Version: 1.0.0
 *
 * Styles specific to the Teamim Search page (teamim/index.html)
 *
 * Dependencies: tanach-common.css
 */

/* ===================================================================
   Results Table Links
   =================================================================== */
#resultsTable a {
    color: var(--accent-color, #0d6efd);
    text-decoration: none;
    transition: color var(--transition-fast, 0.2s ease);
}

#resultsTable a:hover {
    color: var(--accent-hover, #0a58ca);
    text-decoration: underline;
}

#resultsTable a:visited {
    color: #6610f2;
}

:root[data-theme="dark"] #resultsTable a {
    color: #6ea8fe;
}

:root[data-theme="dark"] #resultsTable a:hover {
    color: #9ec5fe;
}

:root[data-theme="dark"] #resultsTable a:visited {
    color: #a370f7;
}

/* ===================================================================
   Trope Selection Grid
   =================================================================== */
.trope-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm, 8px);
    justify-content: center;
}

.trope-btn {
    min-width: 80px;
    padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
    border: 2px solid var(--border-color, #dee2e6);
    border-radius: var(--border-radius-md, 8px);
    background: var(--base-bg, #fff);
    cursor: pointer;
    transition: all var(--transition-fast, 0.2s ease);
    text-align: center;
}

.trope-btn:hover {
    border-color: var(--accent-color, #0d6efd);
    background: var(--secondary-bg, #f8f9fa);
}

.trope-btn.selected {
    border-color: var(--success-color, #198754);
    background: #d1e7dd;
}

.trope-btn .trope-char {
    font-family: var(--font-family-hebrew, "SBL Hebrew", serif);
    font-size: var(--font-size-2xl, 1.5rem);
    display: block;
}

.trope-btn .trope-name {
    font-size: var(--font-size-sm, 0.75rem);
    color: var(--muted-color, #666);
    margin-top: 2px;
}

/* Dark Theme - Trope Buttons */
:root[data-theme="dark"] .trope-btn {
    background: var(--secondary-bg, #343a40);
    border-color: var(--border-color, #495057);
    color: var(--base-text, #f8f9fa);
}

:root[data-theme="dark"] .trope-btn:hover {
    border-color: #0dcaf0;
    background: var(--tertiary-bg, #495057);
}

:root[data-theme="dark"] .trope-btn.selected {
    border-color: #20c997;
    background: #1a4d3e;
}

:root[data-theme="dark"] .trope-btn .trope-name {
    color: var(--muted-color, #adb5bd);
}

/* ===================================================================
   Selected Tropes Display
   =================================================================== */
.selected-tropes {
    font-family: var(--font-family-hebrew, "SBL Hebrew", serif);
    font-size: var(--font-size-2xl, 1.5rem);
    min-height: 40px;
    padding: var(--spacing-md, 10px);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--border-radius-md, 8px);
    background: var(--secondary-bg, #f8f9fa);
}

:root[data-theme="dark"] .selected-tropes {
    background: var(--secondary-bg, #343a40);
    border-color: var(--border-color, #495057);
}

/* ===================================================================
   Position Filter Buttons
   =================================================================== */
.position-filter .btn-check:checked + .btn-outline-primary {
    background-color: var(--accent-color, #0d6efd);
    color: white;
}

/* Note: Dark mode SVG support is in tool-page.css */