/* CV Module Component Styles */

/* Appointment Cards */
.appointment-card {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-base);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-base);
    transition: all var(--transition-base);
}

.appointment-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-light);
}

.appointment-card.current {
    border-color: var(--primary-color);
    background: rgba(102, 126, 234, 0.05);
}

.appointment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.appointment-header h3 {
    margin: 0;
    color: var(--text-primary);
}

/* Education Cards */
.education-card {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-base);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-base);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.education-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-light);
}

/* School Color Themes */

/* Duke - Light Mode */
body[data-theme="light"] .education-card.duke {
    border: 3px solid #001A57 !important;
    background: var(--background-primary);
}

body[data-theme="light"] .education-card.duke .education-header h3 {
    color: #001A57 !important;
    font-weight: 700;
}

/* Duke - Dark Mode */
body[data-theme="dark"] .education-card.duke {
    border: 3px solid #001A57 !important;
    background: var(--background-primary);
}

body[data-theme="dark"] .education-card.duke .education-header h3 {
    color: #ffffff !important;
    font-weight: 700;
}

/* Michigan - Light Mode */
body[data-theme="light"] .education-card.michigan {
    border: 3px solid #FFCB05 !important;
    background: var(--background-primary);
}

body[data-theme="light"] .education-card.michigan .education-header h3 {
    color: #00274C !important;
    font-weight: 700;
}

/* Michigan - Dark Mode */
body[data-theme="dark"] .education-card.michigan {
    border: 3px solid #FFCB05 !important;
    background: var(--background-primary);
}

body[data-theme="dark"] .education-card.michigan .education-header h3 {
    color: #FFCB05 !important;
    font-weight: 700;
}

.education-card.wayne-state {
    border: 3px solid #00573F !important;
    background: var(--background-primary);
}

.education-card.wayne-state .education-header h3 {
    color: #00573F !important;
    font-weight: 700;
}

.education-card.udm {
    border: 3px solid #C8102E !important;
    background: var(--background-primary);
}

.education-card.udm .education-header h3 {
    color: #C8102E !important;
    font-weight: 700;
}

/* Fallback for when no theme is set (defaults to light mode) */
body:not([data-theme]) .education-card.duke {
    border: 3px solid #001A57 !important;
    background: var(--background-primary);
}

body:not([data-theme]) .education-card.duke .education-header h3 {
    color: #001A57 !important;
    font-weight: 700;
}

body:not([data-theme]) .education-card.michigan {
    border: 3px solid #FFCB05 !important;
    background: var(--background-primary);
}

body:not([data-theme]) .education-card.michigan .education-header h3 {
    color: #00274C !important;
    font-weight: 700;
}

/* Fallback duration badges for when no theme is set */
body:not([data-theme]) .education-card.duke .duration {
    background: #001A57 !important;
    color: white !important;
}

body:not([data-theme]) .education-card.michigan .duration {
    background: #00274C !important;
    color: #FFCB05 !important;
}

/* Fallback honor tags for when no theme is set */
body:not([data-theme]) .education-card.duke .honor-tag {
    background: #001A57 !important;
    color: white !important;
}

body:not([data-theme]) .education-card.michigan .honor-tag {
    background: #00274C !important;
    color: #FFCB05 !important;
}

/* School-specific honor tags */

/* Duke honor tags */
body[data-theme="light"] .education-card.duke .honor-tag {
    background: #001A57 !important;
    color: white !important;
}

body[data-theme="dark"] .education-card.duke .honor-tag {
    background: #4B9FE1 !important;
    color: white !important;
}

/* Michigan honor tags */
body[data-theme="light"] .education-card.michigan .honor-tag {
    background: #00274C !important;
    color: #FFCB05 !important;
}

body[data-theme="dark"] .education-card.michigan .honor-tag {
    background: #FFCB05 !important;
    color: #00274C !important;
}

.education-card.wayne-state .honor-tag {
    background: #00573F !important;
    color: #FFD700 !important;
}

.education-card.udm .honor-tag {
    background: #C8102E !important;
    color: white !important;
}

/* School-specific duration badges */

/* Duke duration badges */
body[data-theme="light"] .education-card.duke .duration {
    background: #001A57 !important;
    color: white !important;
}

body[data-theme="dark"] .education-card.duke .duration {
    background: #4B9FE1 !important;
    color: white !important;
}

/* Michigan duration badges */
body[data-theme="light"] .education-card.michigan .duration {
    background: #00274C !important;
    color: #FFCB05 !important;
}

body[data-theme="dark"] .education-card.michigan .duration {
    background: #FFCB05 !important;
    color: #00274C !important;
}

.education-card.wayne-state .duration {
    background: #00573F !important;
    color: #FFD700 !important;
}

.education-card.udm .duration {
    background: #C8102E !important;
    color: white !important;
}

.education-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.education-header h3 {
    margin: 0;
    color: var(--text-primary);
}

.degree {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.honors {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.honor-tag {
    background: var(--primary-color);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}

.duration {
    background: var(--text-secondary);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}

.current-badge {
    background: var(--primary-color);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.position {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.additional-roles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.role-tag {
    background: var(--background-secondary);
    color: var(--text-secondary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}

.role-tag.featured {
    background: var(--primary-color);
    color: white;
}

/* Publication Items */
.publication-item {
    display: flex;
    gap: var(--spacing-base);
    padding: var(--spacing-base);
    border-bottom: 1px solid var(--border-color);
    transition: background-color var(--transition-base);
}

.publication-item:hover {
    background: var(--background-secondary);
}

.publication-item.featured {
    background: rgba(102, 126, 234, 0.05);
    border-left: 3px solid var(--primary-color);
}

.publication-item.has-external-link .pub-content {
    flex: 1;
}

.publication-item .external-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-left: var(--spacing-base);
    color: var(--primary-color);
    text-decoration: none;
    font-size: 1.2rem;
    transition: all var(--transition-base);
    border-radius: var(--radius-base);
    background: rgba(102, 126, 234, 0.1);
    flex-shrink: 0;
}

.publication-item .external-link:hover {
    background: rgba(102, 126, 234, 0.2);
    transform: scale(1.1);
    color: var(--primary-dark);
}

.pub-year,
.service-year,
.award-year,
.membership-year,
.cert-year {
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
}

.pub-content h4 {
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--text-primary);
    line-height: 1.4;
}

.pub-authors {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
}

.pub-journal {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-style: italic;
    margin-bottom: var(--spacing-xs);
}

.pub-type {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}

.pub-type.first-author {
    background: #28a745;
}

/* Scrollable Container */
.scrollable-container {
    height: 600px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-base);
    padding: var(--spacing-base);
    background: var(--background-primary);
    margin-top: var(--spacing-base);
}

.scrollable-container::-webkit-scrollbar {
    width: 8px;
}

.scrollable-container::-webkit-scrollbar-track {
    background: var(--background-secondary);
    border-radius: var(--radius-sm);
}

.scrollable-container::-webkit-scrollbar-thumb {
    background: var(--text-secondary);
    border-radius: var(--radius-sm);
    opacity: 0.7;
}

.scrollable-container::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
    opacity: 1;
}

/* Tab Navigation */
.pub-tabs,
.category-tabs,
.media-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin: var(--spacing-base) 0;
    border-bottom: 1px solid var(--border-color);
}

.tab-btn {
    background: none;
    border: none;
    padding: var(--spacing-sm) var(--spacing-base);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    border-bottom: 2px solid transparent;
    font-family: var(--font-family);
}

.tab-btn:hover {
    color: var(--primary-color);
}

.tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Media Module Specific Spacing */
.media-categories .tab-content {
    margin-top: var(--spacing-lg);
}

.media-list,
.award-list,
.service-list,
.membership-list,
.cert-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base);
}

.media-item {
    padding: var(--spacing-base);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-base);
    transition: all var(--transition-base);
}

.media-item:hover {
    background: var(--background-secondary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-light);
}

.media-item h4 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    line-height: 1.4;
}

/* Only apply flexbox to media items with external links */
.media-item.has-external-link {
    display: flex;
    align-items: center;
}

.media-item.has-external-link .media-content {
    flex: 1;
}

.media-item .external-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-left: var(--spacing-base);
    color: var(--primary-color);
    text-decoration: none;
    font-size: 1.2rem;
    transition: all var(--transition-base);
    border-radius: var(--radius-base);
    background: rgba(102, 126, 234, 0.1);
    flex-shrink: 0;
}

.media-item .external-link:hover {
    background: rgba(102, 126, 234, 0.2);
    transform: scale(1.1);
    color: var(--primary-dark);
}

.media-platform {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: var(--spacing-xs) 0;
}

.media-date {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: var(--spacing-xs) 0 0 0;
}

/* Show All Button */
.show-all-btn {
    width: 100%;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-base);
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: all var(--transition-base);
    margin-top: var(--spacing-base);
    font-family: var(--font-family);
}

.show-all-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

/* Generic List Items */
.cert-item,
.award-item,
.membership-item,
.service-item,
.admin-service-item {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: var(--spacing-base);
    align-items: start;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color);
}

.cert-item:hover,
.award-item:hover,
.membership-item:hover,
.service-item:hover,
.admin-service-item:hover {
    background: var(--background-secondary);
}

.cert-item.current {
    border-left: 3px solid var(--primary-color);
    padding-left: var(--spacing-sm);
}

/* Service and Admin Service specific styling */
.service-role,
.cert-name,
.award-name,
.membership-name {
    color: var(--text-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    line-height: 1.4;
}

.service-hours {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-align: right;
    white-space: nowrap;
}

.cert-org,
.award-org,
.membership-detail {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-align: right;
    white-space: nowrap;
}

/* Expertise Cards */
.expertise-card {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-base);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-base);
    transition: all var(--transition-base);
}

.expertise-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-light);
}

.expertise-card.featured {
    border-color: var(--primary-color);
    background: rgba(102, 126, 234, 0.05);
}

.expertise-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-base);
}

.expertise-header h3 {
    margin: 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.expertise-badge {
    background: var(--text-secondary);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}

.expertise-badge.innovation {
    background: var(--primary-color);
    animation: pulse 2s infinite;
}

.expertise-badge.clinical {
    background: var(--text-secondary);
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-base);
}

.skill-tag {
    background: var(--background-secondary);
    color: var(--text-primary);
    padding: var(--spacing-xs) var(--spacing-base);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    transition: all var(--transition-base);
}

.skill-tag.primary {
    background: var(--primary-color);
    color: white;
}

.skill-tag.ai {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.skill-tag:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-light);
}

.ai-highlight {
    background: rgba(102, 126, 234, 0.1);
    border-left: 3px solid var(--primary-color);
    padding: var(--spacing-sm) var(--spacing-base);
    border-radius: var(--radius-base);
    margin-top: var(--spacing-sm);
}

.ai-highlight p {
    margin: 0;
    color: var(--text-primary);
    font-style: italic;
}

.ai-highlight i {
    color: var(--primary-color);
    margin-right: var(--spacing-xs);
}

/* Certification Cards */
.certification-card {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-base);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-base);
    transition: all var(--transition-base);
}

.certification-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-light);
}

.certification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-base);
}

.certification-header h3 {
    margin: 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.cert-badge {
    background: var(--text-secondary);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}

.cert-badge.specialty {
    background: var(--primary-color);
}

.cert-badge.license {
    background: #28a745;
}

.cert-badge.additional {
    background: var(--text-secondary);
}

/* Responsive Modules */
@media (max-width: 768px) {
    .appointment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .education-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .expertise-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .certification-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .publication-item {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    /* Keep external link buttons aligned to the right/top on mobile */
    .publication-item.has-external-link {
        flex-direction: row;
        align-items: flex-start;
    }
    .publication-item.has-external-link .pub-content {
        flex: 1;
    }
    .publication-item.has-external-link .external-link {
        margin-left: var(--spacing-base);
        align-self: flex-start;
    }

    /* Keep media external link buttons aligned on mobile */
    .media-item.has-external-link {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
    .media-item.has-external-link .media-content {
        flex: 1;
    }
    .media-item.has-external-link .external-link {
        margin-left: var(--spacing-base);
        align-self: flex-start;
    }
    
    .pub-year,
    .service-year,
    .award-year,
    .membership-year,
    .cert-year {
        white-space: normal;
    }
    
    .additional-roles {
        flex-direction: column;
    }
    
    .honors {
        flex-direction: column;
    }
    
    .skill-tags {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .cert-item,
    .award-item,
    .membership-item,
    .service-item,
    .admin-service-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .service-hours,
    .cert-org,
    .award-org,
    .membership-detail {
        text-align: left;
        white-space: normal;
    }
}

/* Fix Honors Module root display overriding .honors utility class */
.cv-module.honors-awards {
    display: inline-block;
    width: 100%;
}