/* Fullport modern UI layer. Scoped, consistent, no page-width changes. */

:root {
  --fp-bg: #050817;
  --fp-surface: rgba(15, 23, 42, 0.88);
  --fp-surface-2: rgba(20, 31, 55, 0.88);
  --fp-border: rgba(148, 163, 184, 0.16);
  --fp-border-2: rgba(148, 163, 184, 0.28);
  --fp-text: #f6f8ff;
  --fp-muted: #94a3b8;
  --fp-blue: #60a5fa;
  --fp-blue-2: #2563eb;
  --fp-green: #34d399;
  --fp-red: #fb7185;
  --fp-amber: #fbbf24;
  --fp-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
  --fp-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.16);
  --fp-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  font-family: var(--fp-font);
  background:
    radial-gradient(circle at 20% 0%, rgba(37, 99, 235, 0.12), transparent 30%),
    radial-gradient(circle at 80% 8%, rgba(52, 211, 153, 0.06), transparent 28%),
    linear-gradient(180deg, #071023 0%, #050817 52%, #040713 100%);
  color: var(--fp-text);
}

.nav {
  background: rgba(5, 8, 18, 0.82);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  backdrop-filter: blur(16px);
}

.logo {
  box-shadow: 0 0 26px rgba(96, 165, 250, 0.25);
}

.panel,
.card,
.strategies-toolbar,
.strategy-card,
.history-controls-card,
.history-table-card {
  background: linear-gradient(180deg, rgba(18, 27, 48, 0.92), rgba(9, 15, 30, 0.92));
  border-color: var(--fp-border);
  box-shadow: var(--fp-shadow-soft);
}

.card,
.panel,
.strategy-card {
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.card:hover,
.strategy-card:hover {
  border-color: rgba(96, 165, 250, 0.24);
  box-shadow: var(--fp-shadow);
}

.btn,
button.btn,
a.btn {
  border-color: rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, rgba(30, 41, 70, 0.88), rgba(12, 18, 34, 0.92));
  color: var(--fp-text);
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.btn:hover,
button.btn:hover,
a.btn:hover {
  border-color: rgba(96, 165, 250, 0.42);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.22), rgba(12, 18, 34, 0.94));
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

.btn:active,
button.btn:active,
a.btn:active {
  transform: translateY(1px);
}

.input,
input,
select,
textarea {
  border-color: rgba(148, 163, 184, 0.18) !important;
  background: rgba(5, 10, 22, 0.82) !important;
  color: var(--fp-text) !important;
}

.input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(96, 165, 250, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14) !important;
}

.strategies-page .strategy-card {
  position: relative;
  overflow: hidden;
}

.strategies-page .strategy-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 8%, rgba(96, 165, 250, 0.10), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 36%);
  opacity: 0.9;
}

.strategies-page .strategy-card > * {
  position: relative;
  z-index: 1;
}

.strategy-card-title {
  letter-spacing: -0.025em;
}

.strategy-card-meta,
.strategy-card-hero-label,
.strategy-card-metric-label,
.small,
.subh {
  color: var(--fp-muted);
}

.strategy-card-hero-value,
.pnl-pos,
.text-green {
  color: var(--fp-green) !important;
}

.pnl-neg,
.text-red {
  color: var(--fp-red) !important;
}

.strategy-card-cta {
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.strategy-card-cta:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(37, 99, 235, 0.10);
}

/* Strategy detail controls: consistent chips and combined history box. */
.strategy-detail-page #page .rangebar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 14px 0 !important;
}

.strategy-detail-page #page .rangechip {
  appearance: none !important;
  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  background: rgba(15, 23, 42, 0.76) !important;
  color: rgba(246, 248, 255, 0.94) !important;
  border-radius: 999px !important;
  padding: 8px 13px !important;
  min-height: 34px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transform: none !important;
}

.strategy-detail-page #page .rangechip:hover {
  border-color: rgba(96, 165, 250, 0.42) !important;
  background: rgba(37, 99, 235, 0.12) !important;
  color: #fff !important;
}

.strategy-detail-page #page .rangechip.active {
  border-color: rgba(96, 165, 250, 0.84) !important;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.42), rgba(29, 78, 216, 0.28)) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.20), 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.strategy-detail-page #page .strategy-inline-toggle.active {
  border-color: rgba(52, 211, 153, 0.58) !important;
  background: rgba(52, 211, 153, 0.17) !important;
}

.strategy-detail-page #page .history-controls-card {
  display: block !important;
  border-radius: 18px !important;
  margin: 18px 0 12px !important;
  overflow: hidden !important;
}

.strategy-detail-page #page .history-controls-card .card-h {
  display: none !important;
}

.strategy-detail-page #page .history-controls-body,
.strategy-detail-page #page .history-controls-card .card-b {
  padding: 16px 20px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 22px !important;
  align-items: end !important;
  background: transparent !important;
}

.strategy-detail-page #page .history-label,
.strategy-detail-page #page .history-controls-card .small {
  display: block !important;
  color: rgba(148, 163, 184, 0.74) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  margin: 0 0 8px !important;
}

.strategy-detail-page #page .historybar {
  margin: 0 !important;
}

.strategy-detail-page #page .historybar::before,
.strategy-detail-page #page .historybar::after {
  content: none !important;
  display: none !important;
}

.table th {
  color: rgba(148, 163, 184, 0.90);
  letter-spacing: 0.06em;
}

.table td {
  border-top-color: rgba(148, 163, 184, 0.08);
}

.table tbody tr {
  transition: background 120ms ease;
}

.table tbody tr:hover {
  background: rgba(96, 165, 250, 0.045);
}

.app-page .side-link {
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.app-page .side-link:hover {
  background: rgba(37, 99, 235, 0.10);
  border-color: rgba(96, 165, 250, 0.22);
}

.app-page .side-link.active {
  background: rgba(37, 99, 235, 0.16);
  border-color: rgba(96, 165, 250, 0.38);
}

@media (prefers-reduced-motion: no-preference) {
  .strategy-card,
  .card,
  .btn,
  .rangechip,
  .strategy-card-cta,
  .side-link {
    transition-duration: 160ms;
  }

  .strategies-page .strategy-card:hover {
    transform: translateY(-2px);
  }

  .card:hover {
    transform: translateY(-1px);
  }
}

@media (max-width: 900px) {
  .strategy-detail-page #page .history-controls-body,
  .strategy-detail-page #page .history-controls-card .card-b {
    grid-template-columns: 1fr !important;
  }
}

/* === Fullport modern UI pass 2: dashboard, auth, home, shared polish === */
/* Scoped and safe: no page-width or zoom changes. */

/* Shared section depth */
.app-page .panel,
.app-page .card,
.home-page .panel,
.home-page .card,
.auth-page .panel,
.auth-page .card {
  border-color: rgba(148, 163, 184, 0.16);
  background:
    linear-gradient(180deg, rgba(18, 27, 48, 0.94), rgba(8, 14, 29, 0.94));
}

/* Dashboard/app page */
.app-page .sidebar {
  background:
    linear-gradient(180deg, rgba(16, 24, 44, 0.96), rgba(8, 13, 27, 0.96));
  border-color: rgba(148, 163, 184, 0.16);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
}

.app-page .side-link {
  position: relative;
  overflow: hidden;
  color: rgba(226, 232, 240, 0.86);
}

.app-page .side-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.16), transparent);
  opacity: 0;
  transition: opacity 150ms ease;
}

.app-page .side-link:hover::before,
.app-page .side-link.active::before {
  opacity: 1;
}

.app-page .side-link > * {
  position: relative;
  z-index: 1;
}

.app-page .side-link.active {
  color: #f8fbff;
  box-shadow: inset 3px 0 0 rgba(96, 165, 250, 0.9);
}

.app-page .card-h {
  background: linear-gradient(180deg, rgba(30, 41, 70, 0.36), rgba(15, 23, 42, 0.10));
  border-bottom-color: rgba(148, 163, 184, 0.10);
}

.app-page .card-h b {
  letter-spacing: -0.015em;
}

.app-page .badge,
.app-page .pill {
  background: rgba(96, 165, 250, 0.10);
  border-color: rgba(96, 165, 250, 0.22);
  color: rgba(219, 234, 254, 0.96);
}

.app-page .grid-3 .card {
  min-height: 118px;
}

.app-page .big,
.app-page .metric,
.app-page [id*="Pnl"],
.app-page [id*="Win"],
.app-page [id*="Count"] {
  letter-spacing: -0.035em;
}

/* Dashboard runtime/status tables */
.app-page .table {
  border-radius: 14px;
  overflow: hidden;
}

.app-page .table th {
  background: rgba(15, 23, 42, 0.72);
  color: rgba(148, 163, 184, 0.95);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.app-page .table td {
  border-top-color: rgba(148, 163, 184, 0.08);
}

.app-page .table tbody tr:hover td {
  background: rgba(96, 165, 250, 0.045);
}

/* Inputs/controls on dashboard */
.app-page .toolbar,
.app-page .row {
  gap: 12px;
}

.app-page select.input,
.app-page input.input {
  min-height: 38px;
}

/* Calendar polish */
.app-page #calendarGrid > div,
.app-page [id*="calendar"] .card,
.app-page [id*="Calendar"] .card {
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.app-page #calendarGrid > div:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.26) !important;
}

/* Auth pages */
.auth-page {
  background:
    radial-gradient(circle at 50% -10%, rgba(96, 165, 250, 0.18), transparent 34%),
    radial-gradient(circle at 80% 10%, rgba(52, 211, 153, 0.08), transparent 28%),
    linear-gradient(180deg, #071023, #050817 54%, #030611);
}

.auth-page .card,
.auth-page .panel {
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.auth-page input {
  min-height: 44px;
}

.auth-page .btn,
.auth-page button {
  min-height: 42px;
  font-weight: 800;
}

/* Home/landing page */
.home-page .hero,
.home-page .panel,
.home-page .card {
  border-color: rgba(148, 163, 184, 0.16);
}

.home-page h1,
.home-page .h1 {
  letter-spacing: -0.045em;
}

.home-page .btn.primary,
.auth-page .btn.primary,
.app-page .btn.primary {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.95), rgba(37, 99, 235, 0.92));
  border-color: rgba(147, 197, 253, 0.62);
  color: #ffffff;
  box-shadow: 0 12px 34px rgba(37, 99, 235, 0.24);
}

.home-page .btn.primary:hover,
.auth-page .btn.primary:hover,
.app-page .btn.primary:hover {
  filter: brightness(1.04);
  box-shadow: 0 16px 44px rgba(37, 99, 235, 0.30);
}

/* Global consistency, intentionally light */
.card-h,
.panel-pad > .h1,
.panel-pad > h1 {
  letter-spacing: -0.02em;
}

.badge,
.pill,
.dir-badge,
.toggle-pill {
  border-radius: 999px;
  font-weight: 800;
}

/* Professional subtle entrance, only for users who allow motion */
@media (prefers-reduced-motion: no-preference) {
  .app-page .card,
  .app-page .panel,
  .auth-page .card,
  .home-page .card,
  .home-page .panel {
    animation: fp-soft-in 220ms ease both;
  }

  @keyframes fp-soft-in {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* === Fullport modern UI pass 3: remove stray left-edge scroll line === */
/* Safe fix: only removes unintended left-edge borders / pseudo-elements. */

html,
body {
  overflow-x: hidden;
}

body.app-page,
body.strategies-page,
body.strategy-detail-page,
body.home-page,
body.auth-page {
  overflow-x: hidden;
}

/* Kill decorative pseudo-elements that can create the thin scroll line */
body.app-page::before,
body.app-page::after,
body.strategies-page::before,
body.strategies-page::after,
body.strategy-detail-page::before,
body.strategy-detail-page::after,
body.home-page::before,
body.home-page::after,
body.auth-page::before,
body.auth-page::after,
body.app-page #page::before,
body.app-page #page::after,
body.strategies-page #page::before,
body.strategies-page #page::after,
body.strategy-detail-page #page::before,
body.strategy-detail-page #page::after,
body.home-page #page::before,
body.home-page #page::after,
body.auth-page #page::before,
body.auth-page #page::after,
body.app-page main::before,
body.app-page main::after,
body.strategies-page main::before,
body.strategies-page main::after,
body.strategy-detail-page main::before,
body.strategy-detail-page main::after,
body.home-page main::before,
body.home-page main::after,
body.auth-page main::before,
body.auth-page main::after {
  content: none !important;
  display: none !important;
}

/* Remove any accidental left-edge rule on major page wrappers */
body.app-page #page,
body.strategies-page #page,
body.strategy-detail-page #page,
body.home-page #page,
body.auth-page #page,
body.app-page main,
body.strategies-page main,
body.strategy-detail-page main,
body.home-page main,
body.auth-page main {
  border-left: 0 !important;
  outline: 0 !important;
}

/* Also neutralize accidental left-edge line on common layout wrappers */
body.app-page .page,
body.app-page .shell,
body.app-page .wrap,
body.app-page .container,
body.app-page .app-shell,
body.strategies-page .page,
body.strategies-page .shell,
body.strategies-page .wrap,
body.strategies-page .container,
body.strategy-detail-page .page,
body.strategy-detail-page .shell,
body.strategy-detail-page .wrap,
body.strategy-detail-page .container,
body.home-page .page,
body.home-page .shell,
body.home-page .wrap,
body.home-page .container,
body.auth-page .page,
body.auth-page .shell,
body.auth-page .wrap,
body.auth-page .container {
  border-left: 0 !important;
}

/* === Fullport modern UI pass 4: dashboard visual consistency === */
/* Dashboard-only. No width, zoom, or layout changes. */

/* Use the same surface tone as Strategy pages */
.app-page .dashboard,
.app-page .dashboard-main,
.app-page main > .panel,
.app-page .panel,
.app-page .card {
  background:
    linear-gradient(180deg, rgba(16, 24, 43, 0.94), rgba(8, 13, 27, 0.94)) !important;
  border-color: rgba(96, 165, 250, 0.13) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22) !important;
}

/* Main dashboard container should feel like the same product shell */
.app-page main > .panel {
  background:
    radial-gradient(circle at 12% 0%, rgba(96, 165, 250, 0.06), transparent 28%),
    linear-gradient(180deg, rgba(16, 24, 43, 0.96), rgba(7, 12, 26, 0.96)) !important;
}

/* Sidebar should match the dashboard shell instead of looking like a separate theme */
.app-page .sidebar {
  background:
    radial-gradient(circle at 20% 0%, rgba(96, 165, 250, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(7, 12, 26, 0.96)) !important;
  border-color: rgba(96, 165, 250, 0.14) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22) !important;
}

/* Sidebar active state: same blue language as strategy-detail chips, less neon */
.app-page .side-link {
  border: 1px solid transparent !important;
  color: rgba(226, 232, 240, 0.86) !important;
  background: transparent !important;
}

.app-page .side-link:hover {
  color: #f8fbff !important;
  background: rgba(96, 165, 250, 0.08) !important;
  border-color: rgba(96, 165, 250, 0.18) !important;
}

.app-page .side-link.active {
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(37, 99, 235, 0.24), rgba(30, 64, 175, 0.16)) !important;
  border-color: rgba(96, 165, 250, 0.42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(147, 197, 253, 0.10),
    0 0 0 3px rgba(37, 99, 235, 0.08) !important;
}

.app-page .side-link::before {
  display: none !important;
}

/* Section headers should match Strategy Detail cards */
.app-page .card-h {
  background:
    linear-gradient(180deg, rgba(30, 41, 70, 0.34), rgba(15, 23, 42, 0.08)) !important;
  border-bottom-color: rgba(148, 163, 184, 0.10) !important;
}

.app-page .card-h b,
.app-page .card-h strong {
  color: rgba(248, 250, 252, 0.96) !important;
  letter-spacing: -0.015em !important;
}

/* Inner metric boxes: make them one consistent dark surface */
.app-page .metric-card,
.app-page .stat-card,
.app-page .kpi-card,
.app-page .mini-card,
.app-page .cell,
.app-page .day,
.app-page .calendar-day,
.app-page #calendarGrid > div {
  background:
    linear-gradient(180deg, rgba(17, 25, 43, 0.92), rgba(10, 16, 31, 0.92)) !important;
  border-color: rgba(148, 163, 184, 0.13) !important;
  box-shadow: none !important;
}

/* Calendar colors: same green/red style, less muddy */
.app-page #calendarGrid > div[style*="green"],
.app-page .calendar-day.positive,
.app-page .day.positive {
  background:
    linear-gradient(180deg, rgba(16, 83, 67, 0.45), rgba(10, 42, 38, 0.42)) !important;
  border-color: rgba(52, 211, 153, 0.32) !important;
}

.app-page #calendarGrid > div[style*="red"],
.app-page .calendar-day.negative,
.app-page .day.negative {
  background:
    linear-gradient(180deg, rgba(90, 32, 54, 0.42), rgba(45, 16, 32, 0.40)) !important;
  border-color: rgba(251, 113, 133, 0.30) !important;
}

/* Today/highlight cell should match active chip blue */
.app-page #calendarGrid > div[style*="blue"],
.app-page .calendar-day.today,
.app-page .day.today {
  border-color: rgba(96, 165, 250, 0.58) !important;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22), 0 0 0 3px rgba(37, 99, 235, 0.08) !important;
}

/* Status badges should use the same chip language everywhere */
.app-page .badge,
.app-page .pill,
.app-page .status,
.app-page .dir-badge,
.app-page .toggle-pill {
  background: rgba(15, 23, 42, 0.74) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: rgba(226, 232, 240, 0.92) !important;
}

.app-page .badge.live,
.app-page .pill.live,
.app-page .status.live,
.app-page .badge.green,
.app-page .pill.green,
.app-page .status.opened,
.app-page .dir-badge.long {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(52, 211, 153, 0.30) !important;
  color: rgba(110, 231, 183, 0.96) !important;
}

.app-page .badge.red,
.app-page .pill.red,
.app-page .status.blocked,
.app-page .dir-badge.short {
  background: rgba(244, 63, 94, 0.12) !important;
  border-color: rgba(251, 113, 133, 0.30) !important;
  color: rgba(253, 164, 175, 0.96) !important;
}

/* Live readiness cards: keep meaning, but make surfaces match */
.app-page .live-safe,
.app-page .ready,
.app-page [class*="safe"] {
  border-color: rgba(52, 211, 153, 0.28) !important;
}

.app-page .not-live-safe,
.app-page .danger,
.app-page [class*="danger"] {
  border-color: rgba(251, 113, 133, 0.28) !important;
}

/* Tables should match strategy-detail table tone */
.app-page table,
.app-page .table {
  background: rgba(8, 13, 27, 0.52) !important;
}

.app-page thead th,
.app-page .table th {
  background: rgba(15, 23, 42, 0.78) !important;
  color: rgba(148, 163, 184, 0.92) !important;
}

.app-page tbody td,
.app-page .table td {
  border-top-color: rgba(148, 163, 184, 0.08) !important;
}

.app-page tbody tr:hover td,
.app-page .table tbody tr:hover td {
  background: rgba(96, 165, 250, 0.045) !important;
}

/* Numbers: consistent with Strategies / Strategy Detail */
.app-page .big,
.app-page .metric,
.app-page .value,
.app-page [id*="Pnl"],
.app-page [id*="Win"],
.app-page [id*="Count"] {
  color: inherit;
}

.app-page .text-green,
.app-page .pnl-pos,
.app-page [class*="positive"] {
  color: var(--fp-green) !important;
}

.app-page .text-red,
.app-page .pnl-neg,
.app-page [class*="negative"] {
  color: var(--fp-red) !important;
}

/* Small tasteful interaction only */
@media (prefers-reduced-motion: no-preference) {
  .app-page .card:hover,
  .app-page .panel:hover {
    transform: translateY(-1px);
  }

  .app-page #calendarGrid > div:hover {
    transform: translateY(-1px);
    border-color: rgba(96, 165, 250, 0.24) !important;
  }
}

/* === Fullport modern UI pass 5: remove dashboard horizontal table sliders === */
/* Dashboard-only. Keeps layout/zoom unchanged. */

.app-page .card,
.app-page .panel {
  overflow: hidden;
}

/* Stop dashboard tables from creating left/right scrollbars */
.app-page .table-wrap,
.app-page .table-container,
.app-page .card-b,
.app-page .panel-b {
  overflow-x: hidden !important;
}

/* Let tables fit the card instead of forcing horizontal scroll */
.app-page table,
.app-page .table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

/* Make dense dashboard audit/log tables readable without sideways scrolling */
.app-page table th,
.app-page table td,
.app-page .table th,
.app-page .table td {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  vertical-align: top !important;
}

/* Keep short columns compact so the reason column has room */
.app-page table th:nth-child(1),
.app-page table td:nth-child(1) {
  width: 16%;
}

.app-page table th:nth-child(2),
.app-page table td:nth-child(2),
.app-page table th:nth-child(3),
.app-page table td:nth-child(3) {
  width: 9%;
}

.app-page table th:nth-child(4),
.app-page table td:nth-child(4),
.app-page table th:nth-child(5),
.app-page table td:nth-child(5),
.app-page table th:nth-child(6),
.app-page table td:nth-child(6),
.app-page table th:nth-child(7),
.app-page table td:nth-child(7) {
  width: 10%;
}

.app-page table th:last-child,
.app-page table td:last-child {
  width: auto;
}

/* If a browser still creates a scrollbar, visually remove only the horizontal one */
.app-page .card::-webkit-scrollbar:horizontal,
.app-page .panel::-webkit-scrollbar:horizontal,
.app-page .card-b::-webkit-scrollbar:horizontal,
.app-page .panel-b::-webkit-scrollbar:horizontal,
.app-page .table-wrap::-webkit-scrollbar:horizontal,
.app-page .table-container::-webkit-scrollbar:horizontal {
  height: 0 !important;
  display: none !important;
}

/* === Fullport modern UI pass 6: parity audit table readability === */
/* Goal:
   - let TIME and SIGNAL BAR wrap into 2 lines
   - keep OPENED / BLOCKED pills on one line
   - prevent squished dashboard table cells
   - dashboard only
*/

.app-page .card,
.app-page .panel {
  overflow: hidden;
}

/* Keep dashboard tables fitted without horizontal scrolling */
.app-page .table-wrap,
.app-page .table-container,
.app-page .card-b,
.app-page .panel-b {
  overflow-x: hidden !important;
}

/* Use fixed table sizing for consistency */
.app-page table,
.app-page .table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

/* General cell styling */
.app-page table th,
.app-page table td,
.app-page .table th,
.app-page .table td {
  vertical-align: top !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* Rebalance the Parity Audit / dense dashboard table columns */
.app-page table th:nth-child(1),
.app-page table td:nth-child(1) {
  width: 16% !important;   /* TIME */
}

.app-page table th:nth-child(2),
.app-page table td:nth-child(2) {
  width: 10% !important;   /* ACTION */
}

.app-page table th:nth-child(3),
.app-page table td:nth-child(3) {
  width: 8% !important;    /* SIDE */
}

.app-page table th:nth-child(4),
.app-page table td:nth-child(4) {
  width: 7% !important;    /* INSTR */
}

.app-page table th:nth-child(5),
.app-page table td:nth-child(5) {
  width: 8% !important;    /* STRATEGY */
}

.app-page table th:nth-child(6),
.app-page table td:nth-child(6) {
  width: 14% !important;   /* SIGNAL BAR */
}

.app-page table th:nth-child(7),
.app-page table td:nth-child(7) {
  width: 9% !important;    /* SIGNAL PX */
}

.app-page table th:nth-child(8),
.app-page table td:nth-child(8) {
  width: 8% !important;    /* SIM MATCH */
}

.app-page table th:nth-child(9),
.app-page table td:nth-child(9) {
  width: 20% !important;   /* REASON */
}

/* TIME and SIGNAL BAR: allow natural wrapping to two lines */
.app-page table td:nth-child(1),
.app-page table td:nth-child(6) {
  white-space: normal !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums;
}

/* ACTION and SIDE columns should not wrap awkwardly */
.app-page table td:nth-child(2),
.app-page table td:nth-child(3) {
  white-space: nowrap !important;
}

/* Make pill-like items stay centered and on one line */
.app-page table td:nth-child(2) > *,
.app-page table td:nth-child(3) > * {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 58px !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* Give BLOCKED a little more room specifically */
.app-page table td:nth-child(2) > * {
  min-width: 64px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Reason column should wrap cleanly without forcing the row wider */
.app-page table td:nth-child(9) {
  white-space: normal !important;
  line-height: 1.2 !important;
}

/* Slightly tighter text helps the dense audit table breathe */
.app-page table th {
  font-size: 11px !important;
  letter-spacing: 0.03em !important;
}

.app-page table td {
  font-size: 12px !important;
}

/* === Fullport modern UI pass 7: unify dashboard card system === */
/* Dashboard-only. No width/zoom/layout changes. */

/* One dashboard card language for ALL dashboard boxes */
.app-page .panel,
.app-page .card,
.app-page .metric-card,
.app-page .stat-card,
.app-page .kpi-card,
.app-page .mini-card,
.app-page .cell,
.app-page .day,
.app-page .calendar-day,
.app-page #calendarGrid > div {
  background:
    radial-gradient(circle at 18% 0%, rgba(96, 165, 250, 0.045), transparent 30%),
    linear-gradient(180deg, rgba(17, 25, 43, 0.96), rgba(9, 15, 30, 0.96)) !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

/* Main dashboard outer panel gets a subtle container treatment */
.app-page main > .panel {
  background:
    radial-gradient(circle at 16% 0%, rgba(96, 165, 250, 0.06), transparent 30%),
    linear-gradient(180deg, rgba(13, 21, 39, 0.96), rgba(6, 11, 24, 0.96)) !important;
  border-color: rgba(96, 165, 250, 0.16) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22) !important;
}

/* Inner cards should all feel like they belong to the same dashboard */
.app-page main > .panel .card,
.app-page main > .panel .metric-card,
.app-page main > .panel .stat-card,
.app-page main > .panel .kpi-card,
.app-page main > .panel .mini-card,
.app-page main > .panel .cell {
  background:
    linear-gradient(180deg, rgba(18, 27, 47, 0.92), rgba(10, 16, 31, 0.92)) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
}

/* Section cards like Today, Account Health, Calendar, Live Readiness, Parity Audit, Execution Activity */
.app-page .card:has(.card-h),
.app-page .panel:has(.card-h) {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(7, 12, 26, 0.96)) !important;
  border-color: rgba(96, 165, 250, 0.13) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* Unified card headers */
.app-page .card-h {
  min-height: 46px !important;
  padding: 14px 18px !important;
  background:
    linear-gradient(180deg, rgba(23, 34, 59, 0.86), rgba(15, 23, 42, 0.44)) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
}

.app-page .card-h b,
.app-page .card-h strong,
.app-page .card-h .title {
  color: rgba(248, 250, 252, 0.98) !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;
}

/* Unified card body spacing */
.app-page .card-b,
.app-page .panel-b {
  background: transparent !important;
}

/* Top KPI cards should match lower dashboard boxes */
.app-page .grid > .card,
.app-page .grid-2 > .card,
.app-page .grid-3 > .card,
.app-page .grid-4 > .card,
.app-page .grid-5 > .card,
.app-page .grid-6 > .card {
  background:
    linear-gradient(180deg, rgba(18, 27, 47, 0.92), rgba(10, 16, 31, 0.92)) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  border-radius: 16px !important;
}

/* Metric label/value consistency */
.app-page .small,
.app-page .muted,
.app-page .subh,
.app-page .metric-label,
.app-page .stat-label,
.app-page .kpi-label {
  color: rgba(148, 163, 184, 0.86) !important;
}

.app-page .big,
.app-page .metric,
.app-page .value,
.app-page .stat-value,
.app-page .kpi-value {
  color: rgba(248, 250, 252, 0.98) !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
}

/* Positive/negative values remain consistent */
.app-page .text-green,
.app-page .pnl-pos,
.app-page .positive,
.app-page [class*="positive"] {
  color: var(--fp-green) !important;
}

.app-page .text-red,
.app-page .pnl-neg,
.app-page .negative,
.app-page [class*="negative"] {
  color: var(--fp-red) !important;
}

/* Provider/Bot/Execution cards should no longer look like a separate component style */
.app-page .card:has([id*="provider"]),
.app-page .card:has([id*="Provider"]),
.app-page .card:has([id*="bot"]),
.app-page .card:has([id*="Bot"]),
.app-page .card:has([id*="execution"]),
.app-page .card:has([id*="Execution"]) {
  background:
    linear-gradient(180deg, rgba(18, 27, 47, 0.92), rgba(10, 16, 31, 0.92)) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
}

/* Horizontal separators inside cards */
.app-page hr,
.app-page .sep,
.app-page .divider {
  border-color: rgba(148, 163, 184, 0.12) !important;
}

/* Badges on all cards should match */
.app-page .badge,
.app-page .pill,
.app-page .tag,
.app-page .status,
.app-page .toggle-pill {
  background: rgba(15, 23, 42, 0.78) !important;
  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  color: rgba(226, 232, 240, 0.92) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* Header chips like LIVE / USER / ENGINE / RUNTIME */
.app-page .card-h .badge,
.app-page .card-h .pill,
.app-page .card-h .tag,
.app-page .card-h .status,
.app-page .card-h .toggle-pill {
  background: rgba(96, 165, 250, 0.10) !important;
  border-color: rgba(96, 165, 250, 0.24) !important;
  color: rgba(219, 234, 254, 0.94) !important;
}

/* Calendar cards should match the rest but keep meaning colors */
.app-page #calendarGrid > div {
  background:
    linear-gradient(180deg, rgba(18, 27, 47, 0.90), rgba(10, 16, 31, 0.90)) !important;
  border-color: rgba(148, 163, 184, 0.13) !important;
}

.app-page #calendarGrid > div[style*="green"],
.app-page .calendar-day.positive,
.app-page .day.positive {
  background:
    linear-gradient(180deg, rgba(16, 83, 67, 0.42), rgba(10, 42, 38, 0.38)) !important;
  border-color: rgba(52, 211, 153, 0.30) !important;
}

.app-page #calendarGrid > div[style*="red"],
.app-page .calendar-day.negative,
.app-page .day.negative {
  background:
    linear-gradient(180deg, rgba(90, 32, 54, 0.40), rgba(45, 16, 32, 0.36)) !important;
  border-color: rgba(251, 113, 133, 0.28) !important;
}

.app-page #calendarGrid > div[style*="blue"],
.app-page .calendar-day.today,
.app-page .day.today {
  background:
    linear-gradient(180deg, rgba(30, 64, 120, 0.34), rgba(12, 24, 48, 0.34)) !important;
  border-color: rgba(96, 165, 250, 0.58) !important;
  box-shadow:
    inset 0 0 0 1px rgba(96, 165, 250, 0.18),
    0 0 0 3px rgba(37, 99, 235, 0.08) !important;
}

/* Live readiness status block should match the card system while preserving safe/danger meaning */
.app-page .live-safe,
.app-page .ready,
.app-page [class*="safe"] {
  background:
    linear-gradient(180deg, rgba(16, 83, 67, 0.34), rgba(10, 42, 38, 0.30)) !important;
  border-color: rgba(52, 211, 153, 0.28) !important;
}

.app-page .not-live-safe,
.app-page .danger,
.app-page [class*="danger"] {
  background:
    linear-gradient(180deg, rgba(90, 32, 54, 0.34), rgba(45, 16, 32, 0.30)) !important;
  border-color: rgba(251, 113, 133, 0.28) !important;
}

/* Keep hover subtle and consistent */
@media (prefers-reduced-motion: no-preference) {
  .app-page .card,
  .app-page .panel,
  .app-page .metric-card,
  .app-page .stat-card,
  .app-page .kpi-card,
  .app-page .mini-card,
  .app-page #calendarGrid > div {
    transition:
      border-color 160ms ease,
      background 160ms ease,
      transform 160ms ease,
      box-shadow 160ms ease;
  }

  .app-page .card:hover,
  .app-page .panel:hover,
  .app-page #calendarGrid > div:hover {
    transform: translateY(-1px);
    border-color: rgba(96, 165, 250, 0.24) !important;
  }
}

/* === Fullport modern UI pass 8: premium motion system === */
/* CSS-only, scoped, subtle, professional. Respects reduced-motion. */

@media (prefers-reduced-motion: no-preference) {
  :root {
    --fp-motion-fast: 120ms;
    --fp-motion-med: 180ms;
    --fp-motion-slow: 260ms;
    --fp-ease: cubic-bezier(.2, .8, .2, 1);
  }

  /* 1) Card hover lift: dashboard, strategies, strategy detail */
  .app-page .card,
  .app-page .panel,
  .strategies-page .strategy-card,
  .strategy-detail-page .card,
  .strategy-detail-page .panel,
  .strategy-detail-page .history-controls-card,
  .strategy-detail-page .history-table-card,
  .home-page .card,
  .home-page .panel,
  .auth-page .card,
  .auth-page .panel {
    transition:
      transform var(--fp-motion-med) var(--fp-ease),
      border-color var(--fp-motion-med) var(--fp-ease),
      box-shadow var(--fp-motion-med) var(--fp-ease),
      background var(--fp-motion-med) var(--fp-ease),
      filter var(--fp-motion-med) var(--fp-ease) !important;
    will-change: transform;
  }

  .app-page .card:hover,
  .app-page .panel:hover,
  .strategies-page .strategy-card:hover,
  .strategy-detail-page .card:hover,
  .strategy-detail-page .panel:hover,
  .home-page .card:hover,
  .home-page .panel:hover,
  .auth-page .card:hover,
  .auth-page .panel:hover {
    transform: translateY(-2px);
    border-color: rgba(96, 165, 250, 0.26) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26) !important;
  }

  /* Avoid lifting giant page containers too aggressively */
  .app-page main > .panel:hover,
  .strategy-detail-page main > .panel:hover {
    transform: none;
  }

  /* 2) Button/chip press feedback */
  .btn,
  button,
  a.btn,
  .rangechip,
  .side-link,
  .strategy-card-cta,
  .pill,
  .badge,
  .tag,
  .toggle-pill,
  .dir-badge {
    transition:
      transform var(--fp-motion-fast) var(--fp-ease),
      border-color var(--fp-motion-fast) var(--fp-ease),
      background var(--fp-motion-fast) var(--fp-ease),
      box-shadow var(--fp-motion-fast) var(--fp-ease),
      color var(--fp-motion-fast) var(--fp-ease),
      filter var(--fp-motion-fast) var(--fp-ease) !important;
  }

  .btn:hover,
  button:hover,
  a.btn:hover,
  .rangechip:hover,
  .side-link:hover,
  .strategy-card-cta:hover {
    transform: translateY(-1px);
  }

  .btn:active,
  button:active,
  a.btn:active,
  .rangechip:active,
  .side-link:active,
  .strategy-card-cta:active {
    transform: translateY(1px) scale(0.985);
  }

  .rangechip.active,
  .side-link.active,
  .btn.active,
  button.active {
    animation: fp-active-settle 220ms var(--fp-ease) both;
  }

  @keyframes fp-active-settle {
    0% {
      transform: scale(0.985);
      filter: brightness(0.96);
    }
    100% {
      transform: scale(1);
      filter: brightness(1);
    }
  }

  /* 3) Soft page/section entrance */
  .app-page main > *,
  .strategies-page main > *,
  .strategy-detail-page main > *,
  .home-page main > *,
  .auth-page main > * {
    animation: fp-section-in 240ms var(--fp-ease) both;
  }

  .app-page main > *:nth-child(2),
  .strategies-page main > *:nth-child(2),
  .strategy-detail-page main > *:nth-child(2) {
    animation-delay: 35ms;
  }

  .app-page main > *:nth-child(3),
  .strategies-page main > *:nth-child(3),
  .strategy-detail-page main > *:nth-child(3) {
    animation-delay: 70ms;
  }

  .app-page main > *:nth-child(4),
  .strategies-page main > *:nth-child(4),
  .strategy-detail-page main > *:nth-child(4) {
    animation-delay: 105ms;
  }

  @keyframes fp-section-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* 4) Live/status pulse: only meaningful live/safe/on/opened/armed states */
  .app-page .badge.live,
  .app-page .pill.live,
  .app-page .status.live,
  .app-page .status.opened,
  .app-page .pill.opened,
  .app-page .badge.opened,
  .app-page .dir-badge.long,
  .app-page .toggle-pill.on,
  .app-page .live-safe,
  .app-page .ready,
  .app-page [class*="safe"],
  .app-page [class*="armed"],
  .strategy-detail-page .strategy-inline-toggle.active {
    animation: fp-status-pulse 2.8s ease-in-out infinite;
  }

  @keyframes fp-status-pulse {
    0%, 100% {
      box-shadow:
        inset 0 0 0 1px rgba(52, 211, 153, 0.08),
        0 0 0 rgba(52, 211, 153, 0.00);
    }
    50% {
      box-shadow:
        inset 0 0 0 1px rgba(52, 211, 153, 0.18),
        0 0 18px rgba(52, 211, 153, 0.10);
    }
  }

  /* Keep negative statuses stable, not pulsing */
  .app-page .status.blocked,
  .app-page .pill.blocked,
  .app-page .badge.blocked,
  .app-page .dir-badge.short,
  .app-page .not-live-safe,
  .app-page .danger,
  .app-page [class*="danger"] {
    animation: none !important;
  }

  /* 5) Table row hover: no movement, just a soft highlight */
  .app-page table tbody tr,
  .strategy-detail-page table tbody tr,
  .strategies-page table tbody tr {
    transition:
      background var(--fp-motion-fast) var(--fp-ease),
      filter var(--fp-motion-fast) var(--fp-ease) !important;
  }

  .app-page table tbody tr:hover,
  .strategy-detail-page table tbody tr:hover,
  .strategies-page table tbody tr:hover {
    background: rgba(96, 165, 250, 0.055) !important;
    filter: brightness(1.035);
  }

  /* 6) Calendar day hover */
  .app-page #calendarGrid > div,
  .app-page .calendar-day,
  .app-page .day {
    transition:
      transform var(--fp-motion-med) var(--fp-ease),
      border-color var(--fp-motion-med) var(--fp-ease),
      background var(--fp-motion-med) var(--fp-ease),
      box-shadow var(--fp-motion-med) var(--fp-ease),
      filter var(--fp-motion-med) var(--fp-ease) !important;
  }

  .app-page #calendarGrid > div:hover,
  .app-page .calendar-day:hover,
  .app-page .day:hover {
    transform: translateY(-2px);
    border-color: rgba(96, 165, 250, 0.34) !important;
    filter: brightness(1.04);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
  }

  /* 7) Strategy chart/card hover polish: soft light sweep */
  .strategies-page .strategy-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -70%;
    width: 52%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
      110deg,
      transparent 0%,
      rgba(255, 255, 255, 0.045) 42%,
      rgba(96, 165, 250, 0.070) 50%,
      rgba(255, 255, 255, 0.035) 58%,
      transparent 100%
    );
    transform: skewX(-12deg);
    opacity: 0;
  }

  .strategies-page .strategy-card:hover::before {
    animation: fp-card-sweep 680ms var(--fp-ease) both;
  }

  @keyframes fp-card-sweep {
    0% {
      left: -70%;
      opacity: 0;
    }
    18% {
      opacity: 1;
    }
    100% {
      left: 130%;
      opacity: 0;
    }
  }

  .strategies-page .strategy-card svg,
  .strategies-page .strategy-card canvas,
  .strategies-page .strategy-card .sparkline {
    transition:
      transform var(--fp-motion-med) var(--fp-ease),
      filter var(--fp-motion-med) var(--fp-ease),
      opacity var(--fp-motion-med) var(--fp-ease) !important;
  }

  .strategies-page .strategy-card:hover svg,
  .strategies-page .strategy-card:hover canvas,
  .strategies-page .strategy-card:hover .sparkline {
    transform: translateY(-1px);
    filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.16));
  }

  /* Nav/logo micro-interactions */
  .nav .logo,
  .brand,
  .nav a,
  .nav button {
    transition:
      transform var(--fp-motion-fast) var(--fp-ease),
      filter var(--fp-motion-fast) var(--fp-ease),
      box-shadow var(--fp-motion-fast) var(--fp-ease) !important;
  }

  .nav .logo:hover,
  .brand:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
  }

  /* Inputs feel alive but calm */
  input,
  select,
  textarea,
  .input {
    transition:
      border-color var(--fp-motion-fast) var(--fp-ease),
      box-shadow var(--fp-motion-fast) var(--fp-ease),
      background var(--fp-motion-fast) var(--fp-ease),
      filter var(--fp-motion-fast) var(--fp-ease) !important;
  }

  input:hover,
  select:hover,
  textarea:hover,
  .input:hover {
    border-color: rgba(96, 165, 250, 0.32) !important;
  }
}

/* Reduced motion: keep site still and accessible */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* === Fullport modern UI pass 9: centered button glow === */
/* Fix button glow so it wraps evenly around buttons instead of sitting low. */

:root {
  --fp-btn-glow-rest:
    0 0 0 1px rgba(147, 197, 253, 0.14),
    0 0 14px rgba(59, 130, 246, 0.16);

  --fp-btn-glow-hover:
    0 0 0 1px rgba(147, 197, 253, 0.20),
    0 0 18px rgba(59, 130, 246, 0.22);

  --fp-btn-glow-active:
    0 0 0 1px rgba(147, 197, 253, 0.18),
    0 0 10px rgba(59, 130, 246, 0.14);
}

/* Core clickable controls */
button,
.btn,
a.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
.rangechip,
.strategy-inline-toggle,
.history-chip,
.chip,
.pill,
.badge-btn {
  position: relative !important;
  filter: none !important;
  text-shadow: none !important;
  box-shadow: var(--fp-btn-glow-rest) !important;
  transition:
    box-shadow 180ms cubic-bezier(.2, .8, .2, 1),
    border-color 180ms cubic-bezier(.2, .8, .2, 1),
    background-color 180ms cubic-bezier(.2, .8, .2, 1),
    color 180ms cubic-bezier(.2, .8, .2, 1),
    transform 180ms cubic-bezier(.2, .8, .2, 1) !important;
}

/* Remove any pseudo-element glow/shadow that may be offsetting downward */
button::before,
button::after,
.btn::before,
.btn::after,
a.btn::before,
a.btn::after,
input[type="button"]::before,
input[type="button"]::after,
input[type="submit"]::before,
input[type="submit"]::after,
.rangechip::before,
.rangechip::after,
.strategy-inline-toggle::before,
.strategy-inline-toggle::after {
  box-shadow: none !important;
  filter: none !important;
}

/* Hover */
button:hover,
.btn:hover,
a.btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.rangechip:hover,
.strategy-inline-toggle:hover,
.history-chip:hover,
.chip:hover,
.pill:hover,
.badge-btn:hover {
  box-shadow: var(--fp-btn-glow-hover) !important;
}

/* Active / pressed */
button:active,
.btn:active,
a.btn:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
.rangechip:active,
.strategy-inline-toggle:active,
.history-chip:active,
.chip:active,
.pill:active,
.badge-btn:active {
  box-shadow: var(--fp-btn-glow-active) !important;
}

/* Focus */
button:focus-visible,
.btn:focus-visible,
a.btn:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
.rangechip:focus-visible,
.strategy-inline-toggle:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 1px rgba(147, 197, 253, 0.22),
    0 0 0 3px rgba(59, 130, 246, 0.14),
    0 0 18px rgba(59, 130, 246, 0.20) !important;
}

/* Keep special disabled buttons clean */
button:disabled,
.btn:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
  box-shadow:
    0 0 0 1px rgba(148, 163, 184, 0.10) !important;
  filter: none !important;
}


/* === Fullport modern UI pass 10: calm global action palette + red/green live toggles === */
/* Goals:
   - one calmer blue button style across ALL pages
   - consistent selected/active blue everywhere
   - less aggressive glow
   - bot/paper toggles show clear OFF=red and ON=green states
*/

/* ---------- shared calm palette ---------- */
:root {
  --fp-accent-500: #5a86f7;
  --fp-accent-600: #4773e8;
  --fp-accent-700: #355fd0;

  --fp-accent-border: rgba(120, 161, 255, 0.28);
  --fp-accent-ring: rgba(90, 134, 247, 0.12);

  --fp-btn-rest:
    0 0 0 1px rgba(255,255,255,0.03),
    0 8px 20px rgba(8, 15, 35, 0.18),
    0 0 0 3px rgba(90, 134, 247, 0.00);

  --fp-btn-hover:
    0 0 0 1px rgba(255,255,255,0.04),
    0 10px 24px rgba(8, 15, 35, 0.22),
    0 0 0 3px rgba(90, 134, 247, 0.10);

  --fp-btn-active:
    0 0 0 1px rgba(255,255,255,0.03),
    0 6px 16px rgba(8, 15, 35, 0.16),
    0 0 0 2px rgba(90, 134, 247, 0.08);

  --fp-success-500: #22c55e;
  --fp-success-600: #16a34a;
  --fp-success-bg: rgba(34, 197, 94, 0.16);
  --fp-success-br: rgba(74, 222, 128, 0.34);

  --fp-danger-500: #ef4444;
  --fp-danger-600: #dc2626;
  --fp-danger-bg: rgba(239, 68, 68, 0.16);
  --fp-danger-br: rgba(248, 113, 113, 0.34);
}

/* ---------- calmer unified blue buttons across all pages ---------- */
button,
.btn,
a.btn,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  appearance: none !important;
  border-radius: 12px !important;
  border: 1px solid var(--fp-accent-border) !important;
  background: linear-gradient(180deg, var(--fp-accent-500), var(--fp-accent-600)) !important;
  color: #f8fbff !important;
  text-shadow: none !important;
  filter: none !important;
  box-shadow: var(--fp-btn-rest) !important;
}

button:hover,
.btn:hover,
a.btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  background: linear-gradient(180deg, #6792fb, #4d79ee) !important;
  border-color: rgba(147, 197, 253, 0.34) !important;
  box-shadow: var(--fp-btn-hover) !important;
}

button:active,
.btn:active,
a.btn:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
  background: linear-gradient(180deg, #4f7eef, #3a66dc) !important;
  box-shadow: var(--fp-btn-active) !important;
}

button:focus-visible,
.btn:focus-visible,
a.btn:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 10px 24px rgba(8, 15, 35, 0.22),
    0 0 0 4px rgba(90, 134, 247, 0.14) !important;
}

/* remove any overly strong old glow/pseudo-glow */
button::before,
button::after,
.btn::before,
.btn::after,
a.btn::before,
a.btn::after,
input[type="button"]::before,
input[type="button"]::after,
input[type="submit"]::before,
input[type="submit"]::after,
input[type="reset"]::before,
input[type="reset"]::after {
  display: none !important;
  content: none !important;
}

/* ---------- keep selected states consistent everywhere ---------- */
.side-link.active,
.rangechip.active,
.history-chip.active,
.chip.active,
.pill.active,
.badge-btn.active,
.tab.active,
.toggle-btn.active,
button.active,
.btn.active {
  background: linear-gradient(180deg, rgba(90, 134, 247, 0.24), rgba(71, 115, 232, 0.18)) !important;
  border-color: rgba(147, 197, 253, 0.36) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 0 0 3px rgba(90, 134, 247, 0.10) !important;
}

/* inactive chips/buttons stay quieter */
.rangechip,
.history-chip,
.chip,
.pill,
.badge-btn {
  border-color: rgba(148, 163, 184, 0.16) !important;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.84), rgba(15, 23, 42, 0.84)) !important;
  color: rgba(226, 232, 240, 0.88) !important;
  box-shadow: none !important;
}

/* ---------- live control toggles: OFF red / ON green ---------- */
/* wrapper pill around the toggle + label */
.app-page label:has(input[type="checkbox"]),
.app-page .toggle-row:has(input[type="checkbox"]),
.app-page .switch-row:has(input[type="checkbox"]) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 44px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  background: linear-gradient(180deg, rgba(23, 31, 48, 0.88), rgba(12, 18, 31, 0.88)) !important;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease !important;
}

/* OFF state */
.app-page label:has(input[type="checkbox"]:not(:checked)),
.app-page .toggle-row:has(input[type="checkbox"]:not(:checked)),
.app-page .switch-row:has(input[type="checkbox"]:not(:checked)) {
  background: linear-gradient(180deg, rgba(70, 24, 24, 0.24), rgba(34, 12, 12, 0.22)) !important;
  border-color: rgba(248, 113, 113, 0.22) !important;
  color: #fecaca !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.05) !important;
}

/* ON state */
.app-page label:has(input[type="checkbox"]:checked),
.app-page .toggle-row:has(input[type="checkbox"]:checked),
.app-page .switch-row:has(input[type="checkbox"]:checked) {
  background: linear-gradient(180deg, rgba(20, 60, 38, 0.30), rgba(10, 26, 18, 0.28)) !important;
  border-color: rgba(74, 222, 128, 0.24) !important;
  color: #d1fae5 !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.05) !important;
}

/* actual switch */
.app-page input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 26px !important;
  border-radius: 999px !important;
  position: relative !important;
  cursor: pointer !important;
  border: 1px solid var(--fp-danger-br) !important;
  background: linear-gradient(180deg, rgba(127, 29, 29, 0.94), rgba(69, 10, 10, 0.94)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 0 0 2px rgba(239, 68, 68, 0.07) !important;
}

.app-page input[type="checkbox"]::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24) !important;
}

.app-page input[type="checkbox"]:checked {
  border-color: var(--fp-success-br) !important;
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.96), rgba(21, 128, 61, 0.96)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 0 2px rgba(34, 197, 94, 0.08) !important;
}

.app-page input[type="checkbox"]:checked::after {
  transform: translateX(20px) !important;
}

/* if the toggle text has helper spans, keep them readable */
.app-page label:has(input[type="checkbox"]) span,
.app-page .toggle-row:has(input[type="checkbox"]) span,
.app-page .switch-row:has(input[type="checkbox"]) span {
  color: inherit !important;
}

/* ---------- tone down extra visual intensity from old motion/glow on controls ---------- */
button,
.btn,
a.btn,
.rangechip,
.history-chip,
.chip,
.pill,
.badge-btn,
.side-link {
  filter: none !important;
}

button:hover,
.btn:hover,
a.btn:hover,
.rangechip:hover,
.history-chip:hover,
.chip:hover,
.pill:hover,
.badge-btn:hover {
  transform: translateY(-1px) !important;
}

/* keep huge containers from getting any button-like styling accidentally */
.app-page .panel,
.app-page .card,
.strategies-page .panel,
.strategies-page .card,
.strategy-detail-page .panel,
.strategy-detail-page .card,
.home-page .panel,
.home-page .card,
.auth-page .panel,
.auth-page .card {
  text-shadow: none !important;
}


/* === Fullport modern UI pass 11: match calm Open App button style site-wide === */
/* Goal: make all blue buttons calmer and consistent like the Open App button. */

/* Softer Open-App-style palette */
:root {
  --fp-openapp-blue-1: #6f8cff;
  --fp-openapp-blue-2: #7468f0;
  --fp-openapp-blue-3: #5f78e6;
  --fp-openapp-border: rgba(170, 190, 255, 0.28);
  --fp-openapp-border-hover: rgba(190, 205, 255, 0.38);
  --fp-openapp-shadow:
    0 0 0 1px rgba(255,255,255,0.035),
    0 6px 16px rgba(18, 26, 58, 0.18);
  --fp-openapp-shadow-hover:
    0 0 0 1px rgba(255,255,255,0.05),
    0 8px 20px rgba(18, 26, 58, 0.22);
  --fp-openapp-shadow-focus:
    0 0 0 1px rgba(255,255,255,0.05),
    0 8px 20px rgba(18, 26, 58, 0.22),
    0 0 0 4px rgba(111, 140, 255, 0.12);
}

/* All normal action buttons now use the calm Open App style */
button,
.btn,
a.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
.home-page .btn.primary,
.auth-page .btn.primary,
.app-page .btn.primary,
.strategy-card-cta {
  border: 1px solid var(--fp-openapp-border) !important;
  background:
    linear-gradient(135deg, var(--fp-openapp-blue-1), var(--fp-openapp-blue-2)) !important;
  color: #f8fbff !important;
  box-shadow: var(--fp-openapp-shadow) !important;
  text-shadow: none !important;
  filter: saturate(0.92) brightness(0.96) !important;
}

/* Hover is only slightly brighter, not neon */
button:hover,
.btn:hover,
a.btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.home-page .btn.primary:hover,
.auth-page .btn.primary:hover,
.app-page .btn.primary:hover,
.strategy-card-cta:hover {
  border-color: var(--fp-openapp-border-hover) !important;
  background:
    linear-gradient(135deg, #7895ff, #7d72f3) !important;
  color: #ffffff !important;
  box-shadow: var(--fp-openapp-shadow-hover) !important;
  filter: saturate(0.96) brightness(0.99) !important;
}

/* Pressed state */
button:active,
.btn:active,
a.btn:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
.strategy-card-cta:active {
  background:
    linear-gradient(135deg, var(--fp-openapp-blue-3), #655ddb) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.035),
    0 4px 12px rgba(18, 26, 58, 0.16) !important;
  filter: saturate(0.90) brightness(0.94) !important;
}

/* Focus state stays accessible but calm */
button:focus-visible,
.btn:focus-visible,
a.btn:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
.strategy-card-cta:focus-visible {
  outline: none !important;
  box-shadow: var(--fp-openapp-shadow-focus) !important;
}

/* Header/nav buttons should NOT look extra bright */
.nav button,
.nav .btn,
.nav a.btn,
header button,
header .btn,
header a.btn {
  background:
    linear-gradient(135deg, rgba(111, 140, 255, 0.88), rgba(116, 104, 240, 0.88)) !important;
  border-color: rgba(170, 190, 255, 0.24) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.025),
    0 5px 14px rgba(18, 26, 58, 0.16) !important;
  filter: saturate(0.88) brightness(0.94) !important;
}

.nav button:hover,
.nav .btn:hover,
.nav a.btn:hover,
header button:hover,
header .btn:hover,
header a.btn:hover {
  background:
    linear-gradient(135deg, rgba(120, 149, 255, 0.92), rgba(125, 114, 243, 0.92)) !important;
  filter: saturate(0.92) brightness(0.98) !important;
}

/* Strategy/detail/date/filter chips stay dark unless active */
.rangechip,
.history-chip,
.chip,
.pill,
.badge-btn,
.toggle-pill,
.dir-badge {
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.82)) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  color: rgba(226, 232, 240, 0.88) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Active chips use the same calm Open App blue, not the bright blue */
.rangechip.active,
.history-chip.active,
.chip.active,
.pill.active,
.badge-btn.active,
.toggle-pill.active,
.tab.active,
.side-link.active,
button.active,
.btn.active {
  background:
    linear-gradient(135deg, rgba(111, 140, 255, 0.28), rgba(116, 104, 240, 0.22)) !important;
  border-color: rgba(170, 190, 255, 0.34) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.025),
    0 0 0 3px rgba(111, 140, 255, 0.08) !important;
  filter: none !important;
}

/* Keep green/red status controls meaningful and do not turn them blue */
.app-page input[type="checkbox"],
.app-page input[type="checkbox"]:checked,
.app-page label:has(input[type="checkbox"]),
.app-page label:has(input[type="checkbox"]:checked),
.app-page label:has(input[type="checkbox"]:not(:checked)) {
  filter: none !important;
}

/* Disabled buttons should stay quiet */
button:disabled,
.btn:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
  background:
    linear-gradient(180deg, rgba(51, 65, 85, 0.55), rgba(30, 41, 59, 0.55)) !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
  color: rgba(203, 213, 225, 0.62) !important;
  box-shadow: none !important;
  filter: none !important;
}


/* === Fullport modern UI pass 12: exact original Open App button style === */
/* Uses the original .btn.primary style from styles.css:
   linear-gradient(135deg, rgba(77,163,255,1) 0%, rgba(108,92,231,1) 100%)
   This overrides the newer brighter button passes.
*/

/* Original Open App palette */
:root {
  --fp-open-app-bg: linear-gradient(135deg, rgba(77,163,255,1) 0%, rgba(108,92,231,1) 100%);
  --fp-open-app-bg-hover: linear-gradient(135deg, rgba(86,171,255,1) 0%, rgba(117,101,238,1) 100%);
  --fp-open-app-bg-active: linear-gradient(135deg, rgba(66,148,236,1) 0%, rgba(96,82,214,1) 100%);
  --fp-open-app-text: #081022;
  --fp-open-app-shadow: 0 8px 18px rgba(37,99,235,.22);
  --fp-open-app-shadow-hover: 0 10px 22px rgba(37,99,235,.24);
}

/* Make normal action buttons exactly match the original Open App button style. */
button,
.btn,
a.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
.home-page .btn.primary,
.auth-page .btn.primary,
.app-page .btn.primary,
.strategies-page .btn.primary,
.strategy-detail-page .btn.primary,
.strategy-card-cta {
  border: none !important;
  background: var(--fp-open-app-bg) !important;
  color: var(--fp-open-app-text) !important;
  text-shadow: none !important;
  filter: none !important;
  box-shadow: var(--fp-open-app-shadow) !important;
  font-weight: 800 !important;
}

/* Match the original hover behavior: slightly brighter, not neon. */
button:hover,
.btn:hover,
a.btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.home-page .btn.primary:hover,
.auth-page .btn.primary:hover,
.app-page .btn.primary:hover,
.strategies-page .btn.primary:hover,
.strategy-detail-page .btn.primary:hover,
.strategy-card-cta:hover {
  background: var(--fp-open-app-bg-hover) !important;
  color: var(--fp-open-app-text) !important;
  filter: brightness(1.03) !important;
  box-shadow: var(--fp-open-app-shadow-hover) !important;
}

/* Pressed state: same color family, slightly deeper. */
button:active,
.btn:active,
a.btn:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
.strategy-card-cta:active {
  background: var(--fp-open-app-bg-active) !important;
  color: var(--fp-open-app-text) !important;
  filter: brightness(.98) !important;
  box-shadow: 0 5px 14px rgba(37,99,235,.18) !important;
}

/* Keyboard focus stays visible but calm. */
button:focus-visible,
.btn:focus-visible,
a.btn:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
.strategy-card-cta:focus-visible {
  outline: none !important;
  box-shadow:
    var(--fp-open-app-shadow),
    0 0 0 4px rgba(77,163,255,.16) !important;
}

/* Keep nav buttons from using a separate brighter/darker palette. */
.nav button,
.nav .btn,
.nav a.btn,
header button,
header .btn,
header a.btn {
  border: none !important;
  background: var(--fp-open-app-bg) !important;
  color: var(--fp-open-app-text) !important;
  box-shadow: var(--fp-open-app-shadow) !important;
  filter: none !important;
}

.nav button:hover,
.nav .btn:hover,
.nav a.btn:hover,
header button:hover,
header .btn:hover,
header a.btn:hover {
  background: var(--fp-open-app-bg-hover) !important;
  color: var(--fp-open-app-text) !important;
  filter: brightness(1.03) !important;
}

/* Active selected controls should also use the exact Open App family. */
.rangechip.active,
.historychip.active,
.historysource.active,
.historysort.active,
.history-chip.active,
.chip.active,
.pill.active,
.badge-btn.active,
.toggle-pill.active,
.tab.active,
.side-link.active,
button.active,
.btn.active {
  background: var(--fp-open-app-bg) !important;
  color: var(--fp-open-app-text) !important;
  border-color: transparent !important;
  box-shadow:
    var(--fp-open-app-shadow),
    0 0 0 3px rgba(77,163,255,.12) !important;
  filter: none !important;
}

/* Inactive chips remain dark and quiet; only selected/action controls become Open App style. */
.rangechip:not(.active),
.historychip:not(.active),
.historysource:not(.active),
.historysort:not(.active),
.history-chip:not(.active),
.chip:not(.active),
.pill:not(.active),
.badge-btn:not(.active),
.toggle-pill:not(.active),
.dir-badge:not(.active) {
  background: linear-gradient(180deg, rgba(30,41,59,.82), rgba(15,23,42,.82)) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  color: rgba(226,232,240,.88) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Do not turn red/green live-control switches into blue buttons. */
.app-page input[type="checkbox"],
.app-page input[type="checkbox"]:checked,
.app-page label:has(input[type="checkbox"]),
.app-page label:has(input[type="checkbox"]:checked),
.app-page label:has(input[type="checkbox"]:not(:checked)) {
  filter: none !important;
}

/* Disabled buttons stay quiet. */
button:disabled,
.btn:disabled,
a.btn:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
  background: linear-gradient(180deg, rgba(51,65,85,.55), rgba(30,41,59,.55)) !important;
  color: rgba(203,213,225,.62) !important;
  border: 1px solid rgba(148,163,184,.12) !important;
  box-shadow: none !important;
  filter: none !important;
  cursor: not-allowed !important;
}

/* Remove old pseudo glow leftovers. */
button::before,
button::after,
.btn::before,
.btn::after,
a.btn::before,
a.btn::after,
.strategy-card-cta::before,
.strategy-card-cta::after {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
  filter: none !important;
}