/* SeggWat Demo Pages - Shared Styles */

/* Nord theme customization - gray-800 background */
[data-theme="nord"] {
    --b1: 31 41 55; /* gray-800 in oklch */
    --b2: 31 41 55;
    --b3: 31 41 55;
    --bc: 229 231 235; /* light text color */
}

/* Navbar theme adaptation */
/* Light mode (Nord theme) - make navbar bright with dark text */
[data-theme="nord"] .navbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb;
}

[data-theme="nord"] .navbar * {
    color: #111827 !important;
}

[data-theme="nord"] .navbar .btn-ghost:hover {
    background-color: #f3f4f6 !important;
}

[data-theme="nord"] .navbar svg {
    fill: #111827 !important;
}

/* Dark mode (Sunset theme) - keep dark navbar with light text */
[data-theme="sunset"] .navbar {
    background-color: #1f2937 !important;
}

[data-theme="sunset"] .navbar .btn-ghost:hover {
    background-color: #374151 !important;
}

/* Status indicator animation (for feedback and helpful demos) */
.status-indicator {
    animation: fadeIn 0.3s ease-in;
}

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

/* Color swatch styles (for feedback demo) */
.color-swatch {
    transition: all 0.2s ease;
}

.color-swatch:hover {
    transform: scale(1.1);
}

.color-swatch.active {
    ring: 2px;
    ring-color: currentColor;
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
    /* Ensure description text wraps and doesn't overflow */
    .label-text-alt {
        white-space: normal !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
        display: block;
    }

    /* Prevent customization panel from causing horizontal scroll */
    .card-body {
        overflow-x: hidden;
    }

    /* Ensure form controls don't overflow */
    .form-control {
        max-width: 100%;
        overflow: hidden;
    }

    /* Ensure color swatches wrap properly */
    .flex.gap-2.flex-wrap {
        flex-wrap: wrap !important;
    }

    /* Ensure select dropdowns fit mobile screens */
    .select {
        max-width: 100%;
    }
}