/*!
 * Spawnster Welcome Page Styles
 * Custom styles for the plugin's welcome/dashboard page
 * Scoped to .spawnster-admin-page to prevent conflicts
 */

/* =================================================================
   BASE LAYOUT & BACKGROUND
   ================================================================= */

.spawnster-admin-page .spawnster-bg {
    background: linear-gradient(135deg, #faf5ff 0%, #eff6ff 50%, #eef2ff 100%);
    min-height: 100vh;
    position: relative;
}

.spawnster-admin-page .spawnster-bg * {
    box-sizing: border-box;
}

/* =================================================================
   GRADIENT BACKGROUNDS
   ================================================================= */

.spawnster-admin-page .spawnster-card-gradient-1 {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
}

.spawnster-admin-page .spawnster-card-gradient-2 {
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #06b6d4 100%);
}

.spawnster-admin-page .spawnster-gradient-text {
    background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.spawnster-admin-page .spawnster-bg-blur {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.spawnster-admin-page .spawnster-getting-started-bg {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* =================================================================
   CARD COMPONENTS
   ================================================================= */

.spawnster-admin-page .spawnster-card {
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.spawnster-admin-page .spawnster-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.spawnster-admin-page .spawnster-grid-item {
    width: 100%;
    max-width: 100%;
}

/* =================================================================
   BUTTON COMPONENTS
   ================================================================= */

.spawnster-admin-page .spawnster-btn-gradient {
    background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
    transition: all 0.3s ease;
}

.spawnster-admin-page .spawnster-btn-gradient:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
    transform: scale(1.05);
}

.spawnster-admin-page .spawnster-btn-gradient-2 {
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
}

.spawnster-admin-page .spawnster-btn-gradient-2:hover {
    background: linear-gradient(135deg, #059669 0%, #0d9488 100%);
    transform: scale(1.05);
}

.spawnster-admin-page .spawnster-cta-gradient {
    background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
}

.spawnster-admin-page .spawnster-number-badge {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

/* =================================================================
   GRID LAYOUTS - WordPress Admin Compatible
   ================================================================= */

.spawnster-admin-page .spawnster-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 100%;
}

.spawnster-admin-page .spawnster-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 100%;
}

.spawnster-admin-page .spawnster-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 100%;
}

/* =================================================================
   ANIMATIONS
   ================================================================= */

.spawnster-admin-page .spawnster-animate {
    animation: spawnster-float 6s ease-in-out infinite;
}

@keyframes spawnster-float {
    0%, 100% { 
        transform: translateY(0px); 
    }
    50% { 
        transform: translateY(-10px); 
    }
}

/* =================================================================
   RESPONSIVE DESIGN
   ================================================================= */

/* Mobile devices */
@media (max-width: 768px) {
    .spawnster-admin-page .spawnster-grid-2,
    .spawnster-admin-page .spawnster-grid-3,
    .spawnster-admin-page .spawnster-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Tablet devices */
@media (min-width: 769px) and (max-width: 1024px) {
    .spawnster-admin-page .spawnster-grid-3,
    .spawnster-admin-page .spawnster-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =================================================================
   NAVIGATION MENU
   ================================================================= */

.spawnster-admin-page .spawnster-nav-menu {
    display: flex;
    align-items: center;
    gap: 2rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    padding: 0.75rem 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.spawnster-admin-page .spawnster-nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    color: #6b7280;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.spawnster-admin-page .spawnster-nav-item:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    text-decoration: none;
}

.spawnster-admin-page .spawnster-nav-item svg {
    transition: transform 0.3s ease;
}

.spawnster-admin-page .spawnster-nav-item:hover svg {
    transform: scale(1.1);
}

/* Smooth scroll behavior for anchor links */
.spawnster-admin-page {
    scroll-behavior: smooth;
}

/* Add scroll offset for fixed header spacing */
.spawnster-admin-page [id] {
    scroll-margin-top: 2rem;
}

/* =================================================================
   MISSING TAILWIND UTILITIES
   ================================================================= */

/* Layout & Sizing */
.spawnster-admin-page .max-w-4xl {
    max-width: 56rem;
}

.spawnster-admin-page .w-5 {
    width: 1.25rem;
}

.spawnster-admin-page .h-5 {
    height: 1.25rem;
}

.spawnster-admin-page .w-4 {
    width: 1rem;
}

.spawnster-admin-page .h-4 {
    height: 1rem;
}

.spawnster-admin-page .w-6 {
    width: 1.5rem;
}

.spawnster-admin-page .h-6 {
    height: 1.5rem;
}

.spawnster-admin-page .w-12 {
    width: 3rem;
}

.spawnster-admin-page .h-12 {
    height: 3rem;
}

/* Typography */
.spawnster-admin-page .text-5xl {
    font-size: 3rem;
    line-height: 1;
}

.spawnster-admin-page .leading-relaxed {
    line-height: 1.625;
}

.spawnster-admin-page .font-semibold {
    font-weight: 600;
}

/* Colors */
.spawnster-admin-page .text-purple-600 {
    --tw-text-opacity: 1;
    color: rgb(147 51 234 / var(--tw-text-opacity));
}

.spawnster-admin-page .text-green-300 {
    --tw-text-opacity: 1;
    color: rgb(134 239 172 / var(--tw-text-opacity));
}

.spawnster-admin-page .text-yellow-500 {
    --tw-text-opacity: 1;
    color: rgb(234 179 8 / var(--tw-text-opacity));
}

.spawnster-admin-page .text-teal-600 {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity));
}

.spawnster-admin-page .bg-opacity-20 {
    --tw-bg-opacity: 0.2;
}

.spawnster-admin-page .bg-opacity-50 {
    --tw-bg-opacity: 0.5;
}

.spawnster-admin-page .bg-opacity-70 {
    --tw-bg-opacity: 0.7;
}

.spawnster-admin-page .bg-opacity-90 {
    --tw-bg-opacity: 0.9;
}

.spawnster-admin-page .opacity-90 {
    opacity: 0.9;
}

/* Spacing - Gaps */
.spawnster-admin-page .gap-2 {
    gap: 0.5rem;
}

.spawnster-admin-page .gap-3 {
    gap: 0.75rem;
}

.spawnster-admin-page .gap-4 {
    gap: 1rem;
}

/* Spacing - Space Between */
.spawnster-admin-page .space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.spawnster-admin-page .space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

/* Spacing - Margins */
.spawnster-admin-page .mb-16 {
    margin-bottom: 4rem;
}

.spawnster-admin-page .mb-12 {
    margin-bottom: 3rem;
}

.spawnster-admin-page .mb-6 {
    margin-bottom: 1.5rem;
}

.spawnster-admin-page .mt-8 {
    margin-top: 2rem;
}

.spawnster-admin-page .mr-2 {
    margin-right: 0.5rem;
}

.spawnster-admin-page .ml-2 {
    margin-left: 0.5rem;
}

/* Spacing - Padding */
.spawnster-admin-page .px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.spawnster-admin-page .py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.spawnster-admin-page .py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Flexbox */
.spawnster-admin-page .flex-shrink-0 {
    flex-shrink: 0;
}

.spawnster-admin-page .flex-wrap {
    flex-wrap: wrap;
}

.spawnster-admin-page .justify-center {
    justify-content: center;
}

/* Interactive States */
.spawnster-admin-page .cursor-pointer {
    cursor: pointer;
}

.spawnster-admin-page .hover\:bg-gray-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.spawnster-admin-page .hover\:bg-gray-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}

.spawnster-admin-page .hover\:bg-white:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.spawnster-admin-page .hover\:bg-opacity-50:hover {
    --tw-bg-opacity: 0.5;
}

.spawnster-admin-page .hover\:bg-opacity-90:hover {
    --tw-bg-opacity: 0.9;
}

/* Transitions */
.spawnster-admin-page .transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.spawnster-admin-page .duration-200 {
    transition-duration: 200ms;
}

.spawnster-admin-page .duration-300 {
    transition-duration: 300ms;
}

/* Effects */
.spawnster-admin-page .shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.spawnster-admin-page .rounded-md {
    border-radius: 0.375rem;
}

.spawnster-admin-page .rounded-lg {
    border-radius: 0.5rem;
}

.spawnster-admin-page .rounded-full {
    border-radius: 9999px;
}

/* =================================================================
   WORDPRESS ADMIN OVERRIDES
   ================================================================= */

/* Ensure our styles take precedence over WordPress admin styles */
.spawnster-admin-page {
    line-height: 1.6;
}

/* Override WordPress button styles */
.spawnster-admin-page .spawnster-btn-gradient,
.spawnster-admin-page .spawnster-btn-gradient-2 {
    border: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Ensure proper spacing in WordPress admin */
.spawnster-admin-page .spawnster-bg {
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide any remaining WordPress admin notices on Spawnster pages */
.spawnster-admin-page ~ .notice,
.spawnster-admin-page ~ .error,
.spawnster-admin-page ~ .updated,
.spawnster-admin-page ~ .update-nag,
.notice, .error, .updated, .update-nag,
.notice-error, .notice-warning, .notice-success, .notice-info,
#message, .settings-error, .update-message {
    display: none !important;
}

/* Ensure clean layout without notice spacing */
.spawnster-admin-page {
    margin-top: 0 !important;
}

/* Hide WordPress "Screen Options" and "Help" tabs on Spawnster pages for cleaner UI */
#screen-options-link-wrap,
#contextual-help-link-wrap {
    display: none !important;
}

/* =================================================================
   MISSING SPACING & LAYOUT UTILITIES
   ================================================================= */

/* Additional Layout & Sizing Classes */
.spawnster-admin-page .max-w-3xl {
    max-width: 48rem;
}

.spawnster-admin-page .w-8 {
    width: 2rem;
}

.spawnster-admin-page .h-8 {
    height: 2rem;
}

.spawnster-admin-page .w-full {
    width: 100%;
}

/* Additional Typography Classes */
.spawnster-admin-page .text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.spawnster-admin-page .text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.spawnster-admin-page .text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.spawnster-admin-page .text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.spawnster-admin-page .font-bold {
    font-weight: 700;
}

.spawnster-admin-page .font-medium {
    font-weight: 500;
}

/* Additional Color Classes */
.spawnster-admin-page .text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity));
}

.spawnster-admin-page .text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity));
}

.spawnster-admin-page .text-gray-800 {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity));
}

.spawnster-admin-page .text-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity));
}

.spawnster-admin-page .text-blue-800 {
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity));
}

.spawnster-admin-page .text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.spawnster-admin-page .bg-white {
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.spawnster-admin-page .bg-gray-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}

/* Additional Margin Classes */
.spawnster-admin-page .mb-1 {
    margin-bottom: 0.25rem;
}

.spawnster-admin-page .mb-2 {
    margin-bottom: 0.5rem;
}

.spawnster-admin-page .mb-3 {
    margin-bottom: 0.75rem;
}

.spawnster-admin-page .mb-4 {
    margin-bottom: 1rem;
}

.spawnster-admin-page .mb-8 {
    margin-bottom: 2rem;
}

.spawnster-admin-page .mt-2 {
    margin-top: 0.5rem;
}

.spawnster-admin-page .mt-4 {
    margin-top: 1rem;
}

.spawnster-admin-page .mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Additional Padding Classes */
.spawnster-admin-page .p-3 {
    padding: 0.75rem;
}

.spawnster-admin-page .p-4 {
    padding: 1rem;
}

.spawnster-admin-page .p-6 {
    padding: 1.5rem;
}

.spawnster-admin-page .p-8 {
    padding: 2rem;
}

.spawnster-admin-page .px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.spawnster-admin-page .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.spawnster-admin-page .py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.spawnster-admin-page .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.spawnster-admin-page .py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Additional Flexbox Classes */
.spawnster-admin-page .flex {
    display: flex;
}

.spawnster-admin-page .inline-flex {
    display: inline-flex;
}

.spawnster-admin-page .items-center {
    align-items: center;
}

.spawnster-admin-page .items-start {
    align-items: flex-start;
}

.spawnster-admin-page .justify-center {
    justify-content: center;
}

/* Display Classes */
.spawnster-admin-page .relative {
    position: relative;
}

.spawnster-admin-page .overflow-hidden {
    overflow: hidden;
}

.spawnster-admin-page .text-center {
    text-align: center;
}

.spawnster-admin-page .z-10 {
    z-index: 10;
}

/* Text Decoration */
.spawnster-admin-page .underline {
    text-decoration-line: underline;
}

.spawnster-admin-page .no-underline {
    text-decoration-line: none;
}

/* White Space */
.spawnster-admin-page .whitespace-nowrap {
    white-space: nowrap;
}

/* Hover Effects for Text Colors */
.spawnster-admin-page .hover\:text-blue-800:hover {
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity));
}

/* Transform */
.spawnster-admin-page .transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* =================================================================
   IMPROVED CARD SPACING
   ================================================================= */

/* Ensure cards have proper internal spacing */
.spawnster-admin-page .spawnster-card .p-6 {
    padding: 1.5rem !important;
}

.spawnster-admin-page .spawnster-card .p-8 {
    padding: 2rem !important;
}

/* Add better spacing for card content */
.spawnster-admin-page .spawnster-card h3 {
    margin-bottom: 0.5rem;
}

.spawnster-admin-page .spawnster-card p {
    margin-bottom: 1rem;
}

.spawnster-admin-page .spawnster-card p:last-child {
    margin-bottom: 0;
}

/* Ensure list items have proper spacing */
.spawnster-admin-page .spawnster-card ul li {
    margin-bottom: 0.5rem;
}

.spawnster-admin-page .spawnster-card ul li:last-child {
    margin-bottom: 0;
}

/* =================================================================
   NAVIGATION MENU IMPROVEMENTS
   ================================================================= */

/* Better responsive spacing for navigation */
@media (max-width: 768px) {
    .spawnster-admin-page .spawnster-nav-menu {
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
    }
    
    .spawnster-admin-page .spawnster-nav-item {
        justify-content: center;
        padding: 0.75rem 1.5rem;
    }
}

/* =================================================================
   CONTENT SECTION IMPROVEMENTS
   ================================================================= */

/* Ensure proper spacing between sections */
.spawnster-admin-page [id="features"],
.spawnster-admin-page [id="why-spawnster"],
.spawnster-admin-page [id="get-started"] {
    scroll-margin-top: 3rem;
}

/* Better spacing for benefit items */
.spawnster-admin-page .spawnster-grid-2 .flex.items-center {
    margin-bottom: 0.5rem;
}

/* Improve step cards spacing */
.spawnster-admin-page .space-y-4 .flex.items-start {
    padding: 1rem !important;
    margin-bottom: 1rem;
}

/* Better button spacing */
.spawnster-admin-page .flex.flex-wrap.justify-center {
    gap: 1rem;
    margin-top: 1.5rem;
}

/* =================================================================
   STATS SECTION IMPROVEMENTS
   ================================================================= */

/* Ensure stats cards have consistent spacing */
.spawnster-admin-page .spawnster-grid-4 .spawnster-card .p-6 {
    text-align: center;
    padding: 2rem 1rem !important;
}

.spawnster-admin-page .spawnster-grid-4 .text-3xl {
    margin: 0.5rem 0;
}

/* =================================================================
   MAIN FEATURE CARDS IMPROVEMENTS
   ================================================================= */

/* Ensure main feature cards have proper spacing */
.spawnster-admin-page .spawnster-grid-2 .spawnster-card {
    min-height: 400px;
}

.spawnster-admin-page .spawnster-grid-2 .spawnster-card .p-8 {
    padding: 2rem !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.spawnster-admin-page .spawnster-grid-2 .spawnster-card ul {
    margin: 1.5rem 0;
    flex-grow: 1;
}

.spawnster-admin-page .spawnster-grid-2 .spawnster-card .w-full {
    margin-top: auto;
}