/* ==========================================
   PORTFOLIO PAGE - PROFESSIONAL TRADING DASHBOARD
   v3.0 - Full Overhaul
   Theme: Dark Orange (CSS Variables from admin)
   ========================================== */

/* ==========================================
   LAYOUT OVERRIDE
   ========================================== */
.user-main.pf-main {
  max-width: 900px;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 768px) {
  .user-main.pf-main {
    max-width: 1100px;
    padding: 16px 32px 90px;
  }
}

/* ==========================================
   PAGE HEADER
   ========================================== */
.pf-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.pf-page-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}
.pf-page-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.pf-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* ==========================================
   BUTTONS (reusable)
   ========================================== */
.pf-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-orange-light) 100%);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all .25s;
  box-shadow: 0 4px 12px var(--primary-orange-glow, rgba(249,115,22,.3));
}
.pf-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--primary-orange-glow, rgba(249,115,22,.4));
}
.pf-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s;
  white-space: nowrap;
}
.pf-btn-secondary:hover {
  border-color: var(--primary-orange);
  color: var(--primary-orange);
}
.pf-btn-secondary svg { width: 14px; height: 14px; }

.pf-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s;
  white-space: nowrap;
}
.pf-export-btn:hover {
  background: var(--primary-orange);
  border-color: var(--primary-orange);
  color: #fff;
  box-shadow: 0 4px 12px var(--primary-orange-glow, rgba(249,115,22,.3));
}
.pf-export-btn svg { width: 14px; height: 14px; }

/* ==========================================
   SUMMARY CARDS (8-card grid)
   ========================================== */
.pf-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.pf-summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .25s, box-shadow .25s;
  min-width: 0;
}
.pf-summary-card:hover {
  border-color: var(--primary-orange-border, rgba(249,115,22,.3));
  box-shadow: 0 0 12px var(--primary-orange-dim, rgba(249,115,22,.08));
}
.pf-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pf-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pf-card-icon svg { width: 16px; height: 16px; }
.pf-card-icon.orange {
  background: var(--primary-orange-dim, rgba(249,115,22,.1));
  color: var(--primary-orange);
  border: 1px solid var(--primary-orange-border, rgba(249,115,22,.2));
}
.pf-card-icon.green {
  background: rgba(34,197,94,.1);
  color: var(--success-green);
  border: 1px solid rgba(34,197,94,.2);
}
.pf-card-icon.red {
  background: rgba(239,68,68,.1);
  color: var(--danger-red);
  border: 1px solid rgba(239,68,68,.2);
}
.pf-card-icon.blue {
  background: rgba(59,130,246,.1);
  color: #3b82f6;
  border: 1px solid rgba(59,130,246,.2);
}
.pf-card-icon.purple {
  background: rgba(139,92,246,.1);
  color: #8b5cf6;
  border: 1px solid rgba(139,92,246,.2);
}
.pf-card-icon.amber {
  background: rgba(245,158,11,.1);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,.2);
}
.pf-card-icon.cyan {
  background: rgba(6,182,212,.1);
  color: #06b6d4;
  border: 1px solid rgba(6,182,212,.2);
}
.pf-card-icon.emerald {
  background: rgba(16,185,129,.1);
  color: #10b981;
  border: 1px solid rgba(16,185,129,.2);
}
.pf-card-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.pf-card-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.pf-card-sub {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-card-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: fit-content;
}
.pf-card-badge.positive {
  color: var(--success-green);
  background: rgba(34,197,94,.12);
}
.pf-card-badge.negative {
  color: var(--danger-red);
  background: rgba(239,68,68,.12);
}
.pf-card-badge.neutral {
  color: var(--text-muted);
  background: var(--bg-elevated);
}
/* P/L card accent border */
.pf-summary-card.positive { border-color: rgba(34,197,94,.25); }
.pf-summary-card.negative { border-color: rgba(239,68,68,.25); }

/* ==========================================
   QUICK STATS BAR
   ========================================== */
.pf-quick-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pf-quick-stats::-webkit-scrollbar { display: none; }
.pf-stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 12px;
}
.pf-stat-label { color: var(--text-muted); font-weight: 500; }
.pf-stat-value { color: var(--text-primary); font-weight: 600; }
.pf-stat-divider {
  width: 1px;
  height: 16px;
  background: var(--border-color);
  flex-shrink: 0;
}

/* ==========================================
   HOLDINGS SECTION
   ========================================== */
.pf-holdings {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}
.pf-holdings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.pf-holdings-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.pf-holdings-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Search input */
.pf-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.pf-search-wrap svg {
  position: absolute;
  left: 10px;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  pointer-events: none;
}
.pf-search-input {
  padding: 6px 10px 6px 30px;
  background: var(--bg-elevated);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 12px;
  width: 160px;
  transition: border-color .2s;
  outline: none;
}
.pf-search-input::placeholder { color: var(--text-muted); }
.pf-search-input:focus { border-color: var(--primary-orange); }

/* Filter chips */
.pf-filter-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.pf-filter-chip {
  padding: 4px 10px;
  background: var(--bg-elevated);
  border: 1px solid transparent;
  border-radius: 16px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.pf-filter-chip:hover { color: var(--text-primary); border-color: var(--border-color); }
.pf-filter-chip.active {
  background: var(--primary-orange-dim, rgba(249,115,22,.1));
  color: var(--primary-orange);
  border-color: var(--primary-orange-border, rgba(249,115,22,.2));
}

/* Active sector filter banner */
.pf-active-filter {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--primary-orange-dim, rgba(249,115,22,.08));
  border: 1px solid var(--primary-orange-border, rgba(249,115,22,.2));
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--primary-orange);
}
.pf-active-filter.show { display: flex; }
.pf-active-filter .pf-filter-clear {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--primary-orange-border, rgba(249,115,22,.25));
  border-radius: 4px; color: var(--primary-orange);
  cursor: pointer; transition: all .2s; margin-left: auto; padding: 0;
}
.pf-active-filter .pf-filter-clear:hover { background: rgba(239,68,68,.1); border-color: var(--danger-red); color: var(--danger-red); }
.pf-active-filter .pf-filter-clear svg { width: 12px; height: 12px; }

/* Loading skeleton */
.pf-holdings-loading { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
.pf-skeleton-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border-color);
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, #4a4a52 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* Empty & error states */
.pf-holdings-empty,
.pf-holdings-error { text-align: center; padding: 32px 16px; }
.pf-empty-icon, .pf-error-icon { color: var(--text-muted); margin-bottom: 12px; }
.pf-empty-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.pf-empty-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 16px; }
.pf-error-msg { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }

/* ==========================================
   HOLDINGS TABLE (Desktop)
   ========================================== */
.pf-table-wrapper {
  overflow-x: auto;
  margin: 0 -16px;
  padding: 0 16px;
}
.pf-holdings-table {
  width: 100%;
  border-collapse: collapse;
}
.pf-holdings-table thead th {
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  cursor: default;
  user-select: none;
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}
.pf-holdings-table thead th.sortable { cursor: pointer; transition: color .2s; }
.pf-holdings-table thead th.sortable:hover { color: var(--primary-orange); }
.pf-holdings-table thead th.sortable.asc .sort-icon::after { content: ' ▲'; font-size: 9px; }
.pf-holdings-table thead th.sortable.desc .sort-icon::after { content: ' ▼'; font-size: 9px; }

.pf-holdings-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background .15s;
}
.pf-holdings-table tbody tr:hover { background: var(--bg-elevated); }
.pf-holdings-table tbody tr:last-child { border-bottom: none; }
.pf-holdings-table tbody td {
  padding: 10px;
  font-size: 12px;
  color: var(--text-primary);
  vertical-align: middle;
}

/* Stock info cell */
.stock-info { display: flex; align-items: center; gap: 8px; }
.stock-logo {
  width: 28px; height: 28px;
  border-radius: 6px; object-fit: cover; flex-shrink: 0;
}
.stock-logo-placeholder {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--primary-orange-dim, rgba(249,115,22,.1));
  border: 1px solid var(--primary-orange-border, rgba(249,115,22,.2));
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  color: var(--primary-orange); flex-shrink: 0;
}
.stock-details { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stock-code { font-weight: 600; color: var(--text-primary); font-size: 12px; }
.stock-code a { color: inherit; text-decoration: none; transition: color .2s; }
.stock-code a:hover { color: var(--primary-orange); }
.stock-name {
  font-size: 10px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;
}
.stock-sector {
  font-size: 9px; color: var(--primary-orange);
  font-weight: 500; cursor: pointer; transition: opacity .2s;
}
.stock-sector:hover { opacity: .7; text-decoration: underline; }

/* Quantity */
.quantity-cell { font-family: 'JetBrains Mono','Fira Code',monospace; }
.quantity-value { display: block; font-weight: 600; color: var(--text-primary); font-size: 12px; }
.quantity-lot { display: block; font-size: 10px; color: var(--text-muted); }

/* Price */
.price-cell { font-family: 'JetBrains Mono','Fira Code',monospace; font-size: 12px; font-weight: 500; }
.price-change { display: block; font-size: 10px; font-weight: 600; }
.price-change.positive { color: var(--success-green); }
.price-change.negative { color: var(--danger-red); }

/* Weight badge */
.weight-badge {
  display: inline-block; padding: 2px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 600;
  background: var(--bg-elevated); color: var(--text-secondary);
}

/* P/L */
.pl-cell { font-family: 'JetBrains Mono','Fira Code',monospace; }
.pl-value { display: block; font-weight: 600; font-size: 12px; }
.pl-value.positive { color: var(--success-green); }
.pl-value.negative { color: var(--danger-red); }
.pl-percent { display: block; font-size: 10px; font-weight: 600; }
.pl-percent.positive { color: var(--success-green); }
.pl-percent.negative { color: var(--danger-red); }

/* Today P/L */
.today-pl { font-family: 'JetBrains Mono','Fira Code',monospace; font-size: 11px; font-weight: 600; }
.today-pl.positive { color: var(--success-green); }
.today-pl.negative { color: var(--danger-red); }
.today-pl.neutral { color: var(--text-muted); }

/* Quick actions */
.pf-row-actions { display: flex; gap: 4px; justify-content: center; }
.pf-action-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-color);
  border-radius: 6px; color: var(--text-muted);
  cursor: pointer; transition: all .2s; padding: 0;
}
.pf-action-btn svg { width: 13px; height: 13px; }
.pf-action-btn:hover { border-color: var(--primary-orange); color: var(--primary-orange); }
.pf-action-btn.sell-btn { border-color: rgba(239,68,68,.3); color: var(--danger-red); }
.pf-action-btn.sell-btn:hover { background: var(--danger-red); border-color: var(--danger-red); color: #fff; }

/* Old quick sell button (backward compat) */
.quick-sell-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px;
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25);
  border-radius: 6px; color: var(--danger-red);
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: all .2s; white-space: nowrap;
}
.quick-sell-btn:hover { background: var(--danger-red); border-color: var(--danger-red); color: #fff; }

/* Text utilities */
.text-right { text-align: right; }
.text-center { text-align: center; }

/* ==========================================
   HOLDINGS CARDS (Mobile)
   ========================================== */
.holdings-cards {
  display: none; flex-direction: column; gap: 10px;
}
.holdings-card {
  background: var(--bg-elevated); border: 1px solid var(--border-color);
  border-radius: 12px; padding: 14px; transition: border-color .2s;
}
.holdings-card:hover { border-color: var(--primary-orange-border, rgba(249,115,22,.25)); }
.holdings-card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 12px;
}
.holdings-card-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.holdings-card-details { min-width: 0; }
.holdings-card-code { font-weight: 600; color: var(--text-primary); font-size: 13px; }
.holdings-card-code a { color: inherit; text-decoration: none; }
.holdings-card-code a:hover { color: var(--primary-orange); }
.holdings-card-name {
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.holdings-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.holdings-card-item { display: flex; flex-direction: column; gap: 1px; }
.holdings-card-label {
  font-size: 9px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .3px;
}
.holdings-card-value {
  font-size: 12px; font-weight: 500; color: var(--text-primary);
  font-family: 'JetBrains Mono','Fira Code',monospace;
}
.holdings-card-value.positive { color: var(--success-green); }
.holdings-card-value.negative { color: var(--danger-red); }
.holdings-card-actions {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border-color);
  display: flex; gap: 8px;
}
.holdings-card-actions .quick-sell-btn,
.holdings-card-actions .pf-action-btn { flex: 1; justify-content: center; }

/* ==========================================
   ANALYTICS TABS
   ========================================== */
.pf-analytics { margin-bottom: 20px; }
.pf-tabs {
  display: flex; gap: 4px;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 10px; padding: 4px; margin-bottom: 16px;
  overflow-x: auto;
}
.pf-tab {
  padding: 8px 16px; background: transparent; border: none; border-radius: 8px;
  color: var(--text-muted); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .2s; white-space: nowrap; flex-shrink: 0;
}
.pf-tab:hover { color: var(--text-primary); }
.pf-tab.active {
  background: var(--primary-orange); color: #fff;
  box-shadow: 0 2px 8px var(--primary-orange-glow, rgba(249,115,22,.3));
}
.pf-tab-content { display: none; }
.pf-tab-content.active { display: block; }

/* ==========================================
   CHARTS
   ========================================== */
.pf-charts-grid {
  display: grid; grid-template-columns: 1fr 1.5fr;
  gap: 14px; margin-bottom: 20px;
}
.pf-chart-section {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 14px; padding: 16px; transition: border-color .2s;
}
.pf-chart-section:hover { border-color: var(--primary-orange-border, rgba(249,115,22,.2)); }
.pf-chart-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.pf-chart-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.pf-chart-subtitle { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Period selector */
.pf-period-selector {
  display: flex; gap: 2px; background: var(--bg-elevated);
  padding: 3px; border-radius: 8px;
}
.period-btn {
  padding: 4px 10px; background: transparent; border: none; border-radius: 6px;
  color: var(--text-muted); font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all .2s;
}
.period-btn:hover { color: var(--text-primary); }
.period-btn.active {
  background: var(--primary-orange); color: #fff;
  box-shadow: 0 2px 6px var(--primary-orange-glow, rgba(249,115,22,.25));
}

/* Chart view toggle */
.pf-view-toggle {
  display: flex; gap: 2px; background: var(--bg-elevated);
  padding: 3px; border-radius: 8px;
}
.pf-view-btn {
  padding: 4px 10px; background: transparent; border: none; border-radius: 6px;
  color: var(--text-muted); font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all .2s;
}
.pf-view-btn:hover { color: var(--text-primary); }
.pf-view-btn.active { background: var(--primary-orange); color: #fff; }

/* Chart containers */
.pf-chart-container { position: relative; min-height: 240px; }
.pf-chart-container-line { min-height: 260px; }
.pf-chart-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.pf-chart-skeleton-circle {
  width: 160px; height: 160px; border-radius: 50%;
  background: conic-gradient(var(--bg-elevated) 0deg 90deg, var(--border-color) 90deg 180deg, var(--bg-elevated) 180deg 270deg, var(--border-color) 270deg 360deg);
  animation: shimmer 1.5s infinite;
}
.pf-chart-skeleton-line {
  width: 100%; height: 160px; border-radius: 8px;
  background: linear-gradient(90deg, var(--bg-elevated) 25%, #4a4a52 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite;
}
.pf-chart-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 12px;
}

/* Chart legend */
.pf-chart-legend {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border-color);
}
.pf-performance-legend { justify-content: center; }
.pf-legend-item, .pf-chart-legend .legend-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-muted);
  padding: 3px 6px; border-radius: 6px;
  cursor: pointer; transition: all .15s;
}
.pf-legend-item:hover, .pf-chart-legend .legend-item:hover {
  background: var(--bg-elevated); color: var(--text-primary);
}
.pf-legend-color, .pf-chart-legend .legend-color {
  width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; display: inline-block;
}
.pf-chart-legend .legend-label { font-size: 11px; }

/* ==========================================
   ANALYTICS PANELS
   ========================================== */
.pf-panels-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin-bottom: 20px;
}
.pf-panel {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 14px; padding: 16px;
}
.pf-panel-title {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
}
.pf-panel-title svg { width: 14px; height: 14px; color: var(--primary-orange); }

/* Sector breakdown table */
.pf-sector-table { width: 100%; border-collapse: collapse; }
.pf-sector-table th {
  padding: 6px 8px; font-size: 9px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px;
  border-bottom: 1px solid var(--border-color); text-align: left;
}
.pf-sector-table td {
  padding: 6px 8px; font-size: 11px; color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}
.pf-sector-table tr:last-child td { border-bottom: none; }
.pf-sector-table .text-right { text-align: right; }
.pf-sector-bar { height: 4px; border-radius: 2px; background: var(--bg-elevated); overflow: hidden; margin-top: 2px; }
.pf-sector-bar-fill { height: 100%; border-radius: 2px; background: var(--primary-orange); transition: width .3s; }

/* Metric rows */
.pf-metric-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--border-color);
}
.pf-metric-row:last-child { border-bottom: none; }
.pf-metric-label { font-size: 11px; color: var(--text-muted); }
.pf-metric-value { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.pf-metric-value.positive { color: var(--success-green); }
.pf-metric-value.negative { color: var(--danger-red); }

/* Risk gauge */
.pf-gauge { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; }
.pf-gauge-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; font-weight: 600; letter-spacing: .3px; }
.pf-gauge-value { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.pf-gauge-bar { width: 100%; height: 6px; background: var(--bg-elevated); border-radius: 3px; overflow: hidden; }
.pf-gauge-fill { height: 100%; border-radius: 3px; transition: width .4s; }
.pf-gauge-desc { font-size: 10px; color: var(--text-muted); }

/* ==========================================
   INSIGHTS & HEALTH SCORE
   ========================================== */
.pf-insights-section { margin-bottom: 20px; }
.pf-health-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 14px; padding: 20px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 20px;
}
.pf-health-ring { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.pf-health-ring svg { width: 80px; height: 80px; transform: rotate(-90deg); }
.pf-health-ring .ring-bg { fill: none; stroke: var(--bg-elevated); stroke-width: 6; }
.pf-health-ring .ring-fg {
  fill: none; stroke: var(--primary-orange); stroke-width: 6;
  stroke-linecap: round; transition: stroke-dashoffset .6s;
}
.pf-health-score {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: var(--text-primary); line-height: 1;
}
.pf-health-score small { font-size: 9px; color: var(--text-muted); font-weight: 500; margin-top: 2px; }
.pf-health-details { flex: 1; min-width: 0; }
.pf-health-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.pf-health-bars { display: flex; flex-direction: column; gap: 4px; }
.pf-health-bar-item { display: flex; align-items: center; gap: 8px; }
.pf-health-bar-label { font-size: 10px; color: var(--text-muted); width: 80px; flex-shrink: 0; }
.pf-health-bar { flex: 1; height: 4px; background: var(--bg-elevated); border-radius: 2px; overflow: hidden; }
.pf-health-bar-fill { height: 100%; border-radius: 2px; transition: width .4s; }
.pf-health-bar-value { font-size: 10px; font-weight: 600; color: var(--text-secondary); width: 28px; text-align: right; flex-shrink: 0; }

/* Insight cards */
.pf-insights-list { display: flex; flex-direction: column; gap: 8px; }
.pf-insight-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: 10px;
  font-size: 12px; color: var(--text-secondary); line-height: 1.5;
}
.pf-insight-icon {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; flex-shrink: 0; font-size: 12px;
}
.pf-insight-icon.tip { background: rgba(59,130,246,.1); color: #3b82f6; }
.pf-insight-icon.warn { background: rgba(245,158,11,.1); color: #f59e0b; }
.pf-insight-icon.good { background: rgba(34,197,94,.1); color: var(--success-green); }
.pf-insight-icon.alert { background: rgba(239,68,68,.1); color: var(--danger-red); }

/* ==========================================
   TOOLS SECTION (collapsible)
   ========================================== */
.pf-tools-section { margin-bottom: 20px; }
.pf-section-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: 10px;
  color: var(--text-primary); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .2s;
}
.pf-section-toggle:hover { border-color: var(--primary-orange); }
.pf-section-toggle svg { width: 16px; height: 16px; color: var(--text-muted); transition: transform .2s; }
.pf-section-toggle.open svg { transform: rotate(180deg); }
.pf-tools-content { display: none; margin-top: 10px; }
.pf-tools-content.show { display: block; }
.pf-tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pf-tool-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 14px; padding: 16px;
}
.pf-tool-title {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.pf-tool-title svg { width: 14px; height: 14px; color: var(--primary-orange); }

/* Goal tracker */
.pf-goal-progress { margin-top: 8px; }
.pf-goal-bar { height: 8px; background: var(--bg-elevated); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.pf-goal-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-orange), var(--primary-orange-light));
  border-radius: 4px; transition: width .4s;
}
.pf-goal-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); }
.pf-goal-status { font-size: 11px; font-weight: 600; margin-top: 4px; }
.pf-goal-status.on-track { color: var(--success-green); }
.pf-goal-status.behind { color: var(--danger-red); }

/* ==========================================
   TOP MOVERS
   ========================================== */
.pf-movers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pf-mover-list { display: flex; flex-direction: column; gap: 6px; }
.pf-mover-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.pf-mover-rank {
  width: 18px; height: 18px; border-radius: 4px;
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pf-mover-rank.gainer { background: rgba(34,197,94,.1); color: var(--success-green); }
.pf-mover-rank.loser { background: rgba(239,68,68,.1); color: var(--danger-red); }
.pf-mover-code { font-weight: 600; color: var(--text-primary); flex-shrink: 0; width: 42px; }
.pf-mover-bar { flex: 1; height: 4px; background: var(--bg-elevated); border-radius: 2px; overflow: hidden; }
.pf-mover-bar-fill { height: 100%; border-radius: 2px; }
.pf-mover-bar-fill.positive { background: var(--success-green); }
.pf-mover-bar-fill.negative { background: var(--danger-red); }
.pf-mover-pct { font-size: 11px; font-weight: 600; width: 48px; text-align: right; flex-shrink: 0; }
.pf-mover-pct.positive { color: var(--success-green); }
.pf-mover-pct.negative { color: var(--danger-red); }

/* ==========================================
   TREEMAP
   ========================================== */
.pf-treemap { display: flex; flex-wrap: wrap; gap: 2px; min-height: 200px; }
.pf-treemap-item {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; border-radius: 6px; padding: 6px;
  font-size: 10px; font-weight: 600; color: #fff;
  cursor: pointer; transition: opacity .2s; overflow: hidden; min-width: 40px;
}
.pf-treemap-item:hover { opacity: .85; }
.pf-treemap-item .tm-code { font-size: 11px; font-weight: 700; }
.pf-treemap-item .tm-pct { font-size: 9px; opacity: .8; }

/* ==========================================
   EXPORT MODAL
   ========================================== */
.pf-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  z-index: 1060; padding: 20px;
}
.pf-modal-overlay.show { display: flex; }
.pf-modal {
  background: var(--bg-modal, #27272a);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px; max-width: 400px; width: 100%; max-height: 85vh; overflow-y: auto;
}
.pf-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border-color);
}
.pf-modal-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.pf-modal-close {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-color);
  border-radius: 6px; color: var(--text-muted);
  cursor: pointer; transition: all .2s; padding: 0;
}
.pf-modal-close:hover { border-color: var(--danger-red); color: var(--danger-red); }
.pf-modal-close svg { width: 14px; height: 14px; }
.pf-modal-body { padding: 16px; }
.pf-export-options { display: flex; flex-direction: column; gap: 8px; }
.pf-export-option {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; background: var(--bg-elevated);
  border: 1px solid transparent; border-radius: 10px;
  cursor: pointer; transition: all .2s;
}
.pf-export-option:hover { border-color: var(--primary-orange); }
.pf-export-option-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 16px;
}
.pf-export-option-icon.pdf { background: rgba(239,68,68,.1); color: var(--danger-red); }
.pf-export-option-icon.csv { background: rgba(34,197,94,.1); color: var(--success-green); }
.pf-export-option-icon.print { background: rgba(59,130,246,.1); color: #3b82f6; }
.pf-export-option-text { flex: 1; }
.pf-export-option-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.pf-export-option-desc { font-size: 10px; color: var(--text-muted); margin-top: 1px; }

/* ==========================================
   UTILITIES
   ========================================== */
.hidden { display: none !important; }

/* ==========================================
   RESPONSIVE - TABLET
   ========================================== */
@media (max-width: 1024px) {
  .pf-summary { grid-template-columns: repeat(2, 1fr); }
  .pf-charts-grid { grid-template-columns: 1fr; }
  .pf-panels-grid { grid-template-columns: 1fr; }
  .pf-tools-grid { grid-template-columns: 1fr; }
  .pf-movers-grid { grid-template-columns: 1fr; }
}

/* ==========================================
   RESPONSIVE - MOBILE
   ========================================== */
@media (max-width: 768px) {
  .user-main.pf-main { padding: 0 12px 100px; }
  .pf-page-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .pf-header-actions { justify-content: flex-end; }
  .pf-summary { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pf-summary-card { padding: 12px; }
  .pf-card-value { font-size: 15px; }
  .pf-quick-stats { flex-wrap: nowrap; gap: 12px; }
  .pf-holdings { padding: 12px; border-radius: 12px; }
  .pf-holdings-header { flex-direction: column; align-items: stretch; gap: 8px; }
  .pf-holdings-controls { flex-wrap: wrap; }
  .pf-search-input { width: 100%; }
  .pf-table-wrapper { display: none !important; }
  .holdings-cards { display: flex !important; }
  .holdings-cards.hidden { display: none !important; }
  .pf-chart-section { padding: 12px; }
  .pf-chart-container { min-height: 200px; }
  .pf-chart-container-line { min-height: 220px; }
  .pf-chart-header { flex-direction: column; align-items: stretch; gap: 8px; }
  .pf-period-selector { width: 100%; justify-content: center; }
  .period-btn { flex: 1; text-align: center; }
  .pf-health-card { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .pf-health-bar-label { width: 70px; }
  .pf-tabs { gap: 2px; padding: 3px; }
  .pf-tab { padding: 6px 12px; font-size: 11px; }
}

/* ==========================================
   RESPONSIVE - SMALL MOBILE
   ========================================== */
@media (max-width: 480px) {
  .pf-page-title { font-size: 18px; }
  .pf-summary { grid-template-columns: repeat(2, 1fr); }
  .pf-card-value { font-size: 14px; }
  .pf-card-title { font-size: 9px; }
}

/* ==========================================
   PRINT
   ========================================== */
@media print {
  .pf-summary { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .pf-summary-card { border: 1px solid #ddd; page-break-inside: avoid; }
  .pf-holdings { page-break-inside: avoid; }
  .holdings-cards { display: none !important; }
  .pf-table-wrapper { display: block !important; }
  .pf-charts-grid { page-break-before: always; grid-template-columns: 1fr 1fr; }
  .pf-chart-section { page-break-inside: avoid; }
  .pf-chart-container { min-height: auto; }
  canvas { max-width: 100%; height: auto !important; }
  .pf-tabs, .pf-tools-section, .pf-modal-overlay { display: none !important; }
}