/* ==========================================================================
   TradePilot design tokens

   One place for colour, spacing and radius. Components below reference these
   rather than hard-coded values, which is also what makes the dark theme a
   token swap rather than a second stylesheet.

   Bootstrap 5.3's own `data-bs-theme` attribute drives its components; the
   `--tp-*` layer below drives everything this application draws itself. Both
   flip from the same attribute so the two can never disagree.
   ========================================================================== */

:root,
[data-bs-theme="light"] {
  color-scheme: light;

  --tp-sidebar-width: 256px;
  --tp-sidebar-width-collapsed: 68px;
  --tp-header-height: 56px;

  /* Sidebar: deep neutral slate, not a brand colour, so status badges stand out. */
  --tp-sidebar-bg: #0f172a;
  --tp-sidebar-border: #1e293b;
  --tp-sidebar-fg: #cbd5e1;
  --tp-sidebar-fg-muted: #64748b;
  --tp-sidebar-fg-active: #ffffff;
  --tp-sidebar-active-bg: #1e293b;
  --tp-sidebar-active-marker: #3b82f6;

  --tp-bg: #f6f7f9;
  --tp-surface: #ffffff;
  --tp-surface-sunken: #f8fafc;
  --tp-border: #e2e8f0;
  --tp-border-strong: #cbd5e1;

  --tp-fg: #0f172a;
  --tp-fg-muted: #64748b;
  --tp-fg-subtle: #94a3b8;

  /* Semantic financial palette. Nothing outside this block should name a colour. */
  --tp-accent: #2563eb;
  --tp-accent-fg: #ffffff;
  --tp-accent-soft: #eff6ff;
  --tp-accent-border: #bfdbfe;

  --tp-positive: #15803d;
  --tp-positive-soft: #f0fdf4;
  --tp-positive-border: #bbf7d0;

  --tp-negative: #b91c1c;
  --tp-negative-soft: #fef2f2;
  --tp-negative-border: #fecaca;

  --tp-warning: #b45309;
  --tp-warning-soft: #fffbeb;
  --tp-warning-border: #fde68a;

  --tp-neutral: #475569;
  --tp-neutral-soft: #f1f5f9;
  --tp-neutral-border: #e2e8f0;

  --tp-radius: 8px;
  --tp-radius-sm: 6px;
  --tp-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  --tp-shadow-raised: 0 4px 16px rgba(15, 23, 42, 0.1);

  --tp-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* Dark is a deliberate second palette, not an inversion: the surfaces are
   re-picked so borders stay visible and the profit/loss pair stays legible
   against a dark background rather than glowing. */
[data-bs-theme="dark"] {
  color-scheme: dark;

  --tp-sidebar-bg: #0a1020;
  --tp-sidebar-border: #1b2437;
  --tp-sidebar-fg: #aab6c9;
  --tp-sidebar-fg-muted: #64748b;
  --tp-sidebar-fg-active: #ffffff;
  --tp-sidebar-active-bg: #1a2439;
  --tp-sidebar-active-marker: #60a5fa;

  --tp-bg: #0e1526;
  --tp-surface: #151d31;
  --tp-surface-sunken: #1a2338;
  --tp-border: #263149;
  --tp-border-strong: #33415c;

  --tp-fg: #e6ebf4;
  --tp-fg-muted: #93a1b8;
  --tp-fg-subtle: #6b7a94;

  --tp-accent: #3b82f6;
  --tp-accent-fg: #ffffff;
  --tp-accent-soft: #16233d;
  --tp-accent-border: #1e3a68;

  --tp-positive: #4ade80;
  --tp-positive-soft: #10281c;
  --tp-positive-border: #1d4d33;

  --tp-negative: #f87171;
  --tp-negative-soft: #2a1618;
  --tp-negative-border: #5d2426;

  --tp-warning: #fbbf24;
  --tp-warning-soft: #2a2212;
  --tp-warning-border: #5c4718;

  --tp-neutral: #94a3b8;
  --tp-neutral-soft: #1c2639;
  --tp-neutral-border: #2b374f;

  --tp-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --tp-shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
  font-size: 14px;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 15px;
  }
}

body.tradepilot-body {
  margin: 0;
  background-color: var(--tp-bg);
  color: var(--tp-fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Numeric columns line up only when the digits are the same width. */
.tp-num,
.metric-value,
.stat-value,
.table td.text-end,
.table th.text-end {
  font-variant-numeric: tabular-nums;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--tp-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Application shell
   ========================================================================== */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  width: var(--tp-sidebar-width);
  flex: 0 0 var(--tp-sidebar-width);
  background: var(--tp-sidebar-bg);
  border-right: 1px solid var(--tp-sidebar-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width 0.15s ease, flex-basis 0.15s ease;
}

.app-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-content {
  padding: 1.25rem;
  flex: 1 1 auto;
}

@media (min-width: 992px) {
  .app-content {
    padding: 1.25rem 1.5rem;
  }
}

/* ==========================================================================
   Sidebar: brand
   ========================================================================== */

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: var(--tp-header-height);
  padding: 0 0.875rem;
  border-bottom: 1px solid var(--tp-sidebar-border);
  flex: 0 0 auto;
}

.sidebar-brand:hover {
  text-decoration: none;
}

.sidebar-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: var(--tp-radius-sm);
  background: var(--tp-accent);
  color: #fff;
  font-size: 1rem;
}

.sidebar-brand-text {
  min-width: 0;
  line-height: 1.15;
}

.sidebar-brand-name {
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

.sidebar-brand-tagline {
  color: var(--tp-sidebar-fg-muted);
  font-size: 0.7rem;
  white-space: nowrap;
}

/* ==========================================================================
   Sidebar: navigation
   ========================================================================== */

.sidebar-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.75rem 0.5rem;
}

.sidebar-group + .sidebar-group {
  margin-top: 0.875rem;
}

.sidebar-group-title {
  color: var(--tp-sidebar-fg-muted);
  font-size: 0.675rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 0.625rem;
  margin-bottom: 0.3rem;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.625rem;
  margin-bottom: 0.1rem;
  border-radius: var(--tp-radius-sm);
  color: var(--tp-sidebar-fg);
  font-size: 0.875rem;
  position: relative;
  white-space: nowrap;
}

.sidebar-link:hover,
.sidebar-link:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--tp-sidebar-fg-active);
  text-decoration: none;
}

.sidebar-link.is-active {
  background: var(--tp-sidebar-active-bg);
  color: var(--tp-sidebar-fg-active);
  font-weight: 500;
}

/* The marker is what makes the current section readable at a glance when the
   sidebar is collapsed to icons. */
.sidebar-link.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--tp-sidebar-active-marker);
}

.sidebar-link .bi {
  font-size: 1rem;
  flex: 0 0 1rem;
  text-align: center;
}

.sidebar-footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--tp-sidebar-border);
  padding: 0.625rem 0.5rem;
}

.sidebar-mode {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  border-radius: var(--tp-radius-sm);
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.sidebar-mode.is-live {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

/* ==========================================================================
   Sidebar: collapsed (icon-only) state, desktop only
   ========================================================================== */

/* The collapsed flag lives on <html> so an inline script can apply it before first
   paint, which stops the sidebar flashing open on every navigation. */
@media (min-width: 992px) {
  html.tp-sidebar-collapsed .app-sidebar {
    width: var(--tp-sidebar-width-collapsed);
    flex-basis: var(--tp-sidebar-width-collapsed);
  }

  html.tp-sidebar-collapsed .sidebar-brand-text,
  html.tp-sidebar-collapsed .sidebar-group-title,
  html.tp-sidebar-collapsed .sidebar-link-label,
  html.tp-sidebar-collapsed .sidebar-mode-label {
    display: none;
  }

  html.tp-sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding: 0;
  }

  html.tp-sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  html.tp-sidebar-collapsed .sidebar-mode {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  /* Keeps groups visually separated once their headings are hidden. */
  html.tp-sidebar-collapsed .sidebar-group + .sidebar-group {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--tp-sidebar-border);
  }
}

/* ==========================================================================
   Sidebar: off-canvas below the lg breakpoint
   ========================================================================== */

.sidebar-backdrop {
  display: none;
}

@media (max-width: 991.98px) {
  .app-sidebar {
    position: fixed;
    z-index: 1045;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.18s ease;
  }

  .app-shell.is-offcanvas-open .app-sidebar {
    transform: translateX(0);
  }

  .app-shell.is-offcanvas-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(15, 23, 42, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar {
    transition: none;
  }
}

/* ==========================================================================
   Top header
   ========================================================================== */

.app-header {
  height: var(--tp-header-height);
  background: var(--tp-surface);
  border-bottom: 1px solid var(--tp-border);
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.875rem;
}

@media (min-width: 992px) {
  .app-header {
    padding: 0 1.25rem;
  }
}

.header-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-sm);
  background: var(--tp-surface);
  color: var(--tp-fg-muted);
  font-size: 1rem;
  padding: 0;
}

.header-icon-button:hover {
  background: var(--tp-surface-sunken);
  color: var(--tp-fg);
}

.header-breadcrumb {
  min-width: 0;
  font-size: 0.875rem;
  color: var(--tp-fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-breadcrumb a {
  color: var(--tp-fg-muted);
}

.header-breadcrumb a:hover {
  color: var(--tp-fg);
}

.header-breadcrumb .sep {
  color: var(--tp-fg-subtle);
  margin: 0 0.35rem;
}

.header-breadcrumb .current {
  color: var(--tp-fg);
  font-weight: 500;
}

.header-status {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: nowrap;
}

/* The status pills are the least important thing on a narrow screen, and the
   user menu is the most: drop them rather than let them squeeze it out. */
@media (max-width: 767.98px) {
  .header-status .tp-pill-optional {
    display: none;
  }
}

.user-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-sm);
  background: var(--tp-surface);
  padding: 0.25rem 0.5rem;
  color: var(--tp-fg);
  font-size: 0.8125rem;
  line-height: 1.2;
}

.user-menu-toggle:hover {
  background: var(--tp-surface-sunken);
}

.user-menu-toggle::after {
  display: none;
}

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: var(--tp-accent-soft);
  color: var(--tp-accent);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* The moon and sun swap according to the active theme, so only one is ever
   drawn and the button always shows the theme it will switch to. */
.tp-theme-toggle .tp-theme-icon-dark {
  display: none;
}

[data-bs-theme="dark"] .tp-theme-toggle .tp-theme-icon-light {
  display: none;
}

[data-bs-theme="dark"] .tp-theme-toggle .tp-theme-icon-dark {
  display: inline;
}

/* ==========================================================================
   Status pills (trading mode, kill switch, broker, market data)
   ========================================================================== */

.tp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.tp-pill .bi {
  font-size: 0.75rem;
}

.tp-pill-paper,
.tp-pill-positive {
  background: var(--tp-positive-soft);
  border-color: var(--tp-positive-border);
  color: var(--tp-positive);
}

.tp-pill-live,
.tp-pill-danger {
  background: var(--tp-negative-soft);
  border-color: var(--tp-negative-border);
  color: var(--tp-negative);
}

.tp-pill-neutral {
  background: var(--tp-neutral-soft);
  border-color: var(--tp-neutral-border);
  color: var(--tp-fg-muted);
}

.tp-pill-warning {
  background: var(--tp-warning-soft);
  border-color: var(--tp-warning-border);
  color: var(--tp-warning);
}

.tp-pill-info {
  background: var(--tp-accent-soft);
  border-color: var(--tp-accent-border);
  color: var(--tp-accent);
}

/* Shadow trading is neither good news nor bad: real prices, simulated orders. Filled
   accent rather than green or red so it cannot be read as either, and solid enough to
   be noticed in a header that is otherwise all soft pills. */
.tp-pill-shadow {
  background: var(--tp-accent);
  border-color: var(--tp-accent);
  color: var(--tp-accent-fg);
}

/* ==========================================================================
   Status badges

   One rendering for a lifecycle state everywhere it appears. Each carries a
   label, so the colour is reinforcement rather than the only signal.
   ========================================================================== */

.tp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.45rem;
  border-radius: var(--tp-radius-sm);
  border: 1px solid transparent;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.4;
}

.tp-badge .bi {
  font-size: 0.7rem;
}

.tp-badge-neutral {
  background: var(--tp-neutral-soft);
  border-color: var(--tp-neutral-border);
  color: var(--tp-fg-muted);
}

.tp-badge-info {
  background: var(--tp-accent-soft);
  border-color: var(--tp-accent-border);
  color: var(--tp-accent);
}

.tp-badge-success {
  background: var(--tp-positive-soft);
  border-color: var(--tp-positive-border);
  color: var(--tp-positive);
}

.tp-badge-warning {
  background: var(--tp-warning-soft);
  border-color: var(--tp-warning-border);
  color: var(--tp-warning);
}

.tp-badge-danger {
  background: var(--tp-negative-soft);
  border-color: var(--tp-negative-border);
  color: var(--tp-negative);
}

/* ==========================================================================
   Page header
   ========================================================================== */

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.page-header-title {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
}

.page-header-description {
  color: var(--tp-fg-muted);
  font-size: 0.875rem;
  margin: 0.2rem 0 0;
  max-width: 68ch;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* A quiet heading for a block inside a page, below the page title. */
.tp-section-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tp-fg-subtle);
  margin: 0 0 0.5rem;
}

/* ==========================================================================
   Cards, panels and metrics
   ========================================================================== */

.card {
  background: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow);
}

.card-header {
  background: var(--tp-surface);
  border-bottom: 1px solid var(--tp-border);
  padding: 0.7rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: var(--tp-radius) var(--tp-radius) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--tp-border);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.status-cell {
  background: var(--tp-surface);
  padding: 0.7rem 0.9rem;
}

.status-cell-label {
  font-size: 0.675rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tp-fg-subtle);
  margin-bottom: 0.3rem;
}

.status-cell-value {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

/* KPI card: a label, one number, and one line of context. Deliberately compact
   so a row of them reads as a strip of figures rather than a wall of panels. */
.metric-card {
  background: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow);
  padding: 0.85rem 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.metric-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.metric-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tp-fg-subtle);
  margin: 0;
}

.metric-icon {
  color: var(--tp-fg-subtle);
  font-size: 0.9rem;
  line-height: 1;
}

.metric-value {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
}

.metric-note {
  font-size: 0.75rem;
  color: var(--tp-fg-muted);
  margin-top: 0.25rem;
}

/* Retained so pages not yet migrated to .metric-card keep a sane appearance. */
.stat-panel {
  background: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow);
  padding: 0.9rem 1rem;
  height: 100%;
}

.stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tp-fg-subtle);
  margin-bottom: 0.35rem;
}

.stat-value {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
}

.value-positive,
.text-success {
  color: var(--tp-positive) !important;
}

.value-negative,
.text-danger {
  color: var(--tp-negative) !important;
}

.value-muted {
  color: var(--tp-fg-muted);
}

/* ==========================================================================
   Definition lists used as read-only detail panels
   ========================================================================== */

.tp-detail-list {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
  font-size: 0.875rem;
}

.tp-detail-list dt {
  color: var(--tp-fg-muted);
  font-weight: 500;
}

.tp-detail-list dd {
  margin: 0;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Lot size presentation

   Quantity is always shown alongside the arithmetic that produced it, so a
   trader never has to divide in their head to see how many lots they hold.
   ========================================================================== */

.tp-lot {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-variant-numeric: tabular-nums;
}

.tp-lot-quantity {
  font-weight: 600;
}

.tp-lot-working {
  color: var(--tp-fg-muted);
  font-size: 0.8125rem;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--tp-fg);
  --bs-table-border-color: var(--tp-border);
  margin-bottom: 0;
  font-size: 0.875rem;
}

.table > thead > tr > th {
  background: var(--tp-surface-sunken);
  color: var(--tp-fg-muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--tp-border);
  white-space: nowrap;
  padding: 0.5rem 0.7rem;
}

.table > tbody > tr > td {
  padding: 0.5rem 0.7rem;
  vertical-align: middle;
  border-bottom-color: var(--tp-border);
}

.table-hover > tbody > tr:hover > td {
  background-color: var(--tp-surface-sunken);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: var(--tp-surface-sunken);
}

/* A price board carries far more rows than a report, so it trades a little air for
   the number of contracts a reader can take in at once. */
.tp-table-dense > thead > tr > th,
.tp-table-dense > tbody > tr > td {
  padding: 0.35rem 0.6rem;
}

.tp-table-dense {
  font-size: 0.8125rem;
}

.tp-grid-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.tp-grid-filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--tp-radius-sm);
  background: transparent;
  color: var(--tp-fg-subtle);
}

.tp-grid-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  white-space: nowrap;
}

.tp-grid-sort-button i {
  color: var(--tp-fg-subtle);
  font-size: 0.75rem;
}

.tp-grid-sort-button:hover i,
.tp-grid-sort-button:focus-visible i,
.tp-grid-sort-button.is-active i {
  color: var(--tp-accent);
}

.tp-grid-filter-button:hover,
.tp-grid-filter-button:focus-visible,
.tp-grid-filter-button.is-active {
  background: var(--tp-accent-soft);
  color: var(--tp-accent);
}

.tp-grid-filter-button.is-active::after {
  content: "";
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: currentColor;
  position: absolute;
  transform: translate(0.45rem, -0.45rem);
}

.tp-grid-filter-popup {
  position: absolute;
  z-index: 1095;
  width: min(18rem, calc(100vw - 1.5rem));
  padding: 0.75rem;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  background: var(--tp-surface);
  color: var(--tp-fg);
  box-shadow: var(--tp-shadow-raised);
}

.tp-grid-filter-title {
  margin-bottom: 0.65rem;
  font-weight: 600;
}

.tp-grid-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.tp-grid-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  white-space: nowrap;
}

.tp-icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: var(--tp-radius-sm);
}

/* A long trading table scrolls under its own header rather than losing it. */
.tp-table-sticky {
  max-height: 70vh;
  overflow-y: auto;
}

.tp-table-sticky > .table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Open-position totals stay visible while the independently scrolling grid moves beneath. */
.tp-position-summary {
  position: sticky;
  top: calc(var(--tp-header-height) + 0.5rem);
  z-index: 3;
  padding: 0.75rem;
  background: var(--tp-surface);
  border-bottom: 1px solid var(--tp-border);
}

.tp-position-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.tp-position-summary .metric-card {
  padding: 0.65rem 0.75rem;
  box-shadow: none;
}

.tp-position-summary .metric-value {
  font-size: 1.15rem;
}

@media (max-width: 991.98px) {
  .tp-position-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .tp-position-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* The primary identifier in a trading row: symbol on top, context beneath. */
.tp-cell-symbol {
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: visible;
}

.tp-cell-sub {
  color: var(--tp-fg-muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

/* Market Watch keeps Symbol readable; secondary fields live in an expandable row. */
.tp-market-watch-table {
  overflow-x: auto;
}

.tp-market-watch-table .tp-col-symbol {
  min-width: 11rem;
  max-width: 18rem;
  white-space: normal;
  word-break: break-word;
}

.tp-market-watch-table .tp-cell-symbol {
  display: inline-block;
  max-width: 100%;
}

/* ==========================================================================
   Empty states
   ========================================================================== */

.tp-empty {
  text-align: center;
  padding: 2.25rem 1.25rem;
  color: var(--tp-fg-muted);
}

.tp-empty-icon {
  font-size: 1.5rem;
  color: var(--tp-fg-subtle);
  margin-bottom: 0.5rem;
  display: block;
}

.tp-empty-title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tp-fg);
  margin-bottom: 0.3rem;
}

.tp-empty-text {
  font-size: 0.875rem;
  margin: 0 auto;
  max-width: 46ch;
}

/* ==========================================================================
   Risk checks

   A pass/fail list on the approval screen. The icon and the word both carry
   the outcome, so it survives being printed or read without colour.
   ========================================================================== */

.tp-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--tp-border);
  font-size: 0.875rem;
}

.tp-check:last-child {
  border-bottom: 0;
}

.tp-check-icon {
  flex: 0 0 1rem;
  line-height: 1.5;
}

.tp-check-pass .tp-check-icon {
  color: var(--tp-positive);
}

.tp-check-fail .tp-check-icon {
  color: var(--tp-negative);
}

.tp-check-warn .tp-check-icon {
  color: var(--tp-warning);
}

.tp-check-body {
  min-width: 0;
  flex: 1 1 auto;
}

.tp-check-label {
  font-weight: 500;
}

.tp-check-detail {
  color: var(--tp-fg-muted);
  font-size: 0.8125rem;
}

/* ==========================================================================
   Position progress

   The planned path of a position: entry, partial, trailing, exit. Reached
   steps are filled; the rest are outlines.
   ========================================================================== */

.tp-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}

.tp-progress-step {
  flex: 1 1 8rem;
  min-width: 8rem;
  border: 1px solid var(--tp-border);
  border-left: 3px solid var(--tp-border-strong);
  border-radius: var(--tp-radius-sm);
  padding: 0.5rem 0.65rem;
  background: var(--tp-surface-sunken);
}

.tp-progress-step.is-reached {
  border-left-color: var(--tp-positive);
  background: var(--tp-positive-soft);
}

.tp-progress-step.is-current {
  border-left-color: var(--tp-accent);
  background: var(--tp-accent-soft);
}

.tp-progress-step.is-adverse {
  border-left-color: var(--tp-negative);
  background: var(--tp-negative-soft);
}

.tp-progress-label {
  font-size: 0.675rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tp-fg-subtle);
}

.tp-progress-value {
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tp-progress-note {
  font-size: 0.75rem;
  color: var(--tp-fg-muted);
}

/* ==========================================================================
   Filter toolbar
   ========================================================================== */

.tp-filter-bar {
  background: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow);
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
}

.tp-filter-bar .form-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tp-fg-subtle);
  margin-bottom: 0.2rem;
}

/* ==========================================================================
   Forms and buttons
   ========================================================================== */

.form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tp-fg-muted);
  margin-bottom: 0.25rem;
}

.form-control,
.form-select {
  background-color: var(--tp-surface);
  border-color: var(--tp-border-strong);
  border-radius: var(--tp-radius-sm);
  color: var(--tp-fg);
  font-size: 0.875rem;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--tp-surface);
  border-color: var(--tp-accent);
  color: var(--tp-fg);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
  background-color: var(--tp-surface-sunken);
  color: var(--tp-fg-muted);
}

.form-text {
  color: var(--tp-fg-muted);
  font-size: 0.75rem;
}

.btn {
  border-radius: var(--tp-radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  --bs-btn-bg: var(--tp-accent);
  --bs-btn-border-color: var(--tp-accent);
  --bs-btn-color: var(--tp-accent-fg);
  --bs-btn-hover-bg: #1d4ed8;
  --bs-btn-hover-border-color: #1d4ed8;
  --bs-btn-hover-color: var(--tp-accent-fg);
}

.alert {
  border-radius: var(--tp-radius);
  border-width: 1px;
  font-size: 0.875rem;
}

/* ==========================================================================
   Shadow trading banner

   Real prices driving simulated orders. Loud enough that it cannot be walked
   past, and drawn in the accent tone rather than red or amber because nothing
   has gone wrong: mistaking it for an error would be as bad as missing it.
   ========================================================================== */

.tp-shadow-banner {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--tp-accent-border);
  border-left: 5px solid var(--tp-accent);
  border-radius: var(--tp-radius);
  background: var(--tp-accent-soft);
  box-shadow: var(--tp-shadow-raised);
}

.tp-shadow-banner-icon {
  color: var(--tp-accent);
  font-size: 1.15rem;
  line-height: 1.4;
}

.tp-shadow-banner-title {
  color: var(--tp-accent);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.tp-shadow-banner-text {
  color: var(--tp-fg);
  font-size: 0.875rem;
  margin: 0;
  max-width: 78ch;
}

.tp-shadow-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--tp-positive-border);
  border-radius: 999px;
  background: var(--tp-positive-soft);
  color: var(--tp-positive);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.dropdown-menu {
  border-color: var(--tp-border);
  box-shadow: var(--tp-shadow-raised);
}

/* A destructive control needs to look unlike the controls around it. */
.tp-danger-zone {
  border: 1px solid var(--tp-negative-border);
  border-radius: var(--tp-radius);
  background: var(--tp-negative-soft);
  padding: 0.9rem 1rem;
}

.tp-danger-zone .tp-section-title {
  color: var(--tp-negative);
}

/* ==========================================================================
   Position progress

   The stages a paper position passes through. A stage that has not happened
   is dimmed rather than hidden, so the whole plan stays visible.
   ========================================================================== */

.tp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tp-step {
  display: flex;
  gap: 0.7rem;
  padding-bottom: 0.9rem;
  position: relative;
}

.tp-step:last-child {
  padding-bottom: 0;
}

/* The connector between markers, stopping short of the final one. */
.tp-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 0.4375rem;
  top: 1.1rem;
  bottom: 0.1rem;
  width: 1px;
  background: var(--tp-border);
}

.tp-step-marker {
  flex: 0 0 0.875rem;
  height: 0.875rem;
  width: 0.875rem;
  margin-top: 0.22rem;
  border-radius: 50%;
  border: 2px solid var(--tp-border-strong);
  background: var(--tp-surface);
  z-index: 1;
}

.tp-step-done .tp-step-marker {
  border-color: var(--tp-positive);
  background: var(--tp-positive);
}

.tp-step-current .tp-step-marker {
  border-color: var(--tp-accent);
  background: var(--tp-surface);
  box-shadow: 0 0 0 3px var(--tp-accent-soft);
}

.tp-step-label {
  font-size: 0.875rem;
  font-weight: 500;
}

.tp-step-pending .tp-step-label {
  color: var(--tp-fg-muted);
  font-weight: 400;
}

.tp-step-detail {
  font-size: 0.8125rem;
  color: var(--tp-fg-muted);
}

/* ==========================================================================
   Toasts
   ========================================================================== */

.tp-toast-container {
  position: fixed;
  top: calc(var(--tp-header-height) + 0.75rem);
  right: 1rem;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(24rem, calc(100vw - 2rem));
}

.tp-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-left: 3px solid var(--tp-neutral);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow-raised);
  padding: 0.7rem 0.85rem;
  font-size: 0.875rem;
  color: var(--tp-fg);
}

.tp-toast-success {
  border-left-color: var(--tp-positive);
}

.tp-toast-success .tp-toast-icon {
  color: var(--tp-positive);
}

.tp-toast-danger {
  border-left-color: var(--tp-negative);
}

.tp-toast-danger .tp-toast-icon {
  color: var(--tp-negative);
}

.tp-toast-warning {
  border-left-color: var(--tp-warning);
}

.tp-toast-warning .tp-toast-icon {
  color: var(--tp-warning);
}

.tp-toast-info {
  border-left-color: var(--bs-info);
}

.tp-toast-info .tp-toast-icon {
  color: var(--bs-info);
}

.tp-toast-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* ==========================================================================
   Charts

   SvgChart emits these classes instead of literal colours so a chart follows
   the active theme. Geometry stays on the server; only the palette is CSS.
   ========================================================================== */

.tp-chart-grid {
  stroke: var(--tp-border);
}

.tp-chart-axis {
  stroke: var(--tp-border-strong);
}

.tp-chart-text {
  fill: var(--tp-fg-muted);
}

.tp-chart-positive {
  fill: var(--tp-positive);
}

.tp-chart-negative {
  fill: var(--tp-negative);
}

.tp-chart-line {
  stroke: var(--tp-accent);
}

.tp-chart-area {
  fill: var(--tp-accent);
}

.tp-chart-point {
  fill: var(--tp-accent);
}

/* ==========================================================================
   Sign-in shell
   ========================================================================== */

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--tp-sidebar-bg);
  background-image: radial-gradient(circle at 20% 10%, #16254a 0, transparent 45%);
}

.login-card {
  width: 100%;
  max-width: 400px;
}

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.auth-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: var(--tp-radius);
  background: var(--tp-accent);
  color: #fff;
  font-size: 1.2rem;
}

.auth-brand-name {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.1;
}

.auth-brand-tagline {
  color: #94a3b8;
  font-size: 0.75rem;
}

.auth-footnote {
  color: #64748b;
  font-size: 0.75rem;
  text-align: center;
  margin-top: 1rem;
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .app-sidebar,
  .app-header,
  .page-header-actions,
  .tp-toast-container {
    display: none !important;
  }

  .app-content {
    padding: 0;
  }
}

/* ==========================================================================
   Real-time UI (SignalR)
   ========================================================================== */

.tp-rt-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--tp-border);
  color: var(--tp-fg-muted);
  background: var(--tp-bg-elevated, transparent);
}

.tp-rt-status-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--tp-fg-muted);
}

.tp-rt-status--live {
  color: var(--tp-positive);
  border-color: color-mix(in srgb, var(--tp-positive) 40%, transparent);
}

.tp-rt-status--live .tp-rt-status-dot {
  background: var(--tp-positive);
}

.tp-rt-status--reconnecting {
  color: #b78103;
}

.tp-rt-status--reconnecting .tp-rt-status-dot {
  background: #b78103;
}

.tp-rt-status--disconnected,
.tp-rt-status--stale {
  color: var(--tp-negative);
}

.tp-rt-status--disconnected .tp-rt-status-dot,
.tp-rt-status--stale .tp-rt-status-dot {
  background: var(--tp-negative);
}

@keyframes tp-rt-flash {
  from { background-color: color-mix(in srgb, var(--tp-accent, #0d6efd) 28%, transparent); }
  to { background-color: transparent; }
}

.tp-rt-flash {
  animation: tp-rt-flash 0.7s ease-out;
  border-radius: 0.2rem;
}

.tp-rt-toast-host {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

.tp-rt-toast {
  pointer-events: auto;
  padding: 0.65rem 0.9rem;
  border-radius: 0.4rem;
  background: var(--tp-bg-elevated, #1e293b);
  color: #fff;
  font-size: 0.85rem;
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.2);
}

.tp-rt-toast--target {
  border-left: 3px solid var(--tp-positive, #198754);
}

/* ==========================================================================
   Notifications / toast center
   ========================================================================== */

.tp-notify-badge {
  position: absolute;
  top: 0.15rem;
  right: 0.1rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--tp-negative, #dc3545);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
}

.tp-notify-dropdown {
  width: min(22rem, calc(100vw - 1.5rem));
  padding: 0;
}

.tp-notify-list {
  max-height: 22rem;
  overflow-y: auto;
}

.tp-notify-item {
  display: flex;
  gap: 0.65rem;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--tp-border, rgba(0,0,0,.08));
  color: inherit;
}

.tp-notify-item:hover {
  background: var(--tp-bg-muted, rgba(0,0,0,.04));
}

.tp-notify-item--unread {
  background: color-mix(in srgb, var(--tp-accent, #0d6efd) 8%, transparent);
}

.tp-notify-item-icon {
  margin-top: 0.15rem;
  opacity: 0.85;
}

.tp-notify-item-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.tp-notify-item-title {
  font-weight: 600;
  font-size: 0.85rem;
}

.tp-notify-item-msg {
  font-size: 0.78rem;
  color: var(--tp-fg-muted);
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  word-break: break-word;
}

.tp-notify-item-details {
  font-size: 0.7rem;
  color: var(--tp-fg-subtle);
  white-space: pre-line;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  margin-top: 0.1rem;
}

.tp-notify-item-time {
  font-size: 0.7rem;
  color: var(--tp-fg-subtle);
}

.tp-notify-toast-host {
  position: fixed;
  top: 4.25rem;
  right: 1rem;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

.tp-notify-toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.65rem;
  align-items: start;
  padding: 0.75rem 0.85rem;
  border-radius: 0.45rem;
  background: var(--tp-bg-elevated, #fff);
  border: 1px solid var(--tp-border, rgba(0,0,0,.12));
  box-shadow: 0 0.4rem 1.1rem rgba(0, 0, 0, 0.12);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

[data-bs-theme="dark"] .tp-notify-toast {
  background: #1e293b;
  border-color: rgba(255,255,255,.12);
}

.tp-notify-toast--hide {
  opacity: 0;
  transform: translateY(-0.35rem);
}

.tp-notify-toast-icon {
  font-size: 1.1rem;
  line-height: 1;
  margin-top: 0.1rem;
}

.tp-notify-toast--info .tp-notify-toast-icon { color: var(--tp-fg-muted); }
.tp-notify-toast--success .tp-notify-toast-icon { color: var(--tp-positive, #198754); }
.tp-notify-toast--warning .tp-notify-toast-icon { color: #b78103; }
.tp-notify-toast--danger .tp-notify-toast-icon { color: var(--tp-negative, #dc3545); }

.tp-notify-toast-title {
  font-weight: 600;
  font-size: 0.9rem;
}

.tp-notify-toast-message {
  font-size: 0.8rem;
  color: var(--tp-fg-muted);
  margin-top: 0.15rem;
  white-space: pre-line;
  word-break: break-word;
}

.tp-notify-toast-details {
  font-size: 0.75rem;
  margin-top: 0.35rem;
  color: var(--tp-fg-subtle);
  white-space: pre-line;
  word-break: break-word;
}

.tp-notify-toast-action {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ==========================================================================
   Page busy overlay (form navigation loaders)
   ========================================================================== */

.tp-page-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(15, 23, 42, 0.45);
}

.tp-page-loader[hidden] {
  display: none !important;
}

.tp-page-loader-panel {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: 28rem;
  padding: 1rem 1.25rem;
  border-radius: var(--tp-radius);
  border: 1px solid var(--tp-border);
  background: var(--tp-surface);
  box-shadow: var(--tp-shadow);
  color: var(--tp-fg);
}

.tp-page-loader-message {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
}

html.tp-page-busy,
html.tp-page-busy body {
  cursor: progress;
}

/* Uses the shell's actual available width, unlike viewport-only Bootstrap columns.
   Four compact KPIs fit on an ordinary laptop with either desktop sidebar state;
   narrower content wraps cleanly without page-level horizontal scrolling. */
.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
  min-width: 0;
}

.dashboard-kpi-grid > * {
  min-width: 0;
}

/* ==========================================================================
   Shared confirmation modal
   ========================================================================== */

.tp-confirm-modal .modal-content {
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow-raised);
}

.tp-confirm-modal .modal-header {
  align-items: center;
  gap: 0.75rem;
  border-bottom-color: var(--tp-border);
}

.tp-confirm-modal .modal-title {
  flex: 1 1 auto;
  font-size: 1rem;
  font-weight: 600;
}

.tp-confirm-modal .modal-footer {
  border-top-color: var(--tp-border);
}

.tp-confirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border-radius: 50%;
  background: var(--tp-accent-soft);
  color: var(--tp-accent);
  font-size: 1rem;
}

.tp-confirm-icon--warning {
  background: var(--tp-warning-soft);
  color: var(--tp-warning);
}

.tp-confirm-icon--danger {
  background: var(--tp-negative-soft);
  color: var(--tp-negative);
}

.tp-confirm-details {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-sm);
  background: var(--tp-surface-sunken);
  color: var(--tp-fg-muted);
  font-size: 0.9375rem;
  white-space: pre-line;
}

@media (max-width: 575.98px) {
  .app-content {
    padding: 1rem;
  }

  .page-header {
    margin-bottom: 1rem;
  }

  .page-header-actions,
  .page-header-actions > .btn,
  .page-header-actions > form {
    width: 100%;
  }

  .page-header-actions > form > .btn {
    width: 100%;
  }

  .tp-confirm-modal .modal-dialog {
    margin: 0.75rem;
  }
}