/* MorningNewsletter - Main Styles */

/* Custom Color Palette Utilities */
:root {
    --jordy-blue: #93BFEF;
    --tufts-blue: #468BE6;
    --alice-blue: #E9F5FF;
    --cobalt-blue: #1A5799;
    --cool-black: #092F64;
    --eerie-black: #1F1F1F;
    --primary-button: #1d9bf0;
    --primary-button-hover: #3db0f4;
    --primary-dark-hover: #3480b8;
    --primary-darker-hover: #2a5a8c;
    --primary-light-hover: #9bc5ed;
    --text-dark: rgb(15, 20, 25);
    --nav-underline: rgb(29, 155, 240);
}

/* Ensure all interactive elements show pointer cursor */
a, 
button,
[role="button"],
.clickable,
.btn-primary,
.btn-pill,
.btn-transition,
input[type="submit"],
input[type="button"],
select,
label[for] {
    cursor: pointer !important;
}

/* Links without forced underlines */
a:not(.btn-primary):not(.btn-pill):not(.btn):not([class*="btn-"]) {
    transition: opacity 0.2s ease;
}

a:not(.btn-primary):not(.btn-pill):not(.btn):not([class*="btn-"]):hover {
    opacity: 0.8;
}

/* Background Color Utilities */
.bg-primary { background-color: var(--primary-button) !important; }
.bg-primary-dark { background-color: var(--cobalt-blue) !important; }
.bg-primary-darker { background-color: var(--cool-black) !important; }
.bg-primary-light { background-color: var(--jordy-blue) !important; }
.bg-primary-lightest { background-color: var(--alice-blue) !important; }
.bg-dark { background-color: var(--eerie-black) !important; }

/* Text Color Utilities */
.text-primary { color: var(--tufts-blue) !important; }
.text-primary-dark { color: var(--cobalt-blue) !important; }
.text-primary-darker { color: var(--cool-black) !important; }
.text-primary-light { color: var(--jordy-blue) !important; }
.text-primary-lightest { color: var(--alice-blue) !important; }
.text-dark { color: var(--text-dark) !important; }
.text-dark-custom { color: var(--text-dark) !important; }

/* Border Color Utilities */
.border-primary { border-color: var(--tufts-blue) !important; }
.border-primary-dark { border-color: var(--cobalt-blue) !important; }
.border-primary-darker { border-color: var(--cool-black) !important; }
.border-primary-light { border-color: var(--jordy-blue) !important; }
.border-primary-lightest { border-color: var(--alice-blue) !important; }

/* Focus Ring Utilities */
.focus-ring-primary:focus {
    outline: none !important;
    border-color: var(--tufts-blue) !important;
    box-shadow: 0 0 0 3px rgba(70, 139, 230, 0.1) !important;
}

/* Hover Utilities */
.hover-bg-primary:hover { background-color: var(--primary-button-hover) !important; }
.hover-bg-primary-dark:hover { background-color: var(--primary-dark-hover) !important; }
.hover-bg-primary-darker:hover { background-color: var(--primary-darker-hover) !important; }
.hover-bg-primary-light:hover { background-color: var(--primary-light-hover) !important; }
.hover-bg-primary-lightest:hover { background-color: #d4e9fe !important; }
.hover-text-primary:hover { color: var(--tufts-blue) !important; }
.hover-text-primary-dark:hover { color: var(--cobalt-blue) !important; }
.hover-text-primary-darker:hover { color: var(--cool-black) !important; }
.hover-border-primary-light:hover { border-color: var(--jordy-blue) !important; }

/* Utility class to disable link underlines */
.no-underline,
nav a,
.nav a,
.navigation a {
    text-decoration: none !important;
}

/* Dashboard Title Styles */
.dashboard-title, 
.dashboard-main-title,
h1.dashboard-title,
.dashboard h1,
.dashboard-header h1 {
    font-weight: 800 !important;
}

/* Navigation Capsule Styles */
.nav-container {
    padding: 1.5rem 1rem;
    transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-inner {
    max-width: 1100px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 9999px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover effect for nav capsule */
.nav-inner:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* When scrolled, make the nav more opaque and full width */
.nav-scrolled .nav-inner {
    max-width: 100%;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-left: none;
    border-right: none;
}

.nav-scrolled.nav-container {
    padding: 0;
}

/* Navigation link styles for capsule */
nav a:not(.btn-primary) {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    transition: all 0.2s ease;
    position: relative;
}

nav a:not(.btn-primary):hover {
    background: rgba(70, 139, 230, 0.1);
    color: var(--tufts-blue);
}

/* Remove underline styles for capsule navigation */
.nav-inner .hover\:nav-underline:hover {
    border-bottom: none !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0 !important;
}

/* Mobile responsiveness for capsule nav */
@media (max-width: 768px) {
    .nav-container {
        padding: 0.5rem;
    }
    
    .nav-inner {
        border-radius: 1rem;
    }
    
    nav a:not(.btn-primary) {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
}

/* Navigation Underline Styles (kept for other uses) */
.nav-underline {
    border-bottom: 4px solid var(--nav-underline) !important;
    border-radius: 2px !important;
    padding-bottom: 8px !important;
    margin-bottom: -4px !important;
}

/* Navigation Hover Underline Styles (kept for other uses) */
.hover\:nav-underline:hover {
    border-bottom: 4px solid var(--nav-underline) !important;
    border-radius: 2px !important;
    padding-bottom: 8px !important;
    margin-bottom: -4px !important;
}

/* Auth Page White Background */
.auth-bg-white {
    background-color: white !important;
}

/* Utility for replacing text-gray-900 */
.text-gray-900 {
    color: var(--text-dark) !important;
}

/* Global Styles */
html {
    scroll-behavior: smooth;
}

/* Logo Styles */
.logo-icon {
    height: 1.05rem !important;
    width: auto;
    margin-bottom: -1px;
}

.logo-sun-rotated {
    /* Animation can be added here if needed */
}

/* Gradient Backgrounds */
.gradient-bg {
    background: linear-gradient(135deg, #E9F5FF 0%, #93BFEF 100%);
}

.gradient-text {
    background: linear-gradient(135deg, #468BE6 0%, #1A5799 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mesh-bg {
    background: radial-gradient(circle at 25% 25%, #E9F5FF 0%, transparent 50%),
                radial-gradient(circle at 75% 25%, #93BFEF 0%, transparent 50%),
                radial-gradient(circle at 25% 75%, #468BE6 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, #1A5799 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, #E9F5FF 0%, transparent 50%);
}

/* Trusted by logos */
.trusted-by-logos {
    filter: grayscale(100%) brightness(0.3);
    transition: filter 0.3s ease;
}

.trusted-by-logos:hover {
    filter: grayscale(100%) brightness(0.5);
}

/* Navigation - removed duplicate styles that conflicted with .nav-inner */

/* FAQ Styles */
.faq-answer {
    display: none;
}

.faq-answer.show {
    display: block;
}

/* Button Transitions */
.btn-transition {
    transition: all 0.3s ease;
}

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

/* Pill Button Styles - Comprehensive Override */
.btn-pill {
    border-radius: 9999px !important;
    padding: 0.6rem 1.2rem !important;
}

/* Ensure all button elements with btn-pill class get proper styling */
button.btn-pill, 
a.btn-pill, 
input.btn-pill {
    border-radius: 9999px !important;
    padding: 0.6rem 1.2rem !important;
}

/* Override Tailwind rounded classes for pill buttons */
.btn-pill.rounded-md,
.btn-pill.rounded-lg,
.btn-pill.rounded,
.btn-pill.rounded-sm,
.btn-pill.rounded-xl,
.btn-pill.rounded-2xl,
.btn-pill.rounded-3xl,
.btn-pill.rounded-full {
    border-radius: 9999px !important;
}

/* Override all possible conflicting classes with maximum specificity */
.btn-pill[class*="rounded"] {
    border-radius: 9999px !important;
}

/* Feature Box Styles */
.feature-box-wrapper {
    position: relative;
}

.standard-box {
    position: relative;
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Target specific element combinations */
button.btn-pill[class*="rounded"],
a.btn-pill[class*="rounded"],
input.btn-pill[class*="rounded"] {
    border-radius: 9999px !important;
}

/* Override form button styles */
form button.btn-pill,
form input.btn-pill {
    border-radius: 9999px !important;
}

/* Override all Tailwind utility classes that might conflict */
.btn-pill.border,
.btn-pill.border-gray-300,
.btn-pill.border-purple-600,
.btn-pill.shadow,
.btn-pill.shadow-sm,
.btn-pill.shadow-lg,
.btn-pill.bg-purple-600,
.btn-pill.bg-white,
.btn-pill.bg-gray-50,
.btn-pill.hover\:bg-purple-700,
.btn-pill.hover\:bg-gray-100 {
    border-radius: 9999px !important;
}

/* Ultimate override for CDN processing issues */
.btn-pill,
.btn-pill.auth-button,
.btn-pill.inline-flex,
.btn-pill.block,
.btn-pill.w-full,
.btn-pill.relative,
.btn-pill.group,
.btn-pill.text-white,
.btn-pill.text-gray-700,
.btn-pill.bg-gradient-to-r,
.btn-pill.from-purple-600,
.btn-pill.to-purple-600,
.btn-pill.from-purple-600,
.btn-pill.to-purple-600,
.btn-pill.hover\:from-purple-700,
.btn-pill.hover\:to-purple-700,
.btn-pill.focus\:outline-none,
.btn-pill.focus\:ring-2,
.btn-pill.focus\:ring-offset-2,
.btn-pill.focus\:ring-purple-500,
.btn-pill.transition-all,
.btn-pill.duration-200,
.btn-pill.duration-300 {
    border-radius: 9999px !important;
}

/* Force override after any dynamic CSS processing */
html body .btn-pill {
    border-radius: 9999px !important;
    padding: 0.6rem 1.2rem !important;
}

html body button.btn-pill,
html body a.btn-pill,
html body input.btn-pill {
    border-radius: 9999px !important;
    padding: 0.6rem 1.2rem !important;
}

/* Additional overrides for Tailwind CSS conflicts */
.btn-pill.bg-gradient-to-r,
.btn-pill.bg-purple-600,
.btn-pill.bg-white,
.btn-pill.bg-red-600,
.btn-pill.hover\:bg-purple-700,
.btn-pill.hover\:bg-gray-50,
.btn-pill.hover\:bg-red-700,
.btn-pill.text-white,
.btn-pill.text-purple-600,
.btn-pill.text-gray-700,
.btn-pill.px-8,
.btn-pill.py-4,
.btn-pill.px-6,
.btn-pill.py-3,
.btn-pill.px-4,
.btn-pill.py-2,
.btn-pill.px-5,
.btn-pill.py-2\.5,
.btn-pill.font-medium,
.btn-pill.font-semibold,
.btn-pill.text-lg,
.btn-pill.text-sm,
.btn-pill.inline-flex,
.btn-pill.items-center,
.btn-pill.justify-center,
.btn-pill.shadow-lg,
.btn-pill.shadow-sm,
.btn-pill.transition-all,
.btn-pill.transition-colors,
.btn-pill.duration-200,
.btn-pill.duration-300,
.btn-pill.hover\:scale-105,
.btn-pill.focus\:outline-none,
.btn-pill.focus\:ring-2,
.btn-pill.focus\:ring-offset-2,
.btn-pill.focus\:ring-purple-500,
.btn-pill.focus\:ring-red-500,
.btn-pill.border,
.btn-pill.border-transparent,
.btn-pill.border-gray-300 {
    border-radius: 9999px !important;
    padding: 0.6rem 1.2rem !important;
}

/* Ultimate override with maximum specificity */
html body div .btn-pill,
html body form .btn-pill,
html body section .btn-pill,
html body main .btn-pill,
html body div button.btn-pill,
html body div a.btn-pill,
html body form button.btn-pill,
html body section button.btn-pill,
html body main button.btn-pill,
html body div form button.btn-pill {
    border-radius: 9999px !important;
    padding: 0.6rem 1.2rem !important;
}

/* Catch-all for any combination of classes */
[class*="btn-pill"] {
    border-radius: 9999px !important;
    padding: 0.6rem 1.2rem !important;
}

/* Form Styles */
.form-input {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: #468BE6;
    box-shadow: 0 0 0 3px rgba(70, 139, 230, 0.1);
}

/* Newsletter Subscription */
.newsletter-form {
    max-width: 100%;
}

.newsletter-input {
    background-color: #092F64;
    border: 1px solid #1A5799;
    color: white;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.newsletter-input:focus {
    outline: none;
    border-color: #468BE6;
    box-shadow: 0 0 0 2px rgba(70, 139, 230, 0.5);
}

.newsletter-input::placeholder {
    color: #93BFEF;
}

/* Responsive Design Utilities */
@media (max-width: 640px) {
    .hero-title {
        font-size: 2.5rem;
        line-height: 1.1;
    }
    
    .hero-subtitle {
        font-size: 1.125rem;
    }
    
    .newsletter-form {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (min-width: 768px) {
    .newsletter-form {
        flex-direction: row;
        gap: 0.5rem;
    }
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal animations */
@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.2s ease-out;
}

.animate-modal-in {
    animation: modalIn 0.3s ease-out;
}

.scale-hover {
    transition: transform 0.2s ease;
}

.scale-hover:hover {
    transform: scale(1.05);
}

/* Icon Transitions */
.icon-transition {
    transition: transform 0.2s ease;
}

.rotate-180 {
    transform: rotate(180deg);
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #ffffff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Focus States */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(70, 139, 230, 0.5);
}

/* Add Source Modal Styles */
.add-source-modal {
    backdrop-filter: blur(4px);
}

.source-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    max-height: 400px;
    overflow-y: auto;
}

.source-card {
    border: 2px solid #93BFEF;
    border-radius: 0.5rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #E9F5FF;
}

.source-card:hover {
    border-color: #468BE6;
    box-shadow: 0 4px 12px rgba(70, 139, 230, 0.15);
    transform: translateY(-2px);
}

.source-card.selected {
    border-color: #468BE6;
    background-color: #E9F5FF;
    box-shadow: 0 0 0 1px #468BE6;
}

.source-card h4 {
    font-weight: 600;
    color: #092F64;
    margin-bottom: 0.5rem;
}

.source-card p {
    font-size: 0.875rem;
    color: #1A5799;
    margin-bottom: 0.75rem;
}

.source-card .source-category {
    display: inline-block;
    background-color: #93BFEF;
    color: #092F64;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
}

.source-card.selected .source-category {
    background-color: #468BE6;
    color: #E9F5FF;
}

/* Category Filter Styles */
.category-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.category-filter {
    padding: 0.5rem 1rem;
    border: 1px solid #93BFEF;
    border-radius: 0.375rem;
    background: #E9F5FF;
    color: #092F64;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-filter:hover {
    border-color: #468BE6;
    color: #468BE6;
}

.category-filter.active {
    background-color: #468BE6;
    color: #E9F5FF;
    border-color: #468BE6;
}

/* Search Bar Styles */
.source-search {
    position: relative;
    margin-bottom: 1.5rem;
}

.source-search input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid #93BFEF;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #E9F5FF;
}

.source-search input:focus {
    outline: none;
    border-color: #468BE6;
    box-shadow: 0 0 0 3px rgba(70, 139, 230, 0.1);
}

.source-search .search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #1A5799;
    pointer-events: none;
}

/* Configuration Form Styles */
.source-config-form {
    border-top: 1px solid #93BFEF;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}

.config-field {
    margin-bottom: 1rem;
}

.config-field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #092F64;
    margin-bottom: 0.5rem;
}

.config-field input,
.config-field select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #93BFEF;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #E9F5FF;
}

.config-field input:focus,
.config-field select:focus {
    outline: none;
    border-color: #468BE6;
    box-shadow: 0 0 0 3px rgba(70, 139, 230, 0.1);
}

.config-field .field-hint {
    font-size: 0.75rem;
    color: #1A5799;
    margin-top: 0.25rem;
}

/* Loading and Error States */
.source-loading {
    text-align: center;
    padding: 2rem;
    color: #1A5799;
}

.source-error {
    text-align: center;
    padding: 2rem;
    color: #dc2626;
    background-color: #fee2e2;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

.no-sources-found {
    text-align: center;
    padding: 2rem;
    color: #1A5799;
    font-style: italic;
}

/* Modal Animation */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.add-source-modal .modal-content {
    animation: modalFadeIn 0.2s ease-out;
}

/* Notification System */
#notification-container {
    max-width: 400px;
}

#notification-container .notification {
    min-width: 300px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

#notification-container .notification:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Ensure smooth stacking animations */
#notification-container > * + * {
    margin-top: 0.5rem;
}

/* Notification close button styling */
#notification-container .notification button {
    padding: 0.25rem;
    margin: -0.25rem;
    border-radius: 0.25rem;
}

#notification-container .notification button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    #notification-container {
        left: 1rem;
        right: 1rem;
        max-width: none;
    }
    
    #notification-container .notification {
        min-width: auto;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .source-grid {
        grid-template-columns: 1fr;
        max-height: 300px;
    }
    
    .category-filters {
        justify-content: center;
    }
    
    .category-filter {
        flex: 1;
        text-align: center;
        min-width: 0;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .auto-dark {
        background-color: #092F64;
        color: #E9F5FF;
    }
    
    .auto-dark .text-gray-900 {
        color: #E9F5FF;
    }
    
    .auto-dark .text-gray-600 {
        color: #93BFEF;
    }
    
    .auto-dark .bg-white {
        background-color: #1A5799;
    }
}