/* MIAMO FOODS EXPORTS - Custom Styling System */

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

:root {
  --primary: #DA1C30;
  --primary-dark: #b81425;
  --primary-light: #ff4d61;
  --secondary: #1e293b;
  --accent: #f59e0b;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: #0b0f19;
  color: #f8fafc;
  overflow-x: hidden;
}

/* Glassmorphism utility */
.glass-panel {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-card {
  background: rgba(30, 41, 59, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  border-color: rgba(218, 28, 48, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(218, 28, 48, 0.2);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #DA1C30;
}

/* Gradient text */
.text-gradient-red {
  background: linear-gradient(135deg, #ff4d61 0%, #DA1C30 50%, #b81425 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-gold {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Animations */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(0.98); }
}

.animate-pulse-subtle {
  animation: pulse-subtle 3s infinite ease-in-out;
}

/* Modal Backdrops */
.modal-backdrop {
  background: rgba(2, 6, 23, 0.85);
  backdrop-filter: blur(8px);
}

/* Data Table Scroll */
.table-container {
  scrollbar-width: thin;
  scrollbar-color: #334155 #0f172a;
}

/* Responsive sidebar */
@media (max-width: 1024px) {
  .sidebar-drawer {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* High contrast readability enhancement for Dark Mode */
.text-slate-400 {
  color: #94a3b8 !important; /* Brighter gray for easy reading */
}

.text-slate-500 {
  color: #a1a1aa !important; /* Crisp secondary text */
}

/* ==========================================================================
   LIGHT THEME DESIGN SYSTEM (Executive Clean Slate & White)
   ========================================================================== */

/* ☀️ LIGHT MODE */
body.light-theme,
body.light-theme #root,
body.light-theme .app-main-layout {
  background-color: #f8fafc !important;
  background: #f8fafc !important;
  color: #0f172a !important;
}
body.light-theme aside {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
body.light-theme header {
  background-color: rgba(248, 250, 252, 0.97) !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
body.light-theme .glass-panel,
body.light-theme .glass-card,
body.light-theme *[class*="bg-slate-900"],
body.light-theme *[class*="bg-slate-950"],
body.light-theme *[class*="bg-[#0B0F17]"],
body.light-theme *[class*="bg-[#131927]"],
body.light-theme *[class*="bg-[#0f172a]"] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}
body.light-theme *[class*="bg-slate-900/"],
body.light-theme *[class*="bg-slate-950/"],
body.light-theme *[class*="bg-slate-800"] {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
body.light-theme input,
body.light-theme select,
body.light-theme textarea {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
body.light-theme nav button { color: #475569 !important; }
body.light-theme nav button.active,
body.light-theme nav button[class*="from-rose"] {
  background: linear-gradient(135deg, #DA1C30, #b91c1c) !important;
  color: #ffffff !important;
}
body.light-theme h1, body.light-theme h2, body.light-theme h3,
body.light-theme h4, body.light-theme h5, body.light-theme label {
  color: #0f172a !important;
}
body.light-theme .text-slate-400 { color: #64748b !important; }
body.light-theme .text-slate-300 { color: #475569 !important; }
body.light-theme .text-slate-500 { color: #64748b !important; }
body.light-theme .text-white { color: #0f172a !important; }
body.light-theme table thead { background-color: #f1f5f9 !important; color: #0f172a !important; }
body.light-theme table td, body.light-theme table th { border-color: #e2e8f0 !important; }

/* ==========================================================================
   LEGACY CURATED THEMES (kept in CSS for backward compat, removed from JS)
   ========================================================================== */


/* 1. 🌸 BABY BLUSH PINK THEME */
body.pink-theme,
body.pink-theme #root,
body.pink-theme .app-main-layout { background-color: #fff0f6 !important; background: #fff0f6 !important; color: #831843 !important; }
body.pink-theme aside { background-color: #fce7f3 !important; border-color: #fbcfe8 !important; }
body.pink-theme header { background-color: rgba(255, 240, 246, 0.95) !important; border-color: #fbcfe8 !important; }
body.pink-theme .glass-panel,
body.pink-theme .glass-card,
body.pink-theme *[class*="bg-slate-900"],
body.pink-theme *[class*="bg-slate-950"],
body.pink-theme *[class*="bg-[#0B0F17]"],
body.pink-theme *[class*="bg-[#131927]"],
body.pink-theme *[class*="bg-[#0f172a]"] {
  background-color: #ffffff !important;
  border-color: #fbcfe8 !important;
  color: #831843 !important;
  box-shadow: 0 4px 20px rgba(219, 39, 119, 0.06) !important;
}
body.pink-theme input, 
body.pink-theme select, 
body.pink-theme textarea,
body.pink-theme *[class*="bg-slate-950/"],
body.pink-theme *[class*="bg-slate-900/"] {
  background-color: #fff5f8 !important;
  border-color: #f472b6 !important;
  color: #831843 !important;
}
body.pink-theme nav button { color: #9d174d !important; }
body.pink-theme nav button.active, body.pink-theme nav button[class*="from-rose"] { background: linear-gradient(135deg, #ec4899, #db2777) !important; color: #ffffff !important; }
body.pink-theme h1, body.pink-theme h2, body.pink-theme h3, body.pink-theme h4, body.pink-theme h5, body.pink-theme label { color: #831843 !important; }
body.pink-theme table thead { background-color: #fce7f3 !important; color: #831843 !important; }
body.pink-theme .text-slate-400, body.pink-theme .text-slate-300, body.pink-theme .text-slate-500 { color: #9d174d !important; }

/* 2. 🍑 KAWAII PEACH MILK */
body.peach-theme { background-color: #fff7ed !important; color: #431407 !important; }
body.peach-theme aside { background-color: #ffedd5 !important; border-color: #fed7aa !important; }
body.peach-theme header { background-color: rgba(255, 247, 237, 0.95) !important; border-color: #fed7aa !important; }
body.peach-theme .glass-panel,
body.peach-theme .glass-card,
body.peach-theme div[class*="bg-slate-900"],
body.peach-theme div[class*="bg-slate-950"],
body.peach-theme div[class*="bg-[#0B0F17]"],
body.peach-theme div[class*="bg-[#131927]"] { background-color: #ffffff !important; border-color: #fed7aa !important; color: #431407 !important; }
body.peach-theme nav button { color: #7c2d12 !important; }
body.peach-theme nav button.active { background: linear-gradient(135deg, #f97316, #ea580c) !important; color: #ffffff !important; }
body.peach-theme h1, body.peach-theme h2, body.peach-theme h3, body.peach-theme h4, body.peach-theme label { color: #431407 !important; }
body.peach-theme input, body.peach-theme select, body.peach-theme textarea { background: #fffbf7 !important; border-color: #fdba74 !important; color: #431407 !important; }

/* 3. 🍵 MATCHA TEA CREAM */
body.matcha-theme { background-color: #f0fdf4 !important; color: #14532d !important; }
body.matcha-theme aside { background-color: #dcfce7 !important; border-color: #bbf7d0 !important; }
body.matcha-theme header { background-color: rgba(240, 253, 244, 0.95) !important; border-color: #bbf7d0 !important; }
body.matcha-theme .glass-panel,
body.matcha-theme .glass-card,
body.matcha-theme div[class*="bg-slate-900"],
body.matcha-theme div[class*="bg-slate-950"] { background-color: #ffffff !important; border-color: #bbf7d0 !important; color: #14532d !important; }
body.matcha-theme nav button { color: #166534 !important; }
body.matcha-theme nav button.active { background: linear-gradient(135deg, #22c55e, #16a34a) !important; color: #ffffff !important; }
body.matcha-theme h1, body.matcha-theme h2, body.matcha-theme h3, body.matcha-theme h4, body.matcha-theme label { color: #14532d !important; }
body.matcha-theme input, body.matcha-theme select, body.matcha-theme textarea { background: #f6fbf7 !important; border-color: #86efac !important; color: #14532d !important; }

/* 4. 🕹️ CYBERPUNK NEON 2077 */
body.cyberpunk-theme { background-color: #030712; color: #f3f4f6; }
body.cyberpunk-theme aside { background-color: #0b0f19 !important; border-color: #06b6d4 !important; }
body.cyberpunk-theme header { background-color: rgba(3, 7, 18, 0.95) !important; border-color: #06b6d4 !important; }
body.cyberpunk-theme .glass-panel, body.cyberpunk-theme .glass-card { background: rgba(15, 23, 42, 0.85) !important; border-color: #06b6d4 !important; box-shadow: 0 0 20px rgba(6, 182, 212, 0.15); }
body.cyberpunk-theme nav button.active { background: linear-gradient(135deg, #06b6d4, #d946ef) !important; color: #ffffff !important; }

/* 5. 👾 RETRO ARCADE RGB */
body.arcade-theme { background-color: #09090b; color: #f4f4f5; }
body.arcade-theme aside { background-color: #121215 !important; border-color: #22c55e !important; }
body.arcade-theme .glass-panel, body.arcade-theme .glass-card { background: rgba(18, 18, 21, 0.9) !important; border-color: #22c55e !important; box-shadow: 0 0 15px rgba(34, 197, 94, 0.2); }
body.arcade-theme nav button.active { background: linear-gradient(135deg, #22c55e, #a855f7) !important; color: #ffffff !important; }

/* 6. 🐍 TACTICAL VIPER GREEN */
body.viper-theme { background-color: #05130b; color: #ecfdf5; }
body.viper-theme aside { background-color: #0a2113 !important; border-color: #84cc16 !important; }
body.viper-theme .glass-panel, body.viper-theme .glass-card { background: rgba(10, 33, 19, 0.85) !important; border-color: #84cc16 !important; }

/* 7. 🏢 WALL STREET CORPORATE */
body.corporate-theme { background-color: #0f172a; color: #f8fafc; }
body.corporate-theme aside { background-color: #1e293b !important; border-color: #38bdf8 !important; }
body.corporate-theme .glass-panel, body.corporate-theme .glass-card { background: rgba(30, 41, 59, 0.8) !important; border-color: #38bdf8 !important; }
body.corporate-theme nav button.active { background: linear-gradient(135deg, #0284c7, #2563eb) !important; color: #ffffff !important; }

/* 8. 💼 SILICON VALLEY TECH */
body.tech-theme { background-color: #f8fafc; color: #0f172a; }
body.tech-theme aside { background-color: #ffffff !important; border-color: #cbd5e1 !important; }
body.tech-theme header { background-color: #ffffff !important; border-color: #cbd5e1 !important; }
body.tech-theme .glass-panel, body.tech-theme .glass-card { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); }
body.tech-theme h1, body.tech-theme h2, body.tech-theme h3, body.tech-theme h4 { color: #0f172a !important; }
body.tech-theme input, body.tech-theme select, body.tech-theme textarea { background: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; }

/* 9. 🏛️ SWISS FINANCIAL */
body.swiss-theme { background-color: #ffffff; color: #000000; }
body.swiss-theme aside { background-color: #f4f4f5 !important; border-color: #dc2626 !important; }
body.swiss-theme .glass-panel, body.swiss-theme .glass-card { background: #ffffff !important; border-color: #18181b !important; }
body.swiss-theme nav button.active { background: #dc2626 !important; color: #ffffff !important; }
body.swiss-theme h1, body.swiss-theme h2, body.swiss-theme h3, body.swiss-theme h4 { color: #000000 !important; }

/* 10. 👑 EMIRATES ROYAL GOLD */
body.emirates-theme { background-color: #0a0a0a; color: #fef3c7; }
body.emirates-theme aside { background-color: #141414 !important; border-color: #f59e0b !important; }
body.emirates-theme .glass-panel, body.emirates-theme .glass-card { background: rgba(20, 20, 20, 0.9) !important; border-color: #f59e0b !important; box-shadow: 0 0 20px rgba(245, 158, 11, 0.15); }
body.emirates-theme nav button.active { background: linear-gradient(135deg, #d97706, #b45309) !important; color: #ffffff !important; }

/* 11. 💎 NORDIC ICE DIAMOND */
body.diamond-theme { background-color: #f0f9ff; color: #0369a1; }
body.diamond-theme aside { background-color: #e0f2fe !important; border-color: #38bdf8 !important; }
body.diamond-theme .glass-panel, body.diamond-theme .glass-card { background: #ffffff !important; border-color: #7dd3fc !important; }

/* 12. 🖤 STEALTH MATTE BLACK */
body.stealth-theme { background-color: #050505; color: #e2e8f0; }
body.stealth-theme aside { background-color: #0d0d0d !important; border-color: #262626 !important; }
body.stealth-theme .glass-panel, body.stealth-theme .glass-card { background: #0d0d0d !important; border-color: #262626 !important; }

/* 13. 🌅 TOKYO NEON DUSK */
body.tokyo-theme { background-color: #1e1b4b; color: #f43f5e; }
body.tokyo-theme aside { background-color: #2e1065 !important; border-color: #f43f5e !important; }
body.tokyo-theme .glass-panel, body.tokyo-theme .glass-card { background: rgba(46, 16, 101, 0.85) !important; border-color: #f43f5e !important; }

/* 14. 🌲 EVERGREEN PINE */
body.evergreen-theme { background-color: #052e16; color: #fef3c7; }
body.evergreen-theme aside { background-color: #064e3b !important; border-color: #10b981 !important; }
body.evergreen-theme .glass-panel, body.evergreen-theme .glass-card { background: rgba(6, 78, 59, 0.85) !important; border-color: #10b981 !important; }

/* 15. 🍇 PURPLE AMETHYST */
body.amethyst-theme { background-color: #1e1035; color: #f3e8ff; }
body.amethyst-theme aside { background-color: #2e1065 !important; border-color: #c084fc !important; }
body.amethyst-theme .glass-panel, body.amethyst-theme .glass-card { background: rgba(46, 16, 101, 0.85) !important; border-color: #c084fc !important; }

/* 16. ☀️ SUNBURST AMBER SLATE */
body.sunburst-theme { background-color: #111827; color: #fef3c7; }
body.sunburst-theme aside { background-color: #1f2937 !important; border-color: #f59e0b !important; }
body.sunburst-theme .glass-panel, body.sunburst-theme .glass-card { background: rgba(31, 41, 55, 0.85) !important; border-color: #f59e0b !important; }

/* 3D Luxury Brand Logo Badge */
.brand-badge-3d {
  background: linear-gradient(135deg, #e11d48 0%, #be123c 50%, #881337 100%);
  box-shadow: 0 4px 15px rgba(225, 29, 72, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Hide Scrollbar Utility Class for Tab Navigation */
.scrollbar-none::-webkit-scrollbar {
  display: none !important;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Brand Logo Container STRICT 100% SOLID WHITE BACKGROUND across ALL themes */
.brand-logo-container,
.brand-logo-wrapper,
div[class*="brand-logo"],
img[class*="brand-logo"],
.brand-logo-box {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 4px !important;
}

/* Product Card Content Protection across ALL Themes (Light, Dark, Pink, Emerald, etc.) */
.product-card-container, 
.product-card-container *,
.product-card-container h4,
.product-card-container .text-white {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}
.product-card-container .text-slate-200,
.product-card-container .text-slate-300,
.product-card-container li span {
  color: #f1f5f9 !important;
}
.product-card-container .text-amber-300,
.product-card-container .text-amber-400 {
  color: #fcd34d !important;
}
.product-card-container .bg-slate-950\/85,
.product-card-container .bg-slate-950\/90,
.product-card-container .bg-slate-950\/70 {
  background-color: rgba(2, 6, 23, 0.88) !important;
}