/**
 * SPC Analysis Tool - Main Stylesheet
 * Theme: "Ghibli/Miyazaki" - Nature, Whimsy, and Clarity.
 */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

:root {
    /* Color Palette - Ghibli Light (Pastoral Day) */
    --primary: #569C5B;
    /* Lush Grass Green */
    --secondary: #4FA3C4;
    /* Summer Sky Blue */
    --accent: #E88D67;
    /* Warm Sunset/Brick */

    --background: #F2F9F0;
    /* Very Pale Organic Green/White */
    --surface: #FFFFFF;
    /* Cloud White */
    --text-main: #2C3E50;
    /* Deep Ink Blue/Grey */

    /* Typography Standards */
    --font-base: 'Nunito', system-ui, -apple-system, sans-serif;
    --size-min: 12px;
    --size-base: 15px;
    /* Slightly larger for friendliness */
    --size-md: 17px;
    --size-lg: 20px;
    --size-xl: 24px;
    --size-2xl: 32px;

    /* Table Variables */
    --table-border: #CBD5E0;
    --table-bg: #FFFFFF;
    --table-text: #2C3E50;
    --table-header-bg: #E6F0E6;
    /* Soft Green Tint */
    --table-label-bg: #F7FAF7;
    --table-data-header-bg: #EDF2F7;
    --table-ooc-bg: #FDE047;
    /* Sunny Yellow */
    --table-ooc-text: #000;
    --table-stats-bg: #E0F2F1;
    /* Soft Teal */

    --card-bg: rgba(255, 255, 255, 0.85);
    /* Milky Glass */
}

/* Dark Mode Overrides (Enchanted Night Forest) */
html.dark {
    --primary: #88D498;
    /* Glowing Spirit Green */
    --secondary: #64B5F6;
    /* Moonlight Blue */
    --accent: #FFB74D;
    /* Firefly Orange */

    --background: #1A2634;
    /* Deep Night Blue */
    --surface: #243447;
    /* Darker Blue-Grey */
    --text-main: #E0F2F1;
    /* Pale Moonlight */

    --table-border: #4A5568 !important;
    --table-bg: #243447 !important;
    --table-text: #E0F2F1 !important;
    --table-header-bg: #2D3748 !important;
    --table-label-bg: #2D3748 !important;
    --table-data-header-bg: #2D3748 !important;
    --table-ooc-bg: #B91C1C !important;
    --table-ooc-text: #FFFFFF !important;
    --table-stats-bg: #2C3E50 !important;

    --card-bg: rgba(36, 52, 71, 0.85);
}

body {
    background-color: var(--background);
    color: var(--text-main);
    font-family: var(--font-base);
    font-size: var(--size-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.5s ease, color 0.5s ease;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(86, 156, 91, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(79, 163, 196, 0.05) 0%, transparent 40%);
}

html.dark body {
    background-image:
        radial-gradient(circle at 10% 20%, rgba(136, 212, 152, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(100, 181, 246, 0.05) 0%, transparent 40%);
}

/* Ensure no text falls below the minimum readable size */
* {
    font-size: inherit;
}

small,
.text-xs,
.text-\[10px\],
.text-\[11px\],
.text-\[9px\] {
    font-size: var(--size-min) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Nunito', sans-serif;
    color: var(--text-main);
}

h1 {
    font-size: var(--size-2xl);
    font-weight: 800;
}

h2 {
    font-size: var(--size-xl);
    font-weight: 700;
}

h3 {
    font-size: var(--size-lg);
    font-weight: 700;
}

h4 {
    font-size: var(--size-md);
    font-weight: 700;
}

label {
    font-size: var(--size-base);
    font-weight: 600;
}

/* Organic / Glass Card Style */
.saas-card {
    border-width: 0px;
    /* Removed border for cleaner look */
    background-color: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 2px 4px -1px rgba(0, 0, 0, 0.03),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    /* Inner shine */
    border-radius: 2rem;
    /* Softer, rounder */
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Bouncy transition */
}

.dark .saas-card {
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.saas-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 8px 10px -6px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* Glass Navigation */
.glass-nav {
    border-bottom: none;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px -5px rgba(86, 156, 91, 0.1);
    /* Subtle green tint shadow */
}

.dark .glass-nav {
    background-color: rgba(26, 38, 52, 0.8);
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.3);
}

/* Hover Lift Effect */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-lift:hover {
    transform: translateY(-0.25rem);
}

/* Step Number */
.step-number {
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* Circle */
    font-size: 1rem;
    font-weight: 800;
    color: white;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: 0 4px 12px rgba(86, 156, 91, 0.3);
}

/* Buttons */
.btn-primary {
    background-color: var(--primary);
    color: white;
    font-weight: 700;
    border-radius: 1rem;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 6px rgba(86, 156, 91, 0.2);
}

.btn-primary:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 12px rgba(86, 156, 91, 0.3);
}

/* Anomaly Pulse Animation (Red) */
@keyframes pulse-red {
    0% {
        transform: scale(1);
        opacity: 0.8;
        box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.7);
    }

    70% {
        transform: scale(1.2);
        opacity: 1;
        box-shadow: 0 0 0 10px rgba(244, 63, 94, 0);
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
        box-shadow: 0 0 0 0 rgba(244, 63, 94, 0);
    }
}

.anomaly-pulse {
    animation: pulse-red 2s infinite;
    background-color: #f43f5e;
    border-radius: 50%;
}

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

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #CBD5E0;
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #A0AEC0;
}

.dark ::-webkit-scrollbar-thumb {
    background-color: #4A5568;
}

/* Navigation Active State */
.nav-item-active {
    background-color: var(--primary);
    color: #ffffff !important;
    border-radius: 1rem;
    box-shadow: 0 4px 10px rgba(86, 156, 91, 0.3);
    font-weight: 700;
}

/* Detailed Excel Table Styles */
.excel-table {
    background-color: var(--table-bg) !important;
    color: var(--table-text) !important;
    border-color: var(--table-border) !important;
    font-family: 'Nunito', sans-serif;
    border-radius: 1rem;
    overflow: hidden;
}

.excel-table td,
.excel-table th {
    border-color: var(--table-border) !important;
    color: inherit !important;
    padding: 0.75rem;
}

/* Tooltip & Charts */
.apexcharts-tooltip {
    border-radius: 1rem !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
    font-family: 'Nunito', sans-serif !important;
}

.dark .apexcharts-tooltip {
    background: var(--surface) !important;
    border-color: var(--table-border) !important;
    color: var(--text-main) !important;
}

/* Floating Animation Utility */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}