/**
 * ui-helpers.css - Common UI Helper Styles
 * Consistent styling for reusable UI components
 */

/* ========================================
   Score Badges (RT & IMDB)
   ======================================== */

/* Base score badge - Regular size */
.score-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
}

.score-badge i {
    margin-right: 2px;
}

/* Small size variant - no labels, compact */
.score-badge.score-badge-sm {
    font-size: 0.65rem;
    padding: 1px 4px;
    border-radius: 2px;
}

/* Mobile size variant - larger than small for touch targets */
.score-badge.score-badge-mobile {
    font-size: 0.85rem;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Rotten Tomatoes - Fresh (60%+) */
.rt-fresh {
    background-color: #fa320a;
    color: white;
}

/* Rotten Tomatoes - Rotten (<60%) */
.rt-rotten {
    background-color: #0ac855;
    color: white;
}

/* IMDB score */
.imdb-score {
    background-color: #f5c518;
    color: #000;
}

/* IMDB label styling */
.imdb-label {
    font-weight: 700;
    margin-right: 3px;
}

/* TMDB score */
.tmdb-score {
    background-color: #01b4e4;
    color: #fff;
}

.tmdb-label {
    font-weight: 700;
    margin-right: 3px;
}

/* Personal score (star rating) */
.personal-score {
    background-color: #6f42c1;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.personal-score i {
    color: #ffc107;
}

/* Clickable personal score */
.personal-score.personal-score-clickable {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.personal-score.personal-score-clickable:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Empty personal score (unrated) - slightly muted */
.personal-score.personal-score-empty {
    background-color: #8b7bb3;
    opacity: 0.85;
}

.personal-score.personal-score-empty:hover {
    opacity: 1;
    background-color: #6f42c1;
}

/* eMe score badges */
.eme-score {
    background-color: #0d6efd;
    color: #fff;
}

.eme-pop {
    background-color: #198754;
    color: #fff;
}

/* ========================================
   Toast Notifications - Global Styles
   ======================================== */

/* Desktop: compact toasts */
.toast-compact {
    font-size: 0.85rem;
    min-width: auto;
    max-width: 280px;
}

.toast-compact .toast-body {
    padding: 0.5rem 0.75rem;
}

.toast-compact .btn-close {
    padding: 0.5rem;
}

/* Mobile pill indicators (success/info on small screens) */
.toast-pill-container {
    position: fixed;
    bottom: 12px;
    left: 12px;
    display: flex;
    flex-direction: row;
    gap: 6px;
    z-index: 1090;
    pointer-events: none;
}

.toast-pill {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.9rem;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.25s ease, transform 0.25s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
}

.toast-pill-success {
    background-color: #198754;
}

.toast-pill-info {
    background-color: #0d6efd;
}

.toast-pill-show {
    opacity: 1;
    transform: scale(1);
}

.toast-pill-hide {
    opacity: 0;
    transform: scale(0.5);
}

/* Mobile error/warning toasts: full-width centered at bottom */
@media (max-width: 575.98px) {
    .toast-container {
        width: calc(100% - 1rem);
        max-width: none;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        padding: 0.5rem !important;
    }

    .toast-container .toast-compact {
        max-width: 100%;
        font-size: 0.8rem;
    }

    .toast-container .toast-compact .toast-body {
        padding: 0.4rem 0.6rem;
    }
}

/* ========================================
   Detail Modal Activity Items
   (Board Games, Books detail modals)
   ======================================== */

.detail-activity-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid #eee;
}

.detail-activity-item:last-child {
    border-bottom: none;
}

.detail-activity-info {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
}

.detail-activity-info strong {
    font-weight: 500;
}

@media (max-width: 576px) {
    .detail-activity-info {
        font-size: 0.8rem;
    }
}

/* ========================================
   .back-btn - Circular Back Button
   Usage: <button class="btn btn-sm btn-outline-secondary back-btn">
              <i class="bi bi-arrow-left"></i>
          </button>
   ======================================== */
.back-btn {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   .em-tabs - Clean Underline Tab Style
   Usage: <ul class="nav nav-tabs em-tabs">
   Reusable across the app for category tabs.
   ======================================== */

.em-tabs {
    border-bottom: 2px solid var(--mv-border-color);
    margin-bottom: 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.em-tabs::-webkit-scrollbar {
    display: none;
}

.em-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: #6c757d;
    font-weight: 500;
    padding: 0.5rem 1rem;
    white-space: nowrap;
    transition: all 0.2s;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 1rem;
}

.em-tabs .nav-link:hover {
    border-bottom-color: var(--mv-border-color);
    color: #495057;
    background: transparent;
}

.em-tabs .nav-link.active {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
    font-weight: 600;
    background: transparent;
}

.em-tabs .nav-link i {
    margin-right: 6px;
}

.em-tabs .badge {
    font-size: 0.65em;
    padding: 0.25em 0.45em;
}

@media (max-width: 767.98px) {
    .em-tabs .nav-link {
        padding: 8px 10px;
        font-size: 0.9rem;
    }

    .em-tabs .nav-link i {
        margin-right: 4px;
    }
}

/* ========================================
   DARK MODE OVERRIDES
   ======================================== */

[data-bs-theme="dark"] .detail-activity-item {
    border-bottom-color: var(--mv-border-color);
}
[data-bs-theme="dark"] .em-tabs {
    border-bottom-color: var(--mv-border-color);
}
[data-bs-theme="dark"] .em-tabs .nav-link {
    color: var(--mv-text-muted);
}
[data-bs-theme="dark"] .em-tabs .nav-link:hover {
    border-bottom-color: var(--mv-border-color);
    color: var(--mv-text-secondary);
}
[data-bs-theme="dark"] .em-tabs .nav-link.active {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
}

/* ===== User Card Link (clickable user name) ===== */
.user-card-link {
    color: #0d6efd;
    text-decoration: none;
    cursor: pointer;
}
.user-card-link:hover {
    text-decoration: underline;
}
[data-bs-theme="dark"] .user-card-link {
    color: var(--mv-text-link, #6ea8fe);
}
/* Inside a colored badge, inherit the badge's text color so the link
   stays readable on any badge background. Underline keeps it clearly
   clickable. Works in both light and dark mode. */
.badge .user-card-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* ===== Force black text on light-bg badges in dark mode =====
   Bootstrap 5.3 .bg-info / .bg-warning render with LIGHT backgrounds
   in both themes, but darkMode.css remaps .text-dark to a light color
   (theme-adaptive). That makes "light bg + .text-dark" unreadable in
   dark mode. Force real black text on these light-bg badges. */
[data-bs-theme="dark"] .badge.bg-warning.text-dark,
[data-bs-theme="dark"] .badge.bg-info.text-dark,
[data-bs-theme="dark"] .badge.bg-info {
    color: #000 !important;
}
/* Links inside light-bg badges must also be black, beating the
   global [data-bs-theme="dark"] .user-card-link rule above. */
[data-bs-theme="dark"] .badge.bg-info .user-card-link,
[data-bs-theme="dark"] .badge.bg-warning .user-card-link {
    color: #000 !important;
}