/* ECONODE Phase 3 — shared visual system
   Palette derived from the ECONODE logo: electric lime + deep eco green + graphite. */
:root {
  color-scheme: light;
  --eco-primary-50:#f7fde8; --eco-primary-100:#edf9c7; --eco-primary-200:#def396;
  --eco-primary-300:#c9eb5c; --eco-primary-400:#b8df32; --eco-primary-500:#9dca1f;
  --eco-primary-600:#76a816; --eco-primary-700:#568313; --eco-primary-800:#426716; --eco-primary-900:#365518;
  --eco-primary:#9dca1f; --eco-primary-hover:#86b41a; --eco-primary-contrast:#122005;
  --eco-secondary:#2f7d1b; --eco-accent:#b8df32;
  --eco-success:#2f8f46; --eco-warning:#c98512; --eco-danger:#c84646; --eco-info:#287ea8;
  --eco-bg:#f6f8f4; --eco-surface:#ffffff; --eco-surface-2:#f0f4ec; --eco-surface-raised:#ffffff;
  --eco-border:#dce5d6; --eco-border-strong:#c8d4c0;
  --eco-text:#172016; --eco-muted:#667260; --eco-heading:#10180f;
  --eco-sidebar:#11160f; --eco-sidebar-2:#182015; --eco-sidebar-text:#d7dfd2;
  --eco-overlay:rgba(11,16,10,.62);
  --eco-shadow-sm:0 1px 2px rgba(23,32,22,.06),0 1px 3px rgba(23,32,22,.05);
  --eco-shadow:0 12px 32px rgba(23,32,22,.08);
  --eco-shadow-lg:0 24px 64px rgba(23,32,22,.14);
  --eco-radius-sm:.65rem; --eco-radius:.9rem; --eco-radius-lg:1.25rem; --eco-radius-xl:1.6rem;
  --eco-focus:0 0 0 3px rgba(157,202,31,.28);
  --eco-transition:160ms cubic-bezier(.2,.8,.2,1);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --eco-bg:#0d110c; --eco-surface:#151b13; --eco-surface-2:#1b2318; --eco-surface-raised:#20291d;
  --eco-border:#293425; --eco-border-strong:#394733;
  --eco-text:#e7eee2; --eco-muted:#a3af9d; --eco-heading:#f5f8f2;
  --eco-sidebar:#090d08; --eco-sidebar-2:#11170f; --eco-sidebar-text:#d7dfd2;
  --eco-overlay:rgba(0,0,0,.72);
  --eco-shadow-sm:0 1px 2px rgba(0,0,0,.25); --eco-shadow:0 12px 32px rgba(0,0,0,.25); --eco-shadow-lg:0 24px 64px rgba(0,0,0,.42);
}
html,body{background:var(--eco-bg);color:var(--eco-text);transition:background-color var(--eco-transition),color var(--eco-transition)}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
::selection{background:rgba(157,202,31,.35);color:var(--eco-heading)}
:focus-visible{outline:none!important;box-shadow:var(--eco-focus)!important}
a,button,input,select,textarea{transition:color var(--eco-transition),background-color var(--eco-transition),border-color var(--eco-transition),box-shadow var(--eco-transition),transform var(--eco-transition)}
button:disabled,[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
[x-cloak]{display:none!important}

/* Brand utility layer used by existing Tailwind/EJS pages. */
.bg-primary{background:var(--eco-primary)!important}.text-primary{color:var(--eco-primary)!important}.border-primary{border-color:var(--eco-primary)!important}
.bg-eco-50{background-color:var(--eco-bg)!important}.bg-eco-100{background-color:var(--eco-primary-100)!important}.bg-eco-500{background-color:var(--eco-primary)!important}
.bg-eco-600{background-color:var(--eco-primary-600)!important}.bg-eco-700{background-color:var(--eco-primary-700)!important}.bg-eco-800{background-color:var(--eco-sidebar-2)!important}.bg-eco-900{background-color:var(--eco-sidebar)!important}
.text-eco-400{color:var(--eco-primary-400)!important}.text-eco-500{color:var(--eco-primary)!important}.text-eco-600{color:var(--eco-primary-600)!important}.border-eco-800{border-color:var(--eco-border)!important}
.hover\:bg-eco-800:hover{background-color:var(--eco-sidebar-2)!important}.hover\:bg-eco-600:hover{background-color:var(--eco-primary-600)!important}

/* Shared surfaces — also normalize old white/slate utility-heavy views in dark mode. */
.eco-card,.bg-white{background-color:var(--eco-surface)!important;color:var(--eco-text)}
.eco-card{border:1px solid var(--eco-border);border-radius:var(--eco-radius-lg);box-shadow:var(--eco-shadow-sm)}
html[data-theme="dark"] .bg-slate-50,html[data-theme="dark"] .bg-gray-50{background-color:var(--eco-bg)!important}
html[data-theme="dark"] .bg-slate-100,html[data-theme="dark"] .bg-gray-100{background-color:var(--eco-surface-2)!important}
html[data-theme="dark"] .bg-slate-200,html[data-theme="dark"] .bg-gray-200{background-color:var(--eco-border)!important}
html[data-theme="dark"] .text-slate-900,html[data-theme="dark"] .text-gray-900,html[data-theme="dark"] .text-slate-800,html[data-theme="dark"] .text-gray-800{color:var(--eco-heading)!important}
html[data-theme="dark"] .text-slate-700,html[data-theme="dark"] .text-gray-700,html[data-theme="dark"] .text-slate-600,html[data-theme="dark"] .text-gray-600{color:var(--eco-text)!important}
html[data-theme="dark"] .text-slate-500,html[data-theme="dark"] .text-gray-500,html[data-theme="dark"] .text-slate-400,html[data-theme="dark"] .text-gray-400{color:var(--eco-muted)!important}
html[data-theme="dark"] .border-slate-100,html[data-theme="dark"] .border-slate-200,html[data-theme="dark"] .border-gray-100,html[data-theme="dark"] .border-gray-200,html[data-theme="dark"] .border-slate-300{border-color:var(--eco-border)!important}
html[data-theme="dark"] .hover\:bg-slate-50:hover,html[data-theme="dark"] .hover\:bg-slate-100:hover,html[data-theme="dark"] .hover\:bg-gray-50:hover{background-color:var(--eco-surface-2)!important}
html[data-theme="dark"] .divide-slate-100>:not([hidden])~:not([hidden]),html[data-theme="dark"] .divide-slate-200>:not([hidden])~:not([hidden]){border-color:var(--eco-border)!important}

/* Forms */
.eco-input,input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea{background-color:var(--eco-surface);color:var(--eco-text);border-color:var(--eco-border)!important}
input::placeholder,textarea::placeholder{color:var(--eco-muted)!important;opacity:.8}
input:focus,select:focus,textarea:focus{border-color:var(--eco-primary)!important;box-shadow:var(--eco-focus)!important;outline:none!important}
select option{background:var(--eco-surface);color:var(--eco-text)}
label{color:inherit}

/* Buttons/components. New pages can use these without depending on Tailwind utilities. */
.eco-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--eco-radius);font-weight:700;padding:.7rem 1rem;border:1px solid transparent;min-height:42px}
.eco-btn-primary{background:var(--eco-primary);color:var(--eco-primary-contrast);box-shadow:0 8px 20px rgba(157,202,31,.18)}.eco-btn-primary:hover{background:var(--eco-primary-hover);transform:translateY(-1px)}
.eco-btn-secondary{background:var(--eco-surface);color:var(--eco-text);border-color:var(--eco-border)}.eco-btn-secondary:hover{background:var(--eco-surface-2);border-color:var(--eco-border-strong)}
.eco-btn-danger{background:var(--eco-danger);color:white}.eco-btn-danger:hover{filter:brightness(.92)}
.eco-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .55rem;border-radius:999px;font-size:.75rem;font-weight:700;background:var(--eco-surface-2);border:1px solid var(--eco-border)}
.eco-badge-success{color:var(--eco-success);background:color-mix(in srgb,var(--eco-success) 12%,var(--eco-surface))}.eco-badge-warning{color:var(--eco-warning);background:color-mix(in srgb,var(--eco-warning) 12%,var(--eco-surface))}.eco-badge-danger{color:var(--eco-danger);background:color-mix(in srgb,var(--eco-danger) 12%,var(--eco-surface))}
.eco-empty{padding:2.5rem 1.25rem;text-align:center;color:var(--eco-muted);border:1px dashed var(--eco-border-strong);border-radius:var(--eco-radius-lg);background:var(--eco-surface)}
.eco-skeleton{position:relative;overflow:hidden;background:var(--eco-surface-2);border-radius:.6rem;min-height:1rem}.eco-skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(157,202,31,.12),transparent);animation:eco-shimmer 1.35s infinite}@keyframes eco-shimmer{100%{transform:translateX(100%)}}

/* Tables */
table{color:var(--eco-text)}
thead{background:var(--eco-surface-2)}
th{color:var(--eco-heading)!important;font-weight:700}td,th{border-color:var(--eco-border)!important}
tbody tr{transition:background-color var(--eco-transition)}tbody tr:hover{background:color-mix(in srgb,var(--eco-primary) 4%,var(--eco-surface))}

/* Modal/dialog normalization */
[role="dialog"],.modal-content{color:var(--eco-text)}
.eco-backdrop{background:var(--eco-overlay);backdrop-filter:blur(6px)}

/* Theme switcher */
.eco-theme-switcher{position:fixed;right:1rem;top:1rem;z-index:95;display:flex;gap:.25rem;padding:.3rem;background:color-mix(in srgb,var(--eco-surface) 92%,transparent);border:1px solid var(--eco-border);border-radius:999px;box-shadow:var(--eco-shadow);backdrop-filter:blur(14px)}
.eco-theme-switcher button{width:34px;height:34px;display:grid;place-items:center;border-radius:999px;color:var(--eco-muted);background:transparent;border:0}.eco-theme-switcher button:hover{color:var(--eco-heading);background:var(--eco-surface-2)}.eco-theme-switcher button[aria-pressed="true"]{background:var(--eco-primary);color:var(--eco-primary-contrast)}
.eco-theme-switcher svg{width:17px;height:17px}
@media(max-width:767px){.eco-theme-switcher{right:.65rem;top:.65rem;transform:scale(.94);transform-origin:top right}}

/* Toast system */
#eco-toast-region{position:fixed;z-index:140;right:1rem;top:4.6rem;width:min(390px,calc(100vw - 2rem));display:flex;flex-direction:column;gap:.65rem;pointer-events:none}
.eco-toast{pointer-events:auto;display:grid;grid-template-columns:38px 1fr 30px;gap:.7rem;align-items:start;padding:.85rem;background:var(--eco-surface-raised);color:var(--eco-text);border:1px solid var(--eco-border);border-left:4px solid var(--eco-info);border-radius:var(--eco-radius);box-shadow:var(--eco-shadow-lg);animation:eco-toast-in .22s ease-out}
.eco-toast[data-type="success"]{border-left-color:var(--eco-success)}.eco-toast[data-type="error"]{border-left-color:var(--eco-danger)}.eco-toast[data-type="warning"]{border-left-color:var(--eco-warning)}.eco-toast[data-type="info"]{border-left-color:var(--eco-info)}
.eco-toast__icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--eco-surface-2);font-weight:900}.eco-toast[data-type="success"] .eco-toast__icon{color:var(--eco-success)}.eco-toast[data-type="error"] .eco-toast__icon{color:var(--eco-danger)}.eco-toast[data-type="warning"] .eco-toast__icon{color:var(--eco-warning)}.eco-toast[data-type="info"] .eco-toast__icon{color:var(--eco-info)}
.eco-toast__title{font-weight:800;color:var(--eco-heading);font-size:.9rem}.eco-toast__message{color:var(--eco-muted);font-size:.82rem;line-height:1.45;margin-top:.15rem;overflow-wrap:anywhere}.eco-toast__close{width:28px;height:28px;border-radius:50%;border:0;background:transparent;color:var(--eco-muted);font-size:1.2rem;line-height:1}.eco-toast__close:hover{background:var(--eco-surface-2);color:var(--eco-heading)}
@keyframes eco-toast-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.eco-toast.is-leaving{opacity:0;transform:translateX(12px);transition:.18s ease}

/* Accessible confirmation dialog */
.eco-confirm{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:1rem;background:var(--eco-overlay);backdrop-filter:blur(6px)}.eco-confirm__panel{width:min(440px,100%);background:var(--eco-surface-raised);border:1px solid var(--eco-border);border-radius:var(--eco-radius-xl);box-shadow:var(--eco-shadow-lg);padding:1.25rem}.eco-confirm__title{font-size:1.05rem;font-weight:850;color:var(--eco-heading)}.eco-confirm__message{margin-top:.45rem;color:var(--eco-muted);line-height:1.55}.eco-confirm__actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.2rem}

/* Sidebar/nav coherence */
aside{scrollbar-color:var(--eco-border-strong) transparent}.custom-scrollbar{scrollbar-color:var(--eco-border-strong) transparent}.custom-scrollbar::-webkit-scrollbar{width:6px;height:6px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--eco-border-strong);border-radius:99px}

/* Hotspot compatibility: dealer color stays available while light/dark neutral surfaces remain readable. */
body.eco-hotspot{background:var(--primary-color,var(--eco-primary));color:var(--eco-text)}
html[data-theme="dark"] body.eco-hotspot .glass{background:rgba(21,27,19,.94)!important;border-color:rgba(255,255,255,.08)!important}
html[data-theme="dark"] body.eco-hotspot .dark-card{background:rgba(12,17,11,.88)!important}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Legacy accent normalization: old indigo/purple accents now resolve to ECONODE brand tones. */
.bg-indigo-600,.bg-purple-600{background-color:var(--eco-primary-600)!important}.bg-indigo-700,.bg-purple-700{background-color:var(--eco-primary-700)!important}.bg-indigo-500,.bg-purple-500{background-color:var(--eco-primary)!important}
.text-indigo-600,.text-purple-600{color:var(--eco-primary-600)!important}.text-indigo-700,.text-purple-700{color:var(--eco-primary-700)!important}.text-indigo-400,.text-purple-400{color:var(--eco-primary-400)!important}
.border-indigo-500,.border-indigo-600,.border-purple-500,.border-purple-600{border-color:var(--eco-primary)!important}.ring-indigo-500,.ring-purple-500{--tw-ring-color:var(--eco-primary)!important}
.bg-indigo-50,.bg-purple-50{background-color:var(--eco-primary-50)!important}.bg-indigo-100,.bg-purple-100{background-color:var(--eco-primary-100)!important}
.hover\:bg-indigo-700:hover,.hover\:bg-purple-700:hover{background-color:var(--eco-primary-700)!important}.hover\:bg-indigo-50:hover,.hover\:bg-purple-50:hover{background-color:var(--eco-primary-50)!important}
html[data-theme="dark"] .bg-indigo-50,html[data-theme="dark"] .bg-indigo-100,html[data-theme="dark"] .bg-purple-50,html[data-theme="dark"] .bg-purple-100{background-color:color-mix(in srgb,var(--eco-primary) 12%,var(--eco-surface))!important}
/* Light-mode treatment for the legacy "modern" hotspot template, which was previously dark-only. */
html[data-theme="light"] body.eco-hotspot .dark-card{background:rgba(255,255,255,.95)!important;border-color:rgba(255,255,255,.45)!important;box-shadow:var(--eco-shadow-lg)}
html[data-theme="light"] body.eco-hotspot .dark-card .text-white{color:var(--eco-heading)!important}
html[data-theme="light"] body.eco-hotspot .dark-card .text-slate-400,html[data-theme="light"] body.eco-hotspot .dark-card .text-slate-300{color:var(--eco-muted)!important}
html[data-theme="light"] body.eco-hotspot .dark-card .bg-slate-800,html[data-theme="light"] body.eco-hotspot .dark-card .bg-slate-900{background:var(--eco-surface-2)!important;color:var(--eco-text)!important}

/* Phase 4 account/security shared helpers */
.eco-page-bg{background:var(--eco-bg);color:var(--eco-text)}
.eco-surface{background:var(--eco-surface);color:var(--eco-text)}
.eco-border{border-color:var(--eco-border)!important}
.eco-heading{color:var(--eco-heading)!important}
.eco-muted{color:var(--eco-muted)!important}
.eco-subtle{background:var(--eco-surface-2);color:var(--eco-text)}
.eco-label{display:block;font-size:.78rem;font-weight:800;color:var(--eco-heading);margin-bottom:.45rem}
.eco-table th,.eco-table td{padding:.9rem 1rem;text-align:left;border-bottom:1px solid var(--eco-border)}


/* Phase 11 high-end product surfaces */
.eco-hero-shell{position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--eco-primary) 20%,var(--eco-surface)) 0%,var(--eco-surface-raised) 42%,color-mix(in srgb,var(--eco-secondary) 12%,var(--eco-surface)) 100%);border:1px solid var(--eco-border);box-shadow:var(--eco-shadow-lg)}
.eco-hero-shell:before{content:"";position:absolute;inset:-35% -20% auto auto;width:460px;height:460px;background:radial-gradient(circle,color-mix(in srgb,var(--eco-primary) 32%,transparent),transparent 66%);filter:blur(4px);opacity:.9;pointer-events:none}.eco-hero-shell:after{content:"";position:absolute;inset:auto auto -42% -18%;width:380px;height:380px;background:radial-gradient(circle,color-mix(in srgb,var(--eco-secondary) 18%,transparent),transparent 68%);pointer-events:none}.eco-hero-content{position:relative;z-index:1}.eco-kpi{background:var(--eco-surface-raised);border:1px solid var(--eco-border);border-radius:22px;padding:1rem 1.05rem;box-shadow:var(--eco-shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.eco-kpi:hover{transform:translateY(-2px);box-shadow:var(--eco-shadow-md);border-color:color-mix(in srgb,var(--eco-primary) 36%,var(--eco-border))}.eco-kpi-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:850;color:var(--eco-muted)}.eco-kpi-value{font-size:1.55rem;line-height:1.1;font-weight:900;color:var(--eco-heading);margin-top:.35rem}.eco-kpi-note{font-size:.78rem;color:var(--eco-muted);margin-top:.45rem}.eco-pulse-dot{width:.62rem;height:.62rem;border-radius:999px;background:var(--eco-success);box-shadow:0 0 0 5px color-mix(in srgb,var(--eco-success) 14%,transparent)}.eco-attention{background:linear-gradient(135deg,color-mix(in srgb,var(--eco-warning) 11%,var(--eco-surface-raised)),var(--eco-surface-raised));border:1px solid color-mix(in srgb,var(--eco-warning) 30%,var(--eco-border));border-radius:24px;box-shadow:var(--eco-shadow-sm)}.eco-attention-item{display:flex;align-items:flex-start;gap:.85rem;padding:.85rem;border-radius:16px;background:color-mix(in srgb,var(--eco-surface) 74%,transparent);border:1px solid var(--eco-border)}.eco-section{background:var(--eco-surface-raised);border:1px solid var(--eco-border);border-radius:24px;box-shadow:var(--eco-shadow-sm)}.eco-chip{display:inline-flex;align-items:center;gap:.38rem;border-radius:999px;padding:.35rem .7rem;font-size:.72rem;font-weight:850;background:var(--eco-surface-2);border:1px solid var(--eco-border);color:var(--eco-muted)}.eco-action-link{display:inline-flex;align-items:center;gap:.45rem;font-weight:850;color:var(--eco-primary-700)}html[data-theme="dark"] .eco-action-link{color:var(--eco-primary-300)}
.eco-nav-group{margin:.8rem .85rem .35rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:rgba(255,255,255,.48)}.eco-nav-subtle{font-size:.72rem;color:rgba(255,255,255,.48)}
.eco-hotspot-preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.eco-template-card{position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--eco-border);background:var(--eco-surface-raised);padding:1rem;box-shadow:var(--eco-shadow-sm)}.eco-template-thumb{height:96px;border-radius:16px;margin-bottom:.85rem;background:linear-gradient(135deg,var(--eco-primary),var(--eco-secondary));position:relative;overflow:hidden}.eco-template-thumb:after{content:"";position:absolute;inset:auto 12px 12px 12px;height:28px;border-radius:12px;background:rgba(255,255,255,.82)}.eco-template-thumb:before{content:"";position:absolute;right:-18px;top:-18px;width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.35)}
@media(max-width:768px){.eco-hero-shell{border-radius:20px}.eco-kpi-value{font-size:1.32rem}.eco-section,.eco-attention{border-radius:18px}}