/* Light theme visual remap only. Do not change layout or behavior. */

html {
    color-scheme: light !important;
}

:root {
    --text-main: #0f172a !important;
    --text-sub: #64748b !important;
    --border: #e2e8f0 !important;
    --primary: 263.4 70% 50.4% !important;
    --primary-hover: #2563eb !important;
    --bg: #f4f6fb !important;
    --background: 210 40% 98% !important;
    --foreground: 222.2 47.4% 11.2% !important;
    --card: 0 0% 100% !important;
    --card-foreground: 222.2 47.4% 11.2% !important;
    --popover: 0 0% 100% !important;
    --popover-foreground: 222.2 47.4% 11.2% !important;
    --primary-foreground: 210 40% 98% !important;
    --secondary: 210 40% 96.1% !important;
    --secondary-foreground: 222.2 47.4% 11.2% !important;
    --muted: 210 40% 96.1% !important;
    --muted-foreground: 215.4 16.3% 46.9% !important;
    --accent: 210 40% 96.1% !important;
    --accent-foreground: 222.2 47.4% 11.2% !important;
    --destructive: 0 84.2% 60.2% !important;
    --destructive-foreground: 210 40% 98% !important;
    --input: 214.3 31.8% 91.4% !important;
    --ring: 221.2 83.2% 53.3% !important;
}

html,
body,
body.bg-\[\#060b1a\],
body.bg-background,
body.bg-slate-950 {
    background-color: #f4f6fb !important;
    background-image:
        radial-gradient(55% 45% at 88% 8%, rgba(59, 130, 246, 0.10), transparent 62%),
        radial-gradient(45% 40% at 8% 92%, rgba(124, 58, 237, 0.08), transparent 58%),
        linear-gradient(160deg, #f8fafc 0%, #eef2f7 48%, #f4f6fb 100%) !important;
    color: #1e293b !important;
}

.page::before,
.page::after {
    opacity: 0.45;
}

.glass-effect,
.glass-card {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08) !important;
}

.login-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.login-card .label,
.label {
    color: #475569 !important;
}

.login-card .sub-title,
.sub-title,
.agree,
.switch-login {
    color: #64748b !important;
}

.input,
.login-card .input,
.captcha-img {
    color: #0f172a !important;
    background: #ffffff !important;
    border-color: #dbe3ee !important;
}

.input::placeholder {
    color: #94a3b8 !important;
}

.input:focus {
    border-color: #3b82f6 !important;
}

.send-code-btn {
    background: #f8fafc !important;
    color: #0284c7 !important;
    border-color: #67e8f9 !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #0f172a !important;
    caret-color: #0f172a !important;
    transition: background-color 99999s ease-out 0s;
}

input,
textarea,
select {
    color-scheme: light !important;
}

.pagination li a,
.pagination li span {
    background: #ffffff !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}

.pagination li a:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.gallery,
.login-panel {
    background: transparent !important;
    border-color: #e2e8f0 !important;
}

.tile {
    background: #ffffff !important;
}

.pagination li.disabled span {
    background: #f8fafc !important;
    color: #94a3b8 !important;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
}

.hover-3d:hover {
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12) !important;
}

.card-glow::before {
    background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(59, 130, 246, 0.10), transparent 40%) !important;
}

.ecom-step-track {
    --ecom-step-bg: #ffffff;
    --ecom-step-border: #e2e8f0;
    --ecom-step-text: #64748b;
    --ecom-step-sep: #e2e8f0;
}

.planner-req-history-btn {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    color: #475569 !important;
}

.planner-req-history-btn:hover {
    color: #b45309 !important;
}

#plannerReqHistoryPanel {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important;
}

#plannerReqHistoryPanel .req-history-item {
    color: #334155 !important;
}

#plannerReqHistoryPanel .req-history-item:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

#plannerConfigCard input,
#plannerConfigCard select,
#plannerConfigCard textarea,
#plannerProductLength,
#plannerProductWidth,
#plannerProductHeight,
#plannerProductMaterial,
#plannerPlatform,
#plannerLanguage,
#plannerRatio,
#plannerImageSize,
#plannerGenerateCount,
#plannerRequirement {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #dbe3ee !important;
    caret-color: #2563eb !important;
    color-scheme: light !important;
}

#plannerConfigCard input::placeholder,
#plannerConfigCard textarea::placeholder,
#plannerProductLength::placeholder,
#plannerProductWidth::placeholder,
#plannerProductHeight::placeholder,
#plannerProductMaterial::placeholder,
#plannerRequirement::placeholder {
    color: #94a3b8 !important;
}

#plannerConfigCard input:focus,
#plannerConfigCard select:focus,
#plannerConfigCard textarea:focus,
#plannerProductLength:focus,
#plannerProductWidth:focus,
#plannerProductHeight:focus,
#plannerProductMaterial:focus,
#plannerPlatform:focus,
#plannerLanguage:focus,
#plannerRatio:focus,
#plannerImageSize:focus,
#plannerGenerateCount:focus,
#plannerRequirement:focus {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

#plannerConfigCard select option,
#plannerPlatform option,
#plannerLanguage option,
#plannerRatio option,
#plannerImageSize option,
#plannerGenerateCount option {
    background: #ffffff !important;
    color: #0f172a !important;
}

/* Page / panel dark backgrounds -> light */
.bg-\[\#060b1a\],
.bg-\[\#0a1228\],
.bg-\[\#0c1630\],
.bg-\[\#0B1220\],
.bg-\[\#0b1220\],
.bg-\[\#0f172a\],
.bg-\[\#111827\] {
    background-color: #f4f6fb !important;
}

.bg-\[\#060e24\],
.bg-\[\#0a142e\],
.hover\:bg-\[\#0a142e\]:hover,
.hover\:bg-\[\#060e24\]:hover {
    background-color: #ffffff !important;
}

.bg-\[\#101830\],
.bg-\[\#101830\]\/55,
.bg-\[\#101830\]\/60,
.bg-\[\#101830\]\/65,
.bg-\[\#101830\]\/70,
.bg-\[\#101830\]\/75,
.bg-\[\#101830\]\/80,
.bg-\[\#101830\]\/90,
.bg-\[\#121a32\],
.bg-\[\#121a32\]\/60,
.bg-\[\#121a32\]\/65,
.bg-\[\#121a32\]\/70,
.bg-\[\#121a32\]\/75,
.bg-\[\#040a18\],
.focus\:bg-\[\#101830\]\/80:focus,
.hover\:bg-\[\#121a32\]\/60:hover,
.active\:bg-\[\#121a32\]\/60:active {
    background-color: #ffffff !important;
}

.bg-\[\#040a18\] {
    color: #0f172a !important;
}

.hover\:bg-\[\#101830\]\/80:hover {
    background-color: rgba(15, 23, 42, 0.72) !important;
}

.bg-\[\#1a2440\]\/80,
.bg-\[\#1e2a48\]\/90,
.hover\:bg-\[\#1a2440\]\/80:hover,
.hover\:bg-\[\#1e2a48\]\/90:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

.bg-\[\#121a32\]\/40,
.hover\:bg-\[\#121a32\]\/40:hover {
    background-color: rgba(15, 23, 42, 0.42) !important;
}

.bg-\[\#060b1a\]\/90 {
    background-color: rgba(15, 23, 42, 0.92) !important;
    color: #ffffff !important;
}

.text-\[\#e8eeff\],
.text-\[\#c5d0e6\],
.text-\[\#f1f5f9\] {
    color: #0f172a !important;
}

.text-\[\#8ba3c7\],
.hover\:text-\[\#8ba3c7\]:hover {
    color: #64748b !important;
}

.text-\[\#7f94b5\] {
    color: #64748b !important;
}

.text-\[\#93c5fd\] {
    color: #2563eb !important;
}

.border-white\/5,
.border-white\/10,
.border-white\/20,
.hover\:border-white\/10:hover,
.divide-white\/10 > :not([hidden]) ~ :not([hidden]) {
    border-color: #e2e8f0 !important;
}

.border-dashed.border-white\/10 {
    border-color: #cbd5e1 !important;
}

.bg-slate-950,
.bg-slate-950\/80,
.bg-slate-900,
.bg-slate-900\/50,
.dark\:bg-slate-900\/50 {
    background-color: #ffffff !important;
}

.bg-slate-800 {
    background-color: #f1f5f9 !important;
}

.text-slate-200,
.text-slate-300,
.text-gray-300 {
    color: #1e293b !important;
}

.text-slate-400,
.text-gray-400,
.text-muted-foreground {
    color: #64748b !important;
}

.bg-white\/5,
.bg-white\/10,
.hover\:bg-white\/10:hover,
.hover\:bg-white\/20:hover,
.focus\:bg-white\/10:focus {
    background-color: #ffffff !important;
}

button.bg-white\/10,
button.hover\:bg-white\/20:hover {
    background-color: #eef2ff !important;
    color: #111827 !important;
}

button.bg-white\/10:hover {
    background-color: #e0e7ff !important;
}

/* White / near-white buttons must use dark text */
button.bg-white,
button.bg-background,
button.bg-primary,
.bg-primary,
.text-primary-foreground,
button.bg-white\/5,
button.bg-white\/10 {
    color: #111827 !important;
}

.text-emerald-300,
.text-emerald-200\/90,
.text-emerald-200\/70 {
    color: #047857 !important;
}

.text-blue-300,
.text-blue-200\/90,
.text-blue-200\/70 {
    color: #1d4ed8 !important;
}

.text-orange-300,
.text-orange-200\/90,
.text-orange-200\/70 {
    color: #c2410c !important;
}

.border-b.border-white\/5,
.border-b.border-white\/10,
.border-r.border-white\/10,
.border-t.border-white\/10 {
    border-color: #e2e8f0 !important;
}

/* Keep colored action buttons readable */
[class*="bg-gradient-to-r"].text-white,
.bg-\[\#2f6bff\],
.bg-\[\#7c4dff\],
.bg-\[\#7c4dff\]\/90,
.planner-ai-write-btn,
.login-btn {
    color: #ffffff !important;
}

.bg-\[\#7c4dff\] .text-\[\#e9ddff\],
.bg-\[\#7c4dff\]\/90 .text-\[\#e9ddff\] {
    color: #f5f3ff !important;
}

.bg-\[\#FEDA43\],
.bg-\[\#F97316\],
.planner-scheme-confirm-btn,
.ecom-step-pill.is-active {
    color: #000000 !important;
}

/* ---- Light-theme contrast: leftover dark-theme text/inputs ---- */
.text-gray-50,
.text-gray-100,
.text-gray-200,
.text-slate-50,
.text-slate-100 {
    color: #0f172a !important;
}

h1.text-white,
h2.text-white,
h3.text-white,
h4.text-white,
p.text-white,
label.text-white,
div.text-white:not(.app-toast),
span.text-white,
li.text-white,
td.text-white,
th.text-white,
a.text-white:not([class*="bg-"]) {
    color: #0f172a !important;
}

.app-toast {
    background: #111827 !important;
    color: #ffffff !important;
}
.text-slate-400,
.text-gray-400,
.text-muted-foreground,
.text-gray-500 {
    color: #334155 !important;
}

.hover\:text-white:hover {
    color: #0f172a !important;
}

.text-cyan-300,
.text-cyan-400 {
    color: #0e7490 !important;
}

.text-purple-400,
.text-fuchsia-400 {
    color: #7c3aed !important;
}

.text-emerald-400 {
    color: #047857 !important;
}

[class*="placeholder\:text-gray"]::placeholder,
::placeholder {
    color: #64748b !important;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
    color: #0f172a !important;
    background-color: #ffffff !important;
    border: 1px solid #94a3b8 !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    border-color: #7c3aed !important;
    outline: none;
}

select,
option,
optgroup {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* Primary action buttons: solid fill + white text */
.bg-primary,
button.bg-primary,
a.bg-primary,
.hover\:bg-primary\/90:hover {
    background-color: #7c3aed !important;
    color: #ffffff !important;
}

.bg-primary *,
button.bg-primary,
a.bg-primary,
.text-primary-foreground {
    color: #ffffff !important;
}

/* Keep white text on actual colored surfaces */
[class*="bg-gradient"] .text-white,
[class*="from-"] .text-white,
.bg-red-500 .text-white,
button.bg-red-500,
.login-btn,
.planner-ai-write-btn,
[class*="bg-gradient-to-r"].text-white,
.bg-\[\#2f6bff\],
.bg-\[\#7c4dff\],
.bg-\[\#7c4dff\]\/90 {
    color: #ffffff !important;
}

button.text-cyan-300,
a.text-cyan-300,
.border-cyan-400\/50 {
    color: #0e7490 !important;
    border-color: #22d3ee !important;
    background-color: #ecfeff !important;
}

/* Mobile planner: keep form rows inside the viewport */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    body > .flex-1 {
        overflow-x: hidden !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #ecommercePlannerPage,
    #plannerInputColumn,
    #plannerOutputColumn,
    #plannerConfigCard,
    #plannerProductSpecBlock {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #ecommercePlannerPage .grid,
    #plannerConfigCard .grid,
    #plannerProductSpecBlock .grid,
    #plannerUploadGrid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #ecommercePlannerPage .grid > *,
    #plannerConfigCard .grid > *,
    #plannerProductSpecBlock .grid > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #plannerProductSpecBlock .grid,
    #plannerConfigCard .grid.grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #plannerConfigCard > .grid.grid-cols-3,
    #plannerSkuSection .grid.grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.375rem !important;
    }

    #plannerUploadGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #plannerModeMainBtn,
    #plannerModeDetailBtn,
    #plannerModeAdBtn,
    #plannerSkuOutputSpecBtn,
    #plannerSkuOutputWhiteBtn,
    #plannerSkuOutputTransparentBtn {
        min-width: 0 !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
        font-size: 12px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #plannerConfigCard input,
    #plannerConfigCard select,
    #plannerConfigCard textarea,
    #plannerProductLength,
    #plannerProductWidth,
    #plannerProductHeight,
    #plannerProductMaterial,
    #plannerPlatform,
    #plannerLanguage,
    #plannerRatio,
    #plannerImageSize,
    #plannerGenerateCount {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .planner-custom-select {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .planner-custom-select > select {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        border: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .planner-custom-select-trigger {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .ecom-step-track-mobile,
    .ecom-step-track {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #plannerConfigCard.is-sku-mode #plannerGenerateBtn {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    #plannerFloatingGenerateWrap.is-visible {
        display: flex !important;
    }

    .planner-result-corner-btn {
        background: rgba(15, 23, 42, 0.88) !important;
        color: #ffffff !important;
    }

    .planner-result-corner-btn-regen {
        background: #10b981 !important;
        color: #ffffff !important;
    }
}