.frx-sub/* ============================================================
reports-ui.css — Reusable "FRX" report UI kit
------------------------------------------------------------
Self-contained: does NOT depend on Tailwind colors/gradients/
shadows/animations. Works on any page without a build step.
USAGE:
1) Load once (e.g. in partials/layouts/head.php):
...
3) Reuse the classes below (frx-card, frx-tile, frx-hero, etc.)
in forms / campaign / events / video / number reports.
Brand accent: ORANGE. Layout/spacing/typography still uses
the template's existing Tailwind utility classes.
============================================================ */
:root .frx{
--frx-bg:#ffffff; --frx-border:#e5e7eb; --frx-ink:#0f172a;
--frx-muted: #9ca3af; --frx-track:#eef2f7;
--frx-orange:#f97316; --frx-orange-d:#ea580c;
}
.frx{
--frx-bg:#ffffff; --frx-border:#e5e7eb; --frx-ink:#0f172a;
--frx-muted: #9ca3af; --frx-track:#eef2f7;
--frx-orange:#f97316; --frx-orange-d:#ea580c;
}
.dark .frx, html.dark .frx{
--frx-bg:#171717; --frx-border:#2a2a2a; --frx-ink:#ffffff;
--frx-muted:#9ca3af; --frx-track:#262626;
}
.frx *{ box-sizing:border-box; }
/* vertical rhythm so sections never stick together */
.frx > *{ margin-top:1.75rem; }
.frx > *:first-child{ margin-top:0; }
/* ---------- text helpers ---------- */
.frx-ink{ color:var(--frx-ink); }
.frx-muted{ color:var(--frx-muted); }
.frx-tnum{ font-variant-numeric:tabular-nums; }
.frx-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.frx-num{ font-weight:900; font-variant-numeric:tabular-nums; color:var(--frx-ink); }
.frx-label{ font-size:1rem; font-weight:500; letter-spacing:.06em; /* text-transform:uppercase; */ color:var(--frx-muted); }
.frx-sub{ font-size: 14px; color: var(--txt-muted); }
.frx-t-orange{ color:#ea580c; }
.frx-t-orange-bright{ color:#f97316; }
.frx-t-emerald{ color:#059669; }
.frx-t-emerald-bright{ color:#10b981; }
.frx-t-blue{ color:#2563eb; }
.frx-t-purple{ color:#9333ea; }
.frx-t-red{ color:#ef4444; }
.frx-cream{ color:#ffedd5; }
.frx-cream-dim{ color:rgba(255,237,213,.85); }
.frx-divider-dashed{ border-top:1px dashed var(--frx-border); }
.frx-divider{ border-bottom:1px solid var(--frx-border); }
.frx-code{ padding:.1rem .35rem; border-radius:.25rem; background:var(--frx-track); }
/* ---------- card ---------- */
.frx-card{
background:var(--frx-bg); border:1px solid var(--frx-border);
border-radius:1rem; box-shadow:0 1px 3px rgba(15,23,42,.06);
transition:transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .3s;
position:relative; overflow:hidden;
}
.frx-card:hover{ transform:translateY(-4px); }
.frx-glow-orange:hover{ box-shadow:0 22px 45px -14px rgba(249,115,22,.40); }
.frx-glow-emerald:hover{ box-shadow:0 22px 45px -14px rgba(16,185,129,.40); }
.frx-glow-blue:hover{ box-shadow:0 22px 45px -14px rgba(59,130,246,.40); }
.frx-glow-purple:hover{ box-shadow:0 22px 45px -14px rgba(168,85,247,.40); }
/* ---------- gradient icon tiles ---------- */
.frx-tile{
width:3rem; height:3rem; border-radius:.85rem;
display:flex; align-items:center; justify-content:center;
color:#fff; font-size:1.5rem; flex:0 0 auto; transition:transform .3s;
}
.frx-tile-lg{ width:3.5rem; height:3.5rem; border-radius:1rem; font-size:1.75rem; }
.frx-card:hover .frx-tile{ transform:scale(1.1); }
.frx-tile-orange{ background:linear-gradient(135deg,#fb923c,#ea580c); box-shadow:0 10px 22px -6px rgba(249,115,22,.55); }
.frx-tile-emerald{ background:linear-gradient(135deg,#10b981,#0d9488); box-shadow:0 10px 22px -6px rgba(16,185,129,.55); }
.frx-tile-blue{ background:linear-gradient(135deg,#3b82f6,#06b6d4); box-shadow:0 10px 22px -6px rgba(59,130,246,.55); }
.frx-tile-fuchsia{ background:linear-gradient(135deg,#a855f7,#c026d3); box-shadow:0 10px 22px -6px rgba(168,85,247,.55); }
.frx-tile-indigo{ background:linear-gradient(135deg,#6366f1,#7c3aed); box-shadow:0 10px 22px -6px rgba(99,102,241,.55); }
.frx-tile-red{ background:linear-gradient(135deg,#f87171,#dc2626); box-shadow:0 10px 22px -6px rgba(239,68,68,.55); }
/* ---------- corner ambient glow (inside cards) ---------- */
.frx-corner{
position:absolute; right:-1.5rem; top:-1.5rem;
width:6rem; height:6rem; border-radius:9999px;
filter:blur(34px); opacity:0; transition:opacity .5s;
}
.frx-card:hover .frx-corner{ opacity:.8; }
.frx-corner-orange{ background:rgba(249,115,22,.35); }
.frx-corner-emerald{ background:rgba(16,185,129,.35); }
.frx-corner-blue{ background:rgba(59,130,246,.35); }
.frx-corner-purple{ background:rgba(168,85,247,.35); }
/* ---------- hero (orange gradient) ---------- */
.frx-hero{
position:relative; overflow:hidden; border-radius:1.5rem; padding:2rem; color:#fff;
background:linear-gradient(135deg,#f97316 0%,#ea580c 55%,#c2410c 100%);
box-shadow:0 30px 60px -20px rgba(194,65,12,.5);
}
.frx-hero-g1{ position:absolute; top:-5rem; right:-5rem; width:18rem; height:18rem; border-radius:9999px; background:rgba(253,186,116,.30); filter:blur(70px); }
.frx-hero-g2{ position:absolute; bottom:-6rem; left:-3rem; width:18rem; height:18rem; border-radius:9999px; background:rgba(251,146,60,.25); filter:blur(70px); }
.frx-chip{ font-size:.72rem; font-weight:500; color:rgba(255,237,213,.95); background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); border-radius:9999px; padding:.35rem .85rem; }
/* ---------- funnel bars ---------- */
.frx-track{ height:2.75rem; border-radius:.75rem; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25); overflow:hidden; }
.frx-fill{ height:100%; display:flex; align-items:center; padding:0 1rem; border-radius:.75rem; }
.frx-fill-impr{ background:rgba(255,255,255,.30); }
.frx-fill-sub{ background:linear-gradient(90deg,#ffffff,#fff7ed); box-shadow:0 8px 18px -6px rgba(0,0,0,.25); }
.frx-fill-tag{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.frx-fill-impr .frx-fill-tag{ color:#fff; }
.frx-fill-sub .frx-fill-tag{ color:#9a3412; }
/* ---------- conversion ring ---------- */
.frx-ring-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.frx-ring-outer{ position:relative; width:9rem; height:9rem; border-radius:9999px; }
.frx-ring-inner{ position:absolute; inset:.75rem; border-radius:9999px; background:rgba(124,45,18,.55); border:1px solid rgba(255,255,255,.2); display:flex; flex-direction:column; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
@media (min-width:1024px){ .frx-ring-wrap{ border-left:1px solid rgba(255,255,255,.2); padding-left:2rem; } }
/* ---------- top accent strip ---------- */
.frx-accent{ position:absolute; left:0; right:0; top:0; height:4px; }
.frx-accent-contact{ background:linear-gradient(90deg,#3b82f6,#22d3ee); }
.frx-accent-lead{ background:linear-gradient(90deg,#a855f7,#e879f9); }
.frx-accent-orange{ background:linear-gradient(90deg,#fb923c,#ea580c); }
/* ---------- badges + dots ---------- */
.frx-badge{ display:inline-flex; align-items:center; gap:.4rem; font-size:11px; font-weight:700; padding:.15rem .5rem; border-radius:.45rem; }
.frx-badge-contact{ background:rgba(59,130,246,.12); color:#1d4ed8; border:1px solid rgba(59,130,246,.25); }
.frx-badge-lead{ background:rgba(168,85,247,.12); color:#7e22ce; border:1px solid rgba(168,85,247,.25); }
.frx-badge-other{ background:rgba(100,116,139,.12); color:#475569; border:1px solid rgba(100,116,139,.25); }
.dark .frx .frx-badge-contact{ color:#93c5fd; }
.dark .frx .frx-badge-lead{ color:#e9d5ff; }
.dark .frx .frx-badge-other{ color:#cbd5e1; }
.frx-dot{ width:.4rem; height:.4rem; border-radius:9999px; }
.frx-dot-contact{ background:#3b82f6; }
.frx-dot-lead{ background:#a855f7; }
.frx-dot-other{ background:#94a3b8; }
/* ---------- table ---------- */
.frx-table{ width:100%; border-collapse:collapse; font-size:.875rem; }
.frx-table thead th{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--frx-muted); padding:.75rem 1.5rem; background:rgba(148,163,184,.06); border-bottom:1px solid var(--frx-border); text-align:left; }
.frx-table tbody td{ padding:1rem 1.5rem; border-bottom:1px solid var(--frx-border); white-space:nowrap; }
.frx-table tbody tr{ transition:background .2s; }
.frx-table tbody tr:hover{ background:rgba(249,115,22,.06); }
.frx-ta-r{ text-align:right; }
.frx-table thead th.frx-ta-r{ text-align:right; }
.frx-ta-l{ text-align:left; }
.frx-ta-center{ text-align:center; }
.frx-table thead th.frx-ta-center{ text-align:center; }
.frx-th-conv{ width:13rem; }
.frx-fname-icon{ width:2.25rem; height:2.25rem; border-radius:.6rem; background:rgba(249,115,22,.12); color:#ea580c; display:flex; align-items:center; justify-content:center; font-size:1.1rem; transition:transform .2s; }
.frx-table tbody tr:hover .frx-fname-icon{ transform:scale(1.1); }
.frx-conv-track{ flex:1; max-width:7.5rem; height:.5rem; border-radius:9999px; background:var(--frx-track); overflow:hidden; }
.frx-conv-fill{ height:100%; border-radius:9999px; background:linear-gradient(90deg,#fb923c,#ea580c); }
/* ---------- live pill ---------- */
.frx-live{ display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:700; color:#c2410c; background:rgba(249,115,22,.1); border:1px solid rgba(249,115,22,.25); border-radius:9999px; padding:.4rem .9rem; }
.dark .frx .frx-live{ color:#fdba74; }
.frx-pulse{ position:relative; display:flex; width:.5rem; height:.5rem; }
.frx-pulse i{ position:absolute; inset:0; border-radius:9999px; background:#f97316; }
.frx-pulse-ping{ animation:frx-ping 1.4s cubic-bezier(0,0,.2,1) infinite; opacity:.7; }
/* ---------- info note ---------- */
.frx-note{ display:flex; align-items:flex-start; gap:.75rem; padding:1rem 1.15rem; border-radius:1rem; background:linear-gradient(90deg,rgba(249,115,22,.09),rgba(251,146,60,.05)); border:1px solid rgba(249,115,22,.2); color:#9a3412; font-size:.75rem; line-height:1.55; }
.dark .frx .frx-note{ color:#fed7aa; }
/* ---------- empty state ---------- */
.frx-empty-icon{ width:4rem; height:4rem; border-radius:1rem; background:linear-gradient(135deg,#fff7ed,#ffedd5); display:flex; align-items:center; justify-content:center; font-size:2rem; color:#fb923c; }
.dark .frx .frx-empty-icon{ background:linear-gradient(135deg,#262626,#1f1f1f); }
/* ---------- animations ---------- */
@keyframes frx-rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes frx-grow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes frx-ringin{ from{ opacity:0; transform:scale(.82); } to{ opacity:1; transform:scale(1); } }
@keyframes frx-ping{ 75%,100%{ transform:scale(2.2); opacity:0; } }
.frx-rise{ animation:frx-rise .6s cubic-bezier(.16,.84,.44,1) both; }
.frx-grow{ transform-origin:left; animation:frx-grow 1.1s cubic-bezier(.16,.84,.44,1) both; }
.frx-ringin{ animation:frx-ringin .7s cubic-bezier(.16,.84,.44,1) both; }
/* staggered entrance delays */
.frx-d1{ animation-delay:.05s; }
.frx-d2{ animation-delay:.12s; }
.frx-d3{ animation-delay:.19s; }
.frx-d4{ animation-delay:.24s; }
.frx-d5{ animation-delay:.30s; }
.frx-d6{ animation-delay:.37s; }
.frx-d7{ animation-delay:.42s; }
.frx-d8{ animation-delay:.48s; }
@media (prefers-reduced-motion:reduce){
.frx-rise, .frx-grow, .frx-ringin, .frx-pulse-ping{ animation:none !important; }
}
/* ============================================================
Additions for Google Ads report (reusable)
============================================================ */
.frx-tile-amber{ background:linear-gradient(135deg,#fbbf24,#d97706); box-shadow:0 10px 22px -6px rgba(217,119,6,.55); }
.frx-t-amber{ color:#d97706; }
/* up / down trend chips (ROAS, ROI, deltas) */
.frx-chip-up{ display:inline-flex; align-items:center; gap:.3rem; font-size:11px; font-weight:700; padding:.15rem .5rem; border-radius:.45rem; background:rgba(16,185,129,.12); color:#059669; border:1px solid rgba(16,185,129,.25); }
.frx-chip-down{ display:inline-flex; align-items:center; gap:.3rem; font-size:11px; font-weight:700; padding:.15rem .5rem; border-radius:.45rem; background:rgba(239,68,68,.12); color:#dc2626; border:1px solid rgba(239,68,68,.25); }
.dark .frx .frx-chip-up{ color:#6ee7b7; }
.dark .frx .frx-chip-down{ color:#fca5a5; }
/* colored conversion / roas bar fills */
.frx-conv-fill-good{ background:linear-gradient(90deg,#34d399,#059669); }
.frx-conv-fill-bad{ background:linear-gradient(90deg,#f87171,#dc2626); }
/* monospace pill for campaign names / ids */
.frx-mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; padding:.15rem .5rem; border-radius:.4rem; background:var(--frx-track); color:var(--frx-ink); border:1px solid var(--frx-border); }
/* ============================================================
Additions for Author / leaderboard style reports (reusable)
============================================================ */
/* avatar (initials) — rotate color by index */
.frx-avatar{ width:2.75rem; height:2.75rem; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; text-transform:uppercase; color:#fff; flex:0 0 auto; }
.frx-avatar-0{ background:linear-gradient(135deg,#fb923c,#ea580c); }
.frx-avatar-1{ background:linear-gradient(135deg,#6366f1,#7c3aed); }
.frx-avatar-2{ background:linear-gradient(135deg,#10b981,#0d9488); }
.frx-avatar-3{ background:linear-gradient(135deg,#3b82f6,#06b6d4); }
.frx-avatar-4{ background:linear-gradient(135deg,#a855f7,#c026d3); }
/* rank badge (leaderboard) */
.frx-rank{ position:absolute; top:.85rem; right:.85rem; width:1.6rem; height:1.6rem; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:800; color:#fff; background:#94a3b8; }
.frx-rank-1{ background:linear-gradient(135deg,#fbbf24,#d97706); box-shadow:0 4px 10px -2px rgba(217,119,6,.5); }
.frx-rank-2{ background:linear-gradient(135deg,#cbd5e1,#94a3b8); }
.frx-rank-3{ background:linear-gradient(135deg,#fb923c,#b45309); }
/* inner stat block */
.frx-statbox{ background:var(--frx-track); border-radius:.75rem; padding:.85rem 1rem; }
/* search input */
.frx-search-wrap{ position:relative; width:100%; max-width:18rem; }
.frx-search-wrap > iconify-icon{ position:absolute; left:.85rem; top:35%; transform:translateY(-50%); color:#94a3b8; font-size:1.1rem; pointer-events:none; }
.frx-search{ width:100%; padding:.55rem .85rem .55rem 2.4rem; border-radius:.6rem; border:1px solid var(--frx-border); background:var(--frx-bg); color:var(--frx-ink); font-size:.85rem; outline:none; transition:box-shadow .2s, border-color .2s; }
.frx-search:focus{ border-color:#f97316; box-shadow:0 0 0 3px rgba(249,115,22,.15); }
.frx-search::placeholder{ color:#94a3b8; }
/* full-width progress bar */
.frx-progress{ height:.375rem; border-radius:9999px; background:var(--frx-track); overflow:hidden; width:100%; }
.frx-progress-bar{ height:100%; border-radius:9999px; background:linear-gradient(90deg,#fb923c,#ea580c); }
/* ============================================================
Additions for hourly / column charts (reusable)
============================================================ */
.frx-cols{ display:flex; align-items:flex-end; gap:.25rem; height:9rem; }
.frx-col{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:.35rem; min-width:0; }
.frx-col-track{ width:100%; height:100%; display:flex; align-items:flex-end; }
.frx-col-bar{ width:100%; border-radius:.35rem .35rem 0 0; background:linear-gradient(180deg,#fb923c,#ea580c); min-height:3px; }
.frx-col-bar.peak{ background:linear-gradient(180deg,#fbbf24,#dc2626); box-shadow:0 -2px 10px -2px rgba(220,38,38,.5); }
.frx-col-label{ font-size:9px; color:var(--frx-muted); font-variant-numeric:tabular-nums; line-height:1; }
@keyframes frx-growy{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.frx-growy{ transform-origin:bottom; animation:frx-growy .9s cubic-bezier(.16,.84,.44,1) both; }
@media (prefers-reduced-motion:reduce){ .frx-growy{ animation:none !important; } }
/* ============================================================
Additions for tabbed reports (reusable)
============================================================ */
.frx-tabs{ display:flex; flex-wrap:wrap; gap:.5rem; }
.frx-tab{ display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius:.7rem; border:1px solid var(--frx-border); background:var(--frx-bg); color:var(--frx-muted); font-size:.85rem; font-weight:700; cursor:pointer; transition:border-color .2s, color .2s, box-shadow .2s, background .2s; }
.frx-tab:hover{ border-color:#f97316; color:var(--frx-ink); }
.frx-tab.active{ background:linear-gradient(135deg,#fb923c,#ea580c); color:#fff; border-color:transparent; box-shadow:0 10px 22px -8px rgba(249,115,22,.5); }
.frx-tab-dot{ width:.5rem; height:.5rem; border-radius:9999px; background:#cbd5e1; flex:0 0 auto; }
.frx-tab-dot.on{ background:#10b981; }
.frx-tab.active .frx-tab-dot{ background:rgba(255,255,255,.9); }
.frx-tab-count{ font-size:.7rem; font-weight:800; padding:.05rem .4rem; border-radius:.4rem; background:var(--frx-track); color:var(--frx-muted); }
.frx-tab.active .frx-tab-count{ background:rgba(255,255,255,.22); color:#fff; }
.frx-panel{ display:none; }
.frx-panel.active{ display:block; }
/* ============================================================
Additions for settings / form screens (reusable)
============================================================ */
.frx-field-label{ font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--frx-muted); margin-bottom:.4rem; display:block; }
.frx-input, .frx-select{ width:100%; padding:.55rem .85rem; border-radius:.6rem; border:1px solid var(--frx-border); background:var(--frx-bg); color:var(--frx-ink); font-size:.875rem; outline:none; transition:border-color .2s, box-shadow .2s; }
.frx-input:focus, .frx-select:focus{ border-color:#f97316; box-shadow:0 0 0 3px rgba(249,115,22,.15); }
.frx-input::placeholder{ color:#94a3b8; }
/* toggle switch */
.frx-switch{ position:relative; display:inline-flex; align-items:center; cursor:pointer; }
.frx-switch input{ position:absolute; opacity:0; width:0; height:0; }
.frx-switch-track{ width:2.6rem; height:1.5rem; border-radius:9999px; background:var(--frx-track); border:1px solid var(--frx-border); transition:background .2s, border-color .2s; position:relative; }
.frx-switch-thumb{ position:absolute; top:50%; left:.18rem; transform:translateY(-50%); width:1.05rem; height:1.05rem; border-radius:9999px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .2s; }
.frx-switch input:checked + .frx-switch-track{ background:linear-gradient(90deg,#fb923c,#ea580c); border-color:transparent; }
.frx-switch input:checked + .frx-switch-track .frx-switch-thumb{ left:1.37rem; }
/* section check card */
.frx-check{ display:flex; align-items:center; gap:.6rem; padding:.7rem .85rem; border:1px solid var(--frx-border); border-radius:.7rem; cursor:pointer; transition:border-color .2s, background .2s; }
.frx-check:hover{ border-color:#f97316; }
.frx-check input{ accent-color:#ea580c; width:1.05rem; height:1.05rem; flex:0 0 auto; }
.frx-check.checked{ border-color:#f97316; background:rgba(249,115,22,.06); }
/* buttons */
.frx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.6rem 1.1rem; border-radius:.7rem; font-size:.875rem; font-weight:700; cursor:pointer; border:1px solid transparent; transition:transform .15s, box-shadow .2s, background .2s, border-color .2s; }
.frx-btn:hover{ transform:translateY(-1px); }
.frx-btn-orange{ background:linear-gradient(135deg,#fb923c,#ea580c); color:#fff; box-shadow:0 10px 22px -8px rgba(249,115,22,.6); }
.frx-btn-ghost{ background:var(--frx-bg); color:var(--frx-ink); border-color:var(--frx-border); }
.frx-btn-ghost:hover{ border-color:#f97316; }
.frx-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
/* recipient chips */
.frx-chip-tag{ display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .6rem; border-radius:.5rem; background:rgba(249,115,22,.1); color:#c2410c; border:1px solid rgba(249,115,22,.25); font-size:.8rem; font-weight:600; }
.dark .frx .frx-chip-tag{ color:#fdba74; }
.frx-chip-tag button{ background:none; border:none; color:inherit; cursor:pointer; display:inline-flex; opacity:.7; padding:0; line-height:1; }
.frx-chip-tag button:hover{ opacity:1; }
/* toast */
.frx-toast{ position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; align-items:center; gap:.6rem; padding:.8rem 1.1rem; border-radius:.75rem; font-size:.875rem; font-weight:600; color:#fff; box-shadow:0 18px 40px -12px rgba(0,0,0,.4); opacity:0; transform:translateY(12px); transition:opacity .25s, transform .25s; pointer-events:none; }
.frx-toast.show{ opacity:1; transform:translateY(0); }
.frx-toast.ok{ background:linear-gradient(135deg,#10b981,#059669); }
.frx-toast.err{ background:linear-gradient(135deg,#f87171,#dc2626); }
/* ===== "More" tabs dropdown (pure CSS hover) ===== */
.frx-more {
position: relative;
}
.frx-more .frx-more-pop {
position: absolute;
top: 100%;
right: 0;
min-width: 300px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
box-shadow: 0 12px 28px -10px rgba(16, 24, 40, .25);
padding: 6px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .15s ease, transform .15s ease;
z-index: 70;
}
.frx-more:hover .frx-more-pop,
.frx-more:focus-within .frx-more-pop {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.frx-more-caret {
transition: transform .15s ease;
}
.frx-more:hover .frx-more-caret,
.frx-more:focus-within .frx-more-caret {
transform: rotate(180deg);
}
.frx-more-pop a {
border-radius: 7px;
}
.dark .frx-more .frx-more-pop {
background: #1f2937;
border-color: #374151;
box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .6);
}
.frx-more-pop a {
border-radius: 7px;
}
/* Light mode hover */
.frx-more-pop a:hover {
background: #f3f4f6; /* gray-100 */
color: #111827; /* gray-900 */
}
/* Dark mode hover - guaranteed, no tailwind dependency */
.dark .frx-more-pop a:hover {
background: #374151; /* gray-700 */
color: #f9fafb; /* near white */
}
/* Active row bg (also tailwind-independent, in case the utility isn't compiled) */
.frx-more-pop a.is-active {
background: #eef2ff; /* indigo-50 */
}
.dark .frx-more-pop a.is-active {
background: rgba(30, 27, 75, .35); /* indigo-950-ish */
}
/* ===== Unified card look (matches the index.php dashboard) ===== */
.frx .frx-card {
border-radius: 16px;
border: 1px solid #eceff3;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px -10px rgba(16, 24, 40, .12);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dark .frx .frx-card {
border-color: #2b2b2b;
box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 22px -12px rgba(0, 0, 0, .65);
}
.frx .frx-card:hover {
transform: translateY(-4px);
border-color: #fed7aa;
/* subtle orange edge on hover */
box-shadow: 0 14px 32px -14px rgba(234, 88, 12, .32), 0 6px 16px -8px rgba(16, 24, 40, .10);
}
.dark .frx .frx-card:hover {
border-color: #7c2d12;
box-shadow: 0 16px 34px -14px rgba(234, 88, 12, .45), 0 6px 16px -8px rgba(0, 0, 0, .6);
}
@media (prefers-reduced-motion: reduce) {
.frx .frx-card {
transition: none;
}
.frx .frx-card:hover {
transform: none;
}
}
/* ===== Heading tooltips (hover on desktop, tap/focus on mobile) ===== */
.frx-tip {
position: relative;
display: inline-flex;
align-items: center;
vertical-align: middle;
margin-left: 6px;
cursor: help;
outline: none;
}
.frx-tip>iconify-icon {
font-size: 1.4rem;
opacity: 1;
transition: opacity .15s ease;
color: var(--txt-primary);
}
.frx-tip:hover>iconify-icon,
.frx-tip:focus-visible>iconify-icon,
.frx-tip:focus-within>iconify-icon {
opacity: 1;
}
.frx-tip-pop {
position: absolute;
top: calc(100% + 9px);
left: -77px;
width: max-content;
max-width: 270px;
background: #1f2937;
color: #f9fafb;
font-size: .72rem;
font-weight: 500;
line-height: 1.55;
letter-spacing: 0;
text-align: left;
text-transform: none;
padding: 9px 12px;
border-radius: 10px;
box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .5);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-4px);
transition: opacity .15s ease, transform .15s ease;
z-index: 60;
white-space: normal;
}
.frx-tip-pop::before {
content: "";
position: absolute;
bottom: 100%;
left: 82px;
border: 6px solid transparent;
border-bottom-color: #1f2937;
}
.frx-tip:hover .frx-tip-pop,
.frx-tip:focus-visible .frx-tip-pop,
.frx-tip:focus-within .frx-tip-pop {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.dark .frx-tip-pop {
background: #0f172a;
color: #e5e7eb;
box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .75);
}
.dark .frx-tip-pop::before {
border-bottom-color: #0f172a;
}