/* Factory Group Custom Styles & Multi-Theme System */

:root, [data-theme="emerald"] {
    --bg-body: #f8fafc;
    --bg-surface: #ffffff;
    --bg-surface-alt: #f1f5f9;
    --border-color: #e2e8f0;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --header-bg: #064e3b;
    --header-border: #047857;
    --primary-color: #059669;
}

[data-theme="midnight"] {
    --bg-body: #090d16;
    --bg-surface: #111827;
    --bg-surface-alt: #1a2234;
    --border-color: #27354f;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --header-bg: #0f172a;
    --header-border: #334155;
    --primary-color: #10b981;
}

[data-theme="royal"] {
    --bg-body: #f1f5f9;
    --bg-surface: #ffffff;
    --bg-surface-alt: #e2e8f0;
    --border-color: #cbd5e1;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --header-bg: #1e1b4b;
    --header-border: #4338ca;
    --primary-color: #4f46e5;
}

[data-theme="amber"] {
    --bg-body: #fdfaf7;
    --bg-surface: #ffffff;
    --bg-surface-alt: #f5f0eb;
    --border-color: #e7dfd5;
    --text-primary: #1c1917;
    --text-secondary: #78716c;
    --header-bg: #451a03;
    --header-border: #78350f;
    --primary-color: #d97706;
}

[data-theme="forest"] {
    --bg-body: #f0fdf4;
    --bg-surface: #ffffff;
    --bg-surface-alt: #dcfce7;
    --border-color: #bbf7d0;
    --text-primary: #14532d;
    --text-secondary: #166534;
    --header-bg: #052e16;
    --header-border: #14532d;
    --primary-color: #15803d;
}

body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ========================================================
   1. EMERALD TEA (Lush Estate Green)
   ======================================================== */
html[data-theme="emerald"] .glass-header,
body[data-theme="emerald"] .glass-header {
    background: rgba(6, 78, 59, 0.98) !important;
    border-color: #047857 !important;
}

/* ========================================================
   2. MIDNIGHT PRO (Full Dark / Cyber Mode)
   ======================================================== */
html[data-theme="midnight"],
body[data-theme="midnight"] {
    background-color: #090d16 !important;
    color: #f1f5f9 !important;
}
html[data-theme="midnight"] .glass-header,
body[data-theme="midnight"] .glass-header {
    background: rgba(15, 23, 42, 0.98) !important;
    border-color: #334155 !important;
}
html[data-theme="midnight"] .bg-white,
body[data-theme="midnight"] .bg-white {
    background-color: #111827 !important;
    color: #f8fafc !important;
    border-color: #27354f !important;
}
html[data-theme="midnight"] .bg-slate-50,
body[data-theme="midnight"] .bg-slate-50,
html[data-theme="midnight"] .bg-slate-100,
body[data-theme="midnight"] .bg-slate-100 {
    background-color: #1a2234 !important;
    color: #cbd5e1 !important;
    border-color: #2e3e5c !important;
}
html[data-theme="midnight"] .text-slate-800,
html[data-theme="midnight"] .text-slate-900,
html[data-theme="midnight"] .text-slate-700,
body[data-theme="midnight"] .text-slate-800,
body[data-theme="midnight"] .text-slate-900,
body[data-theme="midnight"] .text-slate-700 {
    color: #f8fafc !important;
}
html[data-theme="midnight"] .text-slate-500,
html[data-theme="midnight"] .text-slate-400,
html[data-theme="midnight"] .text-slate-600,
body[data-theme="midnight"] .text-slate-500,
body[data-theme="midnight"] .text-slate-400 {
    color: #94a3b8 !important;
}
html[data-theme="midnight"] .border-slate-100,
html[data-theme="midnight"] .border-slate-200,
body[data-theme="midnight"] .border-slate-100,
body[data-theme="midnight"] .border-slate-200 {
    border-color: #222f46 !important;
}
html[data-theme="midnight"] input,
html[data-theme="midnight"] select,
html[data-theme="midnight"] textarea,
body[data-theme="midnight"] input,
body[data-theme="midnight"] select,
body[data-theme="midnight"] textarea {
    background-color: #182234 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* ========================================================
   3. ROYAL SAPPHIRE (Prestige Deep Indigo & Blue)
   ======================================================== */
html[data-theme="royal"] .glass-header,
body[data-theme="royal"] .glass-header {
    background: rgba(30, 27, 75, 0.98) !important;
    border-color: #4338ca !important;
}
html[data-theme="royal"] .bg-emerald-700,
html[data-theme="royal"] .bg-emerald-800,
body[data-theme="royal"] .bg-emerald-700,
body[data-theme="royal"] .bg-emerald-800 {
    background-color: #4338ca !important;
}
html[data-theme="royal"] .hover\:bg-emerald-800:hover,
body[data-theme="royal"] .hover\:bg-emerald-800:hover {
    background-color: #3730a3 !important;
}
html[data-theme="royal"] .text-emerald-700,
html[data-theme="royal"] .text-emerald-800,
html[data-theme="royal"] .text-emerald-600,
body[data-theme="royal"] .text-emerald-700,
body[data-theme="royal"] .text-emerald-600 {
    color: #4f46e5 !important;
}
html[data-theme="royal"] .bg-emerald-100,
body[data-theme="royal"] .bg-emerald-100 {
    background-color: #e0e7ff !important;
    color: #3730a3 !important;
}
html[data-theme="royal"] .border-emerald-600,
body[data-theme="royal"] .border-emerald-600 {
    border-color: #4f46e5 !important;
}

/* ========================================================
   4. WARM AMBER (Harvest Copper & Bronze)
   ======================================================== */
html[data-theme="amber"],
body[data-theme="amber"] {
    background-color: #fdfaf7 !important;
    color: #1c1917 !important;
}
html[data-theme="amber"] .glass-header,
body[data-theme="amber"] .glass-header {
    background: rgba(69, 26, 3, 0.98) !important;
    border-color: #78350f !important;
}
html[data-theme="amber"] .bg-emerald-700,
html[data-theme="amber"] .bg-emerald-800,
body[data-theme="amber"] .bg-emerald-700,
body[data-theme="amber"] .bg-emerald-800 {
    background-color: #b45309 !important;
}
html[data-theme="amber"] .hover\:bg-emerald-800:hover,
body[data-theme="amber"] .hover\:bg-emerald-800:hover {
    background-color: #92400e !important;
}
html[data-theme="amber"] .text-emerald-700,
html[data-theme="amber"] .text-emerald-800,
html[data-theme="amber"] .text-emerald-600,
body[data-theme="amber"] .text-emerald-700,
body[data-theme="amber"] .text-emerald-600 {
    color: #b45309 !important;
}
html[data-theme="amber"] .bg-emerald-100,
body[data-theme="amber"] .bg-emerald-100 {
    background-color: #fef3c7 !important;
    color: #92400e !important;
}
html[data-theme="amber"] .border-emerald-600,
body[data-theme="amber"] .border-emerald-600 {
    border-color: #d97706 !important;
}

/* ========================================================
   5. HIGHLAND FOREST (High Country Deep Pine & Forest)
   ======================================================== */
html[data-theme="forest"],
body[data-theme="forest"] {
    background-color: #f0fdf4 !important;
    color: #14532d !important;
}
html[data-theme="forest"] .glass-header,
body[data-theme="forest"] .glass-header {
    background: rgba(5, 46, 22, 0.98) !important;
    border-color: #14532d !important;
}
html[data-theme="forest"] .bg-emerald-700,
html[data-theme="forest"] .bg-emerald-800,
body[data-theme="forest"] .bg-emerald-700,
body[data-theme="forest"] .bg-emerald-800 {
    background-color: #15803d !important;
}
html[data-theme="forest"] .hover\:bg-emerald-800:hover,
body[data-theme="forest"] .hover\:bg-emerald-800:hover {
    background-color: #166534 !important;
}
html[data-theme="forest"] .bg-emerald-100,
body[data-theme="forest"] .bg-emerald-100 {
    background-color: #dcfce7 !important;
    color: #14532d !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Hide spin buttons */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
input[type=number] {
    -moz-appearance: textfield;
}

@layer utilities {
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}