/* VoiceCap Brand Styles */

:root {
    --primary-gradient: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    --primary-color: #fbbf24;
    --secondary-color: #f59e0b;
    --accent-color: #f8fafc;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --grey-light: #f8fafc;
    --grey-medium: #cbd5e1;
    --grey-dark: #334155;
    --purple-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --purple-gradient-hover: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
}

/* Purple Gradient Button Styling */
.btn-purple-gradient {
    background: var(--purple-gradient) !important;
    border: none !important;
    color: white !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

.btn-purple-gradient:hover,
.btn-purple-gradient:focus {
    background: var(--purple-gradient-hover) !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.btn-purple-gradient:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

/* Clean text styling */
.text-muted, 
.small,
summary,
details summary,
.form-text,
p.small,
small.text-muted {
    color: #6b7280 !important;
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-weight: 500 !important;
}

/* Enhanced subheading styling */
.card-header .text-muted.fs-6.fw-light {
    font-size: 0.95rem !important;
    letter-spacing: 0.5px !important;
    color: #000000 !important;
    font-weight: 500 !important;
    margin-top: 4px !important;
}

/* Specific override for details/summary elements */
details {
    background-color: white !important;
    padding: 8px !important;
    border-radius: 8px !important;
    border: 1px solid #ccc !important;
}

details summary {
    color: #000 !important;
    font-weight: bold !important;
    background-color: #f8f9fa !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
}

/* Clean small text styling */
.card-body small,
.border small,
.mt-2 small {
    color: #6b7280 !important;
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: inline !important;
    font-weight: 500 !important;
}

/* Premium Card Styling */
.conversation-card {
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
    transition: all 0.2s ease-in-out !important;
    background: #ffffff !important;
}

.conversation-card:hover {
    border-color: #d1d5db !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-1px) !important;
}

.conversation-card .card-body {
    padding: 1.5rem !important;
    height: 320px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Mobile override for conversation card height */
@media (max-width: 768px) {
    .conversation-card .card-body {
        height: auto !important;
        min-height: 240px !important;
        padding: 1rem !important;
    }
}

@media (max-width: 375px) {
    .conversation-card .card-body {
        height: auto !important;
        min-height: 200px !important;
        padding: 0.75rem !important;
    }
}

.conversation-card .crm-preview {
    flex: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.conversation-card .crm-preview h6 {
    flex-shrink: 0 !important;
    margin-bottom: 0.75rem !important;
}

.conversation-card .crm-preview-content {
    flex: 1 !important;
    overflow: hidden !important;
    position: relative !important;
}

.conversation-card .crm-preview-content::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 20px !important;
    background: linear-gradient(transparent, white) !important;
    pointer-events: none !important;
}

.conversation-card .card-footer {
    border-top: 1px solid #f3f4f6 !important;
    background-color: #f9fafb !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0 0 12px 12px !important;
}

.conversation-card .card-title {
    color: #111827 !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    line-height: 1.5 !important;
}

.conversation-card .badge {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: 6px !important;
}

.conversation-card .text-start {
    text-align: left !important;
    display: block !important;
}

.conversation-card .text-start .badge {
    display: inline-block !important;
    text-align: left !important;
    margin: 0 !important;
}

/* Force left alignment for objective badges */
.conversation-card .mb-3.text-start {
    text-align: left !important;
    justify-content: flex-start !important;
}

.conversation-card .badge.bg-warning {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}

/* Header badge styling */
.badge.bg-warning {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}

.conversation-card .crm-preview p {
    color: #374151 !important;
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    line-height: 1.5 !important;
    margin-bottom: 0.5rem !important;
}

.conversation-card .text-secondary {
    color: #6b7280 !important;
    background-color: transparent !important;
    padding: 0 !important;
}

.conversation-card .card-footer small {
    color: #9ca3af !important;
    background-color: transparent !important;
    padding: 0 !important;
    font-size: 0.875rem !important;
}

/* Enhanced dropdown styling */
.conversation-card .dropdown-toggle {
    border: 1px solid #e5e7eb !important;
    background-color: #ffffff !important;
    color: #6b7280 !important;
}

.conversation-card .dropdown-toggle:hover {
    background-color: #f9fafb !important;
    border-color: #d1d5db !important;
}

.conversation-card .dropdown-menu {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    padding: 0.5rem 0 !important;
}

.conversation-card .dropdown-item {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    transition: background-color 0.15s ease-in-out !important;
}

.conversation-card .dropdown-item:hover {
    background-color: #f9fafb !important;
}

/* Badge styling improvements - HavaChat brand colors */
.conversation-card .badge.bg-gradient {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    border: none !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: 6px !important;
    text-align: left !important;
    display: inline-block !important;
    width: auto !important;
}

/* Time stamp styling */
.conversation-card .text-secondary {
    font-size: 0.75rem !important;
    letter-spacing: 0.025em !important;
}

/* Card spacing improvements */
.conversation-card .crm-preview p {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    color: #4b5563 !important;
}

/* Modal content visibility fixes */
.modal-content {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.modal-header {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-bottom: 1px solid #dee2e6 !important;
}

.modal-header .btn-close {
    background-color: #000000 !important;
    opacity: 1 !important;
}

.modal-body,
.modal-body * {
    color: #000000 !important;
    background-color: transparent !important;
}

.modal-body h6,
.modal-body p,
.modal-body strong,
.modal-body .nav-link,
.modal-body .tab-pane {
    color: #000000 !important;
}

.modal-body .nav-tabs .nav-link {
    color: #000000 !important;
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
}

.modal-body .nav-tabs .nav-link.active {
    color: #000000 !important;
    background-color: #ffffff !important;
    border-bottom-color: #ffffff !important;
}

.modal-body .tab-content {
    background-color: #ffffff !important;
    color: #000000 !important;
    padding: 20px !important;
    border: 1px solid #dee2e6 !important;
}

.modal-body pre {
    background-color: #f8f9fa !important;
    color: #000000 !important;
    border: 1px solid #dee2e6 !important;
    padding: 15px !important;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--grey-light);
    color: var(--text-primary);
}

/* Pre elements for transcript and summary */
pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: var(--bs-font-monospace);
    margin-bottom: 0;
    padding: 1rem;
    border-radius: 0.25rem;
    background-color: white;
    color: var(--grey-dark);
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--grey-medium);
}

/* Recording animation */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.spinner-grow {
    animation: pulse 1.5s infinite;
    background-color: var(--teal-primary) !important;
}

.spinner-border {
    color: var(--teal-primary) !important;
}

/* Card styling */
.card {
    margin-bottom: 1.5rem;
    transition: all 0.2s ease-in-out;
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    background-color: white;
}

.card-header {
    font-weight: 600;
    background: var(--primary-gradient);
    color: white;
    border-bottom: none;
    border-radius: 16px 16px 0 0 !important;
    padding: 1.5rem 1.25rem;
}

.card-body {
    background-color: white;
    color: var(--grey-dark);
}

/* Highlight card for drag and drop */
.card-body.highlight {
    border: 2px dashed var(--primary-color);
    background-color: rgba(79, 70, 229, 0.05);
    border-radius: 0.375rem;
}

#dropZone {
    transition: all 0.3s ease;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.05) 0%, rgba(245, 158, 11, 0.05) 100%);
    border: 2px dashed rgba(251, 191, 36, 0.3);
    border-radius: 12px;
}

#dropZone.drag-over {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-color: var(--primary-color);
    transform: scale(1.02);
}

/* Button styling */
.btn-primary {
    background: var(--primary-gradient);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #e7b008 0%, #d97706 100%);
    transform: translateY(-1px);
    box-shadow: 0 10px 25px -5px rgba(251, 191, 36, 0.4);
}

.btn-danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border: none;
    border-radius: 10px;
    font-weight: 600;
}

.btn-success {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    border: none;
    border-radius: 10px;
    font-weight: 600;
}

.btn-outline-secondary {
    border-color: rgba(79, 70, 229, 0.3);
    color: var(--primary-color);
    border-radius: 10px;
    font-weight: 500;
}

.btn-outline-secondary:hover {
    background: var(--primary-gradient);
    border-color: var(--primary-color);
    color: white;
}

/* Alert styling */
.alert {
    border: none;
    border-radius: 12px;
    border-left: 4px solid var(--primary-color);
}

.alert-info {
    background-color: rgba(251, 191, 36, 0.1);
    border-left-color: var(--primary-color);
    color: var(--text-primary);
}

.alert-primary {
    background-color: rgba(245, 158, 11, 0.1);
    border-left-color: var(--secondary-color);
    color: var(--text-primary);
}

.alert-warning {
    background-color: #fff3cd;
    border-color: #ffecb5;
    color: #664d03;
}

.bg-success {
    background-color: var(--teal-primary) !important;
}

.bg-danger {
    background-color: #dc3545 !important;
}

.bg-info {
    background-color: var(--teal-light) !important;
}

.badge.bg-info {
    background-color: var(--teal-light) !important;
}

/* Audio player styling */
audio {
    width: 100%;
    margin: 0.5rem 0;
    border-radius: 0.25rem;
    background-color: var(--grey-light);
}

/* Button hover effects */
.btn {
    transition: all 0.2s ease-in-out;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* File input styling */
.form-control[type="file"]:not(:disabled):not([readonly]) {
    cursor: pointer;
    background-color: white;
    color: #1f2937 !important;
}

.form-control[type="file"]::file-selector-button {
    color: white !important;
    background-color: #1f2937 !important;
    border-color: #1f2937 !important;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
}

.form-control[type="file"]:hover::file-selector-button {
    background-color: #6b7280 !important;
    border-color: #6b7280 !important;
}

/* Specific styling for iOS workaround file input */
#audioFileIOS::file-selector-button {
    color: white !important;
    background-color: #1f2937 !important;
    border-color: #1f2937 !important;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
}

#audioFileIOS:hover::file-selector-button {
    background-color: #fbbf24 !important;
    border-color: #fbbf24 !important;
    color: #1f2937 !important;
}

/* Loading effects */
.spinner-border, .spinner-grow {
    vertical-align: middle;
    margin-right: 0.5rem;
}

/* Copy to clipboard button animation */
@keyframes success-fade {
    0% { background-color: rgba(40, 167, 69, 0.2); }
    100% { background-color: transparent; }
}

.copy-success {
    animation: success-fade 2s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .col-md-6:first-child {
        margin-bottom: 1.5rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .btn-lg {
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }
}

/* Improved focus state for accessibility */
:focus-visible {
    outline: 2px solid var(--teal-primary);
    outline-offset: 2px;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--grey-light);
}

::-webkit-scrollbar-thumb {
    background: var(--grey-medium);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Logo icon styling */
.logo-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: 2px solid rgba(255,255,255,0.3);
}

.logo-icon-large {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border: 2px solid rgba(255,255,255,0.3);
}

.form-control {
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.25);
}

/* Dashboard conversation cards */
.conversation-card {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.125);
}

.conversation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-color: var(--primary-color);
}

.crm-preview {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0.75rem;
    margin-top: 0.5rem;
    border-left: 3px solid var(--primary-color);
}

.crm-preview p {
    color: #495057;
    line-height: 1.3;
}

.card-footer {
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* Dashboard Layout Fixes */
.conversation-card .badge {
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
    display: inline-block !important;
    overflow-wrap: break-word !important;
    line-height: 1.3 !important;
    padding: 0.375rem 0.75rem !important;
}

.conversation-card .card-body {
    overflow: hidden;
    word-wrap: break-word;
}

/* Statistics cards enhancement */
.stats-card {
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.08);
}

.stats-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.stats-icon {
    font-size: 2rem;
}

.stats-card h3 {
    font-weight: 700;
    font-size: 2.5rem;
}

.stats-card h6 {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stats-card small {
    font-size: 0.75rem;
}

/* Search and filter improvements */
.input-group-text {
    background: white;
    border-color: #e2e8f0;
    color: var(--text-secondary);
}

/* Modal improvements */
.modal-xl {
    max-width: 90%;
}

.tab-content {
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
}

.nav-tabs .nav-link {
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
}

.nav-tabs .nav-link.active {
    border-bottom-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
}

/* Results section text readability */
#summaryContent,
#coachingContent, 
#transcriptContent {
    color: #1f2937 !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
}

/* Ensure any text inside these areas is readable */
#summaryContent *,
#coachingContent *,
#transcriptContent * {
    color: #1f2937 !important;
}

/* Special handling for headings in content areas */
#summaryContent h1, #summaryContent h2, #summaryContent h3, #summaryContent h4, #summaryContent h5, #summaryContent h6,
#coachingContent h1, #coachingContent h2, #coachingContent h3, #coachingContent h4, #coachingContent h5, #coachingContent h6,
#transcriptContent h1, #transcriptContent h2, #transcriptContent h3, #transcriptContent h4, #transcriptContent h5, #transcriptContent h6 {
    color: #111827 !important;
    font-weight: 600 !important;
}

/* Ensure strong/bold text is properly contrasted */
#summaryContent strong, #summaryContent b,
#coachingContent strong, #coachingContent b,
#transcriptContent strong, #transcriptContent b {
    color: #111827 !important;
    font-weight: 600 !important;
}

/* Fix copy button text colors and spacing */
#copySummaryBtn, #copyCoachingBtn, #copyTranscriptBtn {
    color: #374151 !important;
    border-color: #d1d5db !important;
    margin: 0.5rem !important;
    padding: 0.5rem 1rem !important;
}

#copySummaryBtn:hover, #copyCoachingBtn:hover, #copyTranscriptBtn:hover {
    color: #111827 !important;
    background-color: #f3f4f6 !important;
    border-color: #9ca3af !important;
}

/* Add spacing between content and card headers */
.card-header {
    margin-bottom: 1rem !important;
    padding: 1.25rem 1.5rem !important;
}

/* Ensure content areas have proper top spacing */
#summaryContent,
#coachingContent,
#transcriptContent {
    margin-top: 0.5rem !important;
}