/* ==========================================================================
   JALUSI FLOW — GLOBAL THEME OVERRIDE LAYER
   --------------------------------------------------------------------------
   Maps the legacy emerald accent family (Tailwind utilities, inline emerald
   rgba/hex styles and the shared per-page component classes) onto the active
   platform theme tokens so every button, container, table, form and surface
   across every screen follows the tenant palette.

   The active accent is injected by the shell as CSS custom properties:
     --theme-accent       : primary accent color (== tenant accent)
     --theme-accent-deep  : deep/contrast accent (== tenant primary)
     --theme-on-accent    : text color rendered on top of solid accent
   All other accent shades are derived from those two.
   ========================================================================== */

:root {
  --theme-accent-050: color-mix(in srgb, var(--theme-accent, #10b981) 5%, transparent);
  --theme-accent-100: color-mix(in srgb, var(--theme-accent, #10b981) 12%, transparent);
  --theme-accent-200: color-mix(in srgb, var(--theme-accent, #10b981) 22%, transparent);
  --theme-accent-300: color-mix(in srgb, var(--theme-accent, #10b981) 38%, transparent);
  --theme-accent-400: color-mix(in srgb, var(--theme-accent, #10b981) 55%, transparent);
  --theme-accent-600: color-mix(in srgb, var(--theme-accent, #10b981) 88%, #000000);
  --theme-accent-700: color-mix(in srgb, var(--theme-accent-deep, color-mix(in srgb, var(--theme-accent, #10b981) 72%, #000000)) 55%, var(--theme-accent, #10b981));
  --theme-accent-800: var(--theme-accent-deep, color-mix(in srgb, var(--theme-accent, #10b981) 72%, #000000));
  --theme-accent-900: color-mix(in srgb, var(--theme-accent-deep, color-mix(in srgb, var(--theme-accent, #10b981) 72%, #000000)) 85%, #000000);
  --theme-accent-950: color-mix(in srgb, var(--theme-accent-deep, color-mix(in srgb, var(--theme-accent, #10b981) 72%, #000000)) 90%, #000000);
  --theme-accent-ring: var(--theme-accent-400);
}

/* ==========================================================================
   1) TAILWIND EMERALD BACKGROUNDS
   ========================================================================== */

/* default: any remaining emerald bg becomes a mid accent tint */
[class*="bg-emerald-"]:not([class*="hover:"]):not([class*="focus:"]) {
  background-color: var(--theme-accent-300) !important;
}

/* deep solid surfaces / primary buttons */
[class~="bg-emerald-700"],
[class*="bg-emerald-700/"],
[class~="bg-emerald-800"],
[class*="bg-emerald-800/"],
[class~="bg-emerald-900"],
[class*="bg-emerald-900/50"],
[class*="bg-emerald-900/40"],
[class~="bg-emerald-950"],
[class*="bg-emerald-950/40"],
[class*="bg-emerald-950/50"] {
  background-color: var(--theme-accent-800) !important;
}

/* solid accent action surfaces */
[class~="bg-emerald-500"],
[class~="bg-emerald-600"],
[class*="bg-emerald-500/60"],
[class*="bg-emerald-500/80"] {
  background-color: var(--theme-accent) !important;
}
[class~="bg-emerald-400"] {
  background-color: var(--theme-accent-400) !important;
}

/* soft tints */
[class~="bg-emerald-200"],
[class*="bg-emerald-200/"],
[class*="bg-emerald-500/20"],
[class*="bg-emerald-500/30"],
[class*="bg-emerald-900/20"],
[class*="bg-emerald-900/30"],
[class*="bg-emerald-950/20"],
[class*="bg-emerald-950/30"] {
  background-color: var(--theme-accent-200) !important;
}

/* weak tints (must come last so /5 /10 /20 /30 win) */
[class~="bg-emerald-50"],
[class~="bg-emerald-100"],
[class*="bg-emerald-50/"],
[class*="bg-emerald-100/"],
[class*="bg-emerald-500/5"],
[class*="bg-emerald-500/10"],
[class*="bg-emerald-900/5"],
[class*="bg-emerald-900/10"],
[class*="bg-emerald-950/10"] {
  background-color: var(--theme-accent-100) !important;
}

/* ==========================================================================
   2) TAILWIND EMERALD TEXT COLORS
   ========================================================================== */

[class*="text-emerald-"]:not([class*="hover:"]):not([class*="focus:"]) {
  color: var(--theme-accent-800) !important;
}

/* deep text */
[class~="text-emerald-700"],
[class~="text-emerald-800"],
[class~="text-emerald-900"],
[class*="text-emerald-800/"],
[class*="text-emerald-900/"] {
  color: var(--theme-accent-900) !important;
}

/* semi-transparent accent text (icons / faint labels) */
[class*="text-emerald-500/"],
[class*="text-emerald-400/"],
[class*="text-emerald-300/"],
[class*="text-emerald-200/"] {
  color: color-mix(in srgb, var(--theme-accent) 55%, transparent) !important;
}

/* bright accent text (comes last so dual light/dark classes resolve to it) */
[class~="text-emerald-200"],
[class~="text-emerald-300"],
[class~="text-emerald-400"],
[class~="text-emerald-500"],
[class~="text-emerald-600"] {
  color: var(--theme-accent) !important;
}

/* ==========================================================================
   3) TAILWIND EMERALD BORDERS
   ========================================================================== */

[class*="border-emerald-"]:not([class*="hover:"]):not([class*="focus:"]) {
  border-color: var(--theme-accent-200) !important;
}

/* medium / visible borders */
[class~="border-emerald-300"],
[class~="border-emerald-400"],
[class~="border-emerald-500"],
[class*="border-emerald-500/"],
[class~="border-emerald-700"],
[class~="border-emerald-800"],
[class*="border-emerald-800/"] {
  border-color: var(--theme-accent-400) !important;
}

/* strong borders */
[class~="border-emerald-600"],
[class~="border-emerald-900"] {
  border-color: var(--theme-accent-800) !important;
}
[class*="border-emerald-900/"] {
  border-color: var(--theme-accent-300) !important;
}

/* ==========================================================================
   4) GRADIENTS, RINGS, DIVIDERS
   ========================================================================== */

[class*="from-emerald-"] {
  --tw-gradient-from: var(--theme-accent-800) !important;
}
[class*="to-emerald-"] {
  --tw-gradient-to: var(--theme-accent) !important;
}
[class*="via-emerald-"] {
  --tw-gradient-via: var(--theme-accent-400) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}

[class*="ring-emerald-"] {
  --tw-ring-color: var(--theme-accent-ring) !important;
}

[class*="divide-emerald-"] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--theme-accent-300) !important;
}

/* ==========================================================================
   5) INLINE EMERALD STYLES (buttons, links, containers, form controls)
   ========================================================================== */

/* primary buttons / gradient links */
a[style*="linear-gradient"], button[style*="linear-gradient"] {
  background-image: linear-gradient(90deg, var(--theme-accent-800), var(--theme-accent)) !important;
  background-color: var(--theme-accent-800) !important;
  color: #ffffff !important;
  border-color: var(--theme-accent-800) !important;
}

/* tinted accent links/buttons (back links, view buttons, pills) */
a[style*="16,185,129"], a[style*="#059669"], a[style*="#10b981"],
button[style*="16,185,129"], button[style*="#059669"], button[style*="#10b981"],
span[style*="16,185,129"], span[style*="#059669"], span[style*="#10b981"] {
  background-color: var(--theme-accent-100) !important;
  color: var(--theme-accent-800) !important;
  border-color: var(--theme-accent-200) !important;
}

/* tinted containers (empty states, info boxes) */
div[style*="16,185,129"], div[style*="#059669"], div[style*="#10b981"],
section[style*="16,185,129"], section[style*="#059669"], section[style*="#10b981"],
li[style*="16,185,129"], li[style*="#059669"], li[style*="#10b981"] {
  background-color: var(--theme-accent-100) !important;
  border-color: var(--theme-accent-200) !important;
}

/* form controls with inline emerald borders */
input[style*="16,185,129"], select[style*="16,185,129"], textarea[style*="16,185,129"],
input[style*="#059669"], select[style*="#059669"], textarea[style*="#059669"] {
  border-color: var(--theme-accent-300) !important;
  background-color: var(--theme-accent-050) !important;
}

/* ==========================================================================
   6) SHARED PER-PAGE COMPONENT CLASSES
   ========================================================================== */

body .metric-card,
body .tenant-card {
  border-color: var(--theme-accent-200) !important;
}
body .metric-card:hover,
body .tenant-card:hover {
  border-color: var(--theme-accent-400) !important;
}

body .section-label {
  color: var(--theme-accent-800) !important;
}

body .view-btn,
body .filter-pill {
  background-color: var(--theme-accent-100) !important;
  color: var(--theme-accent-800) !important;
  border-color: var(--theme-accent-200) !important;
}
body .view-btn:hover,
body .filter-pill:hover {
  background-color: var(--theme-accent-200) !important;
  border-color: var(--theme-accent-300) !important;
  color: var(--theme-accent-900) !important;
}

body .jalusi-submit-btn,
body .btn-primary {
  background: linear-gradient(90deg, var(--theme-accent-800), var(--theme-accent)) !important;
  color: #ffffff !important;
  border-color: var(--theme-accent-800) !important;
}
body .jalusi-cancel-btn,
body .btn-secondary {
  background: transparent !important;
  color: var(--theme-accent-800) !important;
  border-color: var(--theme-accent-300) !important;
}

body .form-input {
  border: 1px solid var(--theme-accent-300) !important;
  background-color: var(--theme-accent-050) !important;
}
body .form-input:focus {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 0 0 3px var(--theme-accent-100) !important;
  outline: none !important;
}
body .form-label {
  color: var(--theme-accent-800) !important;
}

body .stat-card-dark {
  background: linear-gradient(145deg, var(--theme-accent-deep, color-mix(in srgb, var(--theme-accent) 72%, #000000)) 0%, color-mix(in srgb, var(--theme-accent-deep, color-mix(in srgb, var(--theme-accent) 72%, #000000)) 82%, var(--theme-accent)) 100%) !important;
  border-color: var(--theme-accent-300) !important;
}
body .stat-accent-line {
  background: var(--theme-accent) !important;
}

body .kpi-card {
  border-color: var(--theme-accent-200) !important;
}

/* ==========================================================================
   7) GRADIENT SURFACES, GRADIENT CARDS, ACCENT BARS
   ========================================================================== */

/* inline emerald gradient accents on any element (vertical bars + diagonal
   gradient surfaces that the a/button rule in section 5 could not reach) */
[style*="linear-gradient(180deg"][style*="10b981"],
[style*="linear-gradient(180deg"][style*="059669"],
[style*="linear-gradient(180deg"][style*="064e3b"] {
  background-image: linear-gradient(180deg, var(--theme-accent), var(--theme-accent-800)) !important;
}
[style*="linear-gradient(135deg"][style*="064e3b"],
[style*="linear-gradient(135deg"][style*="059669"] {
  background-image: linear-gradient(135deg, var(--theme-accent-800), var(--theme-accent)) !important;
}

/* dark gradient cards (per-page .grad-card style blocks) */
body .grad-card {
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--theme-accent-deep, #064e3b) 90%, #000000) 0%,
      color-mix(in srgb, var(--theme-accent-deep, #064e3b) 60%, #000000) 50%,
      color-mix(in srgb, var(--theme-accent-deep, #064e3b) 90%, #000000) 100%) !important;
  border-color: var(--theme-accent-200) !important;
}
body .grad-card::after {
  background: radial-gradient(circle, var(--theme-accent-100) 0%, transparent 70%) !important;
}

/* stat card hairline + hover glow */
body .stat-card-dark::before {
  background: linear-gradient(90deg, transparent, var(--theme-accent-300), transparent) !important;
}
body .stat-card-dark:hover {
  box-shadow: 0 12px 32px var(--theme-accent-200) !important;
  border-color: var(--theme-accent-300) !important;
}

/* gradient buttons not covered by jalusi-submit-btn / btn-primary */
body .primary-btn,
body .submit-btn {
  background: linear-gradient(90deg, var(--theme-accent-800), var(--theme-accent)) !important;
  color: #ffffff !important;
  border-color: var(--theme-accent-800) !important;
}

/* small gradient accent bars / fills */
body .sp-label::before {
  background: linear-gradient(180deg, var(--theme-accent), var(--theme-accent-800)) !important;
}
body .resource-bar-fill,
body .progress-fill {
  background: linear-gradient(90deg, var(--theme-accent-800), var(--theme-accent)) !important;
}
body .portal-nav .brand .accent,
body .login-card .card-header .accent-line {
  background: linear-gradient(180deg, var(--theme-accent), var(--theme-accent-800)) !important;
}

/* ==========================================================================
   8) FORM ACCENT COLOR + TRANSLUCENT EMERALD-400 / EMERALD-600 TEXT
   ========================================================================== */

/* native checkbox / radio accent-color utilities */
[class*="accent-emerald-"] {
  accent-color: var(--theme-accent) !important;
}

/* inline emerald-400 (rgba 52,211,153) text accents */
[style*="52,211,153"],
[style*="#34d399"] {
  color: color-mix(in srgb, var(--theme-accent) 55%, transparent) !important;
}

/* translucent emerald-600 text (dim labels on dark surfaces) */
[class*="text-emerald-600/"] {
  color: color-mix(in srgb, var(--theme-accent) 55%, transparent) !important;
}

/* ==========================================================================
   9) HERO / BANNER SLIDE BADGES (translucent accent glass chip, light text)
   ========================================================================== */

/* badge chips over dark banner images in hero carousels
   (overrides the light-surface tint rule so text stays readable) */
body .hero-badge {
  background: color-mix(in srgb, var(--theme-accent) 25%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 45%, transparent) !important;
  color: var(--theme-on-accent, #ffffff) !important;
}

/* dark hero banner overlay gradients (rgba emerald form) follow the theme accent */
[style*="rgba(6,78,59"][style*="linear-gradient(135deg"],
body .hero-gradient {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--theme-accent-800) 85%, transparent),
    color-mix(in srgb, var(--theme-accent-deep) 70%, transparent)) !important;
}

/* light-mode shop hero overlay -> soft dark clarity fade so text stays readable */
@media (prefers-color-scheme: light) {
  body .hero-gradient,
  [style*="rgba(6,78,59"][style*="linear-gradient(135deg"] {
    background: linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0.36) 100%) !important;
  }
}
html:not(.dark) body .hero-gradient,
html:not(.dark) [style*="rgba(6,78,59"][style*="linear-gradient(135deg"] {
  background: linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0.36) 100%) !important;
}

/* ==========================================================================
   10) MODAL + QUICK-ACTION ACCENTS (palette reaches modal chrome)
   ========================================================================== */

/* modal panels: themed border + floating shadow (overrides inline border/shadow) */
body .jalusi-modal {
  border-color: var(--theme-accent-200) !important;
  box-shadow: 0 32px 80px color-mix(in srgb, var(--theme-accent-800, #064e3b) 28%, transparent) !important;
}

/* modal overlay backdrop (rgba(4,21,14,0.7)) follows the theme's deep tone */
[style*="rgba(4,21,14"] {
  background: color-mix(in srgb, var(--theme-accent-deep, #064e3b) 75%, rgba(0,0,0,0.6)) !important;
}

/* modal close buttons & subtle emerald-tint surfaces -> theme accent 050 */
[style*="background: rgba(16,185,129,0.06)"] {
  background: var(--theme-accent-050) !important;
}