/* =========================================================
   APP THEME — GLASS / NEON (FINAL HARD-LOCKED)
   ---------------------------------------------------------
   ROLE:
   • Global app shell visuals
   • Header + command deck styling
   • Pills, flags, typography helpers
   ---------------------------------------------------------
   HARD BOUNDARY:
   ❌ MUST NOT own #trade-log layout
   ❌ MUST NOT control tooltips
   ❌ MUST NOT define DataTables behavior
   ---------------------------------------------------------
   log.css + log_glass.css own:
   • Trade log table
   • Mobile trade cards
   ========================================================= */

/* =========================================================
   THEME VARIABLES (GLOBAL)
   ---------------------------------------------------------
   NOTE:
   • These are SHARED tokens only
   • Structural/layout rules must NOT live here
   ========================================================= */
:root{
  /* Background */
  --bg-grad-start:#070b16;
  --bg-grad-end:#0b1020;

  /* Panels */
  --panel-bg-soft:rgba(15,23,42,.78);
  --panel-border:rgba(99,102,241,.25);
  --panel-glow:
    0 0 0 1px rgba(99,102,241,.15),
    0 18px 48px rgba(0,0,0,.75),
    0 0 42px rgba(99,102,241,.12);

  /* Text */
  --text-main:#e7ecf7;
  --text-dim:#94a3b8;

  /* Accents */
  --accent-indigo:#6366f1;
  --accent-green:#10b981;
  --accent-amber:#facc15;

  /* State */
  --profit:#4ade80;
  --loss:#f87171;

  /* Pills */
  --pill-radius:9999px;

  /* Mono */
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

/* =========================================================
   BODY (GLOBAL APP SHELL)
   ---------------------------------------------------------
   SAFE:
   • No transforms
   • No contain
   • No overflow clipping
   ========================================================= */
body.app-body{
  min-height:100vh;
  background:
    radial-gradient(circle at 20% 20%, rgba(99,102,241,.08), transparent 60%),
    radial-gradient(circle at 80% 10%, rgba(16,185,129,.06), transparent 60%),
    linear-gradient(180deg,var(--bg-grad-start),var(--bg-grad-end));

  color:var(--text-main);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:13px;
  line-height:1.45;
}

/* =========================================================
   ✅ VISIBILITY CONTRACT (GLOBAL, SAFE)
   ---------------------------------------------------------
   SINGLE SOURCE OF TRUTH:
   • base.html sets html.is-mobile / html.is-desktop at 768px
   • app.css follows those classes ONLY
   ---------------------------------------------------------
   WHY:
   • Prevents breakpoint drift (991px vs 768px conflicts)
   • Stops mobile-only elements appearing on desktop
   ---------------------------------------------------------
   NOTE:
   • log.css MAY additionally hide #trade-log/#trade-log_wrapper
     for mobile — that’s fine.
   • app.css must NOT introduce another breakpoint.
   ========================================================= */

/* default (safe) */
.mobile-only{ display:none !important; }
.desktop-only{ display:block !important; }

/* authoritative (from base.html) */
html.is-mobile .mobile-only{ display:block !important; }
html.is-mobile .desktop-only{ display:none !important; }

html.is-desktop .mobile-only{ display:none !important; }
html.is-desktop .desktop-only{ display:block !important; }

/* =========================================================
   GLASS PANELS (GLOBAL VISUALS ONLY)
   ---------------------------------------------------------
   IMPORTANT:
   • These are VISUAL styles
   • log_glass.css may extend log-panel
   • DO NOT add layout or positioning here
   ========================================================= */
.glass-panel,
.log-panel,
.trade-command-deck,
.dashboard-panel{
  background:var(--panel-bg-soft);
  border-radius:18px;
  border:1px solid var(--panel-border);
  box-shadow:var(--panel-glow);
  backdrop-filter:blur(10px);
}

/* =========================================================
   BASE PILL (GLOBAL)
   ========================================================= */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.28rem 0.7rem;
  min-width:3.6rem;
  border-radius:var(--pill-radius);
  font-size:0.62rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1;
}

/* =========================================================
   STATUS PILLS (GLOBAL SEMANTIC STATES)
   ---------------------------------------------------------
   Used in:
   • Trade cards
   • KPI strip
   • Dashboard
   ========================================================= */
.pill-status-open{
  color:#6ee7b7;
  background:linear-gradient(180deg,#052e1a,#065f46);
  border:1px solid #10b981;
}

.pill-status-closed{
  color:#fecaca;
  background:linear-gradient(180deg,#3f1d1d,#7f1d1d);
  border:1px solid #f87171;
}

.pill-status-failed{
  color:#fed7aa;
  background:linear-gradient(180deg,#3f1d0b,#7c2d12);
  border:1px solid #f97316;
}

/* =========================================================
   OUTCOME PILLS
   ========================================================= */
.pill-outcome.closed{
  color:#fecaca;
  background:linear-gradient(180deg,#3f1d1d,#7f1d1d);
  border:1px solid #f87171;
}

/* =========================================================
   EXECUTION / FLAG BADGES
   ---------------------------------------------------------
   NOTE:
   • Visual only
   • Execution logic lives in backend
   ========================================================= */
.flag-text{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.22rem 0.60rem;
  border-radius:9999px;
  font-size:0.62rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(15,23,42,.55);
  color:var(--text-main);
}

/* Flag variants */
.flag-text.flag-live{
  background:rgba(16,185,129,.14);
  border-color:rgba(16,185,129,.40);
  color:#6ee7b7;
  box-shadow:0 0 14px rgba(16,185,129,.18);
}

.flag-text.flag-mock{
  background:rgba(99,102,241,.14);
  border-color:rgba(99,102,241,.40);
  color:#c7d2fe;
  box-shadow:0 0 14px rgba(99,102,241,.18);
}

.flag-text.flag-nf{
  background:rgba(250,204,21,.12);
  border-color:rgba(250,204,21,.40);
  color:#fde68a;
  box-shadow:0 0 14px rgba(250,204,21,.16);
}

.flag-text.flag-skipped{
  background:rgba(148,163,184,.14);
  border-color:rgba(148,163,184,.35);
  color:#cbd5e1;
}

/* =========================================================
   PROFIT / LOSS HELPERS (GLOBAL)
   ========================================================= */
.pos{
  color:var(--profit);
  text-shadow:0 0 10px rgba(16,185,129,.35);
}
.neg{
  color:var(--loss);
  text-shadow:0 0 10px rgba(248,113,113,.35);
}

/* =========================================================
   NUMERIC HELPERS
   ========================================================= */
.mono{ font-family:var(--mono); }
.numeral{ font-variant-numeric:tabular-nums; }

/* =========================================================
   TABLE SAFETY LOCK — GLOBAL
   ---------------------------------------------------------
   Prevents unintended theming bleed into:
   • Settings tables
   • Admin tables
   • DataTables wrappers
   ---------------------------------------------------------
   ❗ EXPLICITLY EXCLUDES #trade-log
   ========================================================= */
table:not(#trade-log),
table:not(#trade-log) thead,
table:not(#trade-log) tbody,
table:not(#trade-log) tr,
table:not(#trade-log) th,
table:not(#trade-log) td{
  background-color:transparent !important;
}

/* =========================================================
   TRADE LOG — LOW-SPEC SAFE DEFAULTS ONLY
   ---------------------------------------------------------
   These are intentionally weak rules.
   log.css / log_glass.css override everything important.
   ========================================================= */
:where(#trade-log thead th){
  color:var(--text-dim);
  user-select:none;
}

:where(#trade-log thead th.sortable){
  cursor:pointer;
}
:where(#trade-log thead th.sortable:hover){
  color:var(--text-main);
}

/* =========================================================
   HEADER WIDTH LOCK — SAFETY
   ---------------------------------------------------------
   Prevents accidental horizontal scroll
   ========================================================= */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

/* Header containers */
.top-header,
.header-bar,
.app-header,
.trade-command-deck{
  max-width:100%;
  overflow-x:hidden;
}

/* Header action buttons */
.header-actions,
.top-header-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Mobile tightening (visual only) */
@media (max-width:768px){
  .header-actions,
  .top-header-actions{
    justify-content:flex-end;
  }

  .header-actions button,
  .top-header-actions a{
    white-space:nowrap;
    font-size:12px;
    padding:6px 10px;
    max-width:100%;
  }
}

/* =========================================================
   HEADER STACKING FIX — KPI TOOLTIP SAFETY
   ---------------------------------------------------------
   KPI strip z-index = 80
   Headers MUST stay below
   ========================================================= */
.trade-command-deck,
.top-header,
.header-bar,
.app-header,
.dashboard-panel{
  position:relative;
  z-index:10;
}

/* NOTE:
   This block is intentionally duplicated semantically.
   If consolidated later, keep z-index <= 10.
*/
.trade-command-deck,
.top-header,
.header-bar,
.app-header,
.desktop-header{
  position:relative;
  z-index:10;
}
/* =========================================================
   MOBILE HEADER NAV — FIXED HEADER SAFE
   (LAYOUT ONLY — NO POSITIONING)
   ========================================================= */

html.is-mobile .app-header-inner{
  display:flex;
  flex-direction:column;
  align-items:stretch;

  gap:12px;
  padding:12px 14px 10px;

  /* Prevent internal scroll / collapse */
  min-height:0;
}

/* Nav row */
html.is-mobile .app-nav{
  display:flex;
  width:100%;
  gap:10px;

  justify-content:space-between;
  align-items:center;
}

/* Nav buttons */
html.is-mobile .app-nav a{
  flex:1 1 0;

  text-align:center;
  white-space:nowrap;

  padding:10px 0;

  border-radius:999px;
}

/* =========================================================
   HEADER → CONTENT SPACING CONTRACT (FINAL)
   ========================================================= */

/* Lock header height */
.app-header{
  height: 58px;
  min-height: 58px;
  display: flex;
  align-items: center;
}

/* Prevent content from visually colliding with header */
main.app-content{
  padding-top: 22px;
}

/* Desktop: give command deck breathing room */
html.is-desktop main.app-content{
  padding-top: 28px;
}

/* Mobile: slightly tighter, still clean */
html.is-mobile main.app-content{
  padding-top: 20px;
}

/* KPI strip never touches header */
.kpi-strip,
.summary-strip{
  margin-top: 0;
}

/* Desktop command deck top alignment */
html.is-desktop .desktop-shell{
  padding-top: 4px;
}
/* =========================================================
   DESKTOP — LOG PAGE HEIGHT CONTRACT (CRITICAL)
   ========================================================= */
html.is-desktop,
html.is-desktop body{
  height:100%;
}

html.is-desktop main.app-content{
  height:calc(100vh - 58px); /* matches .app-header height */
  min-height:0;
}

html.is-desktop .log-grid{
  height:100%;
  min-height:0;
}

/* =========================================================
   EXCHANGE CONFIRM — BUTTON VISUAL NORMALIZATION (FINAL)
   ========================================================= */

/* Shared button base */
.exchange-confirm-card .confirm-actions button,
.exchange-confirm-card .confirm-actions a{
  display: flex;
  align-items: center;
  justify-content: center;

  height: 44px;
  padding: 0 16px;

  border-radius: 14px;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;

  cursor: pointer;
  text-decoration: none;
  user-select: none;

  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background .12s ease;
}

/* Cancel (secondary) */
.exchange-confirm-card .confirm-actions .cancel{
  background:
    linear-gradient(
      180deg,
      rgba(148,163,184,.25),
      rgba(15,23,42,.9)
    );

  border: 1px solid rgba(148,163,184,.35);
  color: #cbd5f5;
}

/* Continue (PRIMARY) */
.exchange-confirm-card .confirm-actions .confirm{
  background:
    linear-gradient(
      180deg,
      rgba(99,102,241,.55),
      rgba(79,70,229,.95)
    );

  border: 1px solid rgba(129,140,248,.75);
  color: #ffffff;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 24px rgba(99,102,241,.45);
}

/* Hover / press feedback */
.exchange-confirm-card .confirm-actions button:hover,
.exchange-confirm-card .confirm-actions a:hover{
  transform: translateY(-1px);
}

.exchange-confirm-card .confirm-actions button:active,
.exchange-confirm-card .confirm-actions a:active{
  transform: translateY(0);
  box-shadow: none;
}
/* =========================================================
   EXCHANGE CONFIRM — GEMINI BRAND OVERRIDE
   ========================================================= */

.exchange-confirm-card .confirm-actions .confirm.gemini{
  background:
    linear-gradient(
      180deg,
      rgba(245,158,11,.55),
      rgba(217,119,6,.95)
    );

  border: 1px solid rgba(245,158,11,.75);
  color: #fff;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 26px rgba(245,158,11,.55);
}

.exchange-confirm-card .confirm-actions .confirm.gemini:hover{
  box-shadow:
    0 0 0 1px rgba(245,158,11,.5),
    0 12px 36px rgba(245,158,11,.35);
}
/* =========================================================
   EXCHANGE COLUMN — BRAND COLORS (AUTHORITATIVE)
   ========================================================= */

/* Base exchange cell */
#trade-log td.exchange,
.trade-card .exchange {
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ---------- COINBASE ---------- */
#trade-log td.ex-coinbase,
.trade-card .ex-coinbase {
  color: #4f8cff; /* Coinbase blue */
  text-shadow:
    0 0 6px rgba(79,140,255,.45),
    0 0 12px rgba(79,140,255,.25);
}

/* ---------- GEMINI ---------- */
#trade-log td.ex-gemini,
.trade-card .ex-gemini {
  color: #f59e0b; /* Gemini orange */
  text-shadow:
    0 0 6px rgba(245,158,11,.45),
    0 0 12px rgba(245,158,11,.25);
}
/* =========================================================
   EXCHANGE PILL — BRAND COLORS (AUTHORITATIVE)
   ========================================================= */

.ex-pill{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1;
}

/* ================= COINBASE ================= */
tr.ex-coinbase .ex-pill{
  background: linear-gradient(
    180deg,
    rgba(59,130,246,.35),
    rgba(37,99,235,.95)
  );
  color:#eff6ff;
  box-shadow:
    0 0 0 1px rgba(147,197,253,.55),
    0 0 14px rgba(59,130,246,.55);
}

/* ================= GEMINI ================= */
tr.ex-gemini .ex-pill{
  background: linear-gradient(
    180deg,
    rgba(251,146,60,.35),
    rgba(234,88,12,.95)
  );
  color:#fff7ed;
  box-shadow:
    0 0 0 1px rgba(253,186,116,.55),
    0 0 14px rgba(251,146,60,.55);
}
/* =========================================================
   EXCHANGE BUTTON — BRAND SKINS (FINAL)
   ========================================================= */

.trade-card .btn-exchange {
  flex: 1;
  padding: 14px 16px;
  border-radius: 18px;
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Coinbase */
.trade-card .btn-exchange.coinbase {
  color: #e7f0ff;
  background:
    linear-gradient(180deg, rgba(59,130,246,.45), rgba(30,58,138,.85));
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 1px rgba(59,130,246,.25),
              0 10px 30px rgba(0,0,0,.6);
}

/* Gemini */
.trade-card .btn-exchange.gemini {
  color: #fff4e6;
  background:
    linear-gradient(180deg, rgba(249,115,22,.45), rgba(124,45,18,.9));
  border-color: rgba(249,115,22,.6);
  box-shadow: 0 0 0 1px rgba(249,115,22,.3),
              0 10px 30px rgba(0,0,0,.6);
}

.trade-card .btn-exchange:active {
  transform: scale(.97);
}
/* =========================================================
   MOBILE TRADE CARD — FINAL AUTHORITATIVE STYLES
   ========================================================= */
html.is-mobile .trade-card-glass{
  background:
    radial-gradient(140% 160% at 50% 0%,
      rgba(99,102,241,.28),
      rgba(8,12,30,.96)
    ),
    linear-gradient(180deg,
      rgba(15,23,42,.96),
      rgba(5,8,20,.96)
    );

  border-radius:26px;
  padding:22px 18px 24px;
  border:1px solid rgba(99,102,241,.45);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 28px 70px rgba(0,0,0,.85),
    0 0 40px rgba(99,102,241,.35);
}

/* Action row */
html.is-mobile .trade-card-actions{
  display:flex;
  gap:14px;
  margin-top:20px;
}

/* TradingView */
html.is-mobile .btn-tv{
  flex:1;
  padding:14px;
  border-radius:16px;
  font-weight:900;
  background:linear-gradient(180deg,#38bdf8,#0284c7);
  color:white;
}

/* Coinbase */
html.is-mobile .btn-coinbase{
  flex:1;
  padding:14px;
  border-radius:16px;
  font-weight:900;
  background:linear-gradient(180deg,#4f6bff,#3b4bdc);
  color:white;
  box-shadow:0 10px 30px rgba(79,107,255,.45);
}

/* Gemini */
html.is-mobile .btn-gemini{
  flex:1;
  padding:14px;
  border-radius:16px;
  font-weight:900;
  background:linear-gradient(180deg,#ffb020,#ff8c00);
  color:#1a1200;
  box-shadow:0 10px 30px rgba(255,140,0,.45);
}
html.is-mobile main.app-content{
  padding-top: calc(64px + env(safe-area-inset-top));
}