/* ======================================
   FX Notes — SHELL (sidebar + topbar)
   Minimal layout to replace legacy backend.css
   ====================================== */

   .fx-shell{
    display:grid;
    grid-template-columns: var(--fx-sidebar-w,260px) 1fr;
    /* single-row layout; no phantom topbar row */
    grid-template-rows: 1fr;
    min-height:100vh;
  }
  .fx-sidebar{
    grid-row:1; grid-column:1;
    border-right:1px solid var(--fx-border);
    background:var(--fx-card);
    position:sticky; top:0; height:100vh; overflow:auto;
  }
  .fx-topbar{
    /* kept for backwards-compat; if present it will sit inside .fx-content */
    border-bottom:1px solid var(--fx-border);
    background:var(--fx-card);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 16px;
  }
  .fx-content{grid-row:1; grid-column:2; min-width:0}
  
  /* Sidebar header (logo + burger) */
  .fx-sidebar-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px}
  .fx-logo{display:flex; align-items:center; gap:10px}
  .fx-logo img{height:22px}
  
  /* Nav */
  .fx-nav{padding:6px 8px}
  .fx-nav ul{list-style:none; margin:0; padding:0}
  .fx-nav li a{
    display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:10px; color:var(--fx-text);
  }
  .fx-nav li a:hover{background:rgba(0,0,0,.04)}
  html[data-theme="dark"] .fx-nav li a:hover{background:rgba(255,255,255,.05)}
  .fx-nav .nav-icon{width:18px;height:18px}
  
  /* Sidebar bottom block */
  .fx-sidebar-foot{padding:14px 12px; border-top:1px solid var(--fx-border); color:var(--fx-text-muted); font-size:12px}
  
  /* Topbar controls */
  .fx-burger{
    display:inline-flex; align-items:center; justify-content:center; width:36px;height:36px;border-radius:10px;border:1px solid var(--fx-border); background:transparent; cursor:pointer;
  }
  .fx-topbar-right{display:flex; align-items:center; gap:10px}
  
  /* Collapsed state */
  html.fx-sidebar-collapsed{--fx-sidebar-w: var(--fx-sidebar-w-compact)}
  html.fx-sidebar-collapsed .fx-nav li a span{display:none}
  html.fx-sidebar-collapsed .fx-nav .nav-icon{margin-right:0}
  
  /* Mobile behaviour */
  @media (max-width: 1024px){
    .fx-shell{grid-template-columns: 1fr}
    .fx-sidebar{position:fixed; left:0; top:0; width:var(--fx-sidebar-w); transform:translateX(-100%); transition:transform var(--fx-t-med) var(--fx-ease); z-index:50}
    html.fx-sidebar-open .fx-sidebar{transform:none}
    .fx-content{grid-column:1}
  }
  
  /* Ensure page content spacing aligns */
  .fx-content .fx-container{padding:24px}
  
  /* Theme-aware logo helper (uses .logo-light / .logo-dark from core) */
  .fx-logo .logo-dark{display:none}
  html[data-theme="dark"] .fx-logo .logo-dark{display:inline}
  html[data-theme="dark"] .fx-logo .logo-light{display:none}
  
  /* --- Footer --- */
  .fx-footer {
    border-top: 1px solid var(--fx-border);
    background: var(--fx-card);
    margin-top: 24px;
  }
  .fx-footer-row {
    padding-top: 16px;
    padding-bottom: 16px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--fx-text-muted);
    font-size: 12px;
  }
  .fx-footer-row a { text-decoration: none; color: var(--fx-text-muted); }
  .fx-footer-row a:hover { color: var(--fx-text); text-decoration: underline; }
  
  /* Sidebar links: support direct anchors inside .fx-nav */
  .fx-nav a.fx-nav-item{
    display: flex; align-items: center; gap: 10px; padding: 10px 10px;
    border-radius: 10px; color: var(--fx-text); text-decoration: none;
  }
  .fx-nav a.fx-nav-item:hover{ background: rgba(0,0,0,.04); }
  html[data-theme="dark"] .fx-nav a.fx-nav-item:hover{ background: rgba(255,255,255,.05); }
  
  /* Icon sizing whether or not the class is present */
  .fx-nav a.fx-nav-item img,
  .fx-nav .nav-icon { width: 18px; height: 18px; }
  
  /* Active page highlight (includes.js adds .active) */
  .fx-nav a.fx-nav-item.active{
    background: rgba(106,123,255,.15); /* ~brand tint */
    color: var(--fx-text);
  }
  
  /* ----- Sidebar brand (logo) ----- */
  .fx-brand{
    display:flex; align-items:center; gap:10px;
    padding:16px 12px 10px;
    min-height:72px;
  }
  .fx-brand img{
    height:52px; width:auto; max-width:100%; display:block;
    user-select:none; pointer-events:none; margin:0;
  }
  
  /* show correct logo per theme */
  .fx-brand .logo.dark{ display:none; }
  html[data-theme="dark"] .fx-brand .logo.light{ display:none; }
  html[data-theme="dark"] .fx-brand .logo.dark{ display:block; }
  
  /* ----- Sidebar CTA (“LOG TRADE”) ----- */
  .fx-cta{ margin: 0 12px 10px; }
  .fx-cta .fx-btn{
    display:flex; align-items:center; gap:8px; border-radius:12px;
  }
  
  /* --- Allow a CTA block between logo and nav --- */
  .fx-sidebar { display: flex; flex-direction: column; }
  
  /* Keep order: brand (0) → cta (1) → nav (2) → cards (3+) */
  .fx-sidebar > .fx-brand { order: 0; }
  .fx-sidebar > .fx-cta   { order: 1; display: block !important; margin: 6px 12px 10px; }
  .fx-sidebar > .fx-nav   { order: 2; }
  .fx-sidebar > .fx-card,
  .fx-sidebar > section   { order: 3; }
  
  /* --- Ensure the logo row reserves space and never shrinks --- */
  .fx-sidebar > .fx-brand{
    flex: 0 0 auto;
    padding: 16px 12px 10px;
    min-height: 68px;
  }
  
  /* Logo images — fixed visual height, block layout */
  .fx-brand img.logo{ display: block; height: 52px; width: auto; }
  
  /* Put clear space between logo and CTA */
  .fx-brand + .fx-cta{ margin-top:10px; }
  
  /* --- subtle divider between logo and CTA --- */
  .fx-brand + .fx-cta {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f1f1f1;
  }
  html[data-theme="dark"] .fx-brand + .fx-cta {
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  
  /* --- Outline button hover invert (e.g. Buy Storage) --- */
  .fx-btn-outline {
    background: transparent;
    color: #8f93f6;
    border: 1px solid #8f93f6;
    transition: all 0.2s ease-in-out;
  }
  .fx-card .fx-btn-outline:hover {
    background: #8f93f6; color: #fff; border-color: #8f93f6;
  }
  
  /* Tight top spacing for pages that use the sticky header */
  .dashboard-page .fx-content,
  .insights-page .fx-content,
  .goals-page .fx-content {
    padding-top: 0 !important;
  }
  
  /* ===== FX Notes – Header/top-gap fixes ===== */
  html, body { height: 100%; }
  .fx-shell { min-height: 100vh; }
  
  /* remove accidental vertical padding that creates a top gap */
  .fx-content { padding-top: 0 !important; }
  
  /* kill any top margin the included header may add */
  .fx-content > [data-include="/partials/header.html"],
  .fx-content > header,
  .fx-content > .fx-headerbar { margin-top: 0 !important; }
  
  /* guard against margin-collapsing on first child */
  .fx-container > *:first-child { margin-top: 0 !important; }
  
  /* the search bar row should not add top margin either */
  .fx-headerbar .fx-stack,
  .fx-headerbar .fx-row { margin-top: 0 !important; }
  
  /* Defensive: if anything still references --fx-topbar-h, zero it */
  :root{ --fx-topbar-h: 0px; }
  
  /* ===== Sticky behaviour — ONLY the app header stays sticky ===== */
  
  /* ✅ Stick the app header (the partial) */
header.fx-header[role="banner"]{
  position: sticky;
  top: 0;
  z-index: 1000;            /* was 100 */
  background: var(--fx-bg, #fff);
  backdrop-filter: saturate(1.2) blur(6px);
  overflow: visible;        /* ensure popover isn't clipped */
}

  
  /* ❌ Do NOT stick any other .fx-header used inside main content
     (e.g., the “Good evening, Trader” hero card) */
  main .fx-header{ position: static !important; }
  
  /* If you previously had a broad rule like this, it’s intentionally removed:
     .fx-header.fx-card { position: sticky; ... }  — that caused the hero to stick. */
  
     /* =========================
   Sidebar CTA (LOG TRADE)
   Force gradient over any .fx-btn defaults
   ========================= */
.fx-sidebar .fx-cta { margin: 0 12px 10px; }
.fx-sidebar .fx-cta .fx-btn{
  display:flex; justify-content:center; align-items:center; gap:8px;
  width:100%; height:44px; border:0; border-radius:14px;
  font-weight:600; color:#fff !important;
  background: linear-gradient(90deg, #A8B4FF 0%, #E6A0B8 100%) !important;
  box-shadow: 0 2px 6px rgba(16,24,40,.08);
}
.fx-sidebar .fx-cta .fx-btn:hover{ filter:brightness(.98); }
.fx-sidebar .fx-cta .fx-btn:active{ transform: translateY(1px); }

/* Keep sidebar order and make sure CTA can’t be hidden by legacy CSS */
.fx-sidebar{ display:flex; flex-direction:column; }
.fx-sidebar > .fx-brand{ order:0; flex:0 0 auto; padding:16px 12px 10px; }
.fx-sidebar > .fx-cta  { order:1; display:block !important; visibility:visible !important; opacity:1 !important; }
.fx-sidebar > .fx-nav  { order:2; }
.fx-sidebar > .fx-card,
.fx-sidebar > section  { order:3; }

/* =========================
   Logo & Icon sizing (defensive)
   ========================= */
.fx-brand img.logo{
  display:block; height:52px; width:auto; max-width:100%;
  user-select:none; pointer-events:none; margin:0;
}
.fx-nav .nav-icon{
  display:inline-block; width:18px; height:18px; object-fit:contain;
}

/* Theme toggles for the two logo images */
.fx-brand .logo.dark{ display:none; }
html[data-theme="dark"] .fx-brand .logo.light{ display:none; }
html[data-theme="dark"] .fx-brand .logo.dark{ display:block; }

/* Optional: if a failed image would collapse height, keep the row stable */
.fx-brand{ min-height:72px; }

/* === Header / shell globals === */

/* Ensure header sits above content and can host overlays (popover anchor) */
.fx-header {
  position: relative;
  z-index: 1000;
}

/* Sidebar toggle should only show on tablet & below */
.only-mobile { display: none; }

/* Match Bootstrap-like "lg" breakpoint (~992px) */
@media (max-width: 991.98px) {
  .only-mobile { display: inline-flex; }
}

/* Optional: a tiny spacing helper used in header */
.fx-header-spacer { flex: 1 1 auto; }

.fx-header { display:flex; align-items:center; gap:12px; position:relative; z-index:1000; overflow:visible; }
.fx-header-spacer { margin-left:auto; }          /* pushes actions to the right */
.fx-header-actions { display:flex; align-items:center; gap:8px; }

/* avatar button sizing (keeps it consistent with your other header buttons) */
.fx-avatar-btn img { border-radius:50%; width:32px; height:32px; object-fit:cover; display:block; }

/* mobile-only burger */
.only-mobile { display:none; }
@media (max-width: 991.98px) { .only-mobile { display:inline-flex; } }

/* No-header: ensure main content isn't reserving space for header */
.fx-header, [data-include="/partials/header.html"] { display: none !important; }

/* Sidebar structure */
.fx-sb-brand { padding: 18px 16px 8px; font-weight: 800; font-size: 18px; }
.fx-sb-cta { display:block; margin: 10px 16px 14px; text-align:center; }
.fx-sb-nav { display:flex; flex-direction:column; gap:6px; padding: 6px 8px; }
.fx-sb-link { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; text-decoration:none; color:inherit; }
.fx-sb-link:hover { background: var(--fx-hover, rgba(0,0,0,.05)); }

.fx-sb-footer { margin-top:auto; padding: 12px 12px 16px; display:flex; flex-direction:column; gap:12px; }
.fx-utilities { display:flex; gap:8px; padding: 0 4px; }

/* Storage */
.fx-storage { padding: 10px 8px 6px; border:1px solid rgba(0,0,0,.06); border-radius:14px; background:var(--fx-bg,#fff); }
.fx-storage-top { display:flex; justify-content:space-between; align-items:center; font-size:12px; opacity:.9; padding:0 4px 8px; }
.fx-storage-bar { height:8px; border-radius:999px; background:rgba(0,0,0,.06); overflow:hidden; }
.fx-storage-bar > div { height:100%; border-radius:999px; background: linear-gradient(90deg,#9aa8ff,#f6a8ff); width:0%; transition:width .3s ease; }
.fx-storage-sub { display:flex; gap:6px; font-size:12px; opacity:.75; padding:6px 4px 0; }

.fx-sb-buy { display:block; text-align:center; }

/* Profile panel inside sidebar */
.fx-profile-panel { border:1px solid rgba(0,0,0,.06); border-radius:14px; background:var(--fx-bg,#fff); padding:10px; }
.fx-profile-row { display:flex; gap:10px; align-items:center; }
.fx-avatar-xl { width:56px; height:56px; border-radius:50%; overflow:hidden; border:2px solid rgba(120,140,255,.5); }
.fx-avatar-xl img { width:100%; height:100%; object-fit:cover; display:block; }
.fx-profile-meta { display:flex; flex-direction:column; line-height:1.25; }
.fx-profile-name { font-weight:700; }
.fx-profile-email { font-size:12px; opacity:.8; }
.fx-profile-link { display:block; width:100%; text-align:left; padding:8px 8px; border-radius:10px; background:transparent; border:0; color:inherit; text-decoration:none; margin-top:4px; }
.fx-profile-link:hover { background: rgba(0,0,0,.05); }
.fx-profile-link.is-danger { color:#a33; }

/* ==== Sidebar footer card additions (non-destructive) ==== */

/* tiny helper so the storage label can sit right of title on one line */
.fx-sb-footer-card .fx-storage-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:8px;
}
.fx-sb-footer-card .fx-storage-label{
  font-size:12px; color: var(--fx-text-muted);
}

/* gradient storage bar (matches your visual language) */
.fx-sb-footer-card .fx-storage-bar{
  height:8px; border-radius:999px; background:rgba(0,0,0,.06); overflow:hidden;
}
html[data-theme="dark"] .fx-sb-footer-card .fx-storage-bar{ background: rgba(255,255,255,.08); }
.fx-sb-footer-card .fx-storage-bar > div{
  height:100%; width:0%;
  background: linear-gradient(90deg,#A8B4FF 0%, #E6A0B8 100%);
  border-radius:999px; transition:width .3s ease;
}
.fx-sb-footer-card .fx-storage-sub{
  display:flex; gap:6px; font-size:12px; color: var(--fx-text-muted);
  margin-top:6px; margin-bottom:8px;
}

/* utilities row (keeps your button geometry) */
.fx-utilities-row{
  display:flex; gap:8px; margin-top:4px;
}
.fx-iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  border:1px solid var(--fx-border);
  background: var(--fx-card);
  color: var(--fx-text);
  cursor: pointer;
}
.fx-iconbtn:hover{ background: rgba(0,0,0,.04); }
html[data-theme="dark"] .fx-iconbtn:hover{ background: rgba(255,255,255,.06); }

/* profile panel (inherits your card look) */
.fx-profile-panel{
  border:1px solid var(--fx-border);
  border-radius:12px;
  background: var(--fx-card);
  padding:10px; margin-top:8px;
}
.fx-profile-row{ display:flex; gap:10px; align-items:center; }
.fx-avatar-xl{ width:56px; height:56px; border-radius:50%; overflow:hidden; border:2px solid rgba(120,140,255,.5); }
.fx-avatar-xl img{ width:100%; height:100%; object-fit:cover; display:block; }
.fx-profile-meta{ display:flex; flex-direction:column; line-height:1.25; }
.fx-profile-name{ font-weight:700; }
.fx-profile-email{ font-size:12px; color: var(--fx-text-muted); }
.fx-profile-link{
  display:block; width:100%; text-align:left; padding:8px 8px; border-radius:10px;
  background:transparent; border:0; color:inherit; text-decoration:none; margin-top:4px;
}
.fx-profile-link:hover{ background: rgba(0,0,0,.05); }
html[data-theme="dark"] .fx-profile-link:hover{ background: rgba(255,255,255,.06); }
.fx-profile-link.is-danger{ color:#a33; }



/* Keep your existing storage+button visuals from earlier blocks */

/* ===== User bar (proposed design) ===== */
.fx-sb-settings{ padding: 10px 12px; }

.fx-userbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px; border:1px solid var(--fx-border);
  background: var(--fx-card); border-radius:16px;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 16px rgba(16,24,40,.04);
}
.fx-user-main{ display:flex; align-items:center; gap:12px; min-width:0; }

.fx-user-ava--lg{
  width:44px; height:44px; border-radius:50%; overflow:hidden;
  background: linear-gradient(135deg,#a9b2ff,#f5b8ff);
  display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(120,140,255,.45);
}
.fx-user-ava--lg img{ width:100%; height:100%; object-fit:cover; display:block; }

.fx-user-text{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.fx-user-name{
  font-weight:700; font-size:15px; color:var(--fx-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px;
}
.fx-user-title{
  margin-top:2px; font-size:12px; color:var(--fx-text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px;
}

/* right-side “pills” */
.fx-user-actions{ display:flex; gap:8px; }
.fx-iconpill{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px; cursor:pointer;
}
.fx-iconpill--ghost{
  border:1px solid var(--fx-border); background: var(--fx-card); color: var(--fx-text);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
}
.fx-iconpill--ghost:hover{ background: rgba(0,0,0,.04); }
html[data-theme="dark"] .fx-iconpill--ghost:hover{ background: rgba(255,255,255,.06); }

/* ===== Sticky footer wrapper (user bar + storage card together) ===== */
.fx-sidebar{ display:flex; flex-direction:column; }
.fx-sidebar > .fx-brand     { order:0; }
.fx-sidebar > .fx-cta       { order:1; }
.fx-sidebar > .fx-nav       { order:2; }
.fx-sidebar > .fx-sb-sticky { order:3; }

.fx-sb-sticky{
  position: sticky; bottom: 0; z-index: 1;
  background: var(--fx-card);
  padding: 10px 12px 12px;
  border-top: 1px solid var(--fx-border);
  backdrop-filter: saturate(1.05) blur(4px);
  display:flex; flex-direction:column; gap:12px;
}
.fx-sb-sticky .fx-sb-settings{ padding:0; margin:0; }

/* ===== Storage card ===== */
.fx-sb-footer-card .fx-storage-top{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px;
}
.fx-sb-footer-card .fx-storage-label{ font-size:12px; color: var(--fx-text-muted); }
.fx-sb-footer-card .fx-storage-bar{ height:8px; border-radius:999px; background:rgba(0,0,0,.06); overflow:hidden; }
html[data-theme="dark"] .fx-sb-footer-card .fx-storage-bar{ background: rgba(255,255,255,.08); }
.fx-sb-footer-card .fx-storage-bar > div{
  height:100%; width:0%; border-radius:999px;
  background: linear-gradient(90deg,#A8B4FF 0%, #E6A0B8 100%);
  transition: width .3s ease;
}
.fx-sb-footer-card .fx-storage-sub{
  display:flex; gap:6px; font-size:12px; color: var(--fx-text-muted);
  margin-top:6px; margin-bottom:8px;
}

/* (Optional nice-to-haves) */
.fx-sidebar{ scroll-padding-bottom: 160px; }  /* ensures keyboard focus never hides behind sticky */

/* === Unified account card === */
.fx-sb-account{
  padding: 12px;                     /* shared padding for both sections */
  border-radius: 16px;
}

/* remove the userbar's own box/border now that it's inside the card */
.fx-sb-account .fx-userbar{
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0 0 6px 0;                /* tighter bottom to hug the divider */
}

/* subtle divider between user bar and storage */
.fx-sb-divider{
  height: 1px;
  border: 0;
  background: rgba(0,0,0,.06);
  margin: 10px 0 12px;
}
html[data-theme="dark"] .fx-sb-divider{
  background: rgba(255,255,255,.08);
}

/* lift the name a touch like your design */
.fx-user-text{ margin-top: -2px; }   /* gentle nudge up */
.fx-user-name{ font-size: 16px; }    /* small bump for emphasis */

/* shrink the icon pills slightly */
.fx-iconpill{ width: 32px; height: 32px; border-radius: 10px; }
.fx-iconpill--ghost{ box-shadow: 0 1px 0 rgba(255,255,255,.45) inset; }
.fx-user-actions{ gap: 6px; }

/* keep storage visuals as-is, already match the mock */

/* Make the sidebar a flex column that fills the viewport */
.fx-sidebar{
  display: flex;
  flex-direction: column;
  min-height: 100vh;     /* ensures we can push footer to the bottom */
  min-height: 100dvh;    /* better on mobile Safari */
}

/* Ensure the nav area takes the available space above the sticky footer */
.fx-sidebar > .fx-nav{
  flex: 1 1 auto;        /* grows/shrinks so footer can sit at bottom */
  overflow: auto;        /* sidebar list can scroll if long */
}

/* Unified sticky footer (user bar + storage) — always sits at bottom */
.fx-sidebar > .fx-sb-sticky{
  order: 999;            /* make sure it’s last */
  margin-top: auto;      /* pushes it to the very bottom when content is short */
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--fx-card);
  padding: 10px 12px 12px;
  border-top: 1px solid var(--fx-border);
  backdrop-filter: saturate(1.05) blur(4px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}