/* ================================================================
   IPO Portfolio Management Dashboard — Premium Theme
   Brand Colors: Primary #103d3a | Secondary #cae2a5
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── CSS Variables ─────────────────────────────────────────────── */
:root {
  --clr-primary:        #103d3a;
  --clr-primary-light:  #185450;
  --clr-primary-dark:   #0a2624;
  --clr-primary-xdark:  #061918;
  --clr-secondary:      #cae2a5;
  --clr-secondary-dark: #aecf7e;
  --clr-secondary-light:#ddf0bc;
  --clr-accent:         #4ade80;
  --clr-profit:         #22c55e;
  --clr-loss:           #ef4444;
  --clr-warning:        #f59e0b;
  --clr-info:           #3b82f6;
  --clr-surface:        #ffffff;
  --clr-surface-2:      #f8fffe;
  --clr-surface-3:      #f1faf7;
  --clr-border:         #e2f0e8;
  --clr-border-2:       #c9e8d4;
  --clr-text-primary:   #0f2f2d;
  --clr-text-secondary: #4a7a74;
  --clr-text-muted:     #8ab5af;

  /* Neutral / slate scale used by investment & withdraw fragments */
  --clr-slate-50:       #f8fafc;
  --clr-slate-100:      #f1f5f9;
  --clr-slate-400:      #cbd5e1;
  --clr-slate-500:      #64748b;
  --clr-slate-600:      #475569;
  --clr-slate-700:      #334155;

  /* Status badges */
  --clr-success-bg:     #dcfce7;
  --clr-success-bg-2:   #f0fdf4;
  --clr-success-border: #bbf7d0;
  --clr-success-text:   #16a34a;
  --clr-success-text-2: #166534;
  --clr-warning-bg:     #fef3c7;
  --clr-warning-text:   #d97706;
  --clr-danger-bg:      #fef2f2;
  --clr-danger-border:  #fecaca;
  --clr-danger-text:    #991b1b;

  /* Page background + misc surfaces */
  --clr-body-bg:        linear-gradient(135deg, #f0faf5 0%, #e8f5ee 50%, #f5faf8 100%);
  --clr-overlay:        rgba(16, 61, 58, 0.6);
  --clr-modal-shadow:   rgba(0, 0, 0, 0.07);

  --shadow-sm:          0 2px 8px rgba(16, 61, 58, 0.08);
  --shadow-md:          0 4px 20px rgba(16, 61, 58, 0.12);
  --shadow-lg:          0 8px 40px rgba(16, 61, 58, 0.16);
  --shadow-xl:          0 16px 60px rgba(16, 61, 58, 0.20);
  --radius-sm:          8px;
  --radius-md:          12px;
  --radius-lg:          16px;
  --radius-xl:          24px;
  --transition:         all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --font:               'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Text-only alias for --clr-primary. Headings/labels/values across
     the app use var(--clr-primary) for text color, which is a dark
     green — readable on light surfaces but not on dark ones. Use
     --clr-heading for TEXT so it can flip independently while
     --clr-primary itself stays constant for icons/buttons/borders. */
  --clr-heading:        var(--clr-primary);
}

/* ── Dark Mode Overrides ────────────────────────────────────────
   Toggled by setting data-theme="dark" on <html>. Only surface,
   text, border and status-badge tokens change — brand greens
   (primary/secondary/accent) stay constant for identity. ────── */
[data-theme="dark"] {
  --clr-surface:        #142826;
  --clr-surface-2:      #0f201e;
  --clr-surface-3:      #17302d;
  --clr-border:         #1f3d39;
  --clr-border-2:       #234942;
  --clr-text-primary:   #eaf3ef;
  --clr-text-secondary: #9fc4bc;
  --clr-text-muted:     #6f948c;

  --clr-slate-50:       #17302d;
  --clr-slate-100:      #1f3d39;
  --clr-slate-400:      #4c6b64;
  --clr-slate-500:      #8aa9a1;
  --clr-slate-600:      #b7d2cb;
  --clr-slate-700:      #d6e8e3;

  --clr-success-bg:     rgba(34, 197, 94, 0.16);
  --clr-success-bg-2:   rgba(34, 197, 94, 0.10);
  --clr-success-border: rgba(34, 197, 94, 0.35);
  --clr-success-text:   #4ade80;
  --clr-success-text-2: #86efac;
  --clr-warning-bg:     rgba(245, 158, 11, 0.16);
  --clr-warning-text:   #fbbf24;
  --clr-danger-bg:      rgba(239, 68, 68, 0.16);
  --clr-danger-border:  rgba(239, 68, 68, 0.35);
  --clr-danger-text:    #f87171;

  --clr-body-bg:        linear-gradient(135deg, #081715 0%, #0a1e1b 50%, #081513 100%);
  --clr-overlay:        rgba(0, 0, 0, 0.65);
  --clr-modal-shadow:   rgba(0, 0, 0, 0.45);

  --shadow-sm:          0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md:          0 4px 20px rgba(0, 0, 0, 0.30);
  --shadow-lg:          0 8px 40px rgba(0, 0, 0, 0.35);
  --shadow-xl:          0 16px 60px rgba(0, 0, 0, 0.40);

  --clr-heading:        var(--clr-text-primary);
}

[data-theme="dark"] body {
  background: var(--clr-body-bg) !important;
}

[data-theme="dark"] img,
[data-theme="dark"] .navbar-brand-img {
  filter: brightness(0.92);
}

/* ── Theme Toggle Switch ────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 52px;
  height: 28px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--clr-border-2);
  background: var(--clr-surface-3);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.theme-toggle:hover { border-color: var(--clr-primary); }

.theme-toggle .theme-toggle-icon {
  font-size: 0.85rem;
  line-height: 1;
  z-index: 1;
  color: var(--clr-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
}

.theme-toggle .theme-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-light));
  box-shadow: 0 2px 6px rgba(16, 61, 58, 0.4);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .theme-toggle .theme-toggle-thumb {
  transform: translateX(24px);
  background: linear-gradient(135deg, var(--clr-secondary-dark), var(--clr-secondary));
}

/* ── Global Reset & Base ───────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  font-family: var(--font) !important;
  background: var(--clr-body-bg) !important;
  min-height: 100vh;
  color: var(--clr-text-primary);
  transition: background 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font) !important; }

/* ── Sidebar ────────────────────────────────────────────────────── */
#sidenav-main {
  background: linear-gradient(180deg, var(--clr-primary) 0%, var(--clr-primary-dark) 60%, var(--clr-primary-xdark) 100%) !important;
  border-right: 1px solid rgba(202, 226, 165, 0.15) !important;
  box-shadow: 4px 0 30px rgba(16, 61, 58, 0.35) !important;
  backdrop-filter: blur(10px);
}

#sidenav-main .sidenav-header {
  /*padding: 1.5rem 1rem 1rem;
  border-bottom: 1px solid rgba(202, 226, 165, 0.15);
  margin-bottom: 0.5rem;*/
}

#sidenav-main .navbar-brand-img {
  max-height: 52px;
  filter: brightness(1.1) drop-shadow(0 2px 8px rgba(202,226,165,0.3));
  transition: var(--transition);
}
.logo-h a img {
	width:230px;
}
.Investment-card {
    background: var(--clr-surface);
    border-radius: 12px;
    padding: 2.5rem 2rem 2rem;
    position: relative;
    /*box-shadow: 0 4px 24px var(--clr-modal-shadow);*/
    margin-bottom: 2rem;
}
.investments-table-wrapper {
    background: var(--clr-surface);
    border-radius: 12px;
    padding: 1.5rem;
    /*box-shadow: 0 4px 24px var(--clr-modal-shadow);*/
    overflow-x: auto;
}
.withdraw-card {
    background: var(--clr-surface);
    border-radius: 12px;
    padding: 2.5rem 2rem 2rem;
    position: relative;
    box-shadow: 0 4px 24px var(--clr-modal-shadow);
}

.sidenav-section-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(202, 226, 165, 0.55);
  text-transform: uppercase;
  padding: 1rem 1.25rem 0.35rem;
}

.nav-item-custom .nav-link-custom {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1.25rem;
  margin: 0.12rem 0.75rem;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.78) !important;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition);
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

.nav-item-custom .nav-link-custom::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--clr-secondary);
  border-radius: 0 3px 3px 0;
  transform: scaleY(0);
  transition: var(--transition);
}

.nav-item-custom .nav-link-custom:hover {
  background: rgba(202, 226, 165, 0.12);
  color: var(--clr-secondary) !important;
  border-color: rgba(202, 226, 165, 0.15);
  transform: translateX(3px);
}

.nav-item-custom .nav-link-custom:hover::before { transform: scaleY(1); }

.nav-item-custom .nav-link-custom.active {
  background: linear-gradient(135deg, rgba(202, 226, 165, 0.2) 0%, rgba(202, 226, 165, 0.1) 100%);
  color: var(--clr-secondary) !important;
  border-color: rgba(202, 226, 165, 0.25);
  font-weight: 600;
}

.nav-item-custom .nav-link-custom.active::before { transform: scaleY(1); }

.nav-icon-custom {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  background: rgba(255,255,255,0.07);
  transition: var(--transition);
  flex-shrink: 0;
}

.nav-item-custom .nav-link-custom:hover .nav-icon-custom,
.nav-item-custom .nav-link-custom.active .nav-icon-custom {
  background: rgba(202, 226, 165, 0.2);
}

.nav-divider {
  border: none;
  border-top: 1px solid rgba(202, 226, 165, 0.12);
  margin: 0.5rem 1rem;
}

/* ── Top Navbar ─────────────────────────────────────────────────── */
#navbarBlur {
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(202, 226, 165, 0.3) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: var(--radius-md) !important;
}

.navbar-main .navbar-brand h6 { color: var(--clr-heading) !important; font-weight: 700; }

.navbar-main .material-icons {
  color: var(--clr-heading) !important;
  transition: var(--transition);
}
.navbar-main .material-icons:hover { color: var(--clr-secondary-dark) !important; transform: scale(1.1); }

/* ── Page Title Bar ─────────────────────────────────────────────── */
.page-header-text {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--clr-heading);
  letter-spacing: -0.02em;
}

/* ── Stat Cards ─────────────────────────────────────────────────── */
.stat-card {
  background: var(--clr-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  overflow: visible;
  position: relative;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--clr-secondary);
}

.stat-card .card-header {
  background: transparent !important;
  border-bottom: none !important;
  padding: 1rem 1.25rem 0.5rem;
}

.stat-card .card-footer {
  background: var(--clr-surface-3) !important;
  border-top: 1px solid var(--clr-border) !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 0.5rem 1.25rem !important;
}

.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -18px;
  left: 1.25rem;
  box-shadow: var(--shadow-md);
  font-size: 1.3rem;
  color: #fff;
  transition: var(--transition);
}

.stat-card:hover .stat-icon { transform: scale(1.08) rotate(-2deg); }

.stat-icon-primary { background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-light) 100%); }
.stat-icon-secondary { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.stat-icon-info { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.stat-icon-warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.stat-icon-profit { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.stat-icon-loss { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.stat-icon-teal { background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%); }

.stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--clr-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.2rem;
}

.stat-value {
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--clr-heading);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.stat-sub {
  font-size: 0.7rem;
  color: var(--clr-text-muted);
  font-weight: 500;
}

.stat-badge-profit { color: var(--clr-profit); font-weight: 700; font-size: 0.72rem; }
.stat-badge-loss { color: var(--clr-loss); font-weight: 700; font-size: 0.72rem; }

/* Number counter animation */
.count-up { display: inline-block; }

/* ── Section Panels (tabs) ──────────────────────────────────────── */
.dashboard-section {
  animation: fadeInUp 0.35s ease both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Premium Cards ──────────────────────────────────────────────── */
.premium-card {
  background: var(--clr-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  overflow: hidden;
}

.premium-card:hover { box-shadow: var(--shadow-md); }

.premium-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--clr-border);
  background: linear-gradient(135deg, var(--clr-surface-2) 0%, var(--clr-surface) 100%);
}

.premium-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-light));
  color: var(--clr-secondary);
  font-size: 1rem;
  flex-shrink: 0;
}

.premium-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--clr-heading);
  margin: 0;
  letter-spacing: -0.01em;
}

.premium-card-subtitle {
  font-size: 0.72rem;
  color: var(--clr-text-muted);
  margin: 0;
}

.premium-card-body { padding: 1.25rem 1.5rem; }

/* ── Portfolio Table ─────────────────────────────────────────────── */
.portfolio-table-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
}

.portfolio-table-wrap .table {
  margin-bottom: 0;
  font-family: var(--font) !important;
  font-size: 0.82rem;
}

.portfolio-table-wrap thead th {
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-light) 100%) !important;
  color: var(--clr-secondary) !important;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none !important;
  padding: 0.85rem 1rem;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

.portfolio-table-wrap thead th:first-child { border-radius: 0; }

.portfolio-table-wrap tbody tr {
  border-bottom: 1px solid var(--clr-border) !important;
  transition: var(--transition);
}

.portfolio-table-wrap tbody tr:hover {
  background-color: var(--clr-surface-3) !important;
  transform: scale(1.001);
}

.portfolio-table-wrap tbody td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  border: none !important;
}

.portfolio-table-wrap tbody tr:last-child { border-bottom: none !important; }

.symbol-cell { display: flex; align-items: center; gap: 0.75rem; }

.symbol-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.symbol-avatar:hover { border-color: var(--clr-secondary); transform: scale(1.1); }

.symbol-name { font-weight: 700; font-size: 0.83rem; color: var(--clr-heading); }
.symbol-company { font-size: 0.7rem; color: var(--clr-text-muted); }

.action-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.action-buy { background: rgba(34,197,94,0.12); color: #16a34a; border: 1px solid rgba(34,197,94,0.25); }
.action-sell { background: rgba(239,68,68,0.12); color: #dc2626; border: 1px solid rgba(239,68,68,0.25); }
.action-hold { background: rgba(59,130,246,0.12); color: #2563eb; border: 1px solid rgba(59,130,246,0.25); }

.pl-positive {
  color: var(--clr-profit) !important;
  /*font-weight: 700;
  font-size: 0.82rem;*/
}

.pl-negative {
  color: var(--clr-loss) !important;
  font-weight: 700;
  font-size: 0.82rem;
}

.pl-badge-positive {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 0.22rem 0.55rem;
  background: rgba(34,197,94,0.1);
  color: #16a34a;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid rgba(34,197,94,0.2);
}

.pl-badge-negative {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 0.22rem 0.55rem;
  background: rgba(239,68,68,0.1);
  color: #dc2626;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid rgba(239,68,68,0.2);
}

.price-text { font-weight: 600; font-size: 0.83rem; color: var(--clr-text-primary); }
.price-sub { font-size: 0.68rem; color: var(--clr-text-muted); }

/* DataTables overrides */
.dataTables_wrapper { padding: 0; font-family: var(--font) !important; }

.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--clr-border-2);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  outline: none;
  transition: var(--transition);
  background: var(--clr-surface-2);
  color: var(--clr-text-primary);
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(16,61,58,0.1);
}

.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--clr-border-2);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  color: var(--clr-text-primary);
  background: var(--clr-surface-2);
}

.dataTables_wrapper .dataTables_info {
  font-size: 0.78rem;
  color: var(--clr-text-muted);
  padding: 0.75rem 1.5rem;
}

.dataTables_wrapper .dataTables_paginate {
  padding: 0.75rem 1.5rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  font-size: 0.78rem;
  padding: 0.3rem 0.65rem !important;
  margin: 0 2px;
  transition: var(--transition);
  border: 1px solid var(--clr-border) !important;
  background: var(--clr-surface) !important;
  color: var(--clr-text-secondary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--clr-primary) !important;
  color: var(--clr-secondary) !important;
  border-color: var(--clr-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--clr-primary) !important;
  color: var(--clr-secondary) !important;
  border-color: var(--clr-primary) !important;
  font-weight: 700;
}

.dt-buttons .btn {
  background: var(--clr-surface) !important;
  border: 1px solid var(--clr-border-2) !important;
  color: var(--clr-heading) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  transition: var(--transition);
  font-family: var(--font) !important;
}

.dt-buttons .btn:hover {
  background: var(--clr-primary) !important;
  color: var(--clr-secondary) !important;
  border-color: var(--clr-primary) !important;
}

/* Table toolbar */
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface-2);
}

.table-search-input {
  border: 1px solid var(--clr-border-2);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.75rem 0.4rem 2rem;
  font-size: 0.8rem;
  width: 200px;
  background: var(--clr-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234a7a74' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 0.6rem center;
  transition: var(--transition);
  color: var(--clr-text-primary);
}

.table-search-input:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(16,61,58,0.1);
}

/* ── Charts Section ─────────────────────────────────────────────── */
.chart-card {
  background: var(--clr-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition);
}

.chart-card:hover { box-shadow: var(--shadow-md); }

.chart-card-header {
  padding: 1.1rem 1.5rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--clr-border);
  background: linear-gradient(135deg, var(--clr-surface-2) 0%, var(--clr-surface) 100%);
}

.chart-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--clr-heading);
  margin: 0;
}

.chart-card-subtitle {
  font-size: 0.7rem;
  color: var(--clr-text-muted);
  margin: 0;
}

.chart-card-body { padding: 1rem; }

.chart-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
}

.chart-badge-up { background: rgba(34,197,94,0.12); color: #16a34a; }
.chart-badge-down { background: rgba(239,68,68,0.12); color: #dc2626; }
.chart-badge-neutral { background: rgba(16,61,58,0.1); color: var(--clr-heading); }

/* ── Account Activity Timeline ──────────────────────────────────── */
.activity-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface-2);
}

.activity-filter-btn {
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--clr-border-2);
  background: var(--clr-surface);
  color: var(--clr-text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.activity-filter-btn:hover,
.activity-filter-btn.active {
  background: var(--clr-primary);
  color: var(--clr-secondary);
  border-color: var(--clr-primary);
}

.activity-timeline {
  padding: 1.5rem;
  position: relative;
}

.activity-timeline::before {
  content: '';
  position: absolute;
  left: 2.85rem;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--clr-secondary) 0%, var(--clr-border) 100%);
  border-radius: 2px;
}

.activity-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
  position: relative;
  animation: fadeInLeft 0.4s ease both;
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

.activity-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--clr-surface), 0 0 0 5px var(--clr-border);
  z-index: 1;
  position: relative;
}

.activity-icon-purchase { background: linear-gradient(135deg,#22c55e,#16a34a); color:#fff; }
.activity-icon-dividend { background: linear-gradient(135deg,#3b82f6,#1d4ed8); color:#fff; }
.activity-icon-withdrawal { background: linear-gradient(135deg,#f59e0b,#d97706); color:#fff; }
.activity-icon-deposit { background: linear-gradient(135deg,#8b5cf6,#7c3aed); color:#fff; }
.activity-icon-allocation { background: linear-gradient(135deg,var(--clr-primary),var(--clr-primary-light)); color:var(--clr-secondary); }
.activity-icon-system { background: linear-gradient(135deg,#6b7280,#4b5563); color:#fff; }
.activity-icon-profit { background: linear-gradient(135deg,#10b981,#059669); color:#fff; }
.activity-icon-sale { background: linear-gradient(135deg,#ef4444,#dc2626); color:#fff; }

.activity-content {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.1rem;
  flex: 1;
  transition: var(--transition);
}

.activity-content:hover {
  border-color: var(--clr-secondary-dark);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}

.activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.activity-type-badge {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
}

.activity-time {
  font-size: 0.68rem;
  color: var(--clr-text-muted);
}

.activity-desc { font-size: 0.8rem; color: var(--clr-text-primary); font-weight: 500; margin-bottom: 0.4rem; }

.activity-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.activity-meta-item { font-size: 0.7rem; color: var(--clr-text-muted); }
.activity-meta-item strong { color: var(--clr-text-secondary); }

.activity-status {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
}

.status-completed { background: rgba(34,197,94,0.12); color: #16a34a; }
.status-pending { background: rgba(245,158,11,0.12); color: #d97706; }
.status-processing { background: rgba(59,130,246,0.12); color: #2563eb; }

/* ── Dashboard Widgets ──────────────────────────────────────────── */
/* Portfolio Performance Summary */
.perf-bar-wrap {
  background: var(--clr-surface-3);
  border-radius: 100px;
  height: 15px;
  overflow: hidden;
  margin: 0.5rem 0;
}

.perf-bar-fill {
  font-size:0.7rem;
  padding: 0 10px;
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-secondary-dark));
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Watchlist */
.watchlist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--clr-border);
  transition: var(--transition);
}

.watchlist-item:last-child { border-bottom: none; }
.watchlist-item:hover { background: var(--clr-surface-3); margin: 0 -1rem; padding: 0.6rem 1rem; border-radius: 8px; }

.watchlist-ticker { font-weight: 700; font-size: 0.82rem; color: var(--clr-heading); }
.watchlist-name { font-size: 0.68rem; color: var(--clr-text-muted); }
.watchlist-price { font-weight: 700; font-size: 0.85rem; color: var(--clr-text-primary); text-align: right; }
.watchlist-change-pos { font-size: 0.7rem; color: var(--clr-profit); font-weight: 600; }
.watchlist-change-neg { font-size: 0.7rem; color: var(--clr-loss); font-weight: 600; }

/* News Widget */
.news-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--clr-border);
  transition: var(--transition);
  cursor: pointer;
}

.news-item:last-child { border-bottom: none; }
.news-item:hover { background: var(--clr-surface-3); margin: 0 -1rem; padding: 0.75rem 1rem; border-radius: 8px; }

.news-headline { font-size: 0.8rem; font-weight: 600; color: var(--clr-text-primary); margin-bottom: 0.25rem; line-height: 1.35; }
.news-meta { display: flex; align-items: center; gap: 0.5rem; }
.news-source { font-size: 0.67rem; font-weight: 700; color: var(--clr-heading); }
.news-date { font-size: 0.67rem; color: var(--clr-text-muted); }
.news-tag { font-size: 0.62rem; padding: 0.12rem 0.4rem; border-radius: 4px; background: rgba(16,61,58,0.08); color: var(--clr-heading); font-weight: 600; }

/* Recent Allocations */
.allocation-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--clr-border);
}

.allocation-item:last-child { border-bottom: none; }

.allocation-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.allocation-name { font-size: 0.8rem; font-weight: 600; color: var(--clr-text-primary); }
.allocation-shares { font-size: 0.68rem; color: var(--clr-text-muted); }
.allocation-value { font-size: 0.8rem; font-weight: 700; color: var(--clr-heading); margin-left: auto; }
.allocation-date { font-size: 0.67rem; color: var(--clr-text-muted); }

/* Quick Stats Mini Grid */
.quick-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.quick-stat-item {
  background: var(--clr-surface-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  transition: var(--transition);
}

.quick-stat-item:hover {
  border-color: var(--clr-secondary-dark);
  box-shadow: var(--shadow-sm);
}

.quick-stat-label { font-size: 0.65rem; font-weight: 600; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3rem; }
.quick-stat-value { font-size: 1rem; font-weight: 800; color: var(--clr-heading); }

/* Upcoming IPOs */
.upcoming-ipo-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--clr-border);
}

.upcoming-ipo-item:last-child { border-bottom: none; }

.upcoming-ipo-badge {
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
  width: 200px;
  text-align: center;
}

.badge-open { background: rgba(34,197,94,0.12); color: #16a34a; }
.badge-coming { background: rgba(245,158,11,0.12); color: #d97706; }
.badge-closed { background: rgba(107,114,128,0.12); color: #6b7280; }

.upcoming-ipo-name { font-size: 0.8rem; font-weight: 700; color: var(--clr-heading); }
.upcoming-ipo-sector { font-size: 0.68rem; color: var(--clr-text-muted); }
.upcoming-ipo-price { font-size: 0.78rem; font-weight: 600; color: var(--clr-text-primary); margin-left: auto; }
.upcoming-ipo-date { font-size: 0.67rem; color: var(--clr-text-muted); }
.up-ipo {min-width: 95px;}
/* ── Account Summary Tables ─────────────────────────────────────── */
.summary-table-wrap { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--clr-border); }

.summary-table-wrap table { margin-bottom: 0; font-family: var(--font) !important; font-size: 0.82rem; }

.summary-table-wrap thead th {
  background: var(--clr-primary) !important;
  color: var(--clr-secondary) !important;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none !important;
  padding: 0.7rem 1rem;
}

.summary-table-wrap tbody tr { border-bottom: 1px solid var(--clr-border) !important; transition: var(--transition); }
.summary-table-wrap tbody tr:hover { background: var(--clr-surface-3) !important; }
.summary-table-wrap tbody td { padding: 0.65rem 1rem; border: none !important; vertical-align: middle; color: var(--clr-text-primary); }
.summary-table-wrap tbody tr:last-child { border-bottom: none !important; }
.td-label { font-weight: 600; color: var(--clr-text-secondary) !important; }
.td-value { font-weight: 700; text-align: right; color: var(--clr-heading) !important; }

/* ── Section Header ─────────────────────────────────────────────── */
.section-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--clr-heading);
  margin-bottom: 0.2rem;
  letter-spacing: -0.02em;
}

.section-subtitle {
  font-size: 0.78rem;
  color: var(--clr-text-muted);
  margin-bottom: 1.5rem;
}

/* ── Withdraw / Profile Cards ───────────────────────────────────── */
.withdraw-card-title { font-size: 1.1rem; font-weight: 700; color: var(--clr-heading); margin-bottom: 0.2rem; }
.withdraw-card-subtitle { font-size: 0.78rem; color: var(--clr-text-muted); }

.form-control-themed {
  border: 1px solid var(--clr-border-2) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font) !important;
  font-size: 0.83rem !important;
  color: var(--clr-text-primary) !important;
  background: var(--clr-surface-2) !important;
  transition: var(--transition);
}

.form-control-themed:focus {
  border-color: var(--clr-primary) !important;
  box-shadow: 0 0 0 3px rgba(16,61,58,0.1) !important;
  background: var(--clr-surface) !important;
}

.btn-primary-themed {
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-light)) !important;
  color: var(--clr-secondary) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  font-size: 0.83rem !important;
  padding: 0.55rem 1.5rem !important;
  transition: var(--transition) !important;
  letter-spacing: 0.02em;
}

.btn-primary-themed:hover {
  background: linear-gradient(135deg, var(--clr-primary-light), var(--clr-primary)) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

/* ── Profile Card ───────────────────────────────────────────────── */
.profile-list-item {
  background: var(--clr-surface-3) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 1.25rem !important;
  transition: var(--transition);
}

.profile-list-item:hover {
  border-color: var(--clr-secondary-dark) !important;
  box-shadow: var(--shadow-sm);
}

.profile-field-label { font-size: 0.72rem; font-weight: 600; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.profile-field-value { font-size: 0.88rem; font-weight: 700; color: var(--clr-heading); margin-top: 0.1rem; }

/* ── Pulse animation for live values ───────────────────────────── */
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--clr-profit);
  border-radius: 50%;
  margin-right: 4px;
  animation: livePulse 1.5s ease infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* ── Scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--clr-surface-3); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: var(--clr-border-2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--clr-text-muted); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .stat-value { font-size: 1.2rem; }
}

@media (max-width: 991px) {
  .activity-timeline::before { left: 2.35rem; }
  .quick-stat-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .table-toolbar { flex-direction: column; align-items: flex-start; }
  .table-search-input { width: 100%; }
  .stat-value { font-size: 1.1rem; }
  .activity-timeline { padding: 1rem; }
  .activity-timeline::before { left: 2.1rem; }
  .premium-card-body { padding: 1rem; }
  .quick-stat-grid { grid-template-columns: 1fr 1fr; }
  .section-title { font-size: 1.1rem; }
}

@media (max-width: 480px) {
  .activity-meta { flex-direction: column; gap: 0.25rem; }
  .quick-stat-grid { grid-template-columns: 1fr; }
  .stat-icon { width: 44px; height: 44px; top: -14px; }
}

/* ── Misc Utilities ─────────────────────────────────────────────── */
.text-primary-themed { color: var(--clr-heading) !important; }
.text-secondary-themed { color: var(--clr-secondary-dark) !important; }
.text-muted-themed { color: var(--clr-text-muted) !important; }
.bg-primary-themed { background: var(--clr-primary) !important; }
.border-themed { border-color: var(--clr-border) !important; }
.rounded-themed { border-radius: var(--radius-md) !important; }

.fw-800 { font-weight: 800 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-600 { font-weight: 600 !important; }

.fs-xs { font-size: 0.7rem !important; }
.fs-sm { font-size: 0.8rem !important; }
.fs-base { font-size: 0.88rem !important; }

/* ═══════════════════════════════════════════════════════════════
   DARK-MODE TEXT & COMPONENT VISIBILITY FIXES
   Forces vendor components (Material Dashboard, Bootstrap,
   DataTables, ApexCharts tooltips) to follow our theme tokens
   instead of their own hardcoded light-mode colors/backgrounds.
   ═══════════════════════════════════════════════════════════════ */

/* Generic text safety net — anything that still inherits a stray
   vendor color gets pulled back onto our readable text tokens. */
[data-theme="dark"] { color: var(--clr-text-primary); }
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body,
[data-theme="dark"] .text-wrap,
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] label,
[data-theme="dark"] li,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
  color: var(--clr-text-primary);
}
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .text-muted,
[data-theme="dark"] small {
  color: var(--clr-text-secondary) !important;
}

/* Top navbar (Material Dashboard renders this with a translucent
   white background by default) */
[data-theme="dark"] #navbarBlur,
[data-theme="dark"] .navbar-main {
  background-color: rgba(20, 40, 38, 0.85) !important;
}
[data-theme="dark"] .navbar-main .breadcrumb .text-dark,
[data-theme="dark"] .navbar-main h6 {
  color: var(--clr-text-primary) !important;
}
[data-theme="dark"] .sidenav-toggler-line {
  background-color: var(--clr-text-primary) !important;
}

/* Generic Material Dashboard cards not covered by .stat-card etc. */
[data-theme="dark"] .card {
  background-color: var(--clr-surface);
  color: var(--clr-text-primary);
}
[data-theme="dark"] .card .card-header,
[data-theme="dark"] .card .card-body,
[data-theme="dark"] .card .card-footer {
  background-color: transparent;
  color: var(--clr-text-primary);
}

/* Inputs, selects, textareas — including the navbar search box */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--clr-surface-2) !important;
  color: var(--clr-text-primary) !important;
  border-color: var(--clr-border-2) !important;
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--clr-text-muted) !important;
  opacity: 1;
}
[data-theme="dark"] .input-group-outline .form-label {
  color: var(--clr-text-muted) !important;
  background-color: transparent !important;
}
[data-theme="dark"] .input-group-outline .form-control:focus ~ .form-label,
[data-theme="dark"] .input-group-outline.is-filled .form-label {
  color: var(--clr-heading) !important;
}

/* Dropdown menus (notifications, profile, etc.) */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--clr-surface) !important;
  border-color: var(--clr-border) !important;
  box-shadow: var(--shadow-md) !important;
}
[data-theme="dark"] .dropdown-menu .dropdown-item {
  color: var(--clr-text-primary) !important;
}
[data-theme="dark"] .dropdown-menu .dropdown-item:hover,
[data-theme="dark"] .dropdown-menu .dropdown-item:focus {
  background-color: var(--clr-surface-3) !important;
  color: var(--clr-heading) !important;
}

/* Bootstrap modals (as opposed to the custom .modal-overlay ones,
   which already use variables) */
[data-theme="dark"] .modal-content {
  background-color: var(--clr-surface) !important;
  color: var(--clr-text-primary) !important;
}

/* Generic tables (Bootstrap + any not covered by .investments-table) */
[data-theme="dark"] table,
[data-theme="dark"] .table {
  color: var(--clr-text-primary);
}
[data-theme="dark"] table th,
[data-theme="dark"] .table th {
  color: var(--clr-text-secondary) !important;
}
[data-theme="dark"] table td,
[data-theme="dark"] .table td {
  color: var(--clr-text-primary) !important;
  border-color: var(--clr-border) !important;
}
[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent !important;
  border-bottom-color: var(--clr-border) !important;
}

/* DataTables (portfolio table + its controls) */
[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] table.dataTable thead td {
  color: var(--clr-text-secondary) !important;
  border-bottom-color: var(--clr-border) !important;
}
[data-theme="dark"] table.dataTable tbody td {
  color: var(--clr-text-primary) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
  color: var(--clr-text-secondary) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  background-color: var(--clr-surface-2) !important;
  color: var(--clr-text-primary) !important;
  border-color: var(--clr-border-2) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--clr-text-secondary) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--clr-primary) !important;
  color: var(--clr-surface) !important;
  border-color: var(--clr-primary) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--clr-surface-3) !important;
  color: var(--clr-heading) !important;
}

/* ApexCharts tooltip default is light-only; fall back gracefully
   until the live JS re-theme call runs on toggle */
[data-theme="dark"] .apexcharts-tooltip {
  background: var(--clr-surface) !important;
  color: var(--clr-text-primary) !important;
  border-color: var(--clr-border) !important;
}
[data-theme="dark"] .apexcharts-tooltip-title {
  background: var(--clr-surface-3) !important;
  color: var(--clr-text-primary) !important;
  border-color: var(--clr-border) !important;
}
[data-theme="dark"] .apexcharts-menu {
  background: var(--clr-surface) !important;
  color: var(--clr-text-primary) !important;
  border-color: var(--clr-border) !important;
}
[data-theme="dark"] .apexcharts-menu-item:hover {
  background: var(--clr-surface-3) !important;
}
[data-theme="dark"] .apexcharts-legend-text {
  color: var(--clr-text-secondary) !important;
}

/* Buttons that relied on a light card background for contrast */
[data-theme="dark"] .btn-outline-secondary {
  color: var(--clr-text-secondary) !important;
  border-color: var(--clr-border-2) !important;
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--clr-surface-3) !important;
  color: var(--clr-text-primary) !important;
}

/* Horizontal rules used as section dividers */
[data-theme="dark"] hr.horizontal.dark {
  background-image: linear-gradient(90deg, transparent, var(--clr-border-2), transparent) !important;
}