/* Small helpers to mimic shadcn components */

    .btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; border-radius:0.375rem; padding:0.5rem 0.75rem; font-size:0.875rem; font-weight:500; transition: all .15s ease; }
    .btn-outline { border:1px solid rgb(209 213 219); background:transparent; }
    .btn-outline:hover { background: rgb(243 244 246); }
    .btn-dark-outline { border:1px solid rgb(55 65 81); background:transparent; }
    .btn-dark-outline:hover { background: rgb(31 41 55); }
    .btn-sm { padding:0.375rem 0.625rem; font-size:0.75rem; }

    .themeIconBtn{
      width: 40px; height: 40px;
      padding: 0;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: transparent;
      display: inline-flex; align-items: center; justify-content: center;
      transition: background-color .15s ease, border-color .15s ease;
    }
    .themeIconBtn:hover{ background: rgba(148,163,184,0.10); }
    body[data-theme="light"] .themeIconBtn:hover{ background: rgba(15,23,42,0.05); }
    .input { 
      width:100%; height:2.5rem; padding:0 0.75rem; border-radius:0.375rem; 
      border:1px solid var(--border); background: var(--input); color: var(--fg);
      outline:none; transition: all .15s ease; 
    }
    .input:focus { box-shadow: 0 0 0 3px rgba(59,130,246,0.25); border-color: rgba(59,130,246,0.8); }
    .switch {
      width: 42px; height: 24px; border-radius: 999px; position: relative; cursor: pointer;
      display: inline-flex; align-items: center; transition: background-color .2s ease;
    }
    .switch[data-checked="true"] { background: rgb(37 99 235); }
    .switch[data-checked="false"] { background: rgba(156,163,175,0.45); }
    .switch .knob {
      width: 20px; height: 20px; border-radius: 999px; background: white; position: absolute; left: 2px;
      transition: transform .2s ease;
      box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }
    .switch[data-checked="true"] .knob { transform: translateX(18px); }
    .tooltip {
      position: relative; display: inline-flex; align-items: center;
    }
    .tooltip .tip {
      position: absolute; bottom: 140%; left: 50%; transform: translateX(-50%);
      background: rgba(17,24,39,0.96); color: white; padding: 8px 10px; border-radius: 10px;
      font-size: 12px; line-height: 1.25; width: max-content; max-width: 320px;
      opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease;
      transform-origin: bottom center;
      box-shadow: none;
      z-index: 50;
    }
    .tooltip:hover .tip { opacity: 1; transform: translateX(-50%) translateY(-2px); }

    /* === TRL helper tooltips for all (?) icons (match .html) === */
    .trl-help-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-left:6px;color:rgba(148,163,184,0.85);cursor:help}
    .trl-help-icon i{color:inherit}
    body[data-theme="light"] .trl-help-icon{color:rgba(15,23,42,55)}
    .trl-help-tooltip{
      position:fixed;z-index:9999;pointer-events:none;
      max-width:260px;
      transform:translateY(-50%);
      border-radius:12px;
      padding:10px 12px;
      font-size:12px;line-height:1.35;
      background:rgba(0,0,0,92);
      border:1px solid rgba(51,65,85,55);
      color:#fff;
      box-shadow:none;
    }
    body[data-theme="light"] .trl-help-tooltip{
      background:#ffffff;
      border-color:rgba(15,23,42,0.12);
      color:#0f172a;
      box-shadow:none;
    }

    .collapse-content { overflow: hidden; transition: max-height .25s ease; }
    .kpi-press { transform: scale(0.98); }
    .no-select { user-select: none; }

    /* Theme variables for TRL-style dropdowns */
    :root{
      --input:#0E1117;
      --border: rgba(148,163,184,0.18);
      --fg: #ffffff;
      --blue: rgb(59,130,246);
      --placeholder:#6b7280; /* gray-500 */
    }
    body[data-theme="light"]{
      --input:#ffffff;
      --border: rgba(15,23,42,0.18);
      --fg: #0f172a;
      --blue: rgb(37,99,235);
      --placeholder:#9ca3af; /* gray-400 */
    }

    /* Force consistent placeholder colors (including disabled inputs) */
    .input::placeholder{ color: var(--placeholder) !important; opacity: 1 !important; }
    .input:disabled::placeholder{ color: var(--placeholder) !important; opacity: 1 !important; }

    /* TRL-style custom dropdown (matches .html preset dropdown) */
    .trl-dd{position:relative}
    .trl-dd-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}
    .trl-dd-label{white-space:nowrap;overflow:visible;text-overflow:ellipsis}
    .trl-dd-menu{
      position:absolute;left:0;right:0;top:calc(100% + 6px);
      background:var(--input);
      border:1px solid var(--border);
      border-radius:12px;
      box-shadow:0 18px 45px rgba(0,0,0,0.35);
      padding:6px;
      display:none;
      z-index:30;
      max-height:260px;
      overflow:auto;
    }
    body[data-theme="light"] .trl-dd-menu{background:#ffffff;box-shadow:0 18px 40px rgba(15,23,42,0.12);}
    .trl-dd-menu.open{display:block}
    .trl-dd-opt{
      padding:10px 10px;
      border-radius:10px;
      cursor:pointer;
      font-size:14px;
      color:var(--fg);
    }
    .trl-dd-opt:hover{
      background:var(--blue);
      color:#ffffff;
    }
    .trl-dd-opt[aria-selected="true"]{
      background:transparent;
      color:var(--fg);
      font-weight:800;
    }
  

    /* Remove extra focus glow/frame on TRL dropdown buttons (Side dropdowns) */
    .trl-dd .trl-dd-btn:focus,
    .trl-dd .trl-dd-btn:focus-visible{
      box-shadow:none !important;
      outline:none !important;
      border-color: var(--border) !important;
    }
  
/* Toasts (match .html) */
.toasts{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;gap:10px;z-index:200}
.toast{
  background:rgba(2,6,23,.90);
  color:#fff;
  border:1px solid rgba(148,163,184,.18);
  padding:10px 12px;border-radius:14px;
  box-shadow:none;
  font-size:13px;display:flex;align-items:center;gap:10px;
  animation: toastIn .18s ease;
  max-width:min(360px, calc(100vw - 28px));
}
body[data-theme="light"] .toast{background:#ffffff;color:#0f172a;border-color:rgba(15,23,42,0.12);}
@keyframes toastIn{from{transform:translateY(6px);opacity:.7}to{transform:translateY(0);opacity:1}}
/* KPI copy mark (match .html bubble copy indicator) */
.kpi-bubble{position:relative;}
/* Section A (Build from knowns) results: keep KPI bubbles uniform so rows align */
.trl-a-results-grid .kpi-bubble{min-height:140px;}

.kpi-bubble .copyMark{
  position:absolute;right:12px;top:12px;opacity:0;transition:opacity .15s ease;
  display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(148,163,184,.9);
}
.kpi-bubble:hover .copyMark{opacity:1}

/* Scroll-to-top button */
#trl-scroll-top{
  position:fixed;
  right:16px;
  bottom:84px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.22);
  background:rgba(2,6,23,0.55);
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:190;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  backdrop-filter: blur(8px);
}
body[data-theme="light"] #trl-scroll-top{
  background:rgba(255,255,255,0.9);
  color:#0f172a;
  border-color:rgba(15,23,42,0.14);
}
#trl-scroll-top.show{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
#trl-scroll-top:hover{opacity:1;}


#trl-desktop-cta,#trl-mobile-cta{visibility:hidden}


      /* ---- TRL header (copied from /dashboard) ---- */
      #site-header {
        background: rgba(26,31,46,0.92);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(30,64,175,0.45);
      }
      #site-header.header-scrolled {
        background: rgba(26,31,46,0.96);
        box-shadow: 0 18px 45px rgba(15,23,42,0.95);
        border-bottom-color: rgba(37,99,235,0.7);
      }
    
      /* Theme-aware header colors (only for top bar) */
      body[data-theme="light"] #site-header{
        background: rgba(255,255,255,0.86);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(37,99,235,0.22);
      }
      body[data-theme="light"] #site-header.header-scrolled{
        background: rgba(255,255,255,0.92);
        box-shadow: 0 18px 45px rgba(15,23,42,0.12);
        border-bottom-color: rgba(37,99,235,0.35);
      }
      body[data-theme="light"] #site-header .text-slate-300{ color: rgb(51 65 85) !important; }
      body[data-theme="light"] #site-header .text-slate-400{ color: rgb(71 85 105) !important; }
      body[data-theme="light"] #site-header .text-slate-200{ color: rgb(15 23 42) !important; }
      body[data-theme="light"] #site-header a[href="/"] span.text-white{ color: rgb(15 23 42) !important; }

      body[data-theme="light"] #site-header .hover\:text-white:hover{ color: rgb(15 23 42) !important; }
      body[data-theme="light"] #site-header .hover\:bg-white\/5:hover{ background: rgba(15,23,42,0.04) !important; }
      body[data-theme="light"] #site-header .text-white{ color: rgb(15 23 42) !important; }

      /* Light mode: keep desktop Log out text white inside gradient button */
      body[data-theme="light"] #site-header #header-logout-desktop,
      body[data-theme="light"] #site-header #header-logout-desktop *{
        color: #ffffff !important;
      }
      body[data-theme="light"] #site-header .bg-slate-900\/95{ background: rgba(255,255,255,0.96) !important; }
      body[data-theme="light"] #site-header .border-slate-800{ border-color: rgba(15,23,42,0.10) !important; }


      /* Theme-aware MOBILE side panel (off-canvas menu) */
      body[data-theme="light"] #mobile-menu .bg-slate-900{ background: rgba(255,255,255,0.96) !important; }
      body[data-theme="light"] #mobile-menu .border-slate-800{ border-color: rgba(15,23,42,0.10) !important; }
      body[data-theme="light"] #mobile-menu .border-slate-700{ border-color: rgba(15,23,42,0.14) !important; }
      body[data-theme="light"] #mobile-menu nav .text-slate-300{ color: rgb(15 23 42) !important; }
      body[data-theme="light"] #mobile-menu nav .text-white{ color: rgb(15 23 42) !important; }
      body[data-theme="light"] #mobile-menu nav .hover\:text-white:hover{ color: rgb(15 23 42) !important; }
      body[data-theme="light"] #mobile-menu nav .hover\:bg-white\/5:hover{ background: rgba(15,23,42,0.04) !important; }

      body[data-theme="light"] #mobile-menu #trl-mobile-cta{ border-top-color: rgba(15,23,42,0.10) !important; }
      body[data-theme="light"] #mobile-menu #trl-mobile-cta .trl-mobile-link{
        color: rgb(15 23 42) !important;
      }
      body[data-theme="light"] #mobile-menu #trl-mobile-cta .trl-mobile-link:hover{
        background: rgba(15,23,42,0.04) !important;
        border-radius: 0.5rem !important;
      }

/* Page entrance overlay (render everything together) */
      .page-transition-overlay{
        position: fixed;
        inset: 0;
        background-color: #0E1117;
        opacity: 0;
        pointer-events: none;
        transition: opacity 170ms cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 9999;
      }
      .page-transition-overlay.is-active{
        opacity: 1;
        pointer-events: auto;
      }
      body[data-theme="light"] .page-transition-overlay{
        background-color: #f8fafc;
      }

      /* Light mode: keep logo + Log out text white inside */
      body[data-theme="light"] #trl-logo-link .text-white{ color: #ffffff !important; }
      body[data-theme="light"] #header-logout-desktop,
      body[data-theme="light"] #header-logout-mobile{ color: #ffffff !important; }
      /* Light mode: keep desktop Log out text white inside (override any utility classes) */
      body[data-theme="light"] #header-logout-desktop,
      body[data-theme="light"] #header-logout-desktop:hover,
      body[data-theme="light"] #header-logout-desktop:focus{ color: #ffffff !important; }

      /* Light mode: mobile menu - keep Dashboard label black even if it is the current/active page */
      body[data-theme="light"] #mobile-menu a[href="/dashboard"],
      body[data-theme="light"] #mobile-menu a[href="/dashboard"][aria-current="page"]{
        color: #0f172a !important;
        opacity: 1 !important;
      }




/* === CSP cleanup helpers === */
.trl-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.trl-inline-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.trl-icon-16{width:16px;height:16px}

/* Theme-aware scrollbars: dark keeps current TRL feel; light mode uses light scrollbars like reference tools. */
html{scrollbar-color:rgba(100,116,139,.55) rgba(2,6,23,.92);scrollbar-width:thin;}
body[data-theme="light"], html[data-theme="light"]{scrollbar-color:rgba(148,163,184,.75) rgba(248,250,252,.95);}
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-track{background:rgba(2,6,23,.92);}
*::-webkit-scrollbar-thumb{background:rgba(100,116,139,.55);border-radius:999px;border:2px solid rgba(2,6,23,.92);}
*::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.75);}
body[data-theme="light"] *::-webkit-scrollbar-track, html[data-theme="light"] *::-webkit-scrollbar-track{background:rgba(248,250,252,.95);}
body[data-theme="light"] *::-webkit-scrollbar-thumb, html[data-theme="light"] *::-webkit-scrollbar-thumb{background:rgba(148,163,184,.75);border-color:rgba(248,250,252,.95);}
body[data-theme="light"] *::-webkit-scrollbar-thumb:hover, html[data-theme="light"] *::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,.9);}

/* Final Problem Solvers fixes: keep theme/scrollbars synced with html[data-theme] like reference tools. */
html[data-theme="dark"]{
  color-scheme: dark;
  scrollbar-color: rgba(100,116,139,.55) rgba(2,6,23,.92);
}
html[data-theme="light"]{
  color-scheme: light;
  scrollbar-color: rgba(148,163,184,.75) rgba(248,250,252,.95);
}
html[data-theme="dark"] *::-webkit-scrollbar-track{background:rgba(2,6,23,.92);}
html[data-theme="dark"] *::-webkit-scrollbar-thumb{background:rgba(100,116,139,.55);border-color:rgba(2,6,23,.92);}
html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.75);}
html[data-theme="light"] *::-webkit-scrollbar-track{background:rgba(248,250,252,.95);}
html[data-theme="light"] *::-webkit-scrollbar-thumb{background:rgba(148,163,184,.75);border-color:rgba(248,250,252,.95);}
html[data-theme="light"] *::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,.9);}

/* Match Trading Journal spacing for the auth CTA area so Login/Logout does not collide with menu links. */
#trl-desktop-cta #header-logout-desktop{
  margin-left:4px;
  white-space:nowrap;
}
#mobile-menu #header-logout-mobile{
  margin-top:10px;
}
@media (max-width:1023px){
  #mobile-menu #trl-mobile-cta{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  #mobile-menu #trl-mobile-cta > .flex{
    width:100%;
    gap:10px;
  }
  #mobile-menu #trl-mobile-cta > .flex > a{
    flex:1 1 0;
    text-align:center;
    justify-content:center;
  }
  #mobile-menu #header-logout-mobile{
    width:100%;
    max-width:none;
  }
}

/* Light mode: keep Settings label black in the mobile menu, matching the other mobile links. */
body[data-theme="light"] #mobile-menu a[href="/account-settings"],
body[data-theme="light"] #mobile-menu a[href="/account-settings"][aria-current="page"],
html[data-theme="light"] #mobile-menu a[href="/account-settings"],
html[data-theme="light"] #mobile-menu a[href="/account-settings"][aria-current="page"]{
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
  opacity:1 !important;
}