/* static/style.css */

/* Apply base font and background defined in HTML body via Tailwind */

/* Star background */
#stars-container {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.star {
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    width: 1.5px;
    height: 1.5px;
    opacity: 0;
    will-change: opacity;
    /* Animation applied via JS using Tailwind config */
}

/* Input field base styles (mostly handled by Tailwind) */
input[type="text"],
input[type="email"],
textarea {
    caret-color: #3b82f6; /* darkaccent */
}

/* Custom file input button styling (using Tailwind classes in HTML now) */
/* input[type="file"]::file-selector-button { ... } */
/* input[type="file"] { ... } */

/* --- Tab Styling --- */
.tab-container {
    /* Optional: add margin below the container if needed */
    /* margin-bottom: 1.5rem; */ /* mb-6 applied directly */
}
.tab-button {
     @apply px-5 py-3 font-medium text-gray-400 border-b-4 border-transparent transition-colors duration-200 ease-in-out hover:text-gray-200 focus:outline-none focus:text-white focus:bg-gray-700 rounded-t-lg; /* Base tab style: Rounded top, transparent bottom border */
}
.tab-button.active {
    @apply border-darkaccent text-white bg-darkcard; /* Active tab: Accent border bottom, specific text/bg */
}
.tab-button:not(.active):hover {
     @apply border-gray-600; /* Subtle bottom border on hover for inactive tabs */
}


/* Fade-in animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* Glow effect for buttons */
.glow-on-hover:hover:not(:disabled) {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.6); /* darkaccent color */
}
/* Smooth transitions */
button, input, textarea, select { /* Apply transition to form elements too */
     transition: background-color 0.2s ease-in-out, box-shadow 0.3s ease-in-out, opacity 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* Progress bar animation */
 #progress-bar {
     transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out; /* Added transition for color */
 }

/* Style for highlighted variables in help text */
.variable-highlight {
    @apply font-mono text-blue-300 bg-gray-800/60 px-1.5 py-0.5 rounded mx-0.5; /* Adjusted background */
}

/* Custom focus ring for better accessibility */
/* Use Tailwind's focus:ring utilities primarily, this is a fallback/override */
/* *:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
} */

/* Status message dismiss button */
.status-dismiss-button {
     @apply -mx-1.5 -my-1.5 p-1.5 rounded-md inline-flex hover:bg-opacity-20 hover:bg-current focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-current focus:ring-current;
}

/* Failed email list styling */
#failed-emails-list li {
    @apply border-b border-gray-700/50 py-1.5 last:border-b-0; /* Added padding, lighter border */
}
#failed-emails-list .failed-email {
    @apply font-mono text-red-400 break-all;
}
#failed-emails-list .failed-error {
     @apply text-gray-400 break-words pl-1;
}

/* General Layout Refinements */
label {
    @apply select-none; /* Prevent text selection on labels */
}

/* Adjust grid gap for better spacing */
.form-grid {
     @apply grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6; /* Increased gap */
}

.form-column {
     @apply flex flex-col space-y-6; /* Ensure consistent vertical spacing */
}