/**
 * RPS Digital Signage - Comprehensive Dark & Light Theme System (v5)
 * Master Light & Dark SaaS Design System with High Contrast & Perfect Readability.
 */

/* -------------------------------------------------------------
   1. Segmented Theme Toggle Switch (Sun / Moon Pill Slider)
   ------------------------------------------------------------- */
.theme-toggle-switch {
  width: 58px;
  height: 30px;
  background-color: #151A28;
  border: 1px solid #28314A;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px;
  border-radius: 9999px;
  position: relative;
  user-select: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  flex-shrink: 0;
  outline: none;
}

.theme-toggle-switch:hover {
  border-color: #7E22CE;
}

/* The Sliding Thumb */
.theme-toggle-switch .theme-switch-thumb {
  position: absolute;
  top: 2px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #2D354E 0%, #1A2033 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease, border-color 0.25s ease;
  pointer-events: none;
}

/* Dark Mode (Default): Thumb slides to the right (Moon position) */
html:not(.light-theme) .theme-toggle-switch .theme-switch-thumb {
  transform: translateX(28px);
}

/* Light Mode: Thumb is on the left (Sun position) */
html.light-theme .theme-toggle-switch {
  background-color: #E2E8F0 !important;
  border-color: #CBD5E1 !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

html.light-theme .theme-toggle-switch:hover {
  border-color: #7E22CE !important;
}

html.light-theme .theme-toggle-switch .theme-switch-thumb {
  transform: translateX(0) !important;
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Sun & Moon Icons */
.theme-switch-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

/* In Dark Mode (Default): */
html:not(.light-theme) .theme-switch-sun {
  color: #64748B;
  opacity: 0.55;
}
html:not(.light-theme) .theme-switch-moon {
  color: #F8FAFC;
  opacity: 1;
}

/* In Light Mode: */
html.light-theme .theme-switch-sun {
  color: #D97706 !important; /* Golden Amber */
  opacity: 1 !important;
}
html.light-theme .theme-switch-moon {
  color: #94A3B8 !important;
  opacity: 0.45 !important;
}

.theme-toggle-btn {
  background-color: rgba(15, 23, 42, 0.75);
  border: 1px solid #334155;
  color: #E2E8F0;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.theme-toggle-btn:hover {
  background-color: #1E293B;
  border-color: #94A3B8;
  color: #FFFFFF;
}

/* Global Scrollbar Hiding (Tabs & Navigation) */
.no-scrollbar::-webkit-scrollbar,
div[class*="overflow-x-auto"]::-webkit-scrollbar,
#adminTabsNav::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.no-scrollbar,
div[class*="overflow-x-auto"],
#adminTabsNav {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Fallback Utility Classes (without !important so Tailwind responsive classes like hidden lg:flex work) */
.hidden {
  display: none;
}

/* Explicit Responsive Display Overrides (Guarantees desktop & mobile visibility) */
@media (min-width: 640px) {
  .sm\:flex { display: flex !important; }
  .sm\:inline-flex { display: inline-flex !important; }
  .sm\:block { display: block !important; }
  .sm\:inline-block { display: inline-block !important; }
  .sm\:hidden { display: none !important; }
}

@media (min-width: 768px) {
  .md\:flex { display: flex !important; }
  .md\:inline-flex { display: inline-flex !important; }
  .md\:block { display: block !important; }
  .md\:hidden { display: none !important; }
}

@media (min-width: 1024px) {
  .lg\:flex { display: flex !important; }
  .lg\:inline-flex { display: inline-flex !important; }
  .lg\:block { display: block !important; }
  .lg\:hidden { display: none !important; }
}

@media (min-width: 1280px) {
  .xl\:flex { display: flex !important; }
  .xl\:inline-flex { display: inline-flex !important; }
  .xl\:block { display: block !important; }
}

/* -------------------------------------------------------------
   2. Light Theme - Global Base & Foundations
   ------------------------------------------------------------- */
html.light-theme,
html.light-theme body {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

html.light-theme .grid-bg {
  background-image: radial-gradient(rgba(100, 116, 139, 0.16) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  background-color: #F8FAFC !important;
}

/* Typography & Headings */
html.light-theme h1,
html.light-theme h2,
html.light-theme h3,
html.light-theme h4,
html.light-theme h5,
html.light-theme h6 {
  color: #0F172A !important;
}

/* Universal text-white override: Prevent invisible white text on white backgrounds */
html.light-theme :where(h1, h2, h3, h4, h5, h6, p, span, div, strong, li, a, th, td).text-white:not(
  .brand-logo-icon,
  .brand-logo-icon *,
  [class*="bg-purple-600"],
  [class*="bg-purple-600"] *,
  [class*="bg-indigo-600"],
  [class*="bg-indigo-600"] *,
  [class*="bg-emerald-600"],
  [class*="bg-emerald-600"] *,
  [class*="bg-gradient-to"],
  [class*="bg-gradient-to"] *,
  .credit-card-preview,
  .credit-card-preview *,
  #cartCountBadge
) {
  color: #0F172A !important;
}

/* Slate Text Scales */
html.light-theme .text-slate-100,
html.light-theme .text-slate-200 {
  color: #1E293B !important;
}
html.light-theme .text-slate-300 {
  color: #334155 !important;
}
html.light-theme .text-slate-400 {
  color: #64748B !important;
}
html.light-theme .text-slate-500 {
  color: #64748B !important;
}
html.light-theme .text-slate-600 {
  color: #94A3B8 !important;
}

/* High Contrast Accent Colors in Light Mode */
html.light-theme .text-purple-400,
html.light-theme .text-purple-300 {
  color: #7E22CE !important;
}
html.light-theme .text-indigo-400,
html.light-theme .text-indigo-300 {
  color: #4F46E5 !important;
}
html.light-theme .text-emerald-400,
html.light-theme .text-emerald-300 {
  color: #047857 !important;
}
html.light-theme .text-blue-400,
html.light-theme .text-blue-300 {
  color: #1D4ED8 !important;
}
html.light-theme .text-amber-400,
html.light-theme .text-amber-300 {
  color: #B45309 !important;
}
html.light-theme .text-red-400,
html.light-theme .text-red-300,
html.light-theme .text-rose-400,
html.light-theme .text-rose-300 {
  color: #DC2626 !important;
}

/* Hero Heading Gradient in Light Theme */
html.light-theme .bg-gradient-to-r.from-purple-400.via-indigo-300.to-white,
html.light-theme .text-transparent.bg-clip-text {
  background-image: linear-gradient(135deg, #6B21A8 0%, #4F46E5 50%, #7E22CE 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Hero pill chip */
html.light-theme .bg-purple-500\/10.border-purple-500\/30 {
  background-color: #F5F3FF !important;
  border-color: #DDD6FE !important;
  color: #6B21A8 !important;
  box-shadow: 0 1px 3px rgba(126, 34, 206, 0.08) !important;
}

/* -------------------------------------------------------------
   3. Universal Dark Containers & Cards in Light Mode
   ------------------------------------------------------------- */
html.light-theme .bg-slate-900,
html.light-theme .bg-slate-900\/90,
html.light-theme .bg-slate-900\/80,
html.light-theme .bg-slate-900\/95,
html.light-theme .bg-slate-900\/60,
html.light-theme .bg-slate-900\/50,
html.light-theme .bg-slate-950,
html.light-theme .bg-slate-950\/90,
html.light-theme .bg-slate-950\/80,
html.light-theme .bg-slate-950\/85,
html.light-theme .bg-slate-950\/70,
html.light-theme .bg-slate-950\/60,
html.light-theme .bg-slate-950\/50,
html.light-theme .bg-slate-950\/40,
html.light-theme .bg-\[\#0E1322\],
html.light-theme .bg-\[\#0E1322\]\/90,
html.light-theme .bg-\[\#0D1220\],
html.light-theme .bg-\[\#0A0E1A\],
html.light-theme .bg-\[\#0A0E1A\]\/95,
html.light-theme .bg-\[\#080B13\],
html.light-theme .bg-\[\#080B13\]\/90,
html.light-theme .bg-\[\#0B0F19\],
html.light-theme .bg-\[\#131A2E\],
html.light-theme .bg-\[\#161F36\] {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

/* Borders */
html.light-theme .border-slate-800,
html.light-theme .border-slate-800\/80,
html.light-theme .border-slate-800\/60,
html.light-theme .border-slate-800\/40,
html.light-theme .border-slate-700,
html.light-theme .border-slate-700\/80,
html.light-theme .border-slate-700\/60,
html.light-theme .border-\[\#1E293B\] {
  border-color: #E2E8F0 !important;
}

/* -------------------------------------------------------------
   4. Bento Cards & Technical Architecture (.pro-card)
   ------------------------------------------------------------- */
html.light-theme .pro-card {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
}
html.light-theme .pro-card:hover {
  background-color: #FFFFFF !important;
  border-color: #C084FC !important;
  box-shadow: 0 16px 36px -4px rgba(126, 34, 206, 0.12) !important;
  transform: translateY(-2px);
}
html.light-theme .pro-card h3,
html.light-theme .pro-card h2,
html.light-theme .pro-card h1 {
  color: #0F172A !important;
}
html.light-theme .pro-card p {
  color: #475569 !important;
}
html.light-theme .pro-card .border-t {
  border-color: #F1F5F9 !important;
}
html.light-theme .pro-card span.bg-slate-900,
html.light-theme .pro-card .font-mono span {
  background-color: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #334155 !important;
}
html.light-theme .pro-card div[class*="bg-purple-500/10"] {
  background-color: #F5F3FF !important;
  border: 1px solid #DDD6FE !important;
  color: #7E22CE !important;
}

/* Hardware Housing in Landing */
html.light-theme .hardware-housing {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.08), 0 0 25px rgba(168, 85, 247, 0.08) !important;
}

/* Features Grid on Landing */
html.light-theme .grid .p-5.rounded-xl.bg-\[\#0E1322\],
html.light-theme .p-5.rounded-xl.bg-\[\#0E1322\],
html.light-theme .p-6.rounded-2xl.bg-\[\#0E1322\] {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.05) !important;
}
html.light-theme .p-5.rounded-xl.bg-\[\#0E1322\]:hover,
html.light-theme .p-6.rounded-2xl.bg-\[\#0E1322\]:hover {
  border-color: #CBD5E1 !important;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08) !important;
}

/* Preset tab buttons on TV preview */
html.light-theme .preset-tab {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
}
html.light-theme .preset-tab.active,
html.light-theme .preset-tab[class*="border-purple"] {
  background-color: #F5F3FF !important;
  border-color: #7E22CE !important;
  color: #7E22CE !important;
}

/* -------------------------------------------------------------
   5. FAQ Section & Accordion (Fixes Invisible Questions)
   ------------------------------------------------------------- */
html.light-theme .faq-item,
html.light-theme details.faq-item {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
html.light-theme details.faq-item:hover {
  border-color: #CBD5E1 !important;
}
html.light-theme details.faq-item[open] {
  background-color: #FFFFFF !important;
  border-color: #C084FC !important;
  box-shadow: 0 8px 24px -4px rgba(126, 34, 206, 0.08) !important;
}
html.light-theme details.faq-item summary,
html.light-theme details.faq-item summary *,
html.light-theme details.faq-item summary span,
html.light-theme details summary,
html.light-theme details summary * {
  color: #0F172A !important;
}
html.light-theme details.faq-item summary span.font-mono,
html.light-theme details.faq-item summary span[class*="text-purple"] {
  color: #7E22CE !important;
}
html.light-theme details.faq-item p {
  color: #475569 !important;
  border-top: 1px solid #F1F5F9 !important;
}

/* -------------------------------------------------------------
   6. Action Buttons & Status Badges (Fixes Dark Muddy Boxes)
   ------------------------------------------------------------- */
/* Password Reset / Warning / Amber Pills */
html.light-theme .bg-orange-950,
html.light-theme .bg-orange-950\/80,
html.light-theme .bg-orange-950\/60,
html.light-theme button[onclick*="resetDealerPasswordQuick"],
html.light-theme button[onclick*="resetDealerPassword"] {
  background-color: #FFFBEB !important;
  border: 1px solid #FDE68A !important;
  color: #B45309 !important;
}
html.light-theme .bg-orange-950:hover,
html.light-theme button[onclick*="resetDealerPasswordQuick"]:hover,
html.light-theme button[onclick*="resetDealerPassword"]:hover {
  background-color: #FEF3C7 !important;
  border-color: #FCD34D !important;
  color: #92400E !important;
}

/* License / Calendar / Amber Pills */
html.light-theme .bg-amber-950,
html.light-theme .bg-amber-950\/80,
html.light-theme .bg-amber-950\/60,
html.light-theme button[onclick*="openEditLicenseModal"] {
  background-color: #FFFBEB !important;
  border: 1px solid #FDE68A !important;
  color: #B45309 !important;
}
html.light-theme .bg-amber-950:hover,
html.light-theme button[onclick*="openEditLicenseModal"]:hover {
  background-color: #FEF3C7 !important;
  border-color: #FCD34D !important;
  color: #92400E !important;
}

/* Block / Cancel / Delete / Danger (Red / Rose Pills) */
html.light-theme .bg-red-950,
html.light-theme .bg-red-950\/80,
html.light-theme .bg-red-950\/60,
html.light-theme .bg-rose-950,
html.light-theme .bg-rose-950\/80,
html.light-theme .bg-rose-950\/60,
html.light-theme button[onclick*="toggleDealerStatus"],
html.light-theme button[onclick*="deleteDealerConfirm"],
html.light-theme button[onclick*="deleteDealerFromModal"],
html.light-theme button[onclick*="cancelOrderConfirm"],
html.light-theme button[onclick*="softDeleteOrderConfirm"],
html.light-theme button[onclick*="permanentDeleteOrderAction"] {
  background-color: #FFF1F2 !important;
  border: 1px solid #FECDD3 !important;
  color: #E11D48 !important;
}
html.light-theme .bg-red-950:hover,
html.light-theme .bg-rose-950:hover,
html.light-theme button[onclick*="toggleDealerStatus"]:hover,
html.light-theme button[onclick*="deleteDealerConfirm"]:hover,
html.light-theme button[onclick*="deleteDealerFromModal"]:hover,
html.light-theme button[onclick*="cancelOrderConfirm"]:hover,
html.light-theme button[onclick*="softDeleteOrderConfirm"]:hover,
html.light-theme button[onclick*="permanentDeleteOrderAction"]:hover {
  background-color: #FFE4E6 !important;
  border-color: #FDA4AF !important;
  color: #BE123C !important;
}

/* Success / Active / Restore (Emerald / Teal Pills) */
html.light-theme .bg-emerald-950,
html.light-theme .bg-emerald-950\/80,
html.light-theme .bg-emerald-950\/60,
html.light-theme .bg-teal-950,
html.light-theme .bg-teal-950\/80,
html.light-theme button[onclick*="restoreOrderAction"],
html.light-theme button[onclick*="updateOrderStatusAction"] {
  background-color: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
  color: #047857 !important;
}
html.light-theme .bg-emerald-950:hover,
html.light-theme .bg-teal-950:hover,
html.light-theme button[onclick*="restoreOrderAction"]:hover,
html.light-theme button[onclick*="updateOrderStatusAction"]:hover {
  background-color: #D1FAE5 !important;
  border-color: #6EE7B7 !important;
  color: #065F46 !important;
}

/* Status Badges */
html.light-theme span.bg-emerald-950 {
  background-color: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
  color: #047857 !important;
}
html.light-theme span.bg-red-950,
html.light-theme span.bg-rose-950 {
  background-color: #FFF1F2 !important;
  border: 1px solid #FECDD3 !important;
  color: #E11D48 !important;
}
html.light-theme span.bg-amber-950 {
  background-color: #FFFBEB !important;
  border: 1px solid #FDE68A !important;
  color: #B45309 !important;
}
html.light-theme span.bg-purple-950 {
  background-color: #F5F3FF !important;
  border: 1px solid #DDD6FE !important;
  color: #7E22CE !important;
}
html.light-theme span.bg-slate-950,
html.light-theme span.bg-slate-900 {
  background-color: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #475569 !important;
}

/* Neutral Slate Action Buttons */
html.light-theme td a[href*="fatura"],
html.light-theme td button.bg-slate-800 {
  background-color: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #334155 !important;
}
html.light-theme td a[href*="fatura"]:hover,
html.light-theme td button.bg-slate-800:hover {
  background-color: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

/* -------------------------------------------------------------
   7. Brand Logo & Action CTAs: ALWAYS Crisp White Text
   ------------------------------------------------------------- */
.brand-logo-icon,
html.light-theme .brand-logo-icon,
html.light-theme header .brand-logo-icon,
html.light-theme header a .brand-logo-icon,
html.light-theme header a div[class*="from-purple-600"],
html.light-theme footer .brand-logo-icon,
html.light-theme footer div[class*="from-purple-600"],
html.light-theme div[class*="from-purple-600"][class*="to-indigo-600"],
html.light-theme span[class*="from-purple-600"][class*="to-indigo-600"] {
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
html.light-theme .brand-logo-icon *,
html.light-theme header .brand-logo-icon * {
  color: #FFFFFF !important;
}

/* Vibrant Action Buttons */
html.light-theme a[class*="bg-gradient-to"],
html.light-theme button[class*="bg-gradient-to"],
html.light-theme a.bg-purple-600,
html.light-theme button.bg-purple-600,
html.light-theme a.bg-emerald-600,
html.light-theme button.bg-emerald-600,
html.light-theme .bg-red-600,
html.light-theme #cartCountBadge,
html.light-theme a.bg-gradient-to-r,
html.light-theme button.bg-gradient-to-r,
html.light-theme #btnSubmitOrder,
html.light-theme #btnProceedCheckout {
  color: #FFFFFF !important;
}
html.light-theme a[class*="bg-gradient-to"] *,
html.light-theme button[class*="bg-gradient-to"] *,
html.light-theme a.bg-purple-600 *,
html.light-theme button.bg-purple-600 *,
html.light-theme a.bg-emerald-600 *,
html.light-theme button.bg-emerald-600 *,
html.light-theme a.bg-gradient-to-r *,
html.light-theme button.bg-gradient-to-r *,
html.light-theme #btnSubmitOrder *,
html.light-theme #btnProceedCheckout * {
  color: #FFFFFF !important;
}

/* -------------------------------------------------------------
   8. Header & Navigation in Light Mode
   ------------------------------------------------------------- */
html.light-theme header,
html.light-theme .sticky.top-0 {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 20px -5px rgba(15, 23, 42, 0.05) !important;
}

html.light-theme header nav a,
html.light-theme header nav button {
  color: #475569 !important;
}
html.light-theme header nav a:hover,
html.light-theme header nav button:hover {
  color: #7E22CE !important;
}
html.light-theme header nav .active {
  color: #7E22CE !important;
  font-weight: 700 !important;
}

/* Header Brand Text Title */
html.light-theme header a span.text-white,
html.light-theme header a h1,
html.light-theme header a h2 {
  color: #0F172A !important;
}

/* Header Role Subtitle */
html.light-theme #headerRoleSubtitle {
  color: #D97706 !important;
  font-weight: 600 !important;
}

/* Header Actions */
html.light-theme .header-login-btn,
html.light-theme header a[href*="login"],
html.light-theme header a[href*="giris"],
html.light-theme header a[href*="paketler"] {
  background-color: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}
html.light-theme .header-login-btn:hover,
html.light-theme header a[href*="login"]:hover,
html.light-theme header a[href*="giris"]:hover,
html.light-theme header a[href*="paketler"]:hover {
  background-color: #F1F5F9 !important;
  border-color: #7E22CE !important;
  color: #7E22CE !important;
}

html.light-theme #userBadge {
  background-color: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #1E293B !important;
  font-weight: 600 !important;
}

/* Header Change Password */
html.light-theme header button[onclick*="openChangePasswordModal"] {
  background-color: #EFF6FF !important;
  border: 1px solid #BFDBFE !important;
  color: #1D4ED8 !important;
  font-weight: 600 !important;
}
html.light-theme header button[onclick*="openChangePasswordModal"]:hover {
  background-color: #DBEAFE !important;
  color: #1E40AF !important;
}

/* Header Logout */
html.light-theme header button[onclick*="logout"] {
  background-color: #FFF1F2 !important;
  border: 1px solid #FECDD3 !important;
  color: #E11D48 !important;
  font-weight: 600 !important;
}
html.light-theme header button[onclick*="logout"]:hover {
  background-color: #FFE4E6 !important;
  color: #BE123C !important;
}

/* -------------------------------------------------------------
   9. Dashboard Admin & Dealer Layout (Image 1 Fixes)
   ------------------------------------------------------------- */
html.light-theme #sectionAdmin,
html.light-theme #sectionDealer {
  color: #0F172A;
}

html.light-theme #sectionAdmin .bg-slate-900,
html.light-theme #sectionAdmin .bg-slate-900\/90,
html.light-theme #sectionAdmin .bg-slate-900\/95,
html.light-theme #sectionDealer .bg-slate-900,
html.light-theme #sectionDealer .bg-slate-900\/90,
html.light-theme .dashboard-card {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 10px -2px rgba(15, 23, 42, 0.05) !important;
}

/* Overview KPI Stat Cards */
html.light-theme #sectionAdmin .grid > div {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  border-radius: 1rem !important;
}
html.light-theme #sectionAdmin .grid > div:hover {
  border-color: #CBD5E1 !important;
  box-shadow: 0 6px 16px -2px rgba(15, 23, 42, 0.08) !important;
}
html.light-theme #sectionAdmin .grid > div .text-\[11px\] {
  color: #64748B !important;
  font-weight: 700 !important;
}
html.light-theme #statDealers { color: #0F172A !important; }
html.light-theme #statActiveBoards { color: #059669 !important; }
html.light-theme #statKeys { color: #7C3AED !important; }
html.light-theme #statRequests { color: #2563EB !important; }
html.light-theme #statProductsCount { color: #4F46E5 !important; }
html.light-theme #statGrossRevenue { color: #D97706 !important; }

/* Admin Navigation Tabs */
html.light-theme .admin-tab-btn:not(.bg-gradient-to-r) {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
html.light-theme .admin-tab-btn:not(.bg-gradient-to-r):hover {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}
html.light-theme .admin-tab-btn:not(.bg-gradient-to-r) span[id$="Badge"] {
  background-color: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  color: #475569 !important;
}
html.light-theme .admin-tab-btn.bg-gradient-to-r {
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25) !important;
}

/* Order Status Filter Buttons */
html.light-theme .order-filter-btn:not(.bg-purple-600) {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
html.light-theme .order-filter-btn:not(.bg-purple-600):hover {
  background-color: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}
html.light-theme #tabBadge_active { background-color: #F5F3FF !important; color: #7E22CE !important; }
html.light-theme #tabBadge_completed { background-color: #ECFDF5 !important; border-color: #A7F3D0 !important; color: #047857 !important; }
html.light-theme #tabBadge_pending { background-color: #FFFBEB !important; border-color: #FDE68A !important; color: #B45309 !important; }
html.light-theme #tabBadge_cancelled { background-color: #FFF1F2 !important; border-color: #FECDD3 !important; color: #E11D48 !important; }
html.light-theme #tabBadge_deleted { background-color: #F1F5F9 !important; border-color: #CBD5E1 !important; color: #475569 !important; }

/* Table System in Light Mode */
html.light-theme table thead tr {
  background-color: #F8FAFC !important;
  border-bottom: 2px solid #E2E8F0 !important;
}
html.light-theme table thead th {
  color: #475569 !important;
  font-weight: 700 !important;
  border-color: #E2E8F0 !important;
}
html.light-theme table tbody tr {
  border-bottom: 1px solid #F1F5F9 !important;
}
html.light-theme table tbody tr:hover {
  background-color: #F8FAFC !important;
}
html.light-theme table tbody td {
  color: #1E293B !important;
}
html.light-theme table tbody td.text-white,
html.light-theme table tbody td.text-white span,
html.light-theme table tbody td .text-white {
  color: #0F172A !important;
}
html.light-theme table tbody td .text-slate-300 {
  color: #334155 !important;
}
html.light-theme table tbody td .text-slate-400 {
  color: #64748B !important;
}
html.light-theme table tbody td .text-slate-500 {
  color: #94A3B8 !important;
}

/* Subcard inside Tables (Bayi Tanımlı / Otomatik Bayi Oluştur) */
html.light-theme table tr.bg-slate-950\/70 {
  background-color: #F8FAFC !important;
  border-bottom: 2px solid #E2E8F0 !important;
}
html.light-theme table tr.bg-slate-950\/70 td > div {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}
html.light-theme table tr.bg-slate-950\/70 .text-slate-300 {
  color: #334155 !important;
}
html.light-theme table tr.bg-slate-950\/70 .text-slate-400 {
  color: #64748B !important;
}
html.light-theme table tr.bg-slate-950\/70 .text-slate-600 {
  color: #CBD5E1 !important;
}
html.light-theme table tr.bg-slate-950\/70 code {
  background-color: #FFFBEB !important;
  border: 1px solid #FDE68A !important;
  color: #B45309 !important;
}

/* License Keys Chip */
html.light-theme .inline-flex.items-center.gap-1\.5.px-2.py-0\.5.rounded.bg-slate-950 {
  background-color: #FFFBEB !important;
  border: 1px solid #FDE68A !important;
  color: #B45309 !important;
}
html.light-theme div.w-8.h-8.rounded-full.bg-slate-800 {
  background-color: #F5F3FF !important;
  border: 1px solid #DDD6FE !important;
  color: #7E22CE !important;
}

/* Search inputs in Dashboard */
html.light-theme input#dealerSearchInput,
html.light-theme input#orderSearchInput,
html.light-theme input#productSearchInput {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}
html.light-theme input#dealerSearchInput:focus,
html.light-theme input#orderSearchInput:focus,
html.light-theme input#productSearchInput:focus {
  border-color: #7E22CE !important;
  box-shadow: 0 0 0 3px rgba(126, 34, 206, 0.12) !important;
}

/* Secondary Drawers */
html.light-theme #addDealerDrawer,
html.light-theme #addProductDrawer,
html.light-theme #keyGenCard {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08) !important;
}

/* Board Tabs in Light Mode */
html.light-theme .board-tab:not(.bg-blue-600) {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
html.light-theme .board-tab:not(.bg-blue-600):hover {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}
html.light-theme .board-tab.bg-blue-600 {
  background-color: #2563EB !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

/* -------------------------------------------------------------
   10. Modals in Light Mode
   ------------------------------------------------------------- */
html.light-theme .modal-card,
html.light-theme #dealerDetailModal > div,
html.light-theme #editLicenseModal > div,
html.light-theme #changePasswordModal > div,
html.light-theme #editMediaModal > div,
html.light-theme #assignProductModal > div,
html.light-theme #createDealerOrderModal > div,
html.light-theme #createDealerFromOrderModal > div,
html.light-theme #paymentNotificationModal > div,
html.light-theme #pendingPaymentLinkModal > div {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25) !important;
}

html.light-theme #dealerDetailModal h3,
html.light-theme #dealerDetailModal h4,
html.light-theme #editLicenseModal h3,
html.light-theme #changePasswordModal h3,
html.light-theme #createDealerOrderModal h3,
html.light-theme #createDealerFromOrderModal h3,
html.light-theme #paymentNotificationModal h3,
html.light-theme #pendingPaymentLinkModal h4 {
  color: #0F172A !important;
}

html.light-theme #dealerDetailModal .bg-slate-950,
html.light-theme #editLicenseModal .bg-slate-950,
html.light-theme #changePasswordModal .bg-slate-950,
html.light-theme #createDealerOrderModal .bg-slate-950,
html.light-theme #createDealerFromOrderModal .bg-slate-950,
html.light-theme #paymentNotificationModal .bg-slate-950,
html.light-theme #pendingPaymentLinkModal .bg-slate-950\/80 {
  background-color: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

html.light-theme #dealerDetailModal input,
html.light-theme #editLicenseModal input,
html.light-theme #changePasswordModal input,
html.light-theme #createDealerOrderModal input,
html.light-theme #createDealerFromOrderModal input,
html.light-theme #paymentNotificationModal input,
html.light-theme #paymentNotificationModal textarea {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

html.light-theme button[onclick*="closeDealerModal"],
html.light-theme button[onclick*="closeEditLicenseModal"],
html.light-theme button[onclick*="closePaymentNotificationModal"],
html.light-theme button[onclick*="closePendingPaymentLinkModal"] {
  color: #64748B !important;
}
html.light-theme button[onclick*="closeDealerModal"]:hover,
html.light-theme button[onclick*="closeEditLicenseModal"]:hover,
html.light-theme button[onclick*="closePaymentNotificationModal"]:hover,
html.light-theme button[onclick*="closePendingPaymentLinkModal"]:hover {
  color: #0F172A !important;
}

/* -------------------------------------------------------------
   11. Shop, Cart Drawer & Checkout in Light Mode
   ------------------------------------------------------------- */
/* Shop Filter Pills */
html.light-theme .inline-flex.rounded-2xl.bg-\[\#0E1322\] {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
}
html.light-theme .filter-btn {
  color: #64748B !important;
}
html.light-theme .filter-btn:hover {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
}
html.light-theme .filter-btn.bg-purple-600 {
  background-color: #7E22CE !important;
  color: #FFFFFF !important;
}

/* Security Notice Banner */
html.light-theme .shop-security-banner,
html.light-theme .max-w-4xl.mx-auto.mb-8 {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
}
html.light-theme .shop-security-banner .text-white,
html.light-theme .max-w-4xl.mx-auto.mb-8 .text-white {
  color: #0F172A !important;
}
html.light-theme .shop-security-banner .text-slate-400,
html.light-theme .max-w-4xl.mx-auto.mb-8 .text-slate-400 {
  color: #475569 !important;
}
html.light-theme .shop-security-banner strong,
html.light-theme .max-w-4xl.mx-auto.mb-8 strong {
  color: #0F172A !important;
}
html.light-theme .shop-security-banner .bg-slate-900,
html.light-theme .max-w-4xl.mx-auto.mb-8 .bg-slate-900 {
  background-color: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #475569 !important;
}

/* Product Cards */
html.light-theme .pkg-card {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04) !important;
}
html.light-theme .pkg-card:hover {
  border-color: #7E22CE !important;
  box-shadow: 0 15px 35px -5px rgba(126, 34, 206, 0.12) !important;
  transform: translateY(-4px);
}
html.light-theme .featured-card {
  background: linear-gradient(180deg, #FAF5FF 0%, #FFFFFF 100%) !important;
  border: 2px solid #7E22CE !important;
  box-shadow: 0 15px 35px -5px rgba(126, 34, 206, 0.16) !important;
}
html.light-theme .pkg-card h3,
html.light-theme .featured-card h3 {
  color: #0F172A !important;
}
html.light-theme .pkg-card p,
html.light-theme .featured-card p {
  color: #475569 !important;
}
html.light-theme .pkg-card li,
html.light-theme .featured-card li {
  color: #334155 !important;
}
html.light-theme .pkg-card .bg-\[\#05070B\] {
  background-color: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
}
html.light-theme .pkg-card button.bg-slate-900,
html.light-theme .pkg-card a.bg-slate-900 {
  background-color: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #1E293B !important;
}
html.light-theme .pkg-card button.bg-slate-900:hover,
html.light-theme .pkg-card a.bg-slate-900:hover {
  background-color: #F1F5F9 !important;
  border-color: #7E22CE !important;
  color: #7E22CE !important;
}

/* Cart Drawer */
html.light-theme #cartDrawer {
  background-color: #FFFFFF !important;
  border-left: 1px solid #E2E8F0 !important;
  box-shadow: -15px 0 45px rgba(15, 23, 42, 0.12) !important;
}
html.light-theme #cartDrawer h3 {
  color: #0F172A !important;
}
html.light-theme #cartDrawer .text-slate-400 {
  color: #64748B !important;
}
html.light-theme #cartDrawer button[onclick*="toggleCartDrawer"] {
  color: #64748B !important;
}
html.light-theme #cartDrawer button[onclick*="toggleCartDrawer"]:hover {
  color: #0F172A !important;
}
html.light-theme #cartDrawer .cart-item,
html.light-theme #cartDrawer div[id^="cartItem_"] {
  background-color: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}
html.light-theme #cartDrawer .cart-item h4,
html.light-theme #cartDrawer div[id^="cartItem_"] h4 {
  color: #0F172A !important;
}
html.light-theme #cartDrawer .cart-item-price {
  color: #7E22CE !important;
  font-weight: 700 !important;
}
html.light-theme #cartDrawer button[onclick*="updateCartQty"] {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}
html.light-theme #cartDrawer .bg-slate-950,
html.light-theme #cartDrawer .border-t.border-slate-800 {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}
html.light-theme #drawerNet,
html.light-theme #drawerTax {
  color: #0F172A !important;
  font-weight: 700 !important;
}
html.light-theme #drawerTotal {
  color: #7E22CE !important;
  font-weight: 900 !important;
}

/* Checkout Page Cards */
html.light-theme .glass-card {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04) !important;
}
html.light-theme #btnCustIndividual:not(.bg-purple-600),
html.light-theme #btnCustCorporate:not(.bg-purple-600) {
  color: #64748B !important;
}
html.light-theme #btnCustIndividual:not(.bg-purple-600):hover,
html.light-theme #btnCustCorporate:not(.bg-purple-600):hover {
  color: #0F172A !important;
}
html.light-theme label:has(input[name="setupType"]) {
  background-color: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}
html.light-theme label:has(input[name="setupType"]:checked) {
  background-color: #FAF5FF !important;
  border-color: #7E22CE !important;
}
html.light-theme #newDealerFields,
html.light-theme #bankTransferArea {
  background-color: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}
html.light-theme #bankTransferArea .bg-slate-900 {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
}
html.light-theme #bankTransferArea .bg-black\/60 {
  background-color: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #7E22CE !important;
}
html.light-theme .bg-purple-950\/30 {
  background-color: #FAF5FF !important;
  border: 1px solid #DDD6FE !important;
}
html.light-theme .bg-purple-900\/60 {
  background-color: #7E22CE !important;
  color: #FFFFFF !important;
}
html.light-theme button[onclick*="fillTestCard"].bg-slate-900 {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
}
html.light-theme button[onclick*="fillTestCard"].bg-slate-900:hover {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
}

/* Security Notice Box in Checkout */
html.light-theme .p-3\.5.rounded-xl.bg-slate-950\/80 {
  background-color: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
}
html.light-theme .p-3\.5.rounded-xl.bg-slate-950\/80 span,
html.light-theme .p-3\.5.rounded-xl.bg-slate-950\/80 strong {
  color: #047857 !important;
}
html.light-theme .p-3\.5.rounded-xl.bg-slate-950\/80 p {
  color: #065F46 !important;
}

/* Order Summary in Checkout */
html.light-theme #summaryNet,
html.light-theme #summaryTax {
  color: #0F172A !important;
  font-weight: 700 !important;
}
html.light-theme #summaryTotal {
  color: #7E22CE !important;
  font-weight: 900 !important;
}
html.light-theme #summaryCartList > div {
  border-color: #F1F5F9 !important;
}
html.light-theme #summaryCartList strong {
  color: #0F172A !important;
}

/* Credit Card Mockup remains obsidian */
html.light-theme .credit-card-preview {
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 60%, #020617 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.4) !important;
}
html.light-theme .credit-card-preview * {
  color: #FFFFFF !important;
}

/* -------------------------------------------------------------
   12. Form Controls & Inputs Universal in Light Mode
   ------------------------------------------------------------- */
html.light-theme input:not([type="checkbox"]):not([type="radio"]),
html.light-theme textarea,
html.light-theme select {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
html.light-theme input:focus,
html.light-theme textarea:focus,
html.light-theme select:focus {
  border-color: #7E22CE !important;
  box-shadow: 0 0 0 3px rgba(126, 34, 206, 0.15) !important;
}
html.light-theme input::placeholder,
html.light-theme textarea::placeholder {
  color: #94A3B8 !important;
}

/* -------------------------------------------------------------
   13. Login Page in Light Mode
   ------------------------------------------------------------- */
html.light-theme .login-card,
html.light-theme body.min-h-screen > .max-w-md,
html.light-theme .w-full.max-w-md.bg-slate-900\/90 {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.1), 0 0 1px 1px rgba(15, 23, 42, 0.05) !important;
}
html.light-theme .login-card h1 {
  color: #0F172A !important;
}
html.light-theme .login-card p {
  color: #64748B !important;
}
html.light-theme .login-card label {
  color: #475569 !important;
  font-weight: 700 !important;
}
html.light-theme .login-card a {
  color: #64748B !important;
}
html.light-theme .login-card a:hover {
  color: #7E22CE !important;
}
html.light-theme #forgotPasswordModal > div {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25) !important;
}

/* -------------------------------------------------------------
   14. Footer in Light Mode
   ------------------------------------------------------------- */
html.light-theme footer {
  background-color: #F8FAFC !important;
  border-top: 1px solid #E2E8F0 !important;
  color: #475569 !important;
}
html.light-theme footer .text-slate-400 {
  color: #64748B !important;
}
html.light-theme footer a:hover {
  color: #7E22CE !important;
}

/* -------------------------------------------------------------
   15. Smooth Transition Smoothing
   ------------------------------------------------------------- */
body, header, .pro-card, .pkg-card, .glass-card, .login-card, footer, input, textarea, select {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* -------------------------------------------------------------
   16. Master Mobile Responsiveness & No-Overflow Protections
   ------------------------------------------------------------- */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  position: relative;
  -webkit-text-size-adjust: 100%;
}

/* Ensure no media or elements burst through their container on small screens */
img, video, iframe, canvas {
  max-width: 100%;
  height: auto;
}

/* Text Wrapping Protection: Avoid any word or URL causing horizontal scroll */
p, h1, h2, h3, h4, h5, h6, span, a, li, td, th, label, blockquote {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Smooth Touch Momentum Scrolling on horizontally scrollable containers */
.overflow-x-auto, [class*="overflow-x-auto"] {
  -webkit-overflow-scrolling: touch;
}

/* Mobile modal & drawer safeguards: ensure they fit nicely on 320px+ phones */
@media (max-width: 640px) {
  .max-w-md, .max-w-lg, .max-w-xl, .max-w-2xl {
    max-width: calc(100vw - 24px) !important;
  }
}