/* =============================================================================
   MYOPTIONSFLOW — COMPONENT STYLES
   All colours reference CSS variables from design-system.css.
   All layout uses utilities from utilities.css.
   No hardcoded hex values below — change brand tokens in design-system.css.
   ============================================================================= */

/* ─────────────────────────────────────────────
   BASE
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-ui);
  background-color: var(--bg-global);
  color: var(--text-primary);
  margin: 0;
}

/* Financial font class — applied to all numeric table cells and KPI values */
.financial,
.font-financial {
  font-family: var(--font-financial);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-surface-alt); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ─────────────────────────────────────────────
   SIDEBAR
   Collapsed: 64px icon-only.
   Hover: expands to 240px with labels visible.
   Mobile: hidden off-screen, slides in on .open
───────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w-collapsed);
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-sidebar);
  box-shadow: var(--shadow-sidebar);
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: var(--z-sidebar);
  /* Mobile: slide out off-screen */
  transform: translateX(-100%);
  transition: var(--transition-sidebar), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Desktop hover-expand */
@media (min-width: 1024px) {
  .sidebar {
    transform: translateX(0);
    transition: var(--transition-sidebar);
  }
  .sidebar:hover {
    width: var(--sidebar-w-expanded);
  }
  .sidebar:hover ~ .content-area-wrapper {
    margin-left: var(--sidebar-w-expanded);
  }
}

/* Mobile open state */
.sidebar.open {
  transform: translateX(0);
  width: var(--sidebar-w-expanded);
}

/* Logo area — padding-left centres the 32px icon in the 64px collapsed bar */
.sidebar-logo-area {
  height: 64px;
  display: flex;
  align-items: center;
  padding-left: 16px;
  border-bottom: 1px solid var(--border-sidebar);
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar-logo-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-action), #0055cc);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-inverse);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
}
.sidebar-logo-text {
  margin-left: 12px;
  font-size: 0.8rem; font-weight: 700;
  color: var(--text-inverse);
  white-space: nowrap;
  opacity: 0;
  transition: var(--transition-sidebar-content);
  letter-spacing: -0.02em;
}
@media (min-width: 1024px) {
  .sidebar:hover .sidebar-logo-text { opacity: 1; }
}
.sidebar.open .sidebar-logo-text { opacity: 1; }

/* Nav section labels */
.sidebar .text-xs.uppercase.font-semibold,
.sidebar-section-label {
  color: var(--bg-sidebar-section);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 16px 0 4px 20px;
  white-space: nowrap;
  opacity: 0;
  transition: var(--transition-sidebar-content);
}
@media (min-width: 1024px) {
  .sidebar:hover .text-xs.uppercase.font-semibold,
  .sidebar:hover .sidebar-section-label { opacity: 1; }
}
.sidebar.open .text-xs.uppercase.font-semibold,
.sidebar.open .sidebar-section-label { opacity: 1; }

/* Nav links */
.sidebar a {
  display: flex;
  align-items: center;
  padding: 10px 0 10px 20px;
  color: var(--text-sidebar);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: var(--transition-std);
  border-left: 3px solid transparent;
}
.sidebar a:hover {
  background-color: var(--bg-sidebar-hover);
  color: var(--text-sidebar-hover);
}
.sidebar a.active {
  background-color: var(--bg-sidebar-active);
  color: var(--text-sidebar-active);
  border-left-color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
}
.sidebar a i.fa-fw,
.sidebar a i {
  width: 24px;
  text-align: center;
  font-size: 0.875rem;
  flex-shrink: 0;
  margin-right: 0;
  opacity: 0.8;
}
.sidebar a.active i { opacity: 1; }

/* Nav label text (fades in on expand) */
.sidebar a .nav-label-text,
.sidebar .nav-label {
  margin-left: 12px;
  opacity: 0;
  transition: var(--transition-sidebar-content);
}
@media (min-width: 1024px) {
  .sidebar:hover a .nav-label-text,
  .sidebar:hover .nav-label { opacity: 1; }
}
.sidebar.open a .nav-label-text,
.sidebar.open .nav-label { opacity: 1; }

/* Logout button */
.sidebar button[type="submit"] {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 0 10px 20px;
  background: transparent;
  border: none;
  color: #ef4444;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: var(--transition-std);
}
.sidebar button[type="submit"]:hover {
  background-color: rgba(239, 68, 68, 0.1);
}

/* ─────────────────────────────────────────────
   CONTENT AREA WRAPPER
───────────────────────────────────────────── */
.content-area-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 1024px) {
  .content-area-wrapper {
    margin-left: var(--sidebar-w-collapsed);
  }
}

/* ─────────────────────────────────────────────
   HEADER BAR
───────────────────────────────────────────── */
.header-bar {
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.5rem;
  height: 60px;
  position: sticky;
  top: 0;
  z-index: var(--z-overlay);
  box-shadow: var(--shadow-sm);
}
.header-bar h1 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0;
}
.header-bar input[type="text"],
.header-bar select {
  background-color: var(--bg-surface-alt);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-family: var(--font-ui);
  color: var(--text-primary);
  transition: var(--transition-std);
  box-shadow: var(--shadow-sm);
}
.header-bar input[type="text"]:focus,
.header-bar select:focus {
  background-color: var(--bg-surface);
  border-color: var(--border-focus);
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Account / currency selectors */
.account-selector select,
.currency-selector select {
  appearance: none;
  background-color: var(--color-action-bg);
  border: 1px solid var(--color-action-border);
  color: var(--color-action);
  padding: 6px 28px 6px 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--font-ui);
  border-radius: var(--radius-md);
  cursor: pointer;
  outline: none;
  transition: var(--transition-std);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23007AFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
}
.account-selector select:hover,
.currency-selector select:hover {
  background-color: rgba(0, 122, 255, 0.14);
}

/* Deviation state: selector changed from user's default — solid red, impossible to miss */
.account-selector.deviated select,
.currency-selector.deviated select {
  background-color: #FF3B30;
  border: 2px solid #cc1a10;
  color: #ffffff;
  font-weight: 700;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.4);
}
.account-selector.deviated select:hover,
.currency-selector.deviated select:hover {
  background-color: #cc1a10;
}

/* Symbol search */
.symbol-search-bar input[type="text"] {
  background-color: var(--bg-surface-alt);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: var(--text-primary);
  outline: none;
  transition: var(--transition-std);
  min-width: 150px;
}
.symbol-search-bar input[type="text"]:focus {
  border-color: var(--color-action);
  box-shadow: var(--shadow-focus);
}
.symbol-search-bar button {
  background-color: var(--color-action);
  color: var(--text-inverse);
  border: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: var(--transition-std);
}
.symbol-search-bar button:hover {
  background-color: var(--color-action-hover);
}

/* Dark mode toggle button */
.theme-toggle-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-surface-alt);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem;
  transition: var(--transition-std);
}
.theme-toggle-btn:hover {
  background: var(--border-color);
  color: var(--text-primary);
}

/* ─────────────────────────────────────────────
   MAIN CONTENT
───────────────────────────────────────────── */
.main-content-scrollable {
  flex-grow: 1;
  overflow-y: visible;
  overflow-x: visible;
}

/* ─────────────────────────────────────────────
   CARDS
───────────────────────────────────────────── */
.card {
  background-color: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-color);
}
.pnl-card {
  margin-bottom: 1.5rem;
  background-color: var(--bg-surface);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-color);
}
.pnl-line {
  display: flex;
  justify-content: space-between;
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
  padding: 0.25rem 0;
}
.pnl-line-label { color: var(--text-secondary); }
.pnl-line-value { font-weight: 600; font-family: var(--font-financial); }
.pnl-total {
  border-top: 1px solid var(--border-color);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  font-size: 1.25rem;
  font-weight: bold;
}
.detail-link {
  font-size: 0.85rem;
  color: var(--color-action);
  text-decoration: none;
  display: block;
}
.detail-link:hover { text-decoration: underline; color: var(--color-action-hover); }
.detail-link + .detail-link { margin-top: 0.25rem; }

/* Card table wrapper */
.card-table-wrapper {
  overflow-x: auto;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}
.card h2.table-title {
  padding: 1rem 1rem 0.5rem 1rem;
  margin-bottom: 0;
}

/* ─────────────────────────────────────────────
   SNAPSHOT BAR (Overview KPI cards)
───────────────────────────────────────────── */
.snapshot-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Card shell */
.snapshot-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.125rem 1.25rem 1rem;
  overflow: hidden;
  position: relative;
  min-height: 130px;
}

/* Cards with a sparkline need bottom room for it */
.snapshot-card.has-sparkline {
  padding-bottom: 58px;
}

.snapshot-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}
.snapshot-value {
  font-family: var(--font-financial);
  font-size: var(--text-size-kpi);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 0.3rem;
}
.snapshot-value.profit { color: var(--color-profit); }
.snapshot-value.loss   { color: var(--color-loss); }

.snapshot-change {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.snapshot-change .up   { color: var(--color-profit); }
.snapshot-change .down { color: var(--color-loss); }

/* Sparkline SVG — absolutely positioned, flush to card bottom */
.sparkline-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52px;
  overflow: hidden;
  line-height: 0;
}
.sparkline-wrap svg { display: block; width: 100%; height: 100%; }

/* ─────────────────────────────────────────────
   SECTION HEADERS
───────────────────────────────────────────── */
.section-header {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

/* ─────────────────────────────────────────────
   TWO-COLUMN LAYOUT (Overview)
───────────────────────────────────────────── */
.main-content-flex {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.flex-left-70,
.flex-right-30 { width: 100%; }

@media (min-width: 1024px) {
  .main-content-flex { flex-direction: row; }
  .flex-left-70 { width: 70%; padding-right: 1.5rem; }
  .flex-right-30 { width: 30%; }
}

/* ─────────────────────────────────────────────
   TABLES — DASHBOARD TABLE
───────────────────────────────────────────── */
.dashboard-table th,
.dashboard-table td {
  padding: 8px 10px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
.dashboard-table tr:last-child td { border-bottom: none; }
.dashboard-table th {
  background-color: var(--bg-surface-alt);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
}
.dashboard-table th a {
  color: inherit; text-decoration: none; display: inline-block;
}
.dashboard-table th a:hover {
  text-decoration: underline; color: var(--color-action);
}
.dashboard-table td { font-size: 0.875rem; }
.dashboard-table td a.clickable-symbol { color: var(--color-action); text-decoration: underline; }
.dashboard-table td a.clickable-symbol:hover { color: var(--color-action-hover); }

/* ─────────────────────────────────────────────
   TABLES — DETAIL TABLE
───────────────────────────────────────────── */
.detail-table th,
.detail-table td {
  padding: 0.65rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.875rem;
  vertical-align: middle;
  white-space: nowrap;
}
.detail-table th {
  background-color: var(--bg-surface-alt);
  font-weight: 600;
  color: var(--text-secondary);
}
.detail-table tbody tr:nth-child(even) { background-color: var(--bg-surface-alt); }
.detail-table tbody tr:hover { background-color: var(--row-stock-highlight); }

/* ─────────────────────────────────────────────
   TABLES — PERFORMANCE TABLE
───────────────────────────────────────────── */
.performance-table { width: 100%; border-collapse: collapse; }
.performance-table th,
.performance-table td {
  padding: 0.9rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}
.performance-table thead th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  background-color: var(--bg-surface-alt);
}
.performance-table .period-header-row th {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--row-period-bg);
  color: var(--row-period-text);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.performance-table .past-period-header-row th {
  background-color: var(--bg-surface-alt);
  color: var(--text-secondary);
}
.performance-table .today-row {
  font-size: 1.1em;
  font-weight: var(--row-today-font-weight);
  background-color: var(--row-today-bg);
}
.performance-table .period-name { font-weight: 500; }
.performance-table .text-right { text-align: right; }

/* ─────────────────────────────────────────────
   TABLES — MONTHLY SUMMARY TABLE
───────────────────────────────────────────── */
.monthly-summary-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: 0.875rem;
}
.monthly-summary-table th,
.monthly-summary-table td {
  border: 1px solid var(--border-color);
  padding: 0.6rem 0.5rem;
  text-align: right;
  white-space: nowrap;
}
.monthly-summary-table thead th {
  background-color: var(--bg-surface-alt);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
}
.monthly-summary-table td.category-label {
  text-align: left;
  font-weight: 500;
  background-color: var(--bg-surface-alt);
  position: sticky;
  left: 0;
  z-index: 5;
  width: 1px;
  white-space: nowrap;
  padding-left: 0.75rem;
}
.monthly-summary-table th.category-header {
  background-color: var(--border-color);
  position: sticky;
  top: 0; left: 0;
  z-index: 15;
  min-width: 220px;
  text-align: left;
  padding-left: 0.75rem;
}
.monthly-summary-table .total-col {
  font-weight: bold;
  background-color: var(--row-subtotal-bg);
}

/* ─────────────────────────────────────────────
   TABLE SPECIAL ROWS
───────────────────────────────────────────── */
.stock-row-highlight td { background-color: var(--row-stock-highlight) !important; }

.subtotal-row td,
.net-profit-row td {
  font-weight: bold;
  background-color: var(--row-subtotal-bg);
  color: var(--row-subtotal-text);
}
.subtotal-row td {
  border-top: 2px solid var(--row-subtotal-border);
}
.subtotal-row td.category-label,
.net-profit-row td.category-label { padding-left: 1.5rem; }

.grand-total-row td {
  background-color: var(--row-grand-total-bg);
  font-weight: bold;
  font-size: 1.1rem;
  color: var(--row-grand-total-text);
  border-top: 2px solid var(--row-grand-total-border);
}
.account-header-row th {
  background-color: var(--row-account-header-bg);
  color: var(--row-account-header-text);
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: bold;
}
.section-divider-row td {
  background-color: var(--row-section-div-bg);
  color: var(--row-section-div-text);
  font-weight: 600;
  padding: 0.5rem 1rem;
  font-size: 1.1rem;
}
.highlight-metric-row td {
  background-color: var(--row-highlight-metric-bg);
  font-weight: 600;
  color: var(--row-highlight-metric-text);
}
.highlight-metric-row td.category-label {
  background-color: var(--row-highlight-metric-bg) !important;
  color: var(--row-highlight-metric-text);
}

/* Section priority rows (Open Positions urgency headers) */
.section-header-row.section-priority-1 td {
  background-color: var(--priority-1-bg) !important;
  color: var(--priority-1-text);
  font-weight: bold;
  padding: 0.75rem 1rem !important;
  border-top: 2px solid var(--priority-1-border);
  border-bottom: 2px solid var(--priority-1-border) !important;
}
.section-header-row.section-priority-2 td {
  background-color: var(--priority-2-bg) !important;
  color: var(--priority-2-text);
  font-weight: bold;
  padding: 0.75rem 1rem !important;
  border-top: 2px solid var(--priority-2-border);
  border-bottom: 2px solid var(--priority-2-border) !important;
}
.section-header-row.section-priority-3 td {
  background-color: var(--priority-3-bg) !important;
  color: var(--priority-3-text);
  font-weight: bold;
  padding: 0.75rem 1rem !important;
  border-top: 2px solid var(--priority-3-border);
  border-bottom: 2px solid var(--priority-3-border) !important;
}

/* ─────────────────────────────────────────────
   TABLE STICKY HELPERS
───────────────────────────────────────────── */
.table-container { max-height: 80vh; overflow: auto; width: 100%; }
.header-sticky   { position: sticky; top: 0; z-index: var(--z-sticky); background-color: var(--bg-surface-alt); }
.category-sticky { position: sticky; left: 0; z-index: var(--z-raised); background-color: var(--bg-surface-alt); }
.top-left-sticky {
  position: sticky; top: 0; left: 0;
  z-index: 30;
  background-color: var(--border-color);
}

/* ─────────────────────────────────────────────
   P&L COLOUR CLASSES
   Canonical definitions — these were duplicated
   3× in the old file with inconsistent values.
───────────────────────────────────────────── */
.pnl-positive { color: var(--color-profit) !important; }
.pnl-negative { color: var(--color-loss)   !important; }
.pnl-zero     { color: var(--text-secondary) !important; }

/* Links inside pnl-coloured cells must inherit — browser default link blue overrides cascade */
.pnl-positive a,
.pnl-negative a,
.pnl-zero a { color: inherit; text-decoration: none; }
.pnl-positive a:hover,
.pnl-negative a:hover,
.pnl-zero a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────
   RISK & DTE COLOUR CLASSES
───────────────────────────────────────────── */
.risk-text-green  { color: var(--color-profit);  font-weight: 500; }
.risk-text-orange { color: var(--color-warning); font-weight: 500; }
.risk-text-red    { color: var(--color-loss);    font-weight: 500; }

.dte-text-red    { color: var(--color-loss);    font-weight: 500; }
.dte-text-orange { color: var(--color-warning); font-weight: 500; }
.dte-text-green  { color: var(--color-profit);  font-weight: 500; }

/* Aliases used in open_positions_dashboard */
.dte-red    { color: var(--color-loss);    font-weight: 700; }
.dte-orange { color: var(--color-warning); font-weight: 700; }
.dte-green  { color: var(--color-profit);  font-weight: 700; }

.short-delta-red    { color: var(--color-loss);    font-weight: 700; }
.short-delta-orange { color: var(--color-warning); font-weight: 700; }
.short-delta-green  { color: var(--color-profit);  font-weight: 700; }

/* ─────────────────────────────────────────────
   SORT INDICATOR
───────────────────────────────────────────── */
.sort-indicator {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.75em;
  line-height: 1;
}

/* ─────────────────────────────────────────────
   TEXT HELPERS
───────────────────────────────────────────── */
.text-deemphasized { color: var(--text-tertiary); }
.text-right-align  { text-align: right !important; }
.text-align-right  { text-align: right !important; }
.bold-text         { font-weight: bold; }
.description-col   { white-space: normal; min-width: 200px; }

/* ─────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────── */
.btn-primary {
  background-color: var(--color-action);
  color: var(--text-inverse);
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: var(--transition-std);
}
.btn-primary:hover { background-color: var(--color-action-hover); }

.btn-danger {
  background-color: var(--color-loss);
  color: #ffffff;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: var(--transition-std);
}
.btn-danger:hover { background-color: #cc1a10; }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-success {
  background-color: var(--color-profit);
  color: #ffffff;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: var(--transition-std);
}
.btn-success:hover { background-color: var(--color-profit-text); }

/* ─────────────────────────────────────────────
   FILTER BAR
───────────────────────────────────────────── */
.filter-bar-container {
  background-color: var(--bg-surface-alt);
  border-bottom: 1px solid var(--border-color);
  padding: 1rem;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.filter-group { display: flex; flex-direction: column; }
@media (min-width: 640px) {
  .filter-group { flex-direction: row; align-items: center; gap: 1rem; }
}

/* ─────────────────────────────────────────────
   RISK ANALYSIS ITEMS
───────────────────────────────────────────── */
.risk-analysis-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
}
.risk-analysis-item:last-child { border-bottom: none; }
.risk-analysis-item h4 { font-weight: 500; color: var(--text-primary); }
.risk-value { font-weight: 600; font-size: 1rem; color: var(--text-primary); font-family: var(--font-financial); }
.risk-label { font-size: 0.75rem; color: var(--text-secondary); margin-left: 0.25rem; }

/* ─────────────────────────────────────────────
   COMPARISON & VARIANCE COLUMNS
───────────────────────────────────────────── */
.comparison-col {
  background-color: var(--color-profit-bg);
  border-left: 2px solid var(--border-color);
}
.variance-col { font-size: 0.85em; color: var(--text-secondary); }

/* ─────────────────────────────────────────────
   CLICKABLE METRIC CELLS
───────────────────────────────────────────── */
.clickable-metric a {
  color: var(--color-action);
  text-decoration: underline;
  display: block;
  height: 100%;
  width: 100%;
}
.clickable-metric a:hover {
  color: var(--color-action-hover);
  background-color: var(--color-action-bg);
}

/* ─────────────────────────────────────────────
   ALERT / MESSAGE BANNERS
───────────────────────────────────────────── */
.alert-success {
  background-color: var(--color-profit-bg);
  color: var(--color-profit-text);
  border: 1px solid var(--color-profit-border);
  padding: 1rem; margin-bottom: 1rem;
  border-radius: var(--radius-md); font-size: 0.875rem;
}
.alert-error {
  background-color: var(--color-loss-bg);
  color: var(--color-loss-text);
  border: 1px solid var(--color-loss-border);
  padding: 1rem; margin-bottom: 1rem;
  border-radius: var(--radius-md); font-size: 0.875rem;
}
.alert-info {
  background-color: var(--color-action-bg);
  color: var(--color-action);
  border: 1px solid var(--color-action-border);
  padding: 1rem; margin-bottom: 1rem;
  border-radius: var(--radius-md); font-size: 0.875rem;
}

/* ─────────────────────────────────────────────
   SIDEBAR LOGO (legacy class names — keep for
   any template that still references them)
───────────────────────────────────────────── */
.sidebar-logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
}
.sidebar-logo-image {
  max-height: 80px;
  width: auto;
  display: block;
  margin: 0 auto;
}

/* ─────────────────────────────────────────────
   MOBILE MENU TOGGLE BUTTON
───────────────────────────────────────────── */
#menu-toggle {
  display: none;
  position: fixed;
  top: 14px; left: 14px;
  z-index: var(--z-modal);
  padding: 0.5rem;
  background: var(--bg-sidebar);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}
@media (max-width: 1023px) {
  #menu-toggle { display: block; }
}