/*
 * Pilot Admin — Light Design System
 * Shared tokens consumed by master.blade.php chrome (sidebar/navbar) and by
 * every Vue SFC's scoped <style> block (CSS custom properties cascade
 * through Vue's scoped-style attribute selectors normally).
 */

:root {
  /* Brand */
  --de-brand: #7367f0;
  --de-brand-dark: #5e50ee;
  --de-brand-light: #8c7ff7;
  --de-brand-soft: rgba(115, 103, 240, 0.1);
  --de-brand-soft-strong: rgba(115, 103, 240, 0.18);

  /* Accent 2 */
  --de-accent-2: #7c6ff0;
  --de-accent-2-dark: #6558d3;
  --de-accent-2-soft: rgba(124, 111, 240, 0.12);
  --de-gradient-brand: linear-gradient(135deg, #7c6ff0, #6366f1);

  /* Categorical palette */
  --de-cat-blue: #3b82f6;
  --de-cat-purple: #8b5cf6;
  --de-cat-teal: #0d9488;
  --de-cat-orange: #ea580c;
  --de-cat-pink: #db2777;
  --de-cat-green: #16a34a;
  --de-cat-red: #dc2626;
  --de-cat-cyan: #0891b2;

  /* Surfaces */
  --de-bg: #f6f7fb;
  --de-card: #ffffff;
  --de-card-alt: #fbfbfd;
  --de-border: rgba(30, 33, 48, 0.09);
  --de-border-strong: rgba(30, 33, 48, 0.14);
  --de-hover: rgba(30, 33, 48, 0.04);
  --de-hover-strong: rgba(30, 33, 48, 0.07);

  /* Text */
  --de-text: #2b2c40;
  --de-text-strong: #1b1c2e;
  --de-muted: rgba(43, 44, 64, 0.62);
  --de-muted-soft: rgba(43, 44, 64, 0.45);
  --de-on-brand: #ffffff;

  /* Semantic */
  --de-success: #16a34a;
  --de-success-soft: rgba(22, 163, 74, 0.12);
  --de-danger: #dc2626;
  --de-danger-soft: rgba(220, 38, 38, 0.12);
  --de-warning: #d97706;
  --de-warning-soft: rgba(217, 119, 6, 0.12);
  --de-info: #2563eb;
  --de-info-soft: rgba(37, 99, 235, 0.12);

  /* Elevation */
  --de-shadow-sm: 0 1px 2px rgba(30, 33, 48, 0.06);
  --de-shadow-md: 0 4px 16px rgba(30, 33, 48, 0.08);
  --de-shadow-lg: 0 12px 32px rgba(30, 33, 48, 0.12);

  /* Shape */
  --de-radius-sm: 8px;
  --de-radius-md: 12px;
  --de-radius-lg: 16px;

  /* Typography */
  --de-font: "Public Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --de-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body {
  background: var(--de-bg);
  color: var(--de-text);
  font-family: var(--de-font);
}

/* Shared card primitive used across dashboard widgets & new pages */
.de-card {
  background: var(--de-card);
  border: 1px solid var(--de-border);
  border-radius: var(--de-radius-md);
  box-shadow: var(--de-shadow-sm);
}

.de-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.de-badge-success { background: var(--de-success-soft); color: var(--de-success); }
.de-badge-danger  { background: var(--de-danger-soft);  color: var(--de-danger); }
.de-badge-warning { background: var(--de-warning-soft); color: var(--de-warning); }
.de-badge-info    { background: var(--de-info-soft);    color: var(--de-info); }
.de-badge-brand   { background: var(--de-brand-soft);   color: var(--de-brand); }
.de-badge-brand2  { background: var(--de-accent-2-soft); color: var(--de-accent-2); }

.de-table {
  width: 100%;
  border-collapse: collapse;
}

.de-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--de-muted);
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 1px solid var(--de-border);
}

.de-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--de-border);
  font-size: 13px;
  color: var(--de-text);
}

.de-table tr:hover td {
  background: var(--de-hover);
}

/*
 * Dark variant — activated automatically once <html> carries the
 * "dark-style" class (set by TemplateCustomizer via config.js defaultStyle).
 * Overrides only the color-carrying tokens; radii/typography stay shared.
 */
html.dark-style {
  /* Brand — teal/cyan primary (matches the product's real login-page identity) */
  --de-brand: #14b8a6;
  --de-brand-dark: #0d9488;
  --de-brand-light: #2dd4bf;
  --de-brand-soft: rgba(20, 184, 166, 0.16);
  --de-brand-soft-strong: rgba(20, 184, 166, 0.26);

  /* Accent 2 — violet/purple secondary, used for active-nav state & small
     interactive floating controls, never for primary CTAs. */
  --de-accent-2: #7c6ff0;
  --de-accent-2-dark: #6558d3;
  --de-accent-2-soft: rgba(124, 111, 240, 0.18);
  --de-gradient-brand: linear-gradient(135deg, #7c6ff0, #6366f1);

  /* Categorical palette — one distinct hue per sidebar section/category,
     cycled manually rather than by index so related items stay recognizable. */
  --de-cat-blue: #60a5fa;
  --de-cat-purple: #a78bfa;
  --de-cat-teal: #2dd4bf;
  --de-cat-orange: #fb923c;
  --de-cat-pink: #f472b6;
  --de-cat-green: #4ade80;
  --de-cat-red: #f87171;
  --de-cat-cyan: #22d3ee;

  /* Surfaces */
  --de-bg: #0b0e1a;
  --de-card: #141726;
  --de-card-alt: #10121e;
  --de-border: rgba(255, 255, 255, 0.07);
  --de-border-strong: rgba(255, 255, 255, 0.12);
  --de-hover: rgba(255, 255, 255, 0.05);
  --de-hover-strong: rgba(255, 255, 255, 0.09);

  /* Text */
  --de-text: #e4e6f0;
  --de-text-strong: #ffffff;
  --de-muted: rgba(228, 230, 240, 0.62);
  --de-muted-soft: rgba(228, 230, 240, 0.45);
  --de-on-brand: #ffffff;

  /* Semantic — slightly brighter for contrast against a dark surface */
  --de-success: #22c55e;
  --de-success-soft: rgba(34, 197, 94, 0.16);
  --de-danger: #f87171;
  --de-danger-soft: rgba(248, 113, 113, 0.16);
  --de-warning: #fbbf24;
  --de-warning-soft: rgba(251, 191, 36, 0.16);
  --de-info: #60a5fa;
  --de-info-soft: rgba(96, 165, 250, 0.16);

  /* Elevation — dark shadows need to be darker/deeper to read as depth */
  --de-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --de-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --de-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
}

/* ============================================================================
   Logout confirmation
   ----------------------------------------------------------------------------
   Sprint 18. These styles did not exist — anywhere.

   app.js has rendered .logout-modal-overlay / .logout-modal / .logout-panel-*
   since long before this sprint, and no stylesheet, component or inline block
   ever defined them. So the dialog painted as bare text in the top corner,
   outside any container, over whatever happened to be there. Confirmed against
   the previous commit: the markup was present with zero matching rules.

   It is a CONFIRMATION for a destructive-ish action, so it gets a real modal:
   a dimmed backdrop that makes it clear the page is blocked, the question
   readable, and the two answers visually unequal — cancel is quiet, logging out
   is the deliberate one.
   ========================================================================== */
.logout-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 8, 15, 0.62);
  backdrop-filter: blur(2px);
}

.logout-modal {
  width: 100%;
  max-width: 380px;
  background: var(--de-card, #141726);
  color: var(--de-text-strong, #e6e8f0);
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 12px;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.logout-panel-header {
  padding: 14px 18px 0;
}
.logout-panel-header h6 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.logout-panel-body {
  padding: 8px 18px 16px;
}
.logout-panel-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--de-muted, #9aa3b8);
}

.logout-panel-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.btn-logout-cancel,
.btn-logout-confirm {
  border-radius: 8px;
  padding: 7px 16px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid transparent;
}

/* Quiet: the safe answer should not compete for the click. */
.btn-logout-cancel {
  background: transparent;
  color: inherit;
  border-color: rgba(148, 163, 184, 0.34);
}
.btn-logout-cancel:hover {
  border-color: rgba(226, 232, 240, 0.55);
}

/* Deliberate: the reserved critical step, so it reads as a real decision. */
.btn-logout-confirm {
  background: #d03b3b;
  color: #fff;
  font-weight: 600;
}
.btn-logout-confirm:hover {
  filter: brightness(1.08);
}


/* =========================================================================
   Sprint 20 — Current Session report pages (.cs-*)
   =========================================================================
   MOVED HERE OUT OF CurrentSession.vue, and the reason is a defect a probe
   caught: vue3-sfc-loader injects a component's <style> only when that
   component LOADS, and SessionSymbolTraders.vue depends on these same classes.
   The drill-down URL is deliberately shareable (/current-session/XAUUSD), so
   opening one directly loaded the traders page WITHOUT ever loading the table
   page — and every .cs- rule was missing. Measured on a direct load: the h1
   rendered at the browser's default 32px instead of 22px, the KPI row computed
   `display: block` instead of `grid`, and the table sat at 16px instead of 11px.

   This stylesheet is loaded by master.blade.php on every page and is
   cache-busted with filemtime, so both pages get these rules regardless of
   which one the browser reaches first.
   ========================================================================= */
/* Not scoped — a page component, .cs- prefixed. Status colours are the reserved
   four, validated against this dashboard's dark surface #141726. */
.cs { padding: 18px 22px 28px; color: var(--de-text-strong, #e6e8f0); font-size: 12px; }

.cs-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.cs-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.cs-sub { margin: 3px 0 0; font-size: 12px; color: var(--de-muted, #9aa3b8); }
.cs-grow { flex: 1 1 auto; }
.cs-muted { color: var(--de-muted, #9aa3b8); }

.cs-freshness { font-size: 11px; color: var(--de-muted, #9aa3b8); white-space: nowrap; }
.cs-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.cs-bg-good { background: #0ca30c; }
.cs-bg-warn { background: #fab219; }

.cs-note { margin: 10px 0; font-size: 12px; line-height: 1.6; color: var(--de-muted, #9aa3b8); }
.cs-warn { color: #fab219; }
.cs-note code {
  background: rgba(148,163,184,.12); padding: 1px 4px; border-radius: 3px; font-size: 11px;
}

.cs-kpis {
  margin: 0 0 14px; padding: 12px 14px;
  /* Six tiles as of Sprint 21 (Volume, USD was added). The count is written
     out rather than auto-fitted so a seventh forces this line to be revisited:
     when it was five columns holding six tiles, "Session realized PnL" silently
     wrapped underneath "Symbols" and read as a caption on it. */
  display: grid; grid-template-columns: repeat(5, 1fr) 1.7fr; gap: 0 16px;
  background: var(--de-card, #141726);
  border: 1px solid rgba(148,163,184,.14); border-radius: 10px;
}
.cs-kpi { min-width: 0; }
.cs-kpi dt {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--de-muted, #9aa3b8);
}
.cs-kpi dd {
  margin: 2px 0 0; font-size: 20px; font-weight: 650;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.cs-kpi-sub { font-size: 10px; color: var(--de-muted, #9aa3b8); margin-top: 1px; }
.cs-kpi-wide dd { font-size: 18px; }

.cs-pos { color: #0ca30c; }
.cs-neg { color: #d03b3b; }

.cs-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cs-input {
  background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.22);
  border-radius: 6px; color: var(--de-text-strong, #e6e8f0);
  padding: 6px 9px; font-size: 12px; width: 240px;
}
.cs-input:focus { outline: none; border-color: rgba(226,232,240,.5); }

/* The table scrolls in its own region so the KPI row stays on screen while the
   rows move — scrolling the page took the totals you were comparing against
   away with them. */
.cs-scroll {
  max-height: calc(100vh - 300px); overflow: auto;
  background: var(--de-card, #141726);
  border: 1px solid rgba(148,163,184,.14); border-radius: 10px;
}

.cs-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.cs-table th {
  text-align: left; font-weight: 500; padding: 8px 10px;
  color: var(--de-muted, #9aa3b8);
  border-bottom: 1px solid rgba(148,163,184,.18);
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  position: sticky; top: 0; background: var(--de-card, #141726); z-index: 1;
}
.cs-table td { padding: 6px 10px; border-bottom: 1px solid rgba(148,163,184,.07); }
/* Figures right-aligned with tabular digits so a column scans down its decimal
   point instead of ragging. */
.cs-num { text-align: right; font-variant-numeric: tabular-nums; }
.cs-table th.cs-num { text-align: right; }

.cs-tr { cursor: pointer; }
.cs-tr:hover { background: rgba(148,163,184,.07); }
/* A long symbol must never change its row's height and take the row grid with
   it — the defect the holders table already paid for. */
.cs-th-symbol { min-width: 150px; }
.cs-td-symbol { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

.cs-tag {
  display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px;
  font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(250,178,25,.14); color: #fab219;
}

.cs-sort {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.cs-sort:hover { color: var(--de-text-strong, #e6e8f0); }
.cs-arrow { display: inline-block; width: 8px; }

/* Buy/sell lean as a single filled track: buy grows from the left, the
   remainder IS the sell side, so the two cannot disagree. */
.cs-td-share { white-space: nowrap; }
.cs-split {
  display: inline-block; vertical-align: middle; width: 54px; height: 4px;
  margin-right: 6px; border-radius: 2px; background: rgba(208,59,59,.45);
  overflow: hidden; position: relative;
}
.cs-split-buy { position: absolute; left: 0; top: 0; height: 4px; background: #0ca30c; display: block; }

.cs-caveat {
  margin-top: 14px; font-size: 11px; color: var(--de-muted, #9aa3b8);
  border: 1px solid rgba(148,163,184,.14); border-radius: 8px; padding: 8px 12px;
}
.cs-caveat summary { cursor: pointer; }
.cs-caveat ul { margin: 8px 0 2px; padding-left: 18px; line-height: 1.65; }
.cs-caveat li { margin-bottom: 6px; }
.cs-caveat b { color: var(--de-text-strong, #e6e8f0); }

@media (max-width: 1100px) {
  .cs-kpis { grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
}