/* Common Components Styles */

/* Transcript Display Container */
.transcript-display {
    min-height: 40px;
    display: block;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #6c757d;
    font-size: 0.875rem;
    padding: 0.5rem;
    margin-top: 1rem;
    border-radius: 0.25rem;
}

/* SVG Icons and Containers */
.cassette-svg-container {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.cassette-svg-container svg {
    vertical-align: middle;
}

/* Tab Navigation */
.main-tabs {
    margin-bottom: 1.5rem;
}

.main-tabs .nav-tabs {
    border-bottom: 2px solid #e0d7b8;
    margin-bottom: 1.5rem;
}

.main-tabs .nav-link {
    color: #6c757d;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border: none;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    position: relative;
}

.main-tabs .nav-link:hover,
.main-tabs .nav-link:focus {
    color: #2c3e50;
    background-color: rgba(0, 0, 0, 0.03);
    border-color: transparent;
}

.main-tabs .nav-link.active,
.main-tabs .nav-item.show .nav-link {
    color: #2c3e50;
    font-weight: 600;
    background-color: transparent;
    border-color: #2c3e50;
}

/* Tab Content */
.tab-content {
    padding: 1.5rem 0;
}

/* Media List */
.media-list {
    margin-bottom: 1.5rem;
}

/* Form Controls */
.url-input-group {
    margin-bottom: 1.5rem;
}

.url-input-group .form-control {
    border-right: none;
}

.url-input-group .btn {
    border-left: none;
}

/* Status Messages */
.status-message {
    padding: 1rem;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
}

.status-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Loading Indicator */
.loading-indicator {
    display: none;
    text-align: center;
    padding: 1rem;
}

.loading-indicator.active {
    display: block;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* Transcript Page Specific */
.transcript-page .tab-content {
    padding: 1rem 0;
}

.transcript-page .nav-tabs {
    border-bottom: 2px solid #e0d7b8;
    margin-bottom: 1.5rem;
}

.transcript-page .nav-link {
    color: #6c757d;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border: none;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    position: relative;
}

.transcript-page .nav-link:hover,
.transcript-page .nav-link:focus {
    color: #2c3e50;
    background-color: rgba(0, 0, 0, 0.03);
    border-color: transparent;
}

.transcript-page .nav-link.active,
.transcript-page .nav-item.show .nav-link {
    color: #2c3e50;
    font-weight: 600;
    background-color: transparent;
    border-color: #2c3e50;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .main-tabs .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .transcript-display {
        font-size: 0.8125rem;
    }
}