/* ======================================
   FX Notes — COMPONENTS (shared UI)
   Includes a compat layer mapping older
   vars to the new --fx-* tokens.
   ====================================== */

/* Compat mapping */
:root{
    --card: var(--card, var(--fx-card));
    --border: var(--border, var(--fx-border));
    --text: var(--text, var(--fx-text));
    --text-muted: var(--text-muted, var(--fx-text-muted));
    --r-lg: var(--r-lg, var(--fx-r));
    --shadow-1: var(--shadow-1, 0 3px 14px rgba(15,23,42,.06));
    --shadow-2: var(--shadow-2, var(--fx-shadow));
    --g-violet: var(--g-violet, var(--fx-brand));
    --mint: var(--mint, var(--fx-up));
    --danger: var(--danger, var(--fx-down));
    --t-med: var(--t-med, var(--fx-t-med));
    --easing: var(--easing, var(--fx-ease));
    --fs-sm: var(--fs-sm, var(--fx-fs-sm));
    --fs-md: var(--fs-md, var(--fx-fs-md));
    --fs-lg: var(--fs-lg, var(--fx-fs-lg));
    --font: var(--font, var(--fx-font));
  }
  
  /* Cards */
  .fx-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-2);
    padding:16px 18px;
    transition:transform var(--t-med) var(--easing);
    will-change: transform;
  }
  @media (hover:hover){ .fx-card:hover{ transform:translateY(-1px); } }
  @media (prefers-reduced-motion: reduce){ .fx-card{ transition:none } }
  .fx-card-title{ font:700 var(--fs-lg)/1.2 var(--font); margin:0 0 8px; }
  
  /* Buttons */
  .fx-btn{
    --bg: var(--g-violet);
    --fg: #fff;
    --bd: var(--g-violet);
    display:inline-flex;align-items:center;gap:8px;
    font:600 var(--fs-md)/1 var(--font);
    padding:10px 14px;border-radius:12px;border:1px solid var(--bd);
    background:var(--bg);color:var(--fg);
    box-shadow:var(--shadow-1);cursor:pointer;
  }
  .fx-btn:focus{ outline:2px solid #8F92F6; outline-offset:2px; }
  .fx-btn.small{ padding:6px 10px; border-radius:10px; font-size:13px; }
  .fx-btn-ghost{ --bg:transparent; --fg:var(--text); --bd: rgba(28,33,55,.12); }
  .fx-btn-outline{ --bg:#fff; --fg:var(--text); --bd: rgba(28,33,55,.12); }
  
  /* Chips / Badges */
  .fx-chip{
    background:#f4f5fb; border-radius:10px; padding:4px 8px;
    font:500 var(--fs-sm)/1 var(--font); color:var(--text);
  }
  html[data-theme="dark"] .fx-chip{ background:#1b2230; }
  .fx-badge{ padding:4px 8px; border-radius:999px; font:700 var(--fs-sm)/1 var(--font); color:#fff; }
  .fx-badge.up{ background:var(--mint); } .fx-badge.down{ background:var(--danger); }
  
  /* Page header (hero) */
  .fx-header.fx-hero{
    display:flex;align-items:center;justify-content:space-between;
    padding:24px;border-radius:var(--fx-r);background:var(--card);border:1px solid var(--border);
    margin-bottom:20px;
  }
  .fx-h1{font-size:28px;margin:0}
  .fx-sub{color:var(--text-muted);margin-top:6px}
  
  /* Switches/controls */
  .fx-toggle{display:inline-flex;gap:6px}
  .fx-btn-switch{--bg:transparent;--fg:var(--text);--bd:var(--border)}
  .fx-btn-switch.is-active{--bg:var(--g-violet);--fg:#fff;--bd:var(--g-violet)}
  .fx-nav-controls{display:inline-flex;gap:8px}
  
  /* Calendar helpers used across pages */
  .fx-weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:12px 16px;color:var(--text-muted)}
  .fx-add-trade{
    position:absolute;top:.5rem;right:.5rem;width:26px;height:26px;border-radius:8px;border:1px solid var(--border);
    background:var(--card);display:inline-flex;align-items:center;justify-content:center;
    font-weight:700;line-height:1;cursor:pointer;opacity:.9;
  }
  .fx-add-trade:hover{opacity:1}
  
  /* Modal (vanilla-compatible) */
  .modal{position:fixed;inset:0;z-index:1000;display:none}
  .modal.show{display:block}
  .modal-dialog{position:relative;max-width:min(1100px, 92vw);margin:6vh auto}
  .modal-content{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-2);overflow:hidden}
  .modal-header,.modal-body{padding:16px 18px}
  .modal-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
  .modal-title{margin:0;font-size:18px}
  .modal .close{border:none;background:transparent;font-size:22px;line-height:1;opacity:.7}
  .modal .close:hover{opacity:1}
  
  /* --- KPI strip + labels (legacy dashboard markup) --- */
.fx-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.fx-kpi {
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.fx-kpi-label {
  color: var(--fx-muted);
  font-size: 12px;
}

.fx-kpi-value {
  font-weight: 600;
}

/* --- Help chip + controls + month title + AI avatar --- */
.fx-helpchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius);
  background: var(--fx-surface);
  text-decoration: none;
}

.fx-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.fx-month {
  font-weight: 600;
  font-size: 14px;
}

.fx-ai img {
  height: 48px;
  width: auto;
  border-radius: 12px;
  display: block;
}

/* === Calendar hero parity tweaks === */
.fx-header.fx-hero.fx-hero--plain {
  padding: 28px;                 /* up from 24 */
  border-radius: var(--fx-r);    /* keep token */
  border: 1px solid var(--fx-border);
  background: var(--fx-card);
}

/* Switch chips */
.fx-btn-switch {
  --bg: #fff;
  --fg: var(--fx-text);
  --bd: rgba(28,33,55,.14);
  box-shadow: var(--fx-shadow-sm, 0 1px 2px rgba(15,23,42,.04));
}
.fx-btn-switch.is-active {
  --bg: var(--fx-brand);
  --fg: #fff;
  --bd: var(--fx-brand);
}

/* Arrow icon buttons next/prev */
.fx-icon-btn {
  width: 32px; height: 32px; border-radius: 10px;
  border: 1px solid var(--fx-border);
  background: #fff;
}

/* Optional: subtle shadow once content scrolls under the header */
.fx-header.is-stuck {
  box-shadow: var(--fx-shadow-float);
}

/* === Profile Popover (component) === */

.fx-popover {
  position: absolute;
  width: 320px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(231,240,255,.85), rgba(255,240,248,.85)) padding-box;
  box-shadow: 0 12px 32px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.5);
  backdrop-filter: blur(10px) saturate(1.05);
  padding: 18px 18px 12px;
  z-index: 2000; /* above header */
  transform: translateY(-6px);
  opacity: 0;
  transition: transform .14s ease, opacity .14s ease;
}
.fx-popover.open { transform: translateY(0); opacity: 1; }

/* close button (top-right) */
.fx-popover-close {
  position: absolute; top: 10px; right: 10px;
  border: 0; background: transparent; cursor: pointer; line-height: 0;
}

/* little caret pointing to the avatar button */
.fx-popover-caret {
  position: absolute; right: 18px; top: -8px;
  width: 16px; height: 16px; transform: rotate(45deg);
  background: inherit;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.08));
}

/* header section inside popover */
.fx-profile-hero { padding: 8px 6px 10px; }
.fx-avatar-xl {
  width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
  border: 3px solid rgba(120,140,255,.5);
}
.fx-avatar-xl img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fx-profile-name { margin: 12px 0 6px; font-size: 22px; font-weight: 800; }
.fx-profile-email { font-size: 14px; opacity: .8; }

/* actions */
.fx-profile-actions { margin-top: 8px; }
.fx-profile-link {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 6px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.fx-profile-link:hover { background: rgba(0,0,0,.05); }
.fx-profile-sep { border: 0; height: 1px; background: rgba(0,0,0,.12); margin: 8px 0; }

/* dark theme tweak (if you use [data-theme="dark"] on <html>) */
html[data-theme="dark"] .fx-popover {
  background: linear-gradient(135deg, rgba(50,60,85,.9), rgba(60,45,70,.9)) padding-box;
  box-shadow: 0 12px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="dark"] .fx-profile-link:hover { background: rgba(255,255,255,.06); }