/* Standard Micro-Tool Styling System & Comprehensive Light Mode Theme */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Glassmorphism helpers - Default Dark Mode */
.glass-panel,
.glass-card {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(51, 65, 85, 0.6);
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #020617;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Drag and Drop Zone styling */
.dropzone-active {
  border-color: #6366f1 !important;
  background-color: rgba(99, 102, 241, 0.08) !important;
}

/* Toast animations */
.toast-visible {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   Comprehensive Light Mode Theme (Applied when 'dark' class is absent)
   ========================================================================== */

html:not(.dark) {
  color-scheme: light;
}

html:not(.dark) body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

/* Glowing Orbs */
html:not(.dark) .glow-orb {
  opacity: 0.25 !important;
}

/* Header & Sticky Nav */
html:not(.dark) header {
  background: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

html:not(.dark) header .text-white {
  color: #0f172a !important;
}

/* Headings & Typography */
html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) h4,
html:not(.dark) .font-display {
  color: #0f172a !important;
}

html:not(.dark) h1.text-white,
html:not(.dark) h2.text-white,
html:not(.dark) h3.text-white,
html:not(.dark) h4.text-white,
html:not(.dark) .glass-panel h3,
html:not(.dark) .glass-panel h4,
html:not(.dark) .glass-card h3,
html:not(.dark) .glass-card h4 {
  color: #0f172a !important;
}

html:not(.dark) .text-slate-400 {
  color: #475569 !important;
}
html:not(.dark) .text-slate-300 {
  color: #334155 !important;
}
html:not(.dark) .text-slate-200,
html:not(.dark) .text-slate-100 {
  color: #0f172a !important;
}
html:not(.dark) .text-slate-500 {
  color: #64748b !important;
}

/* High Contrast Colored Metrics for Light Mode */
html:not(.dark) .text-emerald-400 {
  color: #059669 !important;
}
html:not(.dark) .text-amber-400 {
  color: #d97706 !important;
}
html:not(.dark) .text-brand-400,
html:not(.dark) .text-indigo-400 {
  color: #4f46e5 !important;
}
html:not(.dark) .text-brand-300 {
  color: #4338ca !important;
}

/* Glass Panels & Containers */
html:not(.dark) .glass-panel,
html:not(.dark) .glass-card {
  background: #ffffff !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Tool specific numbers and KPI indicators */
html:not(.dark) #display-net-profit,
html:not(.dark) #row-gross,
html:not(.dark) #row-net-se,
html:not(.dark) #row-taxable-income {
  color: #0f172a !important;
}

/* General Dark Background Replacements in Light Mode */
html:not(.dark) .bg-slate-950,
html:not(.dark) [class~="bg-slate-950"],
html:not(.dark) [class*="bg-slate-950/"] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .bg-slate-900,
html:not(.dark) [class~="bg-slate-900"],
html:not(.dark) [class*="bg-slate-900/"] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .bg-slate-800,
html:not(.dark) [class~="bg-slate-800"] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

html:not(.dark) [class*="border-slate-800"],
html:not(.dark) [class*="border-slate-700"] {
  border-color: #e2e8f0 !important;
}

/* Gradient Containers in Light Mode */
html:not(.dark) [class*="from-slate-900"],
html:not(.dark) [class*="from-slate-950"] {
  background-image: none !important;
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* Top Banner Bar */
html:not(.dark) [class*="bg-slate-900/40"],
html:not(.dark) [class*="bg-slate-900/30"],
html:not(.dark) [class*="bg-slate-900/50"] {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}

/* Form Controls, Inputs & Textareas */
html:not(.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html:not(.dark) textarea,
html:not(.dark) select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

html:not(.dark) input:focus,
html:not(.dark) textarea:focus,
html:not(.dark) select:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
  outline: none !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #94a3b8 !important;
}

/* ==========================================================================
   PRIMARY ACTION BUTTONS (Notice exact [class~=] to avoid catching hover: states)
   ========================================================================== */
html:not(.dark) .btn-primary,
html:not(.dark) [class~="bg-brand-600"],
html:not(.dark) [class~="bg-indigo-600"],
html:not(.dark) [class~="bg-emerald-600"],
html:not(.dark) [class~="bg-rose-600"],
html:not(.dark) [class~="bg-blue-600"] {
  color: #ffffff !important;
}

html:not(.dark) .btn-primary *,
html:not(.dark) [class~="bg-brand-600"] *,
html:not(.dark) [class~="bg-indigo-600"] *,
html:not(.dark) [class~="bg-emerald-600"] *,
html:not(.dark) [class~="bg-rose-600"] *,
html:not(.dark) [class~="bg-blue-600"] * {
  color: #ffffff !important;
}

/* ==========================================================================
   COPY BUTTONS & ACTION BUTTONS IN LIGHT MODE (CRISP & CLEAR VISIBILITY)
   ========================================================================== */
html:not(.dark) .copy-format-btn,
html:not(.dark) .copy-gallery-btn,
html:not(.dark) .copy-unicode-btn,
html:not(.dark) .copy-res-btn,
html:not(.dark) .copy-btn,
html:not(.dark) #copy-multi-btn,
html:not(.dark) #copy-output-btn,
html:not(.dark) #copy-custom-msg-btn,
html:not(.dark) #copy-css-btn,
html:not(.dark) #copy-epoch-btn,
html:not(.dark) button[class*="copy-"],
html:not(.dark) button[id*="copy-"],
html:not(.dark) button[data-syntax],
html:not(.dark) button[data-char],
html:not(.dark) button[data-text],
html:not(.dark) button[data-res] {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  font-weight: 600 !important;
}

html:not(.dark) .copy-format-btn *,
html:not(.dark) .copy-gallery-btn *,
html:not(.dark) .copy-unicode-btn *,
html:not(.dark) .copy-res-btn *,
html:not(.dark) .copy-btn *,
html:not(.dark) #copy-multi-btn *,
html:not(.dark) #copy-output-btn *,
html:not(.dark) #copy-custom-msg-btn *,
html:not(.dark) #copy-css-btn *,
html:not(.dark) #copy-epoch-btn *,
html:not(.dark) button[class*="copy-"] *,
html:not(.dark) button[id*="copy-"] *,
html:not(.dark) button[data-syntax] *,
html:not(.dark) button[data-char] *,
html:not(.dark) button[data-text] *,
html:not(.dark) button[data-res] * {
  color: #0f172a !important;
}

/* Hover State for Copy Buttons in Light Mode */
html:not(.dark) .copy-format-btn:hover,
html:not(.dark) .copy-gallery-btn:hover,
html:not(.dark) .copy-unicode-btn:hover,
html:not(.dark) .copy-res-btn:hover,
html:not(.dark) .copy-btn:hover,
html:not(.dark) #copy-multi-btn:hover,
html:not(.dark) #copy-output-btn:hover,
html:not(.dark) #copy-custom-msg-btn:hover,
html:not(.dark) #copy-css-btn:hover,
html:not(.dark) #copy-epoch-btn:hover,
html:not(.dark) button[class*="copy-"]:hover,
html:not(.dark) button[id*="copy-"]:hover,
html:not(.dark) button[data-syntax]:hover,
html:not(.dark) button[data-char]:hover,
html:not(.dark) button[data-text]:hover,
html:not(.dark) button[data-res]:hover {
  background-color: #4f46e5 !important;
  border-color: #4338ca !important;
  color: #ffffff !important;
}

html:not(.dark) .copy-format-btn:hover *,
html:not(.dark) .copy-gallery-btn:hover *,
html:not(.dark) .copy-unicode-btn:hover *,
html:not(.dark) .copy-res-btn:hover *,
html:not(.dark) .copy-btn:hover *,
html:not(.dark) #copy-multi-btn:hover *,
html:not(.dark) #copy-output-btn:hover *,
html:not(.dark) #copy-custom-msg-btn:hover *,
html:not(.dark) #copy-css-btn:hover *,
html:not(.dark) #copy-epoch-btn:hover *,
html:not(.dark) button[class*="copy-"]:hover *,
html:not(.dark) button[id*="copy-"]:hover *,
html:not(.dark) button[data-syntax]:hover *,
html:not(.dark) button[data-char]:hover *,
html:not(.dark) button[data-text]:hover *,
html:not(.dark) button[data-res]:hover * {
  color: #ffffff !important;
}

/* Copied Feedback Success State */
html:not(.dark) button.bg-emerald-600,
html:not(.dark) button[class~="bg-emerald-600"] {
  background-color: #059669 !important;
  border-color: #047857 !important;
  color: #ffffff !important;
}
html:not(.dark) button.bg-emerald-600 *,
html:not(.dark) button[class~="bg-emerald-600"] * {
  color: #ffffff !important;
}

/* ==========================================================================
   PRESET BUTTONS, PILLS & TABS IN LIGHT MODE
   ========================================================================== */
html:not(.dark) .ratio-preset-btn,
html:not(.dark) .qty-btn,
html:not(.dark) .tax-preset-btn,
html:not(.dark) .style-tab-btn,
html:not(.dark) .preset-btn {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

html:not(.dark) .ratio-preset-btn *,
html:not(.dark) .qty-btn *,
html:not(.dark) .tax-preset-btn *,
html:not(.dark) .style-tab-btn *,
html:not(.dark) .preset-btn * {
  color: #334155 !important;
}

html:not(.dark) .ratio-preset-btn:hover,
html:not(.dark) .qty-btn:hover,
html:not(.dark) .tax-preset-btn:hover,
html:not(.dark) .style-tab-btn:hover,
html:not(.dark) .preset-btn:hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* Active Preset State */
html:not(.dark) .ratio-preset-btn.active,
html:not(.dark) .ratio-preset-btn[class*="bg-brand"],
html:not(.dark) .qty-btn[class*="bg-brand"],
html:not(.dark) .tax-preset-btn[class*="bg-brand"],
html:not(.dark) .style-tab-btn.active {
  background-color: #4f46e5 !important;
  border-color: #4338ca !important;
  color: #ffffff !important;
}

html:not(.dark) .ratio-preset-btn.active *,
html:not(.dark) .ratio-preset-btn[class*="bg-brand"] *,
html:not(.dark) .qty-btn[class*="bg-brand"] *,
html:not(.dark) .tax-preset-btn[class*="bg-brand"] *,
html:not(.dark) .style-tab-btn.active * {
  color: #ffffff !important;
}

/* Secondary Buttons & Theme Toggle */
html:not(.dark) #theme-toggle,
html:not(.dark) a.bg-slate-900,
html:not(.dark) button.bg-slate-900,
html:not(.dark) .scale-btn:not([class*="bg-brand-600"]),
html:not(.dark) .quality-btn:not([class*="bg-brand-600"]),
html:not(.dark) .bg-mode-btn:not([class*="bg-brand-600"]) {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

html:not(.dark) #theme-toggle:hover,
html:not(.dark) a.bg-slate-900:hover,
html:not(.dark) button.bg-slate-900:hover,
html:not(.dark) .scale-btn:not([class*="bg-brand-600"]):hover,
html:not(.dark) .quality-btn:not([class*="bg-brand-600"]):hover,
html:not(.dark) .bg-mode-btn:not([class*="bg-brand-600"]):hover {
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* File Upload & Dropzone Areas */
html:not(.dark) [class*="border-dashed"] {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
}

html:not(.dark) [class*="border-dashed"]:hover,
html:not(.dark) .dropzone-active {
  background-color: #f8fafc !important;
  border-color: #6366f1 !important;
}

/* SVG & PNG Transparency Grid */
html:not(.dark) .transparency-grid {
  background-color: #ffffff !important;
  background-image: 
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%), 
    linear-gradient(-45deg, #e2e8f0 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #e2e8f0 75%), 
    linear-gradient(-45deg, transparent 75%, #e2e8f0 75%) !important;
  background-size: 20px 20px !important;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px !important;
}

/* Volume Projections Table */
html:not(.dark) table {
  border-color: #e2e8f0 !important;
}

html:not(.dark) thead th {
  background-color: #f8fafc !important;
  color: #475569 !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) tbody tr {
  border-color: #f1f5f9 !important;
}

html:not(.dark) tbody td {
  color: #1e293b !important;
}

html:not(.dark) tbody tr:hover {
  background-color: #f8fafc !important;
}

html:not(.dark) tbody tr.bg-brand-950\/30 {
  background-color: #eef2ff !important;
}

/* Toast */
html:not(.dark) #toast,
html:not(.dark) #copy-toast,
html:not(.dark) #copy-status-toast {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

/* Code & Pre Blocks */
html:not(.dark) pre,
html:not(.dark) #json-output,
html:not(.dark) code:not([class*="bg-brand"]):not([class*="bg-emerald"]) {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

/* Live Clock Epoch Header */
html:not(.dark) #live-epoch-sec {
  background-image: none !important;
  -webkit-text-fill-color: #0f172a !important;
  color: #0f172a !important;
}

/* Range Sliders */
html:not(.dark) input[type="range"] {
  accent-color: #4f46e5;
}

/* Scrollbars */
html:not(.dark) ::-webkit-scrollbar-track {
  background: #f1f5f9;
}
html:not(.dark) ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}
html:not(.dark) ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}