/* ============================================================
   TradeCopier Pro · Linear-inspired design system
   ------------------------------------------------------------
   Visual language references:
   • Linear product UI (linear.app) — near-black surfaces, very
     low-contrast 1px borders, 13px Inter, tight density, the
     #5e6ad2 indigo accent.
   • Emil Kowalski's component work (Sonner, Vaul, Geist) —
     restrained colour, no shadows, deliberate small motion.
   This sheet drops the previous "dark Bootstrap" look entirely
   and rebuilds the system from tokens up.  Bootstrap classes
   we still use (btn, form-control, table, modal, alert) get
   re-coloured through CSS custom properties so the HTML stays
   the same.
   ============================================================ */

/* ─── Tokens ──────────────────────────────────────────────── */
:root {
  /* Surfaces — five tiers from page bg up to elevated modal */
  --bg:            #08090a;          /* body */
  --bg-1:          #0d0e10;          /* sidebar */
  --bg-2:          #101113;          /* card surface */
  --bg-3:          #16171a;          /* modal surface */
  --bg-hover:      rgba(255,255,255,0.04);
  --bg-active:     rgba(255,255,255,0.06);

  /* Borders — Linear pattern: 1px, very low contrast */
  --border:        rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.10);
  --border-focus:  rgba(94,106,210,0.55);

  /* Text — three tiers */
  --fg:            #f7f8f8;          /* primary */
  --fg-1:          #8a8f98;          /* secondary */
  --fg-2:          #62656e;          /* tertiary / dim */
  --fg-on-accent:  #ffffff;

  /* Accent (Linear indigo) + semantic */
  --accent:        #5e6ad2;
  --accent-hover:  #6e79d6;
  --accent-press:  #4f5ac4;
  --accent-tint:   rgba(94,106,210,0.14);

  --green:         #4cb782;
  --green-tint:    rgba(76,183,130,0.14);
  --red:           #eb5757;
  --red-tint:      rgba(235,87,87,0.14);
  --amber:         #f2c94c;
  --amber-tint:    rgba(242,201,76,0.14);
  --cyan:          #5fb3f7;

  /* Geometry */
  --radius-sm:     4px;
  --radius:        6px;
  --radius-lg:     10px;
  --sidebar-w:     232px;

  /* Type — Inter at 13px body */
  --font-sans: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
               Menlo, Consolas, monospace;
}

/* ─── Reset + base ────────────────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";  /* Inter stylistic alternates */
}

::selection { background: var(--accent-tint); color: var(--fg); }

* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }
*::-webkit-scrollbar       { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* ─── Bootstrap variable re-routing ───────────────────────── */
:root,
[data-bs-theme="dark"] {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--fg);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: 13px;
  --bs-body-font-weight: 400;
  --bs-secondary-color: var(--fg-1);
  --bs-tertiary-color:  var(--fg-2);
  --bs-border-color:    var(--border);
  --bs-link-color:      var(--accent);
  --bs-link-hover-color: var(--accent-hover);
  --bs-link-decoration: none;
  --bs-emphasis-color:  var(--fg);
}

/* Tighter heading typography — Linear uses 14-18px headings */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: var(--font-sans);
  letter-spacing: -0.011em;
  color: var(--fg);
  font-weight: 600;
}
h1,.h1 { font-size: 20px; line-height: 1.3; }
h2,.h2 { font-size: 17px; line-height: 1.35; }
h3,.h3 { font-size: 15px; line-height: 1.35; }
h4,.h4 { font-size: 14px; line-height: 1.4; }
h5,.h5 { font-size: 13px; line-height: 1.4; }
h6,.h6 { font-size: 12px; line-height: 1.4; }

.text-secondary { color: var(--fg-1) !important; }
.text-muted     { color: var(--fg-2) !important; }
.small,
small           { font-size: 12px; }
code            { font-family: var(--font-mono); font-size: 12px;
                  color: var(--fg-1); background: var(--bg-2);
                  padding: 1px 5px; border-radius: 4px; }

/* ─── Sidebar ────────────────────────────────────────────── */
.tc-mobile-bar {
  background: rgba(13,14,16,0.9);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1030;
  padding: 8px 12px;
}
.tc-mobile-bar .navbar-brand { font-size: 14px; }

.tc-sidebar {
  width: var(--sidebar-w);
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  position: fixed; top: 0; bottom: 0; left: 0;
  z-index: 1040;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.tc-sidebar-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.011em;
}
.tc-sidebar-brand .bi { font-size: 15px; color: var(--accent); }

/* Brand monogram — small filled square with a single white slash,
   visually echoes Linear's product mark without copying it. */
.tc-brand-mark {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 4px;
  background: var(--accent);
  position: relative;
  flex-shrink: 0;
}
.tc-brand-mark::after {
  content: "";
  position: absolute;
  left: 4px; top: 4px;
  width: 10px; height: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 50%, transparent 50%);
  border-radius: 2px;
}

.tc-sidebar-nav { flex: 1; padding: 8px 8px 12px; }

/* Section header (Dashboard / Accounts / etc.) */
.tc-nav-group {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--fg-2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 8px 4px;
  margin-top: 4px;
  border-radius: var(--radius);
  cursor: pointer;
}
.tc-nav-group:hover { color: var(--fg-1); }
.tc-nav-group[aria-expanded="false"] .tc-chev { transform: rotate(-90deg); }
.tc-chev { transition: transform 0.15s ease; font-size: 10px; opacity: 0.7; }

/* Top-level nav item (no submenu) — same row look as a section title but
   clickable.  Used for Economic Calendar. */
.tc-nav-top {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  color: var(--fg-2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 8px;
  margin-top: 4px;
  border-radius: var(--radius);
  text-decoration: none;
}
.tc-nav-top:hover  { color: var(--fg); background: var(--bg-hover); }
.tc-nav-top.active { color: var(--fg); background: var(--bg-active); }

/* Submenu item */
.tc-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  margin: 1px 0;
  color: var(--fg-1);
  font-size: 13px;
  text-decoration: none;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background-color 0.08s ease, color 0.08s ease;
}
.tc-nav-item:hover  { background: var(--bg-hover); color: var(--fg); }
.tc-nav-item.active { background: var(--bg-active); color: var(--fg); }
.tc-nav-item i {
  font-size: 14px; width: 16px; text-align: center;
  color: var(--fg-2);
}
.tc-nav-item.active i,
.tc-nav-item:hover i { color: var(--fg-1); }

.tc-sidebar-footer {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}

/* Main content area */
.tc-main {
  margin-left: var(--sidebar-w);
  padding: 24px 28px 48px;
  max-width: 1400px;
}

/* Mobile drawer */
.tc-sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1035;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease;
}
@media (max-width: 767.98px) {
  .tc-sidebar           { transform: translateX(-100%); }
  .tc-sidebar.show      { transform: translateX(0); }
  .tc-sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
  .tc-main { margin-left: 0; padding: 16px; }
}
body.tc-no-sidebar .tc-main { margin-left: 0; max-width: 100%; }

/* ─── Cards / surfaces ────────────────────────────────────── */
.tc-card,
.tc-stat-card,
.card {
  background-color: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.tc-stat-card .card-body { padding: 14px 16px; }
.tc-stat-label {
  color: var(--fg-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 6px;
}
.tc-stat-value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  line-height: 1.2;
}
.tc-stat-online .tc-stat-value { color: var(--green); }

/* ─── Tables ──────────────────────────────────────────────── */
.tc-table,
.table {
  --bs-table-bg:           transparent;
  --bs-table-color:        var(--fg);
  --bs-table-striped-bg:   transparent;
  --bs-table-hover-bg:     var(--bg-hover);
  --bs-table-border-color: var(--border);
  margin-bottom: 0;
}
.tc-table thead th,
.table thead th {
  background: transparent;
  color: var(--fg-2);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border) !important;
  white-space: nowrap;
}
.tc-table tbody td,
.table tbody td {
  padding: 10px 14px;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  border-top: 0;
}
.tc-table tbody tr:last-child td { border-bottom: 0; }
.tc-table tbody tr:hover         { background: var(--bg-hover); }

/* ─── Pills & badges ──────────────────────────────────────── */
.tc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.tc-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.tc-pill-online  { background: var(--green-tint); color: var(--green); }
.tc-pill-online  .dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.tc-pill-offline { background: var(--red-tint);   color: var(--red); }
.tc-pill-offline .dot { background: var(--red); }
.tc-pill-locked  { background: rgba(235,87,87,0.20); color: var(--red); font-weight: 600; }
.tc-pill-locked .dot { background: var(--red); box-shadow: 0 0 6px var(--red); }
.tc-pill-tg {
  background: rgba(95,179,247,0.14);
  color: var(--cyan);
  margin-left: 6px;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.tc-pill-tg .bi { font-size: 10px; }

/* Daily / DD micro-indicators under the status pill */
.tc-risk-row { margin-top: 4px; display: flex; gap: 8px; }
.tc-risk-micro {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-active);
}

/* ─── Edit Account modal — force internal scroll ───────────────────────
   Bootstrap's modal-dialog-scrollable already adds overflow-y to .modal-body,
   but `modal-dialog-centered` combined with a very tall body can push the
   footer (Save button) off-screen on shorter viewports.  We explicitly
   cap the dialog height + the body, so the footer is always visible and
   the body scrolls inside the dialog. */
#editAccountModal .modal-dialog {
  max-height: calc(100vh - 32px);
}
#editAccountModal .modal-content {
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
}
#editAccountModal .modal-body {
  max-height: 80vh;
  overflow-y: auto;
  /* leave a touch of breathing room so focus rings aren't clipped */
  padding-bottom: 12px;
}

/* ── Economic calendar pills ──────────────────────────────────── */
.tc-news-cur {
  display: inline-block;
  font-weight: 600;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-active);
  color: var(--fg);
}
.tc-impact {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.tc-impact-high   { background: var(--red-tint);   color: var(--red); }
.tc-impact-medium { background: var(--amber-tint); color: var(--amber); }
.tc-impact-low    { background: var(--green-tint); color: var(--green); }
tr.tc-news-now    { background: rgba(235,87,87,0.12); }
tr.tc-news-soon   { background: rgba(242,201,76,0.08); }

/* Edit-modal section title (Risk / Telegram) */
.tc-edit-section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-1);
  margin-bottom: 12px;
  font-weight: 600;
}

.tc-profit-pos { color: var(--green); font-variant-numeric: tabular-nums; }
.tc-profit-neg { color: var(--red);   font-variant-numeric: tabular-nums; }
.tc-profit-na  { color: var(--fg-2); }

/* Firm-card header (account-group titles on the dashboard) */
.tc-firm-card { margin-bottom: 12px; }
.tc-firm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  gap: 8px; flex-wrap: wrap;
}
.tc-firm-name {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fg);
  display: flex; align-items: center; gap: 6px;
}
.tc-firm-name .bi { color: var(--accent); font-size: 14px; }
.tc-firm-meta {
  color: var(--fg-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Role badges (MASTER / SLAVE) */
.tc-role-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-active);
  color: var(--fg-1);
  margin-left: 8px;
  line-height: 1.4;
  vertical-align: middle;
}
.tc-role-badge.tc-role-master {
  background: var(--accent-tint);
  color: var(--accent);
}

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
  --bs-btn-padding-y: 6px;
  --bs-btn-padding-x: 12px;
  --bs-btn-font-size: 13px;
  --bs-btn-font-weight: 500;
  --bs-btn-line-height: 1.4;
  --bs-btn-border-radius: var(--radius);
  --bs-btn-border-width: 1px;
  letter-spacing: -0.005em;
  transition: background-color 0.08s ease, border-color 0.08s ease, color 0.08s ease;
}
.btn-sm {
  --bs-btn-padding-y: 4px;
  --bs-btn-padding-x: 8px;
  --bs-btn-font-size: 12px;
}

/* Primary — Linear indigo */
.btn-info,
.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-color: var(--fg-on-accent);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-hover-color: var(--fg-on-accent);
  --bs-btn-active-bg: var(--accent-press);
  --bs-btn-active-border-color: var(--accent-press);
}

/* Secondary outline */
.btn-outline-secondary {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--fg-1);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-bg: var(--bg-hover);
  --bs-btn-hover-color: var(--fg);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-bg: var(--bg-active);
  --bs-btn-active-border-color: var(--border-strong);
  --bs-btn-active-color: var(--fg);
}
.btn-outline-secondary.active {
  background: var(--bg-active);
  color: var(--fg);
}

.btn-outline-info {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-bg: var(--accent-tint);
  --bs-btn-hover-color: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
}

.btn-outline-danger {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--red);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-bg: var(--red-tint);
  --bs-btn-hover-color: var(--red);
  --bs-btn-hover-border-color: var(--red);
}

.btn-danger {
  --bs-btn-bg: var(--red);
  --bs-btn-border-color: var(--red);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #f06868;
  --bs-btn-hover-border-color: #f06868;
  --bs-btn-active-bg: #d94646;
  --bs-btn-active-border-color: #d94646;
}

/* Button-group radios (used by SL/TP mode toggles) */
.btn-check + .btn { font-weight: 500; }
.btn-check:checked + .btn-outline-secondary {
  background: var(--accent-tint);
  color: var(--accent);
  border-color: rgba(94,106,210,0.4);
}

/* Focus ring — Linear-style subtle */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn-check:focus + .btn {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(94,106,210,0.25);
  border-color: var(--border-focus);
}

/* ─── Forms ───────────────────────────────────────────────── */
.form-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-1);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.form-text {
  font-size: 11px;
  color: var(--fg-2);
  margin-top: 4px;
  letter-spacing: -0.005em;
}

.form-control,
.form-select {
  background-color: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius);
  padding: 7px 10px;
  min-height: 32px;
  transition: border-color 0.08s ease, box-shadow 0.08s ease;
}
.form-control:hover,
.form-select:hover { border-color: var(--border-strong); }
.form-control::placeholder { color: var(--fg-2); }
.form-control:focus,
.form-select:focus {
  background-color: var(--bg);
  color: var(--fg);
}

.form-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%238a8f98' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

.form-check-input {
  background-color: var(--bg);
  border: 1px solid var(--border-strong);
}
.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

/* ─── Modals ──────────────────────────────────────────────── */
.modal-backdrop.show { opacity: 0.55; backdrop-filter: blur(2px); }
.modal-content {
  background: var(--bg-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4),
              0 24px 48px -12px rgba(0,0,0,0.7);
}
.modal-header,
.modal-footer {
  border-color: var(--border);
  padding: 14px 20px;
}
.modal-header { padding-bottom: 12px; }
.modal-title  { font-size: 14px; font-weight: 600; letter-spacing: -0.011em; }
.modal-body   { padding: 16px 20px; }

.btn-close {
  filter: invert(0.9) opacity(0.6);
  transition: opacity 0.08s ease;
}
.btn-close:hover { filter: invert(0.9) opacity(1); }

/* "N slaves mirrored this" pill rendered next to a position's ticket. */
.tc-copies-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.12);
  color: var(--accent-2, #38bdf8);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  line-height: 1.2;
}
.tc-copies-badge .bi { font-size: 9px; }

/* Position snapshot inside Modify / Close modals */
.tc-pos-summary {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.tc-pos-summary .row > div {
  display: flex; gap: 4px; align-items: baseline;
}
.tc-pos-summary span { font-variant-numeric: tabular-nums; }

/* Account-checkbox list inside the Trade modal */
.tc-acct-list {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 8px;
  background: var(--bg-2);
}
.tc-acct-list .form-check {
  padding: 6px 0;
  margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.tc-acct-list .form-check + .form-check {
  border-top: 1px solid var(--border);
}
.tc-acct-list .form-check-label {
  width: 100%;
  font-size: 13px;
  margin-left: 4px;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

/* ─── Alerts ──────────────────────────────────────────────── */
.alert {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--fg);
}
.alert-success { background: var(--green-tint); border-color: rgba(76,183,130,0.3); color: var(--green); }
.alert-danger  { background: var(--red-tint);   border-color: rgba(235,87,87,0.3);  color: var(--red); }
.alert-warning { background: var(--amber-tint); border-color: rgba(242,201,76,0.3); color: var(--amber); }
.alert-info    { background: var(--accent-tint); border-color: rgba(94,106,210,0.3); color: var(--accent); }

/* ─── Command-history page niceties ───────────────────────── */
.tc-hist-action {
  display: inline-block;
  min-width: 64px;
  text-align: center;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.tc-hist-open    { background: var(--green-tint);  color: var(--green); }
.tc-hist-close   { background: var(--red-tint);    color: var(--red); }
.tc-hist-modify  { background: var(--accent-tint); color: var(--accent); }
.tc-hist-pending { background: var(--amber-tint);  color: var(--amber); }
.tc-hist-payload {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  white-space: pre-wrap;
  word-break: break-all;
}

/* ─── Misc utility ────────────────────────────────────────── */
.tc-page-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.tc-page-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.011em;
  margin: 0;
  color: var(--fg);
}
.tc-page-title .bi { color: var(--fg-1); font-size: 16px; }

.tc-section-meta {
  display: flex; align-items: center; gap: 10px;
  color: var(--fg-2);
  font-size: 12px;
}

.text-info { color: var(--accent) !important; }
hr { border-color: var(--border); opacity: 1; }

/* Logged-out page (login form) — center it */
body.tc-no-sidebar .tc-main {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE OVERRIDES  (< md / 768 px)
   ═══════════════════════════════════════════════════════════════
   Goals for a phone user:
     • sidebar is hidden by default and slides over on hamburger tap
       (already wired by the JS in base.html);
     • page headers stack vertically when the action button doesn't
       fit next to the title;
     • stat cards stay readable, not crushed;
     • tables scroll horizontally with thumb-friendly hit areas;
     • modals are full-screen (modal-fullscreen-sm-down on each modal);
     • close-button is tappable (≥ 44 × 44 px touch target).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

  /* Page header stacks instead of cramming the New-Trade button
     onto a second visual row that touches the title. */
  .tc-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 16px;
  }
  .tc-page-header .d-flex {
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .tc-page-title { font-size: 16px; }

  /* Slightly looser stat cards so the value isn't squashed. */
  .tc-stat-card .card-body { padding: 12px 14px; }
  .tc-stat-value           { font-size: 18px; }

  /* Tables: keep horizontal scroll, but make the rows easier to
     hit and the per-cell padding less wasteful on a 360 px screen. */
  .tc-table th,
  .tc-table td { padding: 10px 12px; }
  .table-responsive {
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }

  /* Action button group inside positions table — at least 44 px tall
     so it's a real touch target, not a tap-the-pixel game. */
  .tc-table .btn-group .btn,
  .tc-table .btn-sm { min-height: 36px; padding: 6px 10px; }

  /* Modals: in full-screen mode keep the close button big & far from
     the side so a thumb doesn't miss-tap "Cancel" instead. */
  .modal-fullscreen-sm-down .btn-close {
    width: 1.5em; height: 1.5em;
    padding: 0.75rem;
  }
  .modal-fullscreen-sm-down .modal-body { padding: 16px; }
  .modal-fullscreen-sm-down .modal-footer .btn { min-height: 40px; }

  /* Position-summary panel inside Modify/Close — two columns instead
     of three so labels and values don't truncate on narrow screens. */
  .tc-pos-summary .row-cols-md-3 > * { flex: 0 0 50%; max-width: 50%; }

  /* Sidebar brand: hide the brand on mobile inside the sidebar
     because the top mobile bar already shows it. */
  .tc-sidebar-brand.d-none.d-md-flex { display: none !important; }

  /* Forms in /accounts page: stack everything to one column so the
     trader can fill the form without horizontal scrolling. */
  form .col-md-6,
  form .col-md-4,
  form .col-lg-4,
  form .col-lg-2 { width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════════
   ACCOUNT COLOR-CODING + LABELS
   ═══════════════════════════════════════════════════════════════ */
:root {
  --acct-red:    #eb5757;
  --acct-orange: #f0903c;
  --acct-yellow: #f2c94c;
  --acct-green:  #4cb782;
  --acct-blue:   #5fb3f7;
  --acct-purple: #b48cff;
  --acct-none:   transparent;
}
.tc-color-red    { --acct-c: var(--acct-red);    }
.tc-color-orange { --acct-c: var(--acct-orange); }
.tc-color-yellow { --acct-c: var(--acct-yellow); }
.tc-color-green  { --acct-c: var(--acct-green);  }
.tc-color-blue   { --acct-c: var(--acct-blue);   }
.tc-color-purple { --acct-c: var(--acct-purple); }
.tc-color-none   { --acct-c: transparent;        }

/* Left-border accent on table rows + checkbox rows.  The border lives on
   the first cell so it doesn't fight Bootstrap's row layout. */
.tc-acct-row td:first-child {
  border-left: 3px solid var(--acct-c, transparent);
}
.tc-acct-row td:first-child:not([class*="text-end"]) { padding-left: 11px; }

.tc-acct-check {
  border-left: 3px solid var(--acct-c, transparent);
  padding-left: 8px !important;
}

/* Inline label chip next to the account number. */
.tc-acct-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-active);
  color: var(--fg);
  margin-left: 8px;
  line-height: 1.4;
  vertical-align: middle;
}

/* Color swatch — small inline pill shown next to an account name. */
.tc-color-swatch {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border-strong);
  vertical-align: middle;
  flex-shrink: 0;
}

/* Color picker — JS-rendered button list, no <input radio> involved. */
.tc-color-picker {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
  flex-wrap: wrap;
}
.tc-color-dot {
  appearance: none;
  background: transparent;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: border-color 0.08s ease, transform 0.08s ease;
  color: #fff;
}
.tc-color-dot.tc-color-none {
  background: transparent;
  border: 2px dashed var(--border-strong);
  color: var(--fg-1);
}
.tc-color-dot:hover { transform: scale(1.08); }
.tc-color-dot.selected {
  border-color: var(--fg);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}
.tc-color-check {
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.08s ease;
}
.tc-color-dot.selected .tc-color-check { opacity: 1; }
.tc-color-dot.tc-color-none.selected .tc-color-check { opacity: 1; color: var(--fg-1); }

/* ── Section host: stack of cards, one per section ──────────────────── */
.tc-section-host { display: flex; flex-direction: column; gap: 18px; }
.tc-section {
  display: flex; flex-direction: column;
}
.tc-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 4px 10px;
}
.tc-section-title-wrap {
  display: inline-flex; align-items: center; gap: 8px;
}
.tc-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.005em;
}

/* Lock-rows toggle in the page header. */
.tc-lock-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  user-select: none;
  color: var(--fg-2);
  padding: 4px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  font-size: 12px;
}
.tc-lock-toggle:hover { color: var(--fg); background: var(--bg-hover); }
.tc-lock-toggle input { display: none; }
.tc-lock-toggle .bi { font-size: 13px; opacity: 0.5; transition: opacity 0.1s; }
.tc-lock-toggle:has(input:checked) {
  color: var(--amber);
  border-color: rgba(242,201,76,0.45);
  background: var(--amber-tint);
}
.tc-lock-toggle:has(input:checked) .bi { opacity: 1; }

/* Master-slave hierarchy rows. */
.tc-row-master td:first-child {
  border-left: 3px solid var(--accent) !important;
}
.tc-row-master td { background: rgba(94,106,210,0.06); }
.tc-row-master.drop-target td {
  background: var(--accent-tint) !important;
  outline: 1px dashed var(--accent);
  outline-offset: -2px;
}
.tc-row-follower td:nth-child(2) { padding-left: 30px; }
.tc-row-follower td:nth-child(2) .bi-arrow-return-right { margin-right: -2px; }
.tc-row-follower { color: var(--fg-1); }

/* Apply-and-restart button — spinner while restarting. */
.tc-apply-btn .tc-apply-icon {
  display: inline-block;
  line-height: 1;
}
.tc-apply-btn.tc-applying {
  color: var(--amber);
  border-color: rgba(242,201,76,0.5);
}
.tc-apply-btn.tc-applying .tc-apply-icon {
  animation: tc-apply-spin 1s linear infinite;
}
@keyframes tc-apply-spin { to { transform: rotate(360deg); } }
.tc-apply-btn.tc-apply-ok {
  color: var(--green);
  border-color: rgba(76,183,130,0.5);
}
.tc-apply-btn.tc-apply-err {
  color: var(--red);
  border-color: rgba(235,87,87,0.5);
}

/* Copy-login button - subtle until hover. */
.tc-copy-btn {
  color: var(--fg-2);
  border: 0; background: transparent;
  vertical-align: middle;
  opacity: 0.6;
  transition: opacity 0.1s, color 0.1s;
}
.tc-copy-btn:hover { opacity: 1; color: var(--fg); }
.tc-copy-btn .bi { font-size: 12px; }
.tc-copy-btn.tc-copy-flash {
  animation: tc-copy-pulse 0.7s ease;
}
@keyframes tc-copy-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.tc-login-cell { font-variant-numeric: tabular-nums; }

/* Drag handle column */
.tc-drag-handle {
  cursor: grab;
  color: var(--fg-2);
  width: 32px;
  text-align: center;
  user-select: none;
}
.tc-drag-handle:hover { color: var(--fg); }
.tc-drag-handle .bi { font-size: 16px; }
.tc-acct-row { transition: background 0.08s ease; }
.tc-acct-row.dragging {
  opacity: 0.4;
  background: var(--accent-tint) !important;
}
.tc-acct-tbody.drag-over {
  background: rgba(94,106,210,0.04);
  outline: 1px dashed rgba(94,106,210,0.3);
  outline-offset: -2px;
}

/* The first cell of every account row carries the per-account color
   accent as a left border (token comes from the row's --acct-c style). */
.tc-acct-table tbody td:first-child,
.tc-acct-table-row td:first-child {
  border-left: 3px solid var(--acct-c, transparent);
}

/* Edit modal live-snapshot strip */
.tc-edit-snapshot {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.tc-edit-snapshot .row > div { display: flex; gap: 4px; align-items: baseline; }
.tc-edit-snapshot span { font-variant-numeric: tabular-nums; }

/* P&L dot indicators (Daily / Weekly columns) */
.tc-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.tc-dot-green { background: var(--green); box-shadow: 0 0 6px var(--green); }
.tc-dot-red   { background: var(--red);   box-shadow: 0 0 6px var(--red); }

/* Master vs copy row styling in the positions table */
.tc-pos-master td:first-child { border-left: 3px solid var(--accent); }
.tc-pos-copy td:first-child   { border-left: 3px solid transparent; }
.tc-pos-copy {
  background: rgba(255,255,255,0.015);
}
.tc-pos-copy td { color: var(--fg-1); }
.tc-copy-indent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-left: 18px;
  font-variant-numeric: tabular-nums;
}
.tc-copy-indent .bi { font-size: 12px; opacity: 0.7; }

/* Note cell in positions table */
.tc-note-cell { cursor: pointer; max-width: 220px; }
.tc-note-cell:hover { background: var(--bg-hover); }
.tc-note-preview {
  margin-left: 6px;
  color: var(--fg-1);
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   CHECKBOX TICK FIX — Bootstrap's default SVG sometimes gets lost
   when the dark form-control bg overrides it.  Force the white
   tick to render reliably.
   ═══════════════════════════════════════════════════════════════ */
.form-check-input[type="checkbox"] {
  width: 16px; height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--bg);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  position: relative;
  transition: background-color 0.08s ease, border-color 0.08s ease;
}
.form-check-input[type="checkbox"]:hover {
  border-color: var(--accent);
}
.form-check-input[type="checkbox"]:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}
.form-check-input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  pointer-events: none;
}
.tc-acct-list .form-check-input[type="checkbox"]:checked + .form-check-label {
  color: var(--fg);
}
.tc-acct-list .form-check:has(input:checked) {
  background: var(--accent-tint);
  border-radius: var(--radius);
}

/* ─── iOS-style toggle switch ──────────────────────────────────────── */
.tc-switch {
  position: relative;
  display: inline-block;
  width: 42px; height: 22px;
  vertical-align: middle;
  cursor: pointer;
}
.tc-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.tc-switch-track {
  position: absolute; inset: 0;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.tc-switch-thumb {
  position: absolute;
  left: 2px; top: 2px;
  width: 16px; height: 16px;
  background: var(--fg-1);
  border-radius: 50%;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.18s ease;
}
.tc-switch input:checked + .tc-switch-track {
  background: var(--accent);
  border-color: var(--accent);
}
.tc-switch input:checked + .tc-switch-track .tc-switch-thumb {
  transform: translateX(20px);
  background: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   NOTIFICATION BELL + DROPDOWN PANEL
   ═══════════════════════════════════════════════════════════════ */
.tc-bell-wrap {
  position: relative;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
}
.tc-bell-btn {
  background: transparent;
  border: 0;
  color: var(--fg-1);
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  position: relative;
}
.tc-bell-btn:hover { background: var(--bg-hover); color: var(--fg); }
.tc-bell-btn .bi { font-size: 15px; transform-origin: 50% 10%; }
.tc-bell-btn::after { content: "Notifications"; }

/* Shake animation fired when a new (unack) alert arrives. */
@keyframes tc-bell-shake {
  0%, 100% { transform: rotate(0); }
  10%, 30%, 50%, 70%, 90% { transform: rotate(-12deg); }
  20%, 40%, 60%, 80%      { transform: rotate( 12deg); }
}
.tc-bell-btn.tc-shake .bi { animation: tc-bell-shake 0.7s ease; }

.tc-bell-badge {
  position: absolute;
  top: 2px; right: 8px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 999px;
  min-width: 18px;
  height: 16px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--bg-1);
}

.tc-bell-panel {
  /* Fixed positioning escapes the sidebar's stacking context entirely,
     so the panel always renders ABOVE the main content area no matter
     how deep we nest.  Anchored at sidebar's right edge, vertically
     above the footer (≈ 100 px from the bottom of the viewport). */
  position: fixed;
  left: calc(var(--sidebar-w) + 8px);
  bottom: 80px;
  width: 360px;
  max-height: 70vh;
  background: var(--bg-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.7);
  z-index: 9999;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.tc-bell-panel.show { display: flex; }

.tc-bell-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.tc-bell-panel-header .actions {
  display: inline-flex; gap: 6px;
}

.tc-bell-list {
  overflow-y: auto;
  max-height: 50vh;
}
.tc-bell-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--fg-2);
  font-size: 12px;
}
.tc-bell-item {
  display: flex; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: default;
}
.tc-bell-item.unread { background: rgba(94,106,210,0.04); }
.tc-bell-item:last-child { border-bottom: 0; }
.tc-bell-dot {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  background: var(--fg-2);
}
.tc-bell-dot-success { background: var(--green); box-shadow: 0 0 6px var(--green); }
.tc-bell-dot-warning { background: var(--amber); }
.tc-bell-dot-danger  { background: var(--red);   box-shadow: 0 0 6px var(--red); }
.tc-bell-dot-info    { background: var(--accent);}
.tc-bell-body { flex: 1; min-width: 0; }
.tc-bell-msg  { color: var(--fg); font-size: 12px; word-break: break-word; }
.tc-bell-meta { color: var(--fg-2); font-size: 11px; margin-top: 2px;
                font-variant-numeric: tabular-nums; }

.tc-bell-footer {
  border-top: 1px solid var(--border);
  padding: 8px 14px;
  text-align: center;
  background: var(--bg-2);
}
.tc-bell-footer a { color: var(--accent); font-size: 12px; text-decoration: none; }
.tc-bell-footer a:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
  .tc-bell-panel {
    left: 8px; right: 8px; width: auto;
    bottom: 60px;
    max-height: calc(100vh - 100px);
  }
}

/* ═══════════════════════════════════════════════════════════════
   TOASTS (bottom-right)
   ═══════════════════════════════════════════════════════════════ */
.tc-toast-host {
  position: fixed;
  right: 20px; bottom: 20px;
  display: flex; flex-direction: column;
  gap: 8px;
  z-index: 1080;
  pointer-events: none;
}
.tc-toast {
  background: var(--bg-3);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 10px 12px 10px 14px;
  font-size: 12px;
  color: var(--fg);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6);
  min-width: 260px; max-width: 380px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
}
.tc-toast.show { opacity: 1; transform: translateY(0); }
.tc-toast .tc-toast-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
}
.tc-toast .tc-toast-icon .bi { font-size: 13px; }
.tc-toast .tc-toast-text { flex: 1; line-height: 1.4; word-break: break-word; }
.tc-toast .tc-toast-close {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: var(--fg-2);
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  border-radius: 4px;
}
.tc-toast .tc-toast-close:hover { color: var(--fg); background: var(--bg-hover); }
.tc-toast-success { border-left-color: var(--green); }
.tc-toast-success .tc-toast-icon { background: var(--green-tint); color: var(--green); }
.tc-toast-warning { border-left-color: var(--amber); }
.tc-toast-warning .tc-toast-icon { background: var(--amber-tint); color: var(--amber); }
.tc-toast-danger  { border-left-color: var(--red); }
.tc-toast-danger  .tc-toast-icon { background: var(--red-tint); color: var(--red); }
.tc-toast-info    { border-left-color: var(--accent); }
.tc-toast-info    .tc-toast-icon { background: var(--accent-tint); color: var(--accent); }
.tc-toast-modify  { border-left-color: var(--amber); }
.tc-toast-modify  .tc-toast-icon { background: var(--amber-tint); color: var(--amber); }

/* Risk banner — persists until the user acknowledges via the bell. */
#tc-risk-banner,
#tc-news-banner {
  background: var(--red-tint);
  border-color: rgba(235,87,87,0.4);
  color: var(--red);
  font-weight: 500;
  margin-bottom: 16px;
}
#tc-news-banner .bi { font-size: 14px; }

/* Analytics chart wrapper — guarantees a stable height for Chart.js to
   render into (responsive=true + maintainAspectRatio=false otherwise
   collapses to 0). */
.tc-chart-wrap {
  position: relative;
  height: 280px;
}

/* Per-account tab bar (Performance page). */
.tc-acct-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.tc-acct-tab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-1);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.08s ease, color 0.08s ease, border-color 0.08s ease;
}
.tc-acct-tab:hover  { background: var(--bg-hover); color: var(--fg); }
.tc-acct-tab.active {
  background: var(--accent-tint);
  color: var(--accent);
  border-color: rgba(94,106,210,0.4);
}

/* Provisioner step indicator + log. */
.tc-prov-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px;
  margin-bottom: 14px;
}
.tc-prov-step {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 11px;
  background: var(--bg-2);
  color: var(--fg-2);
  display: flex; flex-direction: column; gap: 4px;
}
.tc-prov-step .num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
.tc-prov-step.active {
  background: var(--accent-tint);
  border-color: rgba(94,106,210,0.4);
  color: var(--fg);
}
.tc-prov-step.done {
  border-color: rgba(76,183,130,0.35);
  background: var(--green-tint);
  color: var(--green);
}
.tc-prov-step.error {
  border-color: rgba(235,87,87,0.4);
  background: var(--red-tint);
  color: var(--red);
}
.tc-prov-step.warning {
  border-color: rgba(242,201,76,0.45);
  background: var(--amber-tint);
  color: var(--amber);
}
.tc-prov-step .lbl { font-weight: 600; font-size: 12px; }

.tc-prov-log {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-1);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION (< 768 px)
   ═══════════════════════════════════════════════════════════════ */
.tc-bottom-nav {
  display: none;
}
@media (max-width: 767.98px) {
  .tc-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 64px;
    z-index: 1050;
    background: rgba(13, 14, 16, 0.96);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tc-bn-item {
    display: inline-flex; flex-direction: column; align-items: center;
    justify-content: center;
    gap: 2px;
    background: transparent; border: 0;
    color: var(--fg-2);
    font-size: 10px;
    text-decoration: none;
    padding: 6px 4px;
    min-height: 44px;          /* 44 px touch target */
    cursor: pointer;
  }
  .tc-bn-item .bi { font-size: 18px; }
  .tc-bn-item.active { color: var(--accent); }
  .tc-bn-item:hover  { color: var(--fg); }

  /* Centre "+" — raised pill, accent-tinted */
  .tc-bn-cta .tc-bn-plus {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px -4px rgba(94,106,210,0.5);
    margin-top: -18px;
  }
  .tc-bn-cta .tc-bn-plus .bi { font-size: 20px; }
  .tc-bn-cta { color: var(--accent); }

  /* Main content needs bottom padding so the last row isn't covered. */
  .tc-main { padding-bottom: 80px; }

  /* Risk + news banners sit ABOVE the bottom nav too. */
  #tc-risk-banner, #tc-news-banner { margin-bottom: 12px; }

  /* Hamburger button on the top mobile bar — bigger, more obvious. */
  .tc-mobile-bar .btn { min-width: 44px; min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════
   ADDITIONAL MOBILE OVERRIDES — per-page issues you asked to fix
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

  /* Stat cards = 2 per row on phones (not 1, not 4). */
  .row.g-3 > .col-6,
  .row.g-2 > .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Tables: subtle "← swipe →" hint at the right edge while scrollable. */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
    position: relative;
    scroll-snap-type: x proximity;
  }
  .table-responsive::after {
    content: "← swipe →";
    position: sticky;
    right: 0; top: 0;
    display: block;
    font-size: 10px;
    color: var(--fg-2);
    background: linear-gradient(90deg, transparent, var(--bg-2) 60%);
    padding: 4px 8px;
    pointer-events: none;
  }

  /* Position-row action buttons — 44 px square touch targets. */
  #positions-body .btn-group .btn {
    min-width: 44px; min-height: 44px;
    padding: 8px 10px;
    font-size: 14px;
  }

  /* Modal body scroll-y so the New Trade dialog never traps the Send button. */
  .modal.fade .modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
  }

  /* Bell dropdown — make sure it never overflows past the viewport on
     small phones; bottom nav lives at 64 px so pull above it. */
  .tc-bell-panel {
    bottom: 80px !important;
    max-height: calc(100vh - 140px) !important;
  }

  /* Account tabs (Performance page) — wrap + scroll horizontally. */
  .tc-acct-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }
  .tc-acct-tab { flex-shrink: 0; }

  /* Form inputs on Add Account — bigger touch target. */
  form .form-control, form .form-select {
    min-height: 44px;
    font-size: 14px;
  }

  /* Charts — let them eat the full width on phones. */
  .tc-chart-wrap { height: 240px; }
}

/* Extra-narrow phones (< 380 px) — Galaxy Fold cover screen etc. */
@media (max-width: 379.98px) {
  .tc-stat-value      { font-size: 16px; }
  .tc-page-title      { font-size: 15px; }
  .tc-table th,
  .tc-table td        { padding: 8px 10px; font-size: 12px; }
}