/* ===========================================================================
   Digitalpnd FX · cards.css
   Cards · widgets · stat cards · badges · signals · tables · ticker · nav
   =========================================================================== */

/* ====== Card system ====== */
.card{display:block;width:100%;max-width:100%;padding:1.6rem;border-radius:var(--radius-lg);background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--shadow),var(--inset-glass);box-sizing:border-box;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.card-glass{backdrop-filter:blur(var(--blur)) saturate(180%);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%)}
.card-hover:hover{transform:translateY(-8px);border-color:var(--accent);box-shadow:var(--shadow-lift),var(--shadow-glow)}
.card-featured{position:relative;border-color:var(--accent);box-shadow:var(--shadow-glow)}
.card-featured::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* ====== Widget (dashboard card) ====== */
.widget{display:block;width:100%;max-width:100%;padding:1.4rem;margin-bottom:0;border-radius:var(--radius);background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--shadow),var(--inset-glass);backdrop-filter:blur(var(--blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%);box-sizing:border-box;min-width:0;overflow-wrap:anywhere}
.widget.glass{background:var(--glass-bg)}
.widget-title{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1.1rem;flex-wrap:wrap;min-width:0}
.widget-title h3{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:.5rem}
.widget-title h3::before{content:"";width:4px;height:18px;background:var(--grad);border-radius:3px}

/* ====== Stat card value ====== */
.stat-card .val{font-size:1.95rem;font-weight:800;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1;word-break:break-word}
.stat-card .lbl{color:var(--txt-dim);font-size:.74rem;text-transform:uppercase;letter-spacing:1px;margin-top:.3rem}

/* ====== Badges ====== */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .6rem;border-radius:var(--radius-pill);font-size:.72rem;font-weight:600;backdrop-filter:blur(8px)}
.badge-green{background:rgba(34,197,94,.16);color:#86EFAC}
.badge-red{background:rgba(239,68,68,.16);color:#FCA5A5}
.badge-yellow{background:rgba(234,179,8,.16);color:#FDE68A}
.badge-purple{background:rgba(127,90,240,.20);color:var(--highlight)}
.badge-blue{background:rgba(59,130,246,.16);color:#93C5FD}

.tag{display:inline-flex;align-items:center;font-size:.7rem;padding:.15rem .5rem;border-radius:8px;background:var(--glass-soft);color:var(--highlight);text-transform:uppercase;letter-spacing:.3px}

/* ====== Signal pills ====== */
.sig{display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .65rem;border-radius:10px;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.sig.strong-buy,.sig.strong_buy{background:rgba(34,197,94,.22);color:#4ADE80;border:1px solid rgba(34,197,94,.45)}
.sig.buy{background:rgba(34,197,94,.12);color:#86EFAC;border:1px solid rgba(34,197,94,.3)}
.sig.neutral{background:rgba(234,179,8,.12);color:var(--yellow);border:1px solid rgba(234,179,8,.3)}
.sig.sell{background:rgba(239,68,68,.12);color:#FCA5A5;border:1px solid rgba(239,68,68,.3)}
.sig.strong-sell,.sig.strong_sell{background:rgba(239,68,68,.22);color:#F87171;border:1px solid rgba(239,68,68,.45)}

/* ====== Confidence bar & progress ring ====== */
.conf{height:8px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.conf>span{display:block;height:100%;background:var(--grad);border-radius:6px;transition:width .9s var(--ease)}
.ring{--p:0;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--p)*1%),rgba(255,255,255,.07) 0);position:relative}
.ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--deep-bg)}
.ring span{position:relative;font-weight:800;font-size:1.1rem}

/* ====== Heatmap cells ====== */
.heat-cell{padding:.7rem;border-radius:10px;text-align:center;font-size:.78rem;font-weight:600;transition:transform var(--dur) var(--ease)}
.heat-cell:hover{transform:translateY(-2px)}
.heat-cell .h-sym{font-weight:800;font-size:.92rem}
.heat-up{background:rgba(34,197,94,.18);border:1px solid rgba(34,197,94,.35);color:#86EFAC}
.heat-down{background:rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.35);color:#FCA5A5}
.heat-flat{background:rgba(234,179,8,.15);border:1px solid rgba(234,179,8,.3);color:var(--yellow)}

/* ====== Pills (filters) ====== */
.pill{padding:.42rem .95rem;border-radius:var(--radius-pill);font-size:.82rem;font-weight:600;background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--txt-dim);cursor:pointer;transition:all var(--dur) var(--ease)}
.pill.active,.pill:hover{background:var(--glass-soft);border-color:var(--accent);color:#fff}

/* ====== Tables ====== */
.table-wrap{overflow-x:auto;border-radius:var(--radius-sm);max-width:100%;min-width:0;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:.88rem;min-width:520px}
table.tbl th{text-align:left;padding:.85rem .9rem;color:var(--txt-dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--glass-border);font-weight:600}
table.tbl td{padding:.8rem .9rem;border-bottom:1px solid rgba(199,125,255,.08)}
table.tbl tbody tr{transition:background var(--dur) var(--ease)}
table.tbl tbody tr:hover{background:var(--glass-soft)}
table.tbl .mono{font-family:var(--mono);white-space:nowrap}

/* ====== Calendar timeline ====== */
.cal-item{display:flex;gap:1rem;padding:.9rem;border-radius:12px;background:var(--glass-bg);border:1px solid var(--glass-border);margin-bottom:.7rem;transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.cal-item:hover{border-color:var(--accent);transform:translateX(4px)}
.cal-time{min-width:90px;font-family:var(--mono);font-size:.82rem;color:var(--highlight)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot-high{background:var(--red)}.dot-medium{background:var(--yellow)}.dot-low{background:var(--blue)}

/* ====== Ticker ====== */
.ticker{background:rgba(15,8,28,.7);backdrop-filter:blur(14px);border-bottom:1px solid var(--glass-border);overflow:hidden;white-space:nowrap;font-size:.82rem}
.ticker-track{display:inline-flex;gap:2rem;padding:.5rem 0;animation:tickerScroll 42s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{display:inline-flex;gap:.4rem;align-items:center;color:var(--txt-dim)}
.ticker-item .sym{color:var(--txt);font-weight:600}
.ticker-item .up{color:var(--green)}.ticker-item .down{color:var(--red)}

/* ====== Sidebar (left navigation) ====== */
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.18rem;color:#fff}
.brand .logo{width:38px;height:38px;border-radius:11px;background:var(--grad);display:grid;place-items:center;font-weight:900;color:#fff;box-shadow:var(--shadow-glow);animation:pulseGlow 3s ease-in-out infinite;flex-shrink:0}
.brand small{display:block;font-size:.58rem;font-weight:500;color:var(--txt-dim);letter-spacing:1px}
.lang-switch{font-size:.78rem;justify-content:center}

.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--side-w,256px);z-index:1100;
  display:flex;flex-direction:column;padding:1.1rem 1rem;gap:.6rem;
  background:rgba(10,5,20,.72);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  border-right:1px solid var(--glass-border);overflow-y:auto;
}
.sidebar .brand{margin-bottom:.4rem}
.side-nav{display:flex;flex-direction:column;gap:.2rem;flex:1 1 auto}
.side-nav a{
  display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border-radius:11px;
  color:var(--txt-dim);font-size:.9rem;font-weight:500;white-space:nowrap;
  transition:all var(--dur) var(--ease);
}
.side-nav a i{font-size:1.05rem;width:20px;text-align:center;flex-shrink:0}
.side-nav a:hover{color:#fff;background:var(--glass-soft)}
.side-nav a.active{color:#fff;background:var(--grad);box-shadow:0 6px 18px rgba(127,90,240,.35)}
.side-foot{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.side-foot .lang-switch{justify-content:center}
.side-user{display:flex;align-items:center;gap:.35rem}
.side-user-name{font-size:.82rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:.35rem;padding:0 .3rem}

/* ====== Top bar (above main content) ====== */
.topbar{position:sticky;top:0;z-index:900;background:rgba(8,4,16,.6);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--glass-border)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem clamp(16px,4vw,56px)}
.topbar-greet{font-size:.92rem;color:var(--txt-dim);display:flex;align-items:center;gap:.45rem}
.topbar-greet strong{color:#fff}
.topbar-actions{flex-shrink:0}

/* content shell offset by sidebar width on desktop */
.main-shell{margin-left:var(--side-w,256px);min-height:100vh;transition:margin-left var(--dur) var(--ease)}

/* mobile toggle + backdrop */
.sidebar-toggle{display:none;position:fixed;top:14px;left:14px;z-index:1200;width:44px;height:44px;border-radius:12px;border:1px solid var(--glass-border);background:rgba(10,5,20,.7);color:#fff;font-size:1.4rem;backdrop-filter:blur(12px)}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);z-index:1050;opacity:0;transition:opacity var(--dur) var(--ease)}

/* legacy navbar (kept for compatibility, hidden) */
.navbar{display:none}

/* ====== Hero ====== */
.hero{position:relative;padding:90px 0 60px;text-align:center;overflow:hidden}
.hero h1{font-size:clamp(2.4rem,6vw,4.3rem);font-weight:800;line-height:1.05;letter-spacing:-.02em}
.hero .tagline{font-size:clamp(1rem,2.5vw,1.4rem);color:var(--highlight);font-weight:600;margin-top:.8rem}
.hero p.desc{max-width:720px;margin:1.4rem auto 0;color:var(--txt-dim);font-size:1.05rem}
.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}

/* ====== Footer ====== */
.footer{margin-top:80px;padding:56px 0 24px;border-top:1px solid var(--glass-border);background:rgba(10,5,20,.5)}
.footer h4{font-size:.8rem;text-transform:uppercase;letter-spacing:1px;color:var(--highlight);margin-bottom:1rem}
.footer ul li{margin-bottom:.5rem}.footer ul a{color:var(--txt-dim);font-size:.9rem}
.footer-bottom{text-align:center;color:var(--txt-muted);font-size:.82rem;padding-top:1.5rem;border-top:1px solid var(--glass-border)}

/* ====== Misc ====== */
.chart-box{height:520px;border-radius:var(--radius);overflow:hidden}
.locked{position:relative}
.locked::after{content:"🔒";position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,3,10,.7);backdrop-filter:blur(4px);border-radius:var(--radius-sm);font-size:1.5rem}
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.1),rgba(255,255,255,.04));background-size:200% 100%;animation:shimmer 1.4s infinite}

/* ====== Floating Action Button (WhatsApp) ====== */
.fab{position:fixed;right:22px;bottom:22px;z-index:1200;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.6rem;background:linear-gradient(135deg,#25D366,#128C7E);box-shadow:0 10px 30px rgba(37,211,102,.45);transition:transform var(--dur) var(--ease)}
.fab:hover{transform:scale(1.1)}
.fab::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(37,211,102,.5);animation:fabPulse 2s ease-out infinite;z-index:-1}
@keyframes fabPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.8);opacity:0}}