/* =============================================================================
   ODIN PRO POLISH LAYER — Professional Light + Gradient Accent
   Loaded AFTER odin-redesign.css. Adds:
    1. Gradient accent system (indigo → violet → sky) used on key surfaces
    2. Hero refinements (gradient title, subtle aurora bg, refined CTA)
    3. Polish on typography rhythm, focus rings, motion timing
    4. A11y: visible focus, contrast guarantees, reduced-motion respect
   Spec: light + professional + accent-gradient.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

/* ── 1. Gradient tokens ──────────────────────────────────────────────────── */
body.light{
  /* Sophisticated 3-stop accent — used everywhere we want “signal of intent” */
  --pro-grad: linear-gradient(135deg, #4338ca 0%, #6366f1 38%, #0ea5e9 100%);
  --pro-grad-soft: linear-gradient(135deg,
    rgba(67,56,202,.08) 0%, rgba(99,102,241,.06) 50%, rgba(14,165,233,.08) 100%);
  --pro-grad-deep: linear-gradient(135deg, #3730a3 0%, #4f46e5 38%, #0284c7 100%);
  --pro-grad-text: linear-gradient(120deg, #312e81 0%, #4338ca 35%, #0369a1 100%);

  /* Brand-tinted halo + border */
  --pro-ring: 0 0 0 4px rgba(99,102,241,.18);
  --pro-ring-soft: 0 0 0 3px rgba(99,102,241,.10);
  --pro-shadow-glow: 0 18px 48px -12px rgba(67,56,202,.32),
                     0 6px 16px -8px rgba(2,132,199,.18);

  /* Display font for headlines */
  --pro-font-display: 'Geist', system-ui, sans-serif;
}

/* ── 2. Base typography rhythm ───────────────────────────────────────────── */
body.light{
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.light h1,
body.light h2,
body.light h3,
body.light .section-title,
body.light .landing-section-title h2,
body.light .card-header{
  font-family: var(--pro-font-display) !important;
  letter-spacing: -.018em !important;
}

/* ── 3. Hero — gradient title, aurora bg, refined CTA ────────────────────── */
body.light .landing-hero-wrap{
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(99,102,241,.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 12% 30%, rgba(14,165,233,.08) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 88% 70%, rgba(67,56,202,.08) 0%, transparent 50%),
    var(--re-surface) !important;
  border-bottom: 1px solid var(--re-border) !important;
  position: relative !important;
  overflow: hidden;
}

/* Subtle dotted grid (preserve existing) plus a soft horizon line */
body.light .landing-hero-wrap::before{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 78%,
                    rgba(99,102,241,.10) 79%, rgba(99,102,241,.10) 80%,
                    transparent 81%) ;
  pointer-events:none;
  opacity:.7;
}

body.light .landing-title,
body.light .landing-hero-title-redesign{
  background: var(--pro-grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-family: var(--pro-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -.045em !important;
  line-height: 1 !important;
  /* fallback for browsers that don't support background-clip */
  text-shadow: 0 2px 0 rgba(67,56,202,.04);
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  body.light .landing-title,
  body.light .landing-hero-title-redesign{
    -webkit-text-fill-color: var(--re-text) !important;
    color: var(--re-text) !important;
    background: none !important;
  }
}

body.light .landing-subtitle{
  font-weight: 450 !important;
  letter-spacing: -.005em !important;
  color: var(--re-text-2) !important;
}

/* Hero CTA: gradient with depth + crisp focus */
body.light .landing-hero-content .btn-cyan,
body.light .landing-hero-wrap .btn-cyan{
  background: var(--pro-grad) !important;
  background-size: 200% 200% !important;
  background-position: 0% 50% !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 6px 20px -6px rgba(67,56,202,.45),
    0 2px 6px rgba(2,132,199,.14) !important;
  transition: background-position .45s var(--re-ease),
              transform .25s var(--re-ease),
              box-shadow .25s var(--re-ease) !important;
}
body.light .landing-hero-content .btn-cyan:hover,
body.light .landing-hero-wrap .btn-cyan:hover{
  background-position: 100% 50% !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 14px 36px -10px rgba(67,56,202,.55),
    0 4px 12px rgba(2,132,199,.20) !important;
}
body.light .landing-hero-content .btn-cyan:focus-visible,
body.light .landing-hero-wrap .btn-cyan:focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px rgba(99,102,241,.45),
    0 14px 36px -10px rgba(67,56,202,.55) !important;
}

/* Search box: gradient border on focus-within */
body.light .landing-search-wrap,
body.light .hero-search-box.landing-search-wrap{
  position: relative;
  border: 1px solid var(--re-border-2) !important;
  background: #fff !important;
  border-radius: var(--re-r-lg) !important;
  transition: box-shadow .25s var(--re-ease), border-color .25s var(--re-ease);
}
body.light .landing-search-wrap:focus-within{
  border-color: transparent !important;
  box-shadow:
    0 0 0 1.5px transparent,
    0 0 0 1.5px var(--re-primary),
    0 8px 24px -8px rgba(67,56,202,.30) !important;
  background-image: linear-gradient(#fff,#fff), var(--pro-grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* ── 4. Stats counter — gradient values ──────────────────────────────────── */
body.light .landing-stats-counter strong,
body.light .ls-val,
body.light .stat-val,
body.light .kpi-val{
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums !important;
  background: var(--pro-grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ── 5. Section titles — gradient slashes ────────────────────────────────── */
body.light .landing-section-title h2{
  position: relative;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  color: var(--re-text) !important;
}
body.light .landing-section-title h2::before{
  content:'';
  display: inline-block;
  width: 28px; height: 3px;
  margin-right: 14px;
  vertical-align: middle;
  border-radius: 2px;
  background: var(--pro-grad);
}

body.light .section-title{
  position: relative;
  padding-left: 14px !important;
}
body.light .section-title::before{
  content:'';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px;
  border-radius: 2px;
  background: var(--pro-grad);
}

/* ── 6. Navbar brand — gradient ODIN wordmark ────────────────────────────── */
body.light .navbar-brand{
  font-family: var(--pro-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  background: var(--pro-grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  body.light .navbar-brand{
    -webkit-text-fill-color: var(--re-primary) !important;
    color: var(--re-primary) !important;
    background: none !important;
  }
}

/* Navbar SVG triangles → gradient */
body.light .navbar-brand svg path[stroke="#00d4ff"],
body.light .sidebar-brand svg path[stroke="#00d4ff"],
body.light .landing-valknut-logo svg path[stroke="#00d4ff"],
body.light #odin-pwa-splash svg path[stroke="#00d4ff"]{ stroke:#0ea5e9 !important }

body.light .navbar-brand svg path[stroke="#725AC1"],
body.light .sidebar-brand svg path[stroke="#725AC1"],
body.light .landing-valknut-logo svg path[stroke="#725AC1"],
body.light #odin-pwa-splash svg path[stroke="#725AC1"]{ stroke:#4338ca !important }

body.light .navbar-brand svg circle[fill="#00d4ff"],
body.light .landing-valknut-logo svg circle[fill="#00d4ff"]{ fill:#0ea5e9 !important }
body.light .navbar-brand svg circle[fill="#725AC1"],
body.light .landing-valknut-logo svg circle[fill="#725AC1"]{ fill:#4338ca !important }

body.light .navbar-brand svg path[stroke^="url"],
body.light .sidebar-brand svg path[stroke^="url"],
body.light .landing-valknut-logo svg path[stroke^="url"]{
  stroke: #6366f1 !important;
}

/* ── 7. Tool tiles — accent gradient line on hover ───────────────────────── */
body.light .tool-tile{
  position: relative !important;
  overflow: hidden;
}
body.light .tool-tile::after{
  content:'';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--pro-grad);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--re-ease);
}
body.light .tool-tile:hover::after{ transform: scaleX(1) }

/* ── 8. Sidebar active state — left gradient bar ─────────────────────────── */
body.light .sidebar-nav a.active::before,
body.light .sidebar-nav a[aria-current="page"]::before{
  background: var(--pro-grad) !important;
  width: 3px !important;
  border-radius: 0 2px 2px 0 !important;
  box-shadow: 0 0 0 0 transparent;
}

/* ── 9. Primary buttons (.btn-go, .btn-primary, auth-btn) ────────────────── */
body.light .btn-go,
body.light .btn-primary,
body.light .auth-btn,
body.light .landing-cta-btn,
body.light .newsletter-row button,
body.light .newsletter-section button{
  background: var(--pro-grad) !important;
  background-size: 200% 200% !important;
  background-position: 0% 50% !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  transition: background-position .4s var(--re-ease),
              transform .2s var(--re-ease),
              box-shadow .2s var(--re-ease) !important;
}
body.light .btn-go:hover,
body.light .btn-primary:hover,
body.light .auth-btn:hover,
body.light .landing-cta-btn:hover,
body.light .newsletter-row button:hover,
body.light .newsletter-section button:hover{
  background-position: 100% 50% !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -8px rgba(67,56,202,.40) !important;
}
body.light .btn-go:active,
body.light .btn-primary:active,
body.light .auth-btn:active,
body.light .landing-cta-btn:active{ transform: scale(.98) !important }

/* ── 10. Card headers — refined ─────────────────────────────────────────── */
body.light .card-header{
  background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%) !important;
  border-bottom: 1px solid var(--re-border) !important;
  font-weight: 600 !important;
  font-size: .82rem !important;
  letter-spacing: -.005em !important;
}
body.light .card-header i{
  background: var(--pro-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  body.light .card-header i{ color: var(--re-primary) !important; -webkit-text-fill-color: var(--re-primary) !important }
}

/* ── 11. Badges — sharper, mono caps for status ──────────────────────────── */
body.light .badge{
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: .66rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  border: 1px solid transparent;
}

/* ── 12. Focus visible — gradient ring on all interactive ────────────────── */
body.light a:focus-visible,
body.light button:focus-visible,
body.light input:focus-visible,
body.light select:focus-visible,
body.light textarea:focus-visible,
body.light [role="button"]:focus-visible,
body.light [tabindex]:focus-visible{
  outline: none !important;
  box-shadow: var(--pro-ring) !important;
  border-color: var(--re-primary) !important;
}
body.light input:focus,
body.light select:focus,
body.light textarea:focus{
  border-color: var(--re-primary) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.14) !important;
}

/* ── 13. Feature cards — subtle gradient sweep on hover ──────────────────── */
body.light .feature-card{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--re-border) !important;
  background: var(--re-surface) !important;
  border-radius: var(--re-r-md) !important;
  transition: transform .3s var(--re-ease), box-shadow .3s var(--re-ease), border-color .3s var(--re-ease);
}
body.light .feature-card::before{
  content:'';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  background: var(--pro-grad);
  opacity: 0;
  transition: opacity .3s var(--re-ease);
}
body.light .feature-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 36px -12px rgba(67,56,202,.20),
              0 4px 12px -4px rgba(0,0,0,.06) !important;
  border-color: #c7d2fe !important;
}
body.light .feature-card:hover::before{ opacity: 1 }
body.light .feature-card .fc-icon{
  background: var(--pro-grad-soft) !important;
  color: #4338ca !important;
  border: 1px solid #e0e7ff;
  border-radius: 10px !important;
}

/* ── 14. Data source cards — subtle hover lift + gradient border on hover ── */
body.light .ds-card{
  background: var(--re-surface) !important;
  border: 1px solid var(--re-border) !important;
  transition: all .25s var(--re-ease);
}
body.light .ds-card:hover{
  border-color: #c7d2fe !important;
  background: linear-gradient(180deg, #fafbff, #ffffff) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(67,56,202,.18);
}
body.light .ds-card i{
  background: var(--pro-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  body.light .ds-card i{ color: var(--re-primary) !important; -webkit-text-fill-color: initial !important }
}

/* ── 15. Cookie banner & toast — soften ──────────────────────────────────── */
body.light #cookie-banner > div,
body.light #odin-cc{
  border-top: 2px solid transparent !important;
  border-image: var(--pro-grad) 1 !important;
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── 16. Lang toggle — gradient active ───────────────────────────────────── */
body.light .lang-toggle button.active{
  background: var(--pro-grad) !important;
  color: #fff !important;
}

/* ── 17. Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  body.light *{
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  body.light .landing-hero-content .btn-cyan,
  body.light .btn-go,
  body.light .btn-primary{
    background-position: 0% 50% !important;
  }
}

/* ── 18. High contrast / forced-colors fallback ──────────────────────────── */
@media (forced-colors: active){
  body.light .landing-title,
  body.light .ls-val,
  body.light .navbar-brand{
    -webkit-text-fill-color: CanvasText !important;
    color: CanvasText !important;
    background: none !important;
  }
}

/* ── 19. Print ───────────────────────────────────────────────────────────── */
@media print{
  body.light .landing-hero-wrap::before,
  body.light .landing-hero-wrap::after{ display:none !important }
}

/* ── 20. Selection ───────────────────────────────────────────────────────── */
body.light ::selection{ background: rgba(99,102,241,.20); color: var(--re-text) }

/* ── 21. ADMIN PANEL — light theme override (bug #532, #533) ─────────────── */
/* Original admin-header used a slate-900 → dark-blue gradient (the "bara neagra"
   the user wanted gone). Replace with refined light header that still reads
   as authoritative. Pills had hardcoded dark hex colors — re-tone them. */
body.light #admin-panel .admin-shell{
  background: var(--re-surface) !important;
  border: 1px solid var(--re-border);
  height: calc(100vh - var(--navbar-h, 60px)) !important;
}
body.light #admin-panel .admin-header{
  background: linear-gradient(135deg, var(--re-primary) 0%, #4f46e5 50%, #0ea5e9 100%) !important;
  color: #fff !important;
  border-bottom: none !important;
  padding: 12px 18px !important;
}
body.light #admin-panel .admin-header h3{
  color: #fff !important;
  font-family: var(--pro-font-display, 'Space Grotesk', system-ui) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
}
body.light #admin-panel .admin-header button{
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  color: #fff !important;
}
body.light #admin-panel .admin-header button:hover{
  background: rgba(255,255,255,.22) !important;
}
body.light #admin-panel .admin-sidebar{
  background: var(--re-bg) !important;
  border-right: 1px solid var(--re-border) !important;
}
body.light #admin-panel .admin-tab{
  color: var(--re-text-3) !important;
}
body.light #admin-panel .admin-tab:hover{
  background: var(--re-surface-hover, #f8faff) !important;
  color: var(--re-text) !important;
}
body.light #admin-panel .admin-tab.active{
  background: var(--re-primary-soft) !important;
  color: var(--re-primary) !important;
  border-left-color: var(--re-primary) !important;
}
body.light #admin-panel .admin-content{
  background: var(--re-surface) !important;
  color: var(--re-text) !important;
}
body.light #admin-panel #admin-content table th{
  background: var(--re-surface-2) !important;
  color: var(--re-text-3) !important;
  border-bottom-color: var(--re-border) !important;
}
body.light #admin-panel #admin-content table td{
  border-bottom-color: var(--re-border) !important;
  color: var(--re-text) !important;
}
body.light #admin-panel #admin-content table tr:hover td{
  background: var(--re-primary-soft) !important;
}
body.light #admin-panel .pill.admin{      background:#fee2e2 !important; color:#991b1b !important; }
body.light #admin-panel .pill.demo{       background:#fef3c7 !important; color:#92400e !important; }
body.light #admin-panel .pill.user{       background:#dbeafe !important; color:#1e40af !important; }
body.light #admin-panel .pill.active{     background:#dcfce7 !important; color:#166534 !important; }
body.light #admin-panel .pill.unsubscribed{ background:#f1f5f9 !important; color:#475569 !important; }
body.light #admin-panel .ad-action-btn{
  background: var(--re-surface) !important;
  border: 1px solid var(--re-border) !important;
  color: var(--re-text-2) !important;
}
body.light #admin-panel .ad-action-btn:hover{
  background: var(--re-surface-hover, #f8faff) !important;
  color: var(--re-text) !important;
}
body.light #admin-panel .ad-action-btn.danger:hover{
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-color: #fca5a5 !important;
}

/* ── 22. PWA SPLASH on /admin (bug #526) — keep beige bg only on PWA ─────── */
/* The splash should only show in standalone PWA mode (per the JS guard).
   Make sure that even if the visibility flickers, bg matches light theme
   so it doesn't read as a "black screen". */
body.light #odin-pwa-splash{
  background: var(--re-surface, #ffffff) !important;
  color: var(--re-text) !important;
}
body.light #odin-pwa-splash > div > div[style*="font-size:3.2rem"]{
  color: var(--re-primary, #4338ca) !important;
}

/* ── 23. Company header — fix white text leak (bug #528, retry) ──────────── */
/* Real root cause: JS injects markup into .section-pane with hardcoded inline
   `style="color:rgba(255,255,255,...)"` for the dark theme. Those inline styles
   render white-on-white in light theme. !important on a real declaration beats
   non-!important inline styles, so we force readable color on every descendant
   except elements whose color is intentionally white (chips, KPIs, dark
   buttons that explicitly opt back to white via own !important rules).
   Previous fix had an EMPTY rule body — it did nothing. */
body.light #company-profile .section-pane,
body.light #company-profile .section-pane *:not(.btn-cyan):not(.tag):not(.badge):not(.kpi-val):not(.kpi-lbl):not([class*="chip"]):not(i.bi):not(.text-success):not(.text-danger):not(.text-warning):not(.flag-high):not(.flag-med):not(.flag-low){
  color: var(--re-text, #1f2937) !important;
}
body.light #company-profile .section-pane .card,
body.light #company-profile .section-pane .card *,
body.light #company-profile .section-pane table,
body.light #company-profile .section-pane table *,
body.light #company-profile .section-pane .alert,
body.light #company-profile .section-pane .alert *,
body.light #company-profile .section-pane .stat-box,
body.light #company-profile .section-pane .stat-box *,
body.light #company-profile .section-pane h1,
body.light #company-profile .section-pane h2,
body.light #company-profile .section-pane h3,
body.light #company-profile .section-pane h4,
body.light #company-profile .section-pane p,
body.light #company-profile .section-pane li,
body.light #company-profile .section-pane td,
body.light #company-profile .section-pane th,
body.light #company-profile .section-pane label,
body.light #company-profile .section-pane span:not(.badge):not(.tag):not([class*="kpi"]):not([class*="chip"]){
  color: var(--re-text, #1f2937) !important;
}
/* Background safety net: many JS-rendered cards inherit dark bg from inline styles.
   Force light card background where the section-pane wraps them. */
body.light #company-profile .section-pane .card,
body.light #company-profile .section-pane .stat-box{
  background: #ffffff !important;
  border: 1px solid var(--re-border, #e5e7eb) !important;
}
/* Specific re-allow muted color for .muted, .text-muted, etc. */
body.light #company-profile .section-pane .muted,
body.light #company-profile .section-pane .text-muted,
body.light #company-profile .section-pane .source-note{
  color: var(--re-text-3) !important;
}

/* Bug #548 — KPI boxes IN HEADER (.kpi-row inside .company-header):
   numbers (kpi-val) were styled white-on-white because odin-redesign.css
   applies `.company-header * { color:#fff }` but the KPI cards have a light
   white-ish background. Force dark on KPI cards' content. Theme-independent
   (theme is always 'light' anyway since dark mode removed) — and uses
   maximum specificity #company-profile #company-header to beat any rule. */
#company-profile #company-header .kpi-row{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 14px !important;
}
#company-profile #company-header .kpi-row .kpi-item,
#company-profile #company-header .kpi-item{
  background: #ffffff !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  flex: 1 1 140px !important;
  min-width: 130px !important;
}
#company-profile #company-header .kpi-item .kpi-val,
#company-profile #company-header .kpi-item strong{
  color: #1f2937 !important;
  font-weight: 800 !important;
  background: transparent !important;
}
#company-profile #company-header .kpi-item .kpi-lbl,
#company-profile #company-header .kpi-item small,
#company-profile #company-header .kpi-item span:not(strong){
  color: #6b7280 !important;
  background: transparent !important;
}
/* Chips lângă numele firmei (Activ, TVA, e-Fact, RO, ROONRC...) — păstrăm
   white-on-translucent pe gradient-ul albastru, dar cu mai mult contrast. */
#company-profile #company-header .ch-chip,
#company-profile #company-header .ch-chips > *,
#company-profile #company-header [class*="chip"]:not(.kpi-item){
  background: rgba(255,255,255,.22) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  font-weight: 600 !important;
}
/* Bug #561: utility class to hide elements on mobile only */
@media (max-width: 768px){ .hide-on-mobile{ display:none !important; } }

/* Bug #580: WebKit browsers add a native search "X" / lupa icon inside
   <input type="search"> that on mobile overlaps with our placeholder text.
   Suppress the decorations so our own button supplies the visual cue. */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
input[type="search"]{ -webkit-appearance: none; appearance: none; }

/* Bug #563: pe mobil, scoatem border-ul alb de pe metadate (ch-name/ch-cui/etc.)
   ca să nu apară "chenare" peste numele și CUI-ul firmei. Chips-urile rămân
   cu fundal translucent dar fără contur. */
@media (max-width: 768px) {
  #company-profile #company-header .ch-chip,
  #company-profile #company-header .ch-chips > *,
  #company-profile #company-header [class*="chip"]:not(.kpi-item) {
    border: 0 !important;
    background: rgba(255,255,255,.18) !important;
  }
  #company-profile #company-header .ch-name,
  #company-profile #company-header .ch-cui,
  #company-profile #company-header .ch-meta,
  #company-profile #company-header .ch-meta > * {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}
/* Numele firmei + CUI-ul în header banner — alb pe gradient. */
#company-profile #company-header .ch-name,
#company-profile #company-header .ch-cui{
  color: #ffffff !important;
}

/* Bug #547 — header text (top nav, language switcher, action icons) was
   light grey on dark blue. Force pure white for visibility. */
body.light .topnav,
body.light .topnav *,
body.light header.topnav *,
body.light .navbar,
body.light .navbar *{
  color: #ffffff !important;
}
body.light .topnav .lang-pill,
body.light .topnav .lang-switch,
body.light .topnav .nav-icon,
body.light .topnav button:not(.btn-cyan):not(.btn-primary){
  color: #ffffff !important;
}
/* But keep the active language pill (RO/EN) with intentional contrast */
body.light .topnav .lang-pill.active,
body.light .topnav .lang-switch [aria-pressed="true"]{
  background: rgba(255,255,255,.25) !important;
  color: #ffffff !important;
}

/* ── 24. Card padding — fix text touching edges (bug #534) ───────────────── */
body.light .feature-card{ padding: 26px 24px !important; }
body.light .ds-card{ padding: 12px 16px !important; }
body.light .search-card{ padding: 22px 22px !important; }
body.light .tool-tile{ padding: 22px 20px !important; }
body.light .card-body{ padding: 18px 20px !important; }
body.light .alert,
body.light .alert-ok,
body.light .alert-warn{ padding: 14px 18px !important; }

/* ── 25. Misc body-level safety net ──────────────────────────────────────── */
html, body{ background: #ffffff; }
body.light{ background: var(--re-bg, #f6f7fb) !important; }

/* ────────────────────────────────────────────────────────────────────────
 * SECTION 999: ULTIMATE NAVBAR + KPI VISIBILITY (#547, #548 — final retry)
 *   Maximum specificity — beats odin-redesign.css `.nav-mode-btn` rules.
 *   Reason for being last in file: source order tiebreaker on equal !important.
 * ────────────────────────────────────────────────────────────────────────── */

/* Bug #547: nav text white on dark blue gradient navbar */
html body.light nav.navbar,
html body.light nav.navbar * {
  color: #ffffff !important;
}
html body.light nav.navbar i.bi { color: #ffffff !important; }
html body.light nav.navbar .nav-mode-btn,
html body.light nav.navbar .nav-mode-btn:not(.active),
html body.light nav.navbar .nav-mode-btn span,
html body.light nav.navbar .nav-mode-btn i {
  color: #ffffff !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.22) !important;
}
html body.light nav.navbar .nav-mode-btn:hover {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.4) !important;
}
html body.light nav.navbar .lang-toggle button {
  color: rgba(255,255,255,.7) !important;
}
html body.light nav.navbar .lang-toggle button.active {
  color: #ffffff !important;
  background: rgba(255,255,255,.22) !important;
}

/* Bug #548 final: KPI cards in #company-header — labels visible */
html body.light #company-profile #company-header .kpi-row .kpi-item {
  background: #ffffff !important;
  border: 1px solid rgba(255,255,255,.5) !important;
}
html body.light #company-profile #company-header .kpi-item .kpi-val,
html body.light #company-profile #company-header .kpi-item strong {
  color: #1f2937 !important;
  /* Undo the global gradient-text trick (background-clip:text + transparent fill)
     applied to .kpi-val on landing — invisible on white KPI cards. */
  -webkit-text-fill-color: #1f2937 !important;
  background: transparent !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}
html body.light #company-profile #company-header .kpi-item .kpi-lbl,
html body.light #company-profile #company-header .kpi-item small,
html body.light #company-profile #company-header .kpi-item span:not(strong) {
  color: #4b5563 !important;
}
/* CUI/RegCom/EUID — plain text, no pill (per user request). */
html body.light #company-profile #company-header .ch-cui {
  background: transparent !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
  padding: 0 !important;
  font-family: 'JetBrains Mono', 'Geist Mono', monospace !important;
  font-size: .85rem !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.4) !important;
  letter-spacing: .02em !important;
  margin-right: 14px !important;
}
/* Inline <code> inside .ch-cui (regcom/EUID) — suppress its own bg too.
   Plus generic code element overrides to defeat body.light code{border} rule
   that surfaced on mobile (bug #563). */
html body.light #company-profile #company-header code,
html body.light #company-profile #company-header .ch-cui code,
html body.light #c-cui code,
html body.light #c-regcom code,
html body.light #c-euid code {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  opacity: 1 !important;
}
/* Chips next to company name (Activ, TVA etc) keep dark-pill style. */
html body.light #company-profile #company-header .ch-chip,
html body.light #company-profile #company-header .ch-chips > * {
  background: rgba(0,0,0,.32) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  font-weight: 600 !important;
  padding: 4px 11px !important;
  border-radius: 8px !important;
  font-size: .78rem !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;
}
html body.light #company-profile #company-header .ch-name {
  color: #ffffff !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * Nav button focus / hover — fix "groaznica animatia de selectie".
 *   Browser default outline + odin-redesign focus rules combine to draw
 *   a thick blue ring around clicked nav buttons. Replace with subtle
 *   white-tint focus that fits the dark nav.
 * ────────────────────────────────────────────────────────────────────────── */
html body.light nav.navbar .nav-mode-btn:focus,
html body.light nav.navbar .nav-mode-btn:focus-visible,
html body.light nav.navbar .nav-mode-btn:active,
html body.light nav.navbar .lang-toggle button:focus,
html body.light nav.navbar .lang-toggle button:focus-visible,
html body.light nav.navbar button:focus,
html body.light nav.navbar button:focus-visible,
html body.light nav.navbar a:focus,
html body.light nav.navbar a:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.35) !important;
  border-color: rgba(255,255,255,.5) !important;
}
html body.light nav.navbar .nav-mode-btn:active {
  transform: scale(.97) !important;
  transition: transform 80ms ease, background-color 120ms ease !important;
}
/* Remove any persistent thick blue/indigo ring that odin-redesign or
   browser default draws on selected/active state. */
html body.light nav.navbar *:focus,
html body.light nav.navbar *:focus-visible {
  outline: none !important;
}