/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* CSS Variables for consistent theming */
:root {
    /* Teal palette based on logo color #0e3f4b */
    --primary-50: #f0f9ff;
    --primary-100: #e0f2fe;
    --primary-200: #bae6fd;
    --primary-300: #7dd3fc;
    --primary-400: #38bdf8;
    --primary-500: #0891b2;
    --primary-600: #0e7490;
    --primary-700: #0e3f4b;
    --primary-800: #164e63;
    --primary-900: #0c4a6e;

    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* Complementary accent colors */
    --accent-50: #fdf4ff;
    --accent-100: #fae8ff;
    --accent-200: #f5d0fe;
    --accent-300: #f0abfc;
    --accent-400: #e879f9;
    --accent-500: #d946ef;
    --accent-600: #c026d3;
    --accent-700: #a21caf;
    --accent-800: #86198f;
    --accent-900: #701a75;

    --success-50: #ecfdf5;
    --success-500: #10b981;
    --success-600: #059669;

    --warning-50: #fffbeb;
    --warning-500: #f59e0b;
    --warning-600: #d97706;

    --error-50: #fef2f2;
    --error-500: #ef4444;
    --error-600: #dc2626;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px
        rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px
        rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px
        rgb(0 0 0 / 0.1);

    --border-radius-sm: 0.375rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 0.75rem;
    --border-radius-xl: 1rem;
}

/* Custom teal color classes to match our palette */
.bg-teal-50 {
    background-color: var(--primary-50);
}
.bg-teal-100 {
    background-color: var(--primary-100);
}
.bg-teal-600 {
    background-color: var(--primary-600);
}
.bg-teal-700 {
    background-color: var(--primary-700);
}

.text-teal-500 {
    color: var(--primary-500);
}
.text-teal-600 {
    color: var(--primary-600);
}
.text-teal-700 {
    color: var(--primary-700);
}
.text-teal-800 {
    color: var(--primary-800);
}

.border-teal-100 {
    border-color: var(--primary-100);
}
.border-teal-400 {
    border-color: var(--primary-400);
}
.border-teal-500 {
    border-color: var(--primary-500);
}
.border-teal-600 {
    border-color: var(--primary-600);
}

.hover\:text-teal-500:hover {
    color: var(--primary-500);
}
.hover\:text-teal-600:hover {
    color: var(--primary-600);
}
.hover\:text-teal-800:hover {
    color: var(--primary-800);
}
.hover\:bg-teal-700:hover {
    background-color: var(--primary-700);
}
.hover\:border-teal-400:hover {
    border-color: var(--primary-400);
}
.hover\:border-teal-600:hover {
    border-color: var(--primary-600);
}

.focus\:ring-teal-500:focus {
    --tw-ring-color: var(--primary-500);
}
.focus\:border-teal-500:focus {
    border-color: var(--primary-500);
}
.focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
}

/* Gradient backgrounds */
.from-teal-50 {
    --tw-gradient-from: var(--primary-50);
}
.to-cyan-50 {
    --tw-gradient-to: #ecfeff;
}

/* Base styles */
* {
    box-sizing: border-box;
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        sans-serif;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    background: linear-gradient(
        135deg,
        var(--gray-50) 0%,
        var(--primary-50) 100%
    );
    min-height: 100vh;
    line-height: 1.6;
    color: var(--gray-800);
}

/* Enhanced header with subtle gradient and teal accents */
header {
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        rgba(240, 249, 255, 0.3) 100%
    );
    border-bottom: 1px solid var(--gray-200);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

header h1 {
    color: var(--primary-700);
    font-weight: 800;
    letter-spacing: -0.025em;
    text-shadow: 0 1px 2px rgba(14, 63, 75, 0.1);
    transition: all 0.3s ease;
    cursor: default;
}

header h1:hover {
    color: var(--primary-600);
    text-shadow: 0 2px 4px rgba(14, 63, 75, 0.2);
    transform: translateY(-1px);
}

/* Logo animation */
header img {
    transition: transform 0.3s ease, filter 0.3s ease;
}

header img:hover {
    transform: scale(1.05) rotate(5deg);
    filter: drop-shadow(0 4px 8px rgba(79, 70, 229, 0.2));
}

/* Install command styling */
.install-command {
    background: linear-gradient(
        135deg,
        var(--gray-900) 0%,
        var(--gray-800) 100%
    );
    border: 1px solid var(--gray-700);
    font-family: "JetBrains Mono", "Fira Code", monospace;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.install-command::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.5s ease;
}

.install-command:hover::before {
    left: 100%;
}

.install-command:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

/* Enhanced navigation */
nav {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 50;
}

.nav-tab {
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    font-weight: 500;
    border-bottom: 2px solid transparent;
}

.nav-tab::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
    transition: width 0.3s ease;
}

.nav-tab.active {
    color: var(--primary-700);
    font-weight: 600;
    border-bottom: 2px solid var(--primary-700);
}

.nav-tab.active::after {
    width: 100%;
    background: var(--primary-700);
}

.nav-tab:hover {
    color: var(--primary-600);
    transform: translateY(-1px);
}

.nav-tab:hover::after {
    width: 100%;
    background: var(--primary-600);
}

/* Enhanced sample cards */
.signature-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.signature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--primary-500),
        var(--primary-600),
        var(--primary-700)
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.signature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-200);
}

.signature-card:hover::before {
    opacity: 1;
}

/* Provider tags */
.provider-tag {
    display: inline-block;
    background: linear-gradient(
        135deg,
        var(--primary-50) 0%,
        var(--primary-100) 100%
    );
    color: var(--primary-700);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--primary-200);
    margin-top: 0.5rem;
    transition: all 0.2s ease;
}

.provider-tag:hover {
    background: linear-gradient(
        135deg,
        var(--primary-100) 0%,
        var(--primary-200) 100%
    );
    transform: scale(1.05);
}

/* Status indicators */
.status-changed {
    color: var(--warning-600);
    font-weight: 600;
}

.status-consistent {
    color: var(--success-600);
    font-weight: 600;
}

.status-error {
    color: var(--error-600);
    font-weight: 600;
}

/* Hash display */
.hash-display {
    font-family: "JetBrains Mono", monospace;
    background: var(--gray-100);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.875rem;
    border: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.hash-display:hover {
    background: var(--gray-200);
    transform: scale(1.02);
}

/* Enhanced buttons */
button,
.btn {
    font-weight: 600;
    transition: all 0.3s ease;
    border-radius: var(--border-radius-md);
    position: relative;
    overflow: hidden;
}

button:hover,
.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn-primary {
    background: linear-gradient(
        135deg,
        var(--primary-500) 0%,
        var(--primary-600) 100%
    );
    border: 1px solid var(--primary-600);
}

.btn-primary:hover {
    background: linear-gradient(
        135deg,
        var(--primary-600) 0%,
        var(--primary-700) 100%
    );
}

/* Enhanced form elements */
select,
input {
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius-md);
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
}

select:focus,
input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    background: white;
}

select:hover,
input:hover {
    border-color: var(--gray-400);
}

/* Chart containers */
.chart-container {
    position: relative;
    height: 400px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--border-radius-lg);
    padding: 1rem;
    backdrop-filter: blur(5px);
}

/* Timeline enhancements - Centered Approach */
.history-timeline {
    position: relative;
    min-height: 200px;
    /* padding-left is now handled by Tailwind's pl-12 (3rem) on the HTML element */
    margin-left: 1rem; /* Optional: if you want overall left margin for the component */
    background: transparent;
}

.history-timeline::before {
    /* The Vertical Line */
    content: "";
    position: absolute;
    /* Position line in the middle of the 3rem padding (pl-12 from Tailwind) */
    left: 1.5rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #d1d5db; /* Subtle gray line */
    transform: translateX(-50%); /* Center the 1px line itself */
    z-index: 1;
}

.timeline-node {
    position: relative;
    margin-bottom: 2rem;
    padding: 0; /* Nodes themselves don't need padding here */
}

.timeline-node::before {
    /* The Dot */
    content: "";
    position: absolute;
    /* Align with the line: parent padding is 3rem, line is at 1.5rem from parent edge.
       Node content starts at 3rem from parent edge.
       So, dot needs to be 1.5rem to the left of node's content start. */
    left: -1.5rem;
    top: 1rem; /* Align with text content (assuming 1rem top padding in text block) */
    width: 10px;
    height: 10px;
    background: #6366f1; /* Main dot color */
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transform: translateX(-50%); /* Center the dot on its defined 'left' position */
    z-index: 10;
}

.timeline-node:hover::before {
    background: #4f46e5; /* Darker on hover */
    transform: translateX(-50%) scale(1.1); /* Maintain centering during hover */
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}

/* Enhanced content sections */
.tab-content {
    animation: fadeIn 0.5s ease-in-out;
}

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

/* Loading states */
.loading {
    background: linear-gradient(
        90deg,
        var(--gray-200) 25%,
        var(--gray-100) 50%,
        var(--gray-200) 75%
    );
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Enhanced tables */
table {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

table th {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

table tr:hover {
    background: var(--primary-50);
    transition: background-color 0.2s ease;
}

/* Enhanced footer */
footer {
    background: linear-gradient(135deg, #ffffff 0%, var(--gray-50) 100%);
    border-top: 1px solid var(--gray-200);
}

footer a {
    transition: all 0.3s ease;
}

footer a:hover {
    transform: translateY(-2px);
    color: var(--primary-600);
}

/* Responsive enhancements */
@media (max-width: 768px) {
    .signature-card {
        margin-bottom: 1rem;
    }

    .nav-tab {
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
    }

    header h1 {
        font-size: 1.5rem;
    }

    .install-command {
        font-size: 0.75rem;
        padding: 0.5rem;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for accessibility */
*:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary-400), var(--primary-600));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--primary-500), var(--primary-700));
}