/* Local Settings Hub — display toggles + tool launchers inside the settings panel.
   Added 2026-09-29 (Joseph's frontend task). Loaded from index.html; not part of the
   compiled Angular bundle. Editable Angular source is absent, so this layer is kept
   separate on purpose and must be carried over if source is ever recovered. */

/* ---------- 1. Visibility switches (driven by classes on <html>) ---------- */
html.hub-hide-tape .ticker-tape-bar,
html.hub-hide-tape .hub-tape-placeholder { display: none !important; }
html.hub-hide-overview .header-tickers-bar { display: none !important; }
html.hub-hide-session .session-box { display: none !important; }
html.hub-hide-times .header-times { display: none !important; }
html.hub-hide-session.hub-hide-times .header-times-bar { display: none !important; }

/* ---------- 2. The three loose edge tabs are folded into the panel ---------- */
.settingSidebar2 .settingPanelToggle2,
.settingSidebar3 .settingPanelToggle3,
.settingSidebar4 .settingPanelToggle4 { display: none !important; }

/* While one of those panels is open it still needs a way to close: a tidy handle. */
.settingSidebar2.showSettingPanel .settingPanelToggle2,
.settingSidebar3.showSettingPanel .settingPanelToggle3,
.settingSidebar4.showSettingPanel .settingPanelToggle4 {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  top: 14px;
  left: -44px;
  border-radius: 50%;
  background: #1e293b;
  color: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .35);
  font-size: 0;
  text-decoration: none;
  transition: transform .2s, background .2s;
}
.settingSidebar2.showSettingPanel .settingPanelToggle2:hover,
.settingSidebar3.showSettingPanel .settingPanelToggle3:hover,
.settingSidebar4.showSettingPanel .settingPanelToggle4:hover { background: #dc2626; transform: scale(1.08); }
.settingSidebar2.showSettingPanel .settingPanelToggle2 i,
.settingSidebar3.showSettingPanel .settingPanelToggle3 i,
.settingSidebar4.showSettingPanel .settingPanelToggle4 i { display: none; }
.settingSidebar2.showSettingPanel .settingPanelToggle2::after,
.settingSidebar3.showSettingPanel .settingPanelToggle3::after,
.settingSidebar4.showSettingPanel .settingPanelToggle4::after {
  content: "\2715";
  font-size: 13px;
  line-height: 1;
}

/* The gear tab itself: calmer, rounder, slower spin. */
.settingSidebar .settingPanelToggle {
  background: linear-gradient(135deg, #6777ef, #4f46e5);
  box-shadow: -4px 6px 18px rgba(79, 70, 229, .35);
  border-radius: 14px 0 0 14px;
  padding: 11px 0;
  text-align: center;
  top: 30%;
}
.settingSidebar .settingPanelToggle .fa-spin { animation-duration: 6s; }
.settingSidebar .settingPanelToggle:hover .fa-spin { animation-duration: 1.2s; }

/* Give the panel room for the new sections (original was 280px). */
.settingSidebar { width: 320px !important; max-width: 100vw; right: -330px !important; }
.settingSidebar.showSettingPanel { right: 0 !important; }
.settingSidebar .settingSidebar-body { overflow-y: auto; }

/* The header is now ~180px tall and sticky above the panels (z-index 1000 vs 999), which hid the top of
   every side panel. --hub-top is the live header height, set by local-settings-hub.js. */
.settingSidebar, .settingSidebar2, .settingSidebar3, .settingSidebar4 {
  top: var(--hub-top, 70px) !important;
  height: calc(100vh - var(--hub-top, 70px)) !important;
}
.settingSidebar ng-scrollbar, .settingSidebar2 ng-scrollbar,
.settingSidebar3 ng-scrollbar, .settingSidebar4 ng-scrollbar { height: 100% !important; }

/* The main left menu is pinned by the app at top:150px / height:100vh-170px, sized for a ~154px header.
   Follow the live header height instead, and let the menu scroll inside its box rather than being clipped. */
.sidebar {
  top: var(--hub-top, 150px) !important;
  height: calc(100vh - var(--hub-top, 150px) - 20px) !important;
}
.sidebar .menu { height: 100% !important; }

/* The original app hides the gear panel below 1024px, which would also hide the toggles. Keep it. */
@media only screen and (max-width: 1024px) {
  .settingSidebar { display: block !important; }
}

/* ---------- 3. Hub sections inside the settings panel ---------- */
.hub {
  --hub-fg: #0f172a;
  --hub-muted: #64748b;
  --hub-line: #e2e8f0;
  --hub-card: #f8fafc;
  --hub-card-hover: #f1f5f9;
  --hub-accent: #4f46e5;
  --hub-on: #22c55e;
  --hub-off: #cbd5e1;
  padding: 16px 16px 4px;
  font-family: inherit;
  color: var(--hub-fg);
}
body.dark .hub {
  --hub-fg: #e2e8f0;
  --hub-muted: #94a3b8;
  --hub-line: #334155;
  --hub-card: #1e293b;
  --hub-card-hover: #273449;
  --hub-off: #475569;
}

.hub-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 10px; }
.hub-title { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--hub-muted); }
.hub-count { font-size: 11px; color: var(--hub-muted); font-variant-numeric: tabular-nums; }
.hub-quick { display: flex; gap: 6px; }
.hub-link {
  border: 0; background: none; padding: 2px 6px; border-radius: 6px; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--hub-accent);
}
.hub-link:hover { background: var(--hub-card-hover); }

.hub-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.hub-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
  background: var(--hub-card); border: 1px solid var(--hub-line);
  color: inherit; font: inherit; transition: background .15s, border-color .15s, transform .1s;
}
.hub-row:hover { background: var(--hub-card-hover); }
.hub-row:active { transform: scale(.99); }
.hub-row:focus-visible, .hub-tile:focus-visible, .hub-link:focus-visible { outline: 2px solid var(--hub-accent); outline-offset: 2px; }
.hub-row[aria-checked="true"] { border-color: color-mix(in srgb, var(--hub-on) 45%, var(--hub-line)); }

.hub-ico {
  flex: 0 0 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--hub-accent) 12%, transparent); color: var(--hub-accent);
}
.hub-ico svg { width: 18px; height: 18px; }
.hub-row[aria-checked="false"] .hub-ico { background: transparent; color: var(--hub-muted); }

.hub-txt { flex: 1; min-width: 0; }
.hub-name { display: block; font-size: 13px; font-weight: 700; line-height: 1.25; }
.hub-desc { display: block; font-size: 11px; line-height: 1.3; color: var(--hub-muted); margin-top: 1px; }

.hub-switch {
  flex: 0 0 38px; height: 22px; border-radius: 11px; position: relative;
  background: var(--hub-off); transition: background .2s;
}
.hub-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s;
}
.hub-row[aria-checked="true"] .hub-switch { background: var(--hub-on); }
.hub-row[aria-checked="true"] .hub-switch::after { transform: translateX(16px); }

.hub-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.hub-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 12px 6px 10px; border-radius: 12px; cursor: pointer;
  background: var(--hub-card); border: 1px solid var(--hub-line); color: inherit; font: inherit;
  transition: background .15s, transform .12s, border-color .15s;
}
.hub-tile:hover:not(:disabled) { background: var(--hub-card-hover); transform: translateY(-1px); }
.hub-tile .hub-ico { width: 34px; height: 34px; flex: none; }
.hub-tile .hub-name { font-size: 12px; }
.hub-tile .hub-desc { font-size: 10px; }
.hub-tile[aria-pressed="true"] { border-color: var(--hub-accent); background: color-mix(in srgb, var(--hub-accent) 10%, var(--hub-card)); }
.hub-tile:disabled { opacity: .5; cursor: not-allowed; }
.hub-tile[data-tone="green"] .hub-ico { color: #16a34a; background: rgba(34, 197, 94, .14); }
.hub-tile[data-tone="cyan"] .hub-ico { color: #0891b2; background: rgba(6, 182, 212, .14); }
.hub-tile[data-tone="amber"] .hub-ico { color: #d97706; background: rgba(245, 158, 11, .16); }

.hub-foot { margin: 0 0 12px; font-size: 11px; color: var(--hub-muted); line-height: 1.4; }
.hub-divider { height: 1px; background: var(--hub-line); margin: 0 16px; }

/* ---------- 4. Ticker tape placeholder (tape exists but has no data yet) ---------- */
.hub-tape-placeholder {
  display: flex; align-items: stretch; height: 28px; overflow: hidden;
  background: #080f18; border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.hub-tape-placeholder .hub-tape-label {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 0 14px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; white-space: nowrap;
  color: #fff; background: #475569; border-right: 2px solid rgba(255, 255, 255, .08);
}
.hub-tape-placeholder .hub-tape-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; animation: hub-pulse 1.4s ease-in-out infinite;
}
.hub-tape-placeholder .hub-tape-msg {
  display: flex; align-items: center; padding: 0 16px; font-size: 11px; color: #64748b;
  font-family: "Roboto Mono", "Courier New", monospace; letter-spacing: .3px;
}
@keyframes hub-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ---------- 5. Menu pages: hide and reorder the left navigation ---------- */
/* Applied by local-settings-hub.js to the <li> elements Angular renders (nothing is moved or removed). */
.sidebar li[data-hub-hidden] { display: none !important; }
/* Reordering uses flex `order`; the class is only present while the layout differs from the app's own. */
html.hub-menu-custom .sidebar .menu ul.list { display: flex; flex-direction: column; }
/* Hovering a row in the settings panel points at the real menu item. */
.sidebar li[data-hub-locate] > a,
.sidebar li[data-hub-locate] > .header {
  box-shadow: inset 0 0 0 2px #6777ef;
  background: rgba(103, 119, 239, .14) !important;
  border-radius: 8px;
}

.hub-menu { margin: 0 0 18px; }
.hub-hint { margin: 0 0 10px; font-size: 11px; line-height: 1.4; color: var(--hub-muted); }
.hub-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hub-link:disabled { opacity: .4; cursor: default; }
.hub-link:disabled:hover { background: none; }

.hub-secs, .hub-pgs { list-style: none; margin: 0; padding: 0; }
.hub-secs { display: flex; flex-direction: column; gap: 8px; }
.hub-sec { background: var(--hub-card); border: 1px solid var(--hub-line); border-radius: 12px; }
.hub-sec-head { display: flex; align-items: center; gap: 2px; padding: 5px 5px 5px 3px; }

.hub-grip {
  flex: 0 0 22px; height: 28px; display: grid; place-items: center; border-radius: 6px;
  color: var(--hub-muted); cursor: grab; touch-action: none; user-select: none;
}
.hub-grip:hover { background: var(--hub-card-hover); color: var(--hub-fg); }
.hub-grip svg { width: 14px; height: 14px; }

.hub-sec-name {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; padding: 4px 2px; border: 0; background: none;
  font: inherit; font-size: 12px; font-weight: 700; color: inherit; text-align: left; cursor: pointer; border-radius: 6px;
}
.hub-sec-name:focus-visible, .hub-mini:focus-visible, .hub-grip:focus-visible { outline: 2px solid var(--hub-accent); outline-offset: 1px; }
.hub-sec-name svg { flex: none; width: 14px; height: 14px; color: var(--hub-muted); transition: transform .15s; }
.hub-sec.open .hub-sec-name svg { transform: rotate(90deg); }
.hub-sec-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-sec-count { flex: none; padding: 0 4px; font-size: 10px; color: var(--hub-muted); font-variant-numeric: tabular-nums; }

.hub-mini {
  flex: 0 0 24px; width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 6px;
  background: none; color: var(--hub-muted); cursor: pointer; transition: background .12s, color .12s;
}
.hub-mini:hover:not(:disabled) { background: var(--hub-card-hover); color: var(--hub-fg); }
.hub-mini:disabled { opacity: .28; cursor: default; }
.hub-mini svg { width: 15px; height: 15px; }
.hub-mini.hub-eye { color: var(--hub-accent); }
.hub-mini.hub-eye.is-off { color: #d97706; }

.hub-pgs { display: none; padding: 4px; border-top: 1px solid var(--hub-line); }
.hub-sec.open > .hub-pgs { display: block; }
.hub-pgs:empty::before {
  content: "Drop pages here"; display: block; padding: 10px; text-align: center; font-size: 11px; color: var(--hub-muted);
  border: 1px dashed var(--hub-line); border-radius: 8px;
}

.hub-pg { display: flex; align-items: center; gap: 2px; padding: 1px 2px 1px 0; border-radius: 8px; }
.hub-pg:hover { background: var(--hub-card-hover); }
.hub-pg-ico { flex: 0 0 22px; display: grid; place-items: center; color: var(--hub-accent); }
.hub-pg-ico svg { width: 15px; height: 15px; }
.hub-pg-name { flex: 1; min-width: 0; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.hub-pg.is-hidden .hub-pg-name { opacity: .5; text-decoration: line-through; }
.hub-pg.is-hidden .hub-pg-ico { opacity: .4; }

.hub-dragging {
  position: relative; z-index: 2; pointer-events: none; transform: scale(1.02);
  background: var(--hub-card-hover); box-shadow: 0 10px 24px rgba(15, 23, 42, .28);
}
.hub-grip:active { cursor: grabbing; }
body.hub-drag-active, body.hub-drag-active * { cursor: grabbing !important; user-select: none !important; }
.hub-flash { animation: hub-flash 1s ease-out; }
@keyframes hub-flash {
  from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hub-accent) 55%, transparent); }
  to { box-shadow: 0 0 0 3px transparent; }
}

/* ---------- 6. Trading tickets: drag to reorder ---------- */
/* Applied by local-settings-hub.js to the ticket wrappers inside <mat-accordion>; nothing Angular owns is moved. */
[data-hub-tk] { position: relative; }
/* Reordering uses flex `order`; the attribute is only present while the order differs from the app's own. */
mat-accordion[data-hub-tk-custom] { display: flex; flex-direction: column; }

/* A slim handle rail down the card's left edge, inside the header's own left padding (clear of the status badge). */
.hub-tk-grip {
  position: absolute; top: 0; bottom: 0; left: 8px; z-index: 3; width: 24px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 0; background: transparent;
  color: #64748b; cursor: grab; touch-action: none;
  transition: background .15s, color .15s;
}
.hub-tk-grip svg { width: 12px; height: 18px; display: block; }
.hub-tk-grip:hover { background: rgba(99, 102, 241, .10); color: #4f46e5; }
.hub-tk-grip:active { background: rgba(99, 102, 241, .18); }
.hub-tk-grip:focus-visible { outline: 2px solid #6777ef; outline-offset: -2px; color: #4f46e5; }
body.dark .hub-tk-grip { color: #94a3b8; }
body.dark .hub-tk-grip:hover, body.dark .hub-tk-grip:focus-visible { background: rgba(165, 180, 252, .14); color: #c7d2fe; }
/* Reserve room for the handle so header content never sits under it (the Adaptive header pads less than the regular one). */
[data-hub-tk] mat-expansion-panel-header { padding-left: 24px !important; }

/* While a ticket is held: open ticket bodies fold away, everything shows the grabbing cursor. */
html.hub-tk-dragging mat-expansion-panel .mat-expansion-panel-content { display: none !important; }
html.hub-tk-dragging, html.hub-tk-dragging * { cursor: grabbing !important; user-select: none !important; }
[data-hub-tk-drag] { opacity: .45; outline: 2px dashed #6777ef; outline-offset: -2px; }
.hub-tk-ghost {
  position: fixed; left: 0; top: 0; z-index: 100000; pointer-events: none; max-width: 340px;
  padding: 7px 12px; border-radius: 10px; background: #1e293b; color: #fff; box-shadow: 0 10px 26px rgba(15, 23, 42, .4);
  font: 600 12px/1.2 system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
  .hub-tk-grip { transition: none; }
  .hub *, .hub-tape-placeholder .hub-tape-dot, .settingSidebar .settingPanelToggle .fa-spin { animation: none !important; transition: none !important; }
}

/* ---------- Ticket data: field toggles ---------- */
[data-hub-hide] { display: none !important; }
/* the API credits label goes too once every meter under it is hidden */
.credit-usage-panel:has([data-hub-hide]):not(:has(.credit-meter-group:not([data-hub-hide]))) { display: none !important; }

.hub-fsw {
  flex: 0 0 38px; width: 38px; height: 22px; padding: 0; border: 0; border-radius: 11px; position: relative;
  background: var(--hub-off); cursor: pointer; transition: background .2s;
}
.hub-fsw::after { display: none; }
.hub-fsw .hub-switch { position: absolute; inset: 0; width: auto; height: auto; background: transparent; }
.hub-fsw .hub-switch::after { top: 2px; left: 2px; }
.hub-fsw[aria-checked="true"] { background: var(--hub-on); }
.hub-fsw[aria-checked="true"] .hub-switch::after { transform: translateX(16px); }
.hub-fsw[aria-checked="mixed"] { background: var(--hub-on); opacity: .55; }
.hub-fsw[aria-checked="mixed"] .hub-switch::after { transform: translateX(8px); }
.hub-fsw:focus-visible { outline: 2px solid var(--hub-accent); outline-offset: 2px; }
.hub-sec-head .hub-fsw { margin-right: 6px; }
.hub-fld { padding: 6px 8px; }
.hub-fld .hub-fsw { margin-left: auto; }
.hub-fld .hub-pg-name { flex: 1; }

/* Ticket data: the whole group folds to a single row */
.hub-frbox { margin-bottom: 14px; }
.hub-frhead {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; text-align: left;
  border: 1px solid var(--hub-line); border-radius: 12px; background: var(--hub-card); color: inherit; cursor: pointer;
}
.hub-frhead:hover { background: var(--hub-card-hover); }
.hub-frhead:focus-visible { outline: 2px solid var(--hub-accent); outline-offset: 2px; }
.hub-frhead > svg { flex: none; width: 14px; height: 14px; transition: transform .2s; }
.hub-frbox.open .hub-frhead > svg { transform: rotate(90deg); }
.hub-frtitles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hub-frbody { display: none; padding-top: 10px; }
.hub-frbox.open .hub-frbody { display: block; }
.hub-frquick { justify-content: flex-end; margin-bottom: 6px; }

/* ---------- Compact panel: detail appears on hover or keyboard focus ---------- */
.hub { position: relative; --hub-tip-bg: #0f172a; --hub-tip-fg: #f8fafc; padding-top: 12px; }
body.dark .hub { --hub-tip-bg: #e2e8f0; --hub-tip-fg: #0f172a; }
.hub-menu, .hub-frbox { position: relative; }

/* Group headers: the count sits beside the title instead of under it. */
.hub-head { align-items: center; margin-bottom: 6px; }
.hub-head > div:first-child { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.hub-frtitles { flex-direction: row; align-items: baseline; gap: 8px; }

/* Explanatory paragraphs become popovers under the header (they no longer take up room). */
.hub-hint {
  display: none; position: absolute; left: 0; right: 0; z-index: 30; margin: 2px 0 0; padding: 8px 10px;
  border-radius: 10px; background: var(--hub-tip-bg); color: var(--hub-tip-fg); font-size: 11px; line-height: 1.45;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .28); pointer-events: none;
  opacity: 0; transform: translateY(-3px);
  transition: opacity .16s cubic-bezier(.2, .8, .2, 1), transform .16s cubic-bezier(.2, .8, .2, 1), display .16s allow-discrete;
}
.hub > .hub-hint { left: 16px; right: 16px; }
.hub-head:hover + .hub-hint, .hub-head:focus-within + .hub-hint,
.hub-frhead:hover + .hub-hint, .hub-frhead:focus-visible + .hub-hint { display: block; opacity: 1; transform: none; }
/* Fade the popover in from just above; browsers without @starting-style simply show it at once. */
@starting-style {
  .hub-head:hover + .hub-hint, .hub-head:focus-within + .hub-hint,
  .hub-frhead:hover + .hub-hint, .hub-frhead:focus-visible + .hub-hint { opacity: 0; transform: translateY(-3px); }
}
.hub-head:has(+ .hub-hint) .hub-title::after { content: "\24D8"; margin-left: 6px; font-size: 12px; opacity: .55; letter-spacing: 0; }
.hub-frhead .hub-title::after { content: "\24D8"; margin-left: 6px; font-size: 12px; opacity: .55; letter-spacing: 0; }

/* Display rows: one compact line; the description shows on hover or focus. */
.hub-list { gap: 6px; margin-bottom: 14px; }
.hub-row { position: relative; padding: 7px 10px; gap: 10px; }
.hub-row .hub-ico { flex-basis: 28px; height: 28px; border-radius: 8px; }
.hub-row .hub-ico svg { width: 16px; height: 16px; }
.hub-desc { display: none; }
.hub-row:hover .hub-desc, .hub-row:focus-visible .hub-desc,
.hub-tile:hover .hub-desc, .hub-tile:focus-visible .hub-desc {
  display: block; position: absolute; z-index: 30; margin: 0; padding: 6px 9px; border-radius: 8px;
  background: var(--hub-tip-bg); color: var(--hub-tip-fg); font-size: 11px; line-height: 1.35; pointer-events: none;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .28);
}
.hub-row:hover .hub-desc, .hub-row:focus-visible .hub-desc { left: 10px; right: 10px; top: calc(100% + 4px); }
.hub-tile { position: relative; }
.hub-tile:hover .hub-desc, .hub-tile:focus-visible .hub-desc { left: 50%; top: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap; }

/* Tools: name only. */
.hub-tiles { margin-bottom: 8px; }
.hub-tile { padding: 9px 6px 8px; gap: 4px; }
.hub-tile .hub-ico { width: 28px; height: 28px; }
.hub-tile .hub-ico svg { width: 16px; height: 16px; }
.hub-menu { margin-bottom: 14px; }

/* Behaviour fixes */
/* The panel scrolls in its own viewport; the inner box also scrolled by ~11px and stole the wheel. */
.settingSidebar .settingSidebar-body { overflow-y: visible; }
/* The floating chat button sat on top of the panel's controls; move it clear while the panel is open. */
html:has(.settingSidebar.showSettingPanel) .ai-chatbot-fab-wrapper { right: 348px !important; transition: right .2s ease; }

/* ---------- Ticket layout: group headers (Group by Account / Group by Type) ---------- */
.tg-hdr {
  display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 4px 6px 4px 4px;
  border-radius: 12px; background: var(--hub-card, #f8fafc); border: 1px solid var(--hub-line, #e2e8f0);
}
.tg-hdr.tg-type { margin: 6px 0 2px; padding: 2px 6px 2px 2px; background: transparent; border-style: dashed; }
.tg-hdr.tg-nested { margin-left: 22px; }
.tg-toggle {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 6px 8px; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 10px;
}
.tg-toggle:hover { background: rgba(120, 120, 128, .12); }
.tg-toggle:focus-visible { outline: 2px solid #4f46e5; outline-offset: 1px; }
.tg-chev { flex: none; width: 14px; font-size: 12px; transition: transform .18s; color: #64748b; }
.tg-open .tg-chev { transform: rotate(90deg); }
.tg-title { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-type .tg-title { font-size: 12px; font-weight: 600; color: #475569; }
.tg-meta { font-size: 12px; color: #64748b; white-space: nowrap; }
.tg-pause {
  flex: none; padding: 4px 12px; border: 1px solid rgba(220, 38, 38, .35); border-radius: 980px; background: transparent;
  color: #dc2626; font-size: 12px; font-weight: 600; cursor: pointer;
}
.tg-pause:hover:not(:disabled) { background: rgba(220, 38, 38, .1); }
.tg-pause:disabled { opacity: .5; cursor: default; }
.tg-hide { display: none !important; }

/* Reduced motion: the ticket group headers and popovers also stop animating (the Apple layer's own rule needs the layer on). */
@media (prefers-reduced-motion: reduce) {
  .tg-chev, .tg-toggle, .tg-pause, .hub-hint { transition: none !important; }
}

/* ---- ticket sequence table: neat Interval, Budget and Range cells -------------------------------------- */
/* Open | Close interval in one cell ("20 | 22"). */
.seq-iv { display: inline-block; min-width: 124px; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500; }
.seq-iv-sep { margin: 0 .4em; opacity: .35; font-weight: 400; }

/* Budget: remaining amount over a slider-like bar (fill = remaining share of the budget). Read-only. */
.seq-bg { --seq-c: #22c55e; width: 132px; margin: 0 auto; }
.seq-bg-ok  { --seq-c: #22c55e; }
.seq-bg-mid { --seq-c: #f59e0b; }
.seq-bg-low { --seq-c: #ef4444; }
.seq-bg-na  { --seq-c: #9ca3af; }
.seq-bg-t { display: flex; justify-content: center; gap: 0; margin-bottom: 6px; white-space: nowrap; font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.seq-bg-rem { font-weight: 600; }
.seq-bg-of { opacity: .55; }
.seq-bg-track { position: relative; height: 6px; margin: 0 6px; border-radius: 999px; background: rgba(127, 127, 127, .24); }
.seq-bg-fill { position: absolute; left: 0; top: 0; bottom: 0; max-width: 100%; border-radius: inherit; background: var(--seq-c); transition: width .4s ease; }
.seq-bg-knob { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 2px solid var(--seq-c); box-shadow: 0 1px 3px rgba(0, 0, 0, .28); transition: left .4s ease; }
.seq-bg-na .seq-bg-fill, .seq-bg-na .seq-bg-knob { display: none; }

/* Range: min to max track with a dot at the live price (hidden when there is no price; amber at the edge when outside). */
.seq-rg { --seq-d: #6366f1; width: 160px; margin: 0 auto; }
.seq-rg-out { --seq-d: #f59e0b; }
.seq-rg-bar { position: relative; height: 6px; margin: 6px 6px 7px; }
.seq-rg-track { position: absolute; inset: 0; border-radius: 999px; background: rgba(127, 127, 127, .28); }
.seq-rg-dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; box-sizing: border-box; border-radius: 50%; background: var(--seq-d); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: left .4s ease; }
.seq-rg-np .seq-rg-dot { display: none; }
.seq-rg-lbl { display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1.2; opacity: .8; }
.seq-rg-price { font-weight: 700; opacity: 1; color: var(--seq-d); }

@media (prefers-reduced-motion: reduce) {
  .seq-bg-fill, .seq-bg-knob, .seq-rg-dot { transition: none !important; }
}

/* ---- ticket page: "Sequence Level" is a dropdown (closed until its header is pressed) -------------------- */
.seq-level-title.seq-level-toggle { flex: 1 1 auto; cursor: pointer; user-select: none; padding: 3px 6px; margin: -3px -6px; border-radius: 6px; transition: background-color .15s ease; }
.seq-level-toggle:hover { background: rgba(127, 127, 127, .12); }
.seq-level-toggle:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }
.seq-level-toggle::after { content: ""; flex: none; width: 7px; height: 7px; margin: -3px 0 0 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .55; transition: transform .2s ease, margin .2s ease; }
.seq-level-open .seq-level-toggle::after { margin-top: 3px; transform: rotate(-135deg); }
.seq-level-panel:not(.seq-level-open) > :not(.seq-level-header) { display: none; }
.seq-level-panel:not(.seq-level-open) .seq-level-interval-control { display: none; }
.seq-level-panel:not(.seq-level-open) .seq-level-header { margin-bottom: 0; }

/* Budget: when the budget is nearly used up, the remaining amount is red as well as the bar. */
.seq-bg-low .seq-bg-rem { color: #ef4444; }

@media (prefers-reduced-motion: reduce) {
  .seq-level-toggle, .seq-level-toggle::after { transition: none !important; }
}

/* ---- Sequence Level: editable Price Range Interval list (delete buttons, custom interval dialog) ------------- */
.mat-mdc-option:has(.pri-del) .mdc-list-item__primary-text { display: flex; align-items: center; width: 100%; }
.cdk-overlay-pane:has(.pri-del) { min-width: 200px !important; }
.mat-mdc-option:has(.pri-del) .mdc-list-item__primary-text { white-space: nowrap; }
.pri-del { margin-left: auto; flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .45; cursor: pointer; font: 400 16px/1 system-ui, sans-serif; transition: background-color .15s ease, opacity .15s ease, color .15s ease; }
.pri-del::before { content: "\00d7"; }
.pri-del:hover, .pri-del:focus-visible { opacity: 1; background: rgba(239, 68, 68, .14); color: #ef4444; }
.pri-hide { display: none !important; }
.pri-modal { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .38); animation: pri-fade .15s ease-out; }
.pri-dlg { width: 100%; max-width: 360px; padding: 20px 22px 16px; border-radius: 14px; background: #fff; color: #1d1d1f; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); font-size: 13px; }
.pri-dlg h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.pri-dlg p { margin: 0 0 14px; opacity: .65; }
.pri-dlg label { display: block; font-weight: 600; }
.pri-dlg input { display: block; width: 100%; margin-top: 6px; padding: 9px 11px; box-sizing: border-box; border: 1px solid rgba(127, 127, 127, .45); border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 15px; }
.pri-dlg input:focus { outline: 2px solid #6366f1; outline-offset: 0; border-color: transparent; }
.pri-err { min-height: 18px; margin-top: 6px; color: #ef4444; font-size: 12px; }
.pri-act { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pri-act span { flex: 1; }
.pri-act button { padding: 8px 14px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; }
.pri-cancel { background: rgba(127, 127, 127, .18); color: inherit; }
.pri-ok { background: #6366f1; color: #fff; }
.pri-reset { padding: 8px 0 !important; background: transparent; color: #6366f1; font-weight: 500 !important; }
.pri-act button:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
body.dark .pri-dlg { background: #2c2c2e; color: #f5f5f7; box-shadow: 0 18px 50px rgba(0, 0, 0, .6); }
body.dark .pri-modal { background: rgba(0, 0, 0, .55); }
@keyframes pri-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pri-modal { animation: none; } .pri-del { transition: none; } }

/* ===== Strategy and Controlling Strategy pages (Task W, 2026-09-29) =====
   Card header, status/live pills, asset chips, budget bar and the parameter tiles. Neutral tints only, so light and dark work alike. */
.mat-expansion-panel.sx-card { border-left: 6px solid rgba(127, 127, 127, .5) !important; border-radius: 12px !important; overflow: hidden; }
.mat-expansion-panel.sx-card.sx-long { border-left-color: #22c55e !important; }
.mat-expansion-panel.sx-card.sx-short { border-left-color: #ef4444 !important; }
.sx-card .mat-expansion-panel-header { height: auto !important; min-height: 48px; padding-top: 10px; padding-bottom: 10px; }
.sx-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: 100%; }
.sx-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 7px; }
.sx-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sx-name { font-size: 15px; font-weight: 700; letter-spacing: .1px; overflow-wrap: anywhere; }
.sx-pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 19px; white-space: nowrap; background: rgba(127, 127, 127, .16); }
.sx-pill.sx-long { background: rgba(34, 197, 94, .16); color: #16a34a; }
.sx-pill.sx-short { background: rgba(239, 68, 68, .14); color: #dc2626; }
.sx-pill.sx-long::before { content: "\25B2"; font-size: 8px; }
.sx-pill.sx-short::before { content: "\25BC"; font-size: 8px; }
.sx-pill.sx-st-run, .sx-pill.sx-st-pause, .sx-pill.sx-st-stop, .sx-pill.sx-lv-on, .sx-pill.sx-lv-old, .sx-pill.sx-lv-off, .sx-pill.sx-lv-none { }
.sx-pill.sx-st-run::before, .sx-pill.sx-st-pause::before, .sx-pill.sx-st-stop::before, .sx-pill.sx-lv-on::before, .sx-pill.sx-lv-old::before, .sx-pill.sx-lv-off::before, .sx-pill.sx-lv-none::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sx-pill.sx-st-run { background: rgba(34, 197, 94, .16); color: #16a34a; }
.sx-pill.sx-st-pause { background: rgba(245, 158, 11, .18); color: #b45309; }
.sx-pill.sx-st-stop { background: rgba(127, 127, 127, .18); color: inherit; opacity: .8; }
.sx-pill.sx-lv-on { background: rgba(20, 184, 166, .16); color: #0f766e; }
.sx-pill.sx-lv-old { background: rgba(245, 158, 11, .18); color: #b45309; }
.sx-pill.sx-lv-off { background: rgba(239, 68, 68, .16); color: #dc2626; }
.sx-pill.sx-lv-none { background: rgba(127, 127, 127, .14); color: inherit; opacity: .75; }
body.dark .sx-pill.sx-long, body.dark .sx-pill.sx-st-run { color: #4ade80; }
body.dark .sx-pill.sx-short, body.dark .sx-pill.sx-lv-off { color: #f87171; }
body.dark .sx-pill.sx-st-pause, body.dark .sx-pill.sx-lv-old { color: #fbbf24; }
body.dark .sx-pill.sx-lv-on { color: #2dd4bf; }
.sx-s { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 12.5px; }
.sx-k { opacity: .55; }
.sx-v { font-weight: 600; margin-right: 12px; overflow-wrap: anywhere; }
.sx-a { display: flex; flex-wrap: wrap; gap: 4px 5px; }
.sx-chip { padding: 1px 8px; border-radius: 6px; font-size: 11.5px; line-height: 18px; background: rgba(99, 102, 241, .14); max-width: 100%; overflow-wrap: anywhere; }
.sx-chip.sx-more { background: rgba(127, 127, 127, .18); font-weight: 600; cursor: help; }
.sx-b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; }
.sx-bar { position: relative; flex: 0 0 160px; max-width: 100%; height: 6px; border-radius: 999px; background: rgba(127, 127, 127, .24); }
.sx-bar i { display: block; height: 100%; min-width: 2px; border-radius: 999px; background: #6366f1; transition: width .4s ease; }
.sx-bar i.sx-low { background: #ef4444; }
.sx-bar.sx-none i { display: none; }
.sx-bt { opacity: .8; }
.sx-act { flex: none; align-self: center; }
.sx-pager { background: transparent !important; margin-top: 6px; }
.sx-retry { margin-left: 10px; padding: 3px 12px; border: 0; border-radius: 8px; background: #6366f1; color: #fff; font-weight: 600; cursor: pointer; }
.sx-hide { display: none !important; }
.sx-params { padding: 0 2px 8px; }
.sx-params table.sx-ptable { display: block; width: 100%; background: transparent !important; }
.sx-params table.sx-ptable thead, .sx-params table.sx-ptable tr.mat-mdc-header-row { display: none !important; }
.sx-params table.sx-ptable tbody { display: block; }
/* Parameter line (2026-09-30, third pass): compact. Each parameter is an inline "LABEL value" pair; pairs flow and wrap across the card width. */
.sx-params table.sx-ptable tbody { border: 0; background: transparent; }
.sx-params table.sx-ptable tr.mat-mdc-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 6px 16px; height: auto; margin: 0; padding: 2px 2px 0; }
.sx-params table.sx-ptable td.mat-mdc-cell { display: inline-flex; flex-direction: row; align-items: baseline; gap: 6px; min-height: 0; padding: 0 !important; border: 0 !important; background: transparent; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; grid-column: auto; }
.sx-params table.sx-ptable td.mat-mdc-cell::before { font-size: 10px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; opacity: .5; }
.sx-ptable td.mat-column-budget, .sx-ptable td.mat-column-remaining-budget { font-size: 17px !important; letter-spacing: -.1px; padding-bottom: 6px !important; }
.sx-ptable td.mat-column-budget { flex: 0 0 auto; margin-right: 8px; }
.sx-ptable td.mat-column-remaining-budget { color: #0f766e; flex: 0 0 auto; margin-right: 8px; }
body.dark .sx-ptable td.mat-column-remaining-budget { color: #2dd4bf; }
.sx-ptable td.mat-column-budget::before, .sx-ptable td.mat-column-remaining-budget::before { color: initial; }
.sx-ptable td.mat-column-budget::after, .sx-ptable td.mat-column-remaining-budget::after { content: none; }
.sx-ptable td.mat-column-budget { order: 1; } .sx-ptable td.mat-column-remaining-budget { order: 2; }
.sx-ptable td.mat-column-confirmation { order: 3; }
.sx-ptable td.mat-column-confirmation-type { order: 4; } .sx-ptable td.mat-column-entry-signals { order: 5; } .sx-ptable td.mat-column-exit-signals { order: 6; }
.sx-ptable td.mat-column-quantity { order: 7; } .sx-ptable td.mat-column-valid-rate { order: 8; } .sx-ptable td.mat-column-target-profit { order: 9; } .sx-ptable td.mat-column-trailing-profit { order: 10; }
.sx-ptable td.mat-column-stop-loss { order: 11; } .sx-ptable td.mat-column-stop-loss-on-off { order: 12; } .sx-ptable td.mat-column-trailing-profit-on-off { order: 13; } .sx-ptable td.mat-column-actions { order: 14; }
.sx-ptable td.mat-column-stop-loss-on-off, .sx-ptable td.mat-column-trailing-profit-on-off, .sx-ptable td.mat-column-actions { align-items: center; }
.sx-ptable td.mat-column-stop-loss-on-off > *, .sx-ptable td.mat-column-trailing-profit-on-off > *, .sx-ptable td.mat-column-actions > * { margin: 0 !important; transform: scale(.75); transform-origin: left center; }
.sx-ptable td.mat-column-stop-loss-on-off > *, .sx-ptable td.mat-column-trailing-profit-on-off > *, .sx-ptable td.mat-column-actions > * { width: 28px; }
/* Assets: first 6 plus a "+N more" chip; clicking it (strategy-assets.js) adds .sx-open to show them all */
.sx-a:not(.sx-open) > .sx-chip:not(.sx-more):nth-child(n+7) { display: none; }
.sx-a > .sx-more[role="button"] { cursor: pointer; user-select: none; }
.sx-a > .sx-more[role="button"]:hover { background: rgba(99, 102, 241, .28); }
.sx-a.sx-open > .sx-more[role="button"] { font-size: 0; }
.sx-a.sx-open > .sx-more[role="button"]::after { content: "Show less"; font-size: 11.5px; }
.sx-ptable td.mat-column-budget::before { content: "Budget"; }
.sx-ptable td.mat-column-remaining-budget::before { content: "Remaining budget"; }
.sx-ptable td.mat-column-confirmation::before { content: "Confirmation"; }
.sx-ptable td.mat-column-confirmation-type::before { content: "Confirmation type"; }
.sx-ptable td.mat-column-quantity::before { content: "Quantity"; }
.sx-ptable td.mat-column-valid-rate::before { content: "Valid rate"; }
.sx-ptable td.mat-column-stop-loss::before { content: "Stop loss"; }
.sx-ptable td.mat-column-trailing-profit::before { content: "Trailing profit"; }
.sx-ptable td.mat-column-target-profit::before { content: "Target profit"; }
.sx-ptable td.mat-column-entry-signals::before { content: "Entry conditions"; }
.sx-ptable td.mat-column-exit-signals::before { content: "Exit conditions"; }
.sx-ptable td.mat-column-stop-loss-on-off::before { content: "Stop-loss switch"; }
.sx-ptable td.mat-column-trailing-profit-on-off::before { content: "Trailing switch"; }
.sx-ptable td.mat-column-actions::before { content: "Conditions"; }
@media (max-width: 560px) { .sx-h { flex-direction: column; } .sx-act { align-self: flex-start; } .sx-bar { flex-basis: 120px; } }
@media (prefers-reduced-motion: reduce) { .sx-bar i { transition: none; } }

/* "Copied" marker (Task X): shown on a duplicate until it is edited, saved or started */
.sx-copied, span.sx-copied { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 19px; white-space: nowrap; background: rgba(99, 102, 241, .14); color: #4f46e5; border: 1px solid rgba(99, 102, 241, .35); }
body.dark .sx-copied { color: #a5b4fc; border-color: rgba(165, 180, 252, .4); }

/* "Copied" marker on the advance strategy pages (pseudo-element pill, no extra DOM node) */
.sx-copied-row::after, .sx-copied-cell::after { content: "Copied"; display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 19px; vertical-align: middle; background: rgba(99, 102, 241, .14); color: #4f46e5; border: 1px solid rgba(99, 102, 241, .35); }
body.dark .sx-copied-row::after, body.dark .sx-copied-cell::after { color: #a5b4fc; border-color: rgba(165, 180, 252, .4); }

/* Chat button overlap (Joseph, 2026-09-29): room under the page so the last rows can scroll clear of the round chat button,
   and the button itself can be dragged elsewhere (fab-drag.js). */
app-main-layout > div:last-of-type { padding-bottom: 96px; }
.ai-chatbot-fab-wrapper.fab-draggable .ai-chatbot-fab { cursor: grab; }
.ai-chatbot-fab-wrapper.fab-dragging .ai-chatbot-fab { cursor: grabbing; transition: none; }
.ai-chatbot-fab-wrapper.fab-dragging { user-select: none; -webkit-user-select: none; transition: none !important; }

/* Strategy card sections in the same language as the parameter sheet (2026-09-30): flat bordered panels, no gradients */
.sx-params .location-controlling-info { background: transparent !important; box-shadow: none !important; border: 0 !important; border-top: 1px solid rgba(127, 127, 127, .22) !important; border-radius: 0 !important; padding: 8px 2px 2px !important; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.sx-params .location-controlling-info .controlling-header { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.sx-params .location-controlling-info h6 { margin: 0 !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .6px; text-transform: uppercase; opacity: .6; color: inherit !important; }
.sx-params .location-controlling-info .controlling-details { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 !important; padding: 0 !important; }
.sx-params .location-controlling-info .controlling-item { display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; }
.sx-params .location-controlling-info .label { font-size: 12px !important; font-weight: 500 !important; opacity: .65; }
.sx-params .location-controlling-info .value { font-size: 13px !important; font-weight: 700 !important; }
.sx-params .location-controlling-info .strategy-id { padding: 1px 9px; border-radius: 6px; background: rgba(99, 102, 241, .16) !important; color: #4f46e5 !important; }
.sx-params .location-controlling-info .action-badge { padding: 1px 9px; border-radius: 999px; background: rgba(127, 127, 127, .16) !important; color: inherit !important; text-transform: uppercase; letter-spacing: .3px; font-size: 11px !important; }
body.dark .sx-params .location-controlling-info .strategy-id { color: #a5b4fc !important; }
.sx-params .responsive_table > th { display: block; margin: 8px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; opacity: .6; }
.sx-params .responsive_table table.advance-table:not(.sx-ptable) { border: 0; border-top: 1px solid rgba(127, 127, 127, .22); }

/* ===== Appearance group in the settings panel (2026-09-30) =====
   One compact row per option. The switch track carries a sliding knob with a moon / sun icon. The app's own "Select Layout" and
   "Sidebar Menu Color" blocks are hidden (the switch clicks them), so a single control handles dark mode for the whole system. */
.settingSidebar .ap-hidden { display: none !important; }
.ap { margin: 0 0 16px; }
.ap .hub-title { margin-bottom: 8px; }
.ap-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 4px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ap-row + .ap-row { border-top: 1px solid var(--hub-line); border-radius: 0; }
.ap-row:hover { background: var(--hub-card-hover); }
.ap-row:focus-visible { outline: 2px solid var(--hub-accent); outline-offset: 2px; }
.ap-ico { display: inline-flex; flex: none; width: 20px; color: var(--hub-muted); }
.ap-ico svg { width: 18px; height: 18px; }
.ap-txt { flex: 1; min-width: 0; }
.ap-name { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; }
.ap-desc { display: block; font-size: 11px; line-height: 1.3; color: var(--hub-muted); margin-top: 1px; }
.ap-sw { position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px; background: var(--hub-off); transition: background .18s; }
.ap-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #64748b; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .28); transition: transform .18s, color .18s; }
.ap-knob svg { width: 12px; height: 12px; }
.ap-row[aria-checked="true"] .ap-sw { background: var(--hub-accent); }
.ap-row[aria-checked="true"] .ap-knob { transform: translateX(20px); color: var(--hub-accent); }
.ap-row .ap-knob svg:nth-child(1) { display: none; }
.ap-row[aria-checked="true"] .ap-knob svg:nth-child(1) { display: block; }
.ap-row[aria-checked="true"] .ap-knob svg:nth-child(2) { display: none; }
.ap-row.ap-uni .ap-knob svg:nth-child(1) { display: block; }
@media (prefers-reduced-motion: reduce) { .ap-sw, .ap-knob { transition: none; } }

/* ===== Unified colours (2026-09-30) =====
   Switch: Setting Panel > Appearance > Unified colours (on by default; html.agwtf-uni).
   The system had many competing hues (orange, blue, green, cyan, pink, purple buttons, toggles and icons). This layer keeps ONE accent
   (indigo) for every action, toggle, checkbox and decorative icon. Deliberately unchanged: red / green for gains, losses, buy/sell and
   live status, amber for warnings, delete/stop buttons in red. Colours only: no sizes, spacing or behaviour. */
html.agwtf-uni { --u-accent: #4f46e5; --u-accent-hover: #4338ca; --u-soft: rgba(79, 70, 229, .12); --u-muted: #64748b; }
html.agwtf-uni body.dark { --u-accent: #6366f1; --u-accent-hover: #818cf8; --u-soft: rgba(129, 140, 248, .18); --u-muted: #94a3b8; }
html.agwtf-uni .hub, html.agwtf-uni .ap { --hub-accent: var(--u-accent); --hub-on: var(--u-accent); }
html.agwtf-uni .btn.btn-primary, html.agwtf-uni .btn.btn-info, html.agwtf-uni .btn.btn-success, html.agwtf-uni .btn.btn-warning {
  background-color: var(--u-accent) !important; border-color: var(--u-accent) !important; color: #fff !important; }
html.agwtf-uni .btn.btn-primary:hover, html.agwtf-uni .btn.btn-info:hover, html.agwtf-uni .btn.btn-success:hover, html.agwtf-uni .btn.btn-warning:hover {
  background-color: var(--u-accent-hover) !important; border-color: var(--u-accent-hover) !important; }
html.agwtf-uni .btn.btn-danger { background-color: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; }
html.agwtf-uni .mat-mdc-slide-toggle {
  --mdc-switch-selected-track-color: #a5b4fc; --mdc-switch-selected-focus-track-color: #a5b4fc; --mdc-switch-selected-hover-track-color: #a5b4fc; --mdc-switch-selected-pressed-track-color: #a5b4fc;
  --mdc-switch-selected-handle-color: #4f46e5; --mdc-switch-selected-focus-handle-color: #4338ca; --mdc-switch-selected-hover-handle-color: #4338ca; --mdc-switch-selected-pressed-handle-color: #4338ca;
  --mdc-switch-selected-icon-color: #fff; }
html.agwtf-uni .mat-mdc-checkbox, html.agwtf-uni .mat-mdc-radio-button {
  --mdc-checkbox-selected-icon-color: #4f46e5; --mdc-checkbox-selected-focus-icon-color: #4f46e5; --mdc-checkbox-selected-hover-icon-color: #4f46e5; --mdc-checkbox-selected-pressed-icon-color: #4f46e5;
  --mdc-checkbox-selected-checkmark-color: #fff; --mdc-radio-selected-icon-color: #4f46e5; --mdc-radio-selected-hover-icon-color: #4f46e5; --mdc-radio-selected-focus-icon-color: #4f46e5; }
html.agwtf-uni .fa.mr-2, html.agwtf-uni .fa.collapse-icon, html.agwtf-uni .tp-header-icon, html.agwtf-uni .tp-empty-icon { color: var(--u-muted) !important; }
html.agwtf-uni .badge-solid-pink { background-color: var(--u-soft) !important; color: var(--u-accent) !important; }
html.agwtf-uni .hub-ico { background: var(--u-soft) !important; color: var(--u-accent) !important; }
html.agwtf-uni .hub-row[aria-checked="false"] .hub-ico { background: transparent !important; color: var(--hub-muted) !important; }

/* Unified colours, part 2: the Apple-style layer (apple-theme.css) draws blue / green / orange from tokens, so unified mode re-points those tokens to the one accent. */
html.agwtf-uni:not(.apple-off) { --ap-blue: #4f46e5; --ap-blue-press: #4338ca; --ap-green: #4f46e5; --ap-orange: #4f46e5; }
html.agwtf-uni:not(.apple-off) body.dark { --ap-blue: #6366f1; --ap-blue-press: #818cf8; --ap-green: #6366f1; --ap-orange: #6366f1; }
html.agwtf-uni:not(.apple-off) .btn-ctrl-margin { background: var(--u-soft) !important; border-color: transparent !important; }
html.agwtf-uni .mat-mdc-slide-toggle .mdc-switch--selected .mdc-switch__handle::after { background: #fff !important; }
html.agwtf-uni .mat-mdc-slide-toggle { --mdc-switch-selected-icon-color: #4f46e5; }

/* ===== One look for every row and switch in the settings panel (2026-09-30) =====
   The panel mixed three switch designs (pill with knob in Appearance, small hub switch, Material toggle in Ticket Layout) and two row
   styles (cards and flat). Now: ONE switch (42 x 24 pill, 18 px knob, accent when on) and ONE flat row (icon, name, switch, hairline
   between rows). Every description is a hover / focus popover in the same dark tip style; nothing is written inline. */
.settingSidebar { --hub-tip-bg: #0f172a; --hub-tip-fg: #f8fafc; --hub-accent: #4f46e5; --hub-on: #4f46e5; --hub-off: #cbd5e1; --hub-line: #e2e8f0; --hub-muted: #64748b; --hub-card-hover: #f1f5f9; }
body.dark .settingSidebar { --hub-tip-bg: #e2e8f0; --hub-tip-fg: #0f172a; --hub-off: #475569; --hub-line: #334155; --hub-muted: #94a3b8; --hub-card-hover: #273449; --hub-accent: #6366f1; --hub-on: #6366f1; }
.hub { --hub-on: var(--hub-accent); }

/* the switch */
.hub-switch, .ap-sw { flex: 0 0 42px; width: 42px; height: 24px; border-radius: 12px; }
.hub-switch::after { top: 3px; left: 3px; width: 18px; height: 18px; }
.hub-row[aria-checked="true"] .hub-switch::after { transform: translateX(18px); }
.hub-fsw { flex: 0 0 42px; width: 42px; height: 24px; border-radius: 12px; }
.hub-fsw .hub-switch::after { top: 3px; left: 3px; }
.hub-fsw[aria-checked="true"] .hub-switch::after { transform: translateX(18px); }
.hub-fsw[aria-checked="mixed"] .hub-switch::after { transform: translateX(9px); }
.ap-knob { top: 3px; left: 3px; width: 18px; height: 18px; }
.ap-row[aria-checked="true"] .ap-knob { transform: translateX(18px); }
.ap-knob svg { width: 11px; height: 11px; }

/* the row (Display group): flat like Appearance, no card */
.hub .hub-list { gap: 0; }
.hub .hub-list li + li .hub-row { border-top: 1px solid var(--hub-line); }
.hub .hub-row, .hub .hub-row[aria-checked] { background: none; border-width: 0; border-radius: 0; padding: 8px 4px; gap: 10px; }
.hub .hub-list li + li .hub-row { border-top-width: 1px; }
.hub .hub-row:hover { background: var(--hub-card-hover); }
.hub .hub-row .hub-ico, html.agwtf-uni .hub .hub-row .hub-ico { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 0; background: none !important; color: var(--hub-muted) !important; }
.hub .hub-row .hub-ico svg { width: 18px; height: 18px; }
.hub .hub-row .hub-name { font-weight: 600; }
/* Tools tiles keep their card shape but take the accent instead of green / cyan / amber */
html.agwtf-uni .hub-tile[data-tone] .hub-ico { color: var(--u-accent); background: var(--u-soft); }

/* the description: hover / focus popover, same for every row (Appearance, Display, Ticket Layout, Tools) */
.ap-row { position: relative; }
.ap-desc { display: none; }
.ap-row:hover .ap-desc, .ap-row:focus-visible .ap-desc {
  display: block; position: absolute; z-index: 30; left: 4px; right: 4px; top: calc(100% + 2px); margin: 0; padding: 6px 9px; border-radius: 8px;
  background: var(--hub-tip-bg); color: var(--hub-tip-fg); font-size: 11px; line-height: 1.35; pointer-events: none; box-shadow: 0 8px 24px rgba(15, 23, 42, .28); }
.ap-tl:hover .ap-desc, .ap-tl:focus-visible .ap-desc { top: auto; bottom: calc(100% + 2px); }
.rightSetting:has(.ap-tl) { padding: 16px 16px 20px; }
.rightSetting:has(.ap-tl) > h6 { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--hub-muted); }
.rightSetting:has(.ap-tl) .ap-row + .ap-row, .rightSetting:has(.ap-tl) .ticket-layout-options .ap-row + .ap-row { border-top: 1px solid var(--hub-line); }
.ap .ap-row .ap-name, .ap-tl .ap-name { font-weight: 600; }