/* PortfolioIQ Design System — Style B (Fintech Dashboard)
   Theme B: dark default (Bootstrap 5.3 data-bs-theme)

   Notes:
   - We keep Bootstrap as the base; this file provides tokens + component polish.
   - Light mode is supported via [data-bs-theme="light"].
*/

:root {
  /* Layout */
  --app-topbar-height: 56px;

  --app-radius-sm: 10px;
  --app-radius: 14px;
  --app-radius-lg: 18px;
  --app-shadow-sm: 0 1px 0 rgba(0,0,0,.08);
  --app-shadow: 0 10px 30px rgba(0,0,0,.28);

  /* Typography */
  --app-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --app-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Accent (brand) */
  --app-primary: #7c3aed; /* violet */
  --app-primary-2: #22c55e; /* optional secondary (successy fintech) */

  /* Focus */
  --app-focus: rgba(124, 58, 237, .28);
}

/* === Theme tokens mapped onto Bootstrap variables === */

[data-bs-theme="dark"] {
  --app-bg: #070b16;
  --app-surface: #0b1222;
  --app-surface-2: #0f1a33;
  --app-border: rgba(148, 163, 184, .18);
  --app-border-strong: rgba(148, 163, 184, .28);
  --app-text: #e5e7eb;
  --app-muted: rgba(226, 232, 240, .68);

  --app-link: #9aa7ff;
  --app-link-hover: #c7ccff;

  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-secondary-color: var(--app-muted);
  --bs-tertiary-bg: var(--app-surface);
  --bs-border-color: var(--app-border);
  --bs-link-color: var(--app-link);
  --bs-link-hover-color: var(--app-link-hover);

  /* Buttons */
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: 124, 58, 237;

  --bs-success-rgb: 34, 197, 94;
  --bs-warning-rgb: 245, 158, 11;
  --bs-danger-rgb: 239, 68, 68;
}

[data-bs-theme="light"] {
  --app-bg: #f6f7fb;
  --app-surface: #ffffff;
  --app-surface-2: #f2f4ff;
  --app-border: rgba(15, 23, 42, .10);
  --app-border-strong: rgba(15, 23, 42, .16);
  --app-text: #0f172a;
  --app-muted: rgba(15, 23, 42, .60);

  --app-link: #4f46e5;
  --app-link-hover: #3730a3;

  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-secondary-color: var(--app-muted);
  --bs-tertiary-bg: rgba(15, 23, 42, .04);
  --bs-border-color: var(--app-border);
  --bs-link-color: var(--app-link);
  --bs-link-hover-color: var(--app-link-hover);

  --bs-primary: var(--app-primary);
  --bs-primary-rgb: 124, 58, 237;
}

/* === Brand (logo variants) === */

.brand-mark { display: none !important; }

[data-bs-theme="dark"] .brand-mark.brand-mark-dark { display: inline-block !important; }
[data-bs-theme="dark"] .brand-mark.brand-mark-light { display: none !important; }

[data-bs-theme="light"] .brand-mark.brand-mark-light { display: inline-block !important; }
[data-bs-theme="light"] .brand-mark.brand-mark-dark { display: none !important; }

/* === Base === */

html, body {
  height: 100%;
}

body {
  font-family: var(--app-font-sans);
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* prevent horizontal scroll caused by shadows/borders */
  padding-top: var(--app-topbar-height); /* space for sticky topbar */
}

.font-monospace {
  font-family: var(--app-font-mono) !important;
}

/* Subtle dashboard background texture */
[data-bs-theme="dark"] body {
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(124,58,237,.10), transparent 55%),
    radial-gradient(900px 700px at 80% 0%, rgba(34,197,94,.07), transparent 55%),
    linear-gradient(180deg, #070b16 0%, #060814 100%);
}

[data-bs-theme="light"] body {
  background:
    radial-gradient(1200px 800px at 20% 0%, rgba(124,58,237,.06), transparent 60%),
    linear-gradient(180deg, #f6f7fb 0%, #f6f7fb 100%);
}

.app-main-container {
  max-width: 1280px; /* fintech dashboard width */
}

h1.h3 {
  font-weight: 650;
  letter-spacing: -.02em;
}

/* === Navbar (top app bar) === */

.navbar {
  backdrop-filter: blur(10px);
}

/* Ensure topbar stays above all content (charts, offcanvas backdrops, etc.) */
.navbar.fixed-top {
  z-index: 1100;
}

[data-bs-theme="dark"] .navbar {
  background-color: rgba(7, 11, 22, .72) !important;
  border-bottom-color: var(--app-border) !important;
}

[data-bs-theme="light"] .navbar {
  background-color: rgba(246, 247, 251, .82) !important;
  border-bottom-color: var(--app-border) !important;
}

.navbar .navbar-brand {
  font-weight: 700;
  letter-spacing: .2px;
}

/* === Sidebar (desktop) + mobile offcanvas === */

:root {
  --app-sidebar-collapsed-width: 76px;
}

/* Collapsible desktop sidebar */
.sidebar-collapsed .app-sidebar-col {
  flex: 0 0 var(--app-sidebar-collapsed-width) !important;
  max-width: var(--app-sidebar-collapsed-width) !important;
  width: var(--app-sidebar-collapsed-width) !important;
}

.sidebar-collapsed .app-main-col {
  flex: 1 1 auto !important;
  max-width: calc(100% - var(--app-sidebar-collapsed-width)) !important;
}

.sidebar-collapsed .app-sidebar-section {
  display: none;
}

.sidebar-collapsed .app-side-text,
.sidebar-collapsed .app-side-badge {
  display: none !important;
}

.sidebar-collapsed .app-side-link {
  justify-content: center;
  gap: 0;
  padding-left: .45rem;
  padding-right: .45rem;
}

.sidebar-collapsed .app-side-icon {
  margin-right: 0;
}

/* === Sidebar (desktop) + mobile offcanvas === */

.app-sidebar {
  /* Strong, always-visible separation */
  border-right: 1px solid var(--app-border-strong);
  background: var(--app-surface);
  /* keep shadow subtle to avoid overflow/scrollbars */
  box-shadow:
    6px 0 18px rgba(0,0,0,.14),
    inset -1px 0 0 rgba(255,255,255,.06);
}

[data-bs-theme="light"] .app-sidebar {
  box-shadow:
    10px 0 30px rgba(0,0,0,.08),
    inset -1px 0 0 rgba(2,6,23,.08);
}

.app-sidebar-brand {
  padding: .75rem;
  border: 1px solid var(--app-border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(124,58,237,.14), rgba(255,255,255,.02));
}

.app-sidebar-logo {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(124,58,237,1), rgba(15,23,42,1));
  color: white;
  font-weight: 800;
  box-shadow: 0 12px 22px rgba(124,58,237,.25);
}

.app-sidebar-section {
  margin-top: .9rem;
  margin-bottom: .35rem;
  font-size: .66rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--app-muted);
}

[data-bs-theme="dark"] .app-sidebar {
  background: rgba(11, 18, 34, .92);
}

.app-sidebar-inner {
  position: sticky;
  top: var(--app-topbar-height); /* below top bar */
  /* Optimized: sidebar can scroll independently when content is tall */
  height: calc(100vh - var(--app-topbar-height));
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 1rem;
}

/* Keep the collapse/expand control always visible even when sidebar is scrolled */
.app-sidebar-top {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-top: .25rem;
  padding-bottom: .25rem;
  background: var(--app-surface);
}

/* Reduce visual weight of the topbar menu toggle */
#sidebar-toggle-top {
  opacity: .9;
}
#sidebar-toggle-top:hover {
  opacity: 1;
}

[data-bs-theme="dark"] .app-sidebar-top {
  background: rgba(11, 18, 34, .92);
}

/* Nicer scrollbar (Chromium/WebKit) */
.app-sidebar-inner::-webkit-scrollbar {
  width: 10px;
}
.app-sidebar-inner::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.app-sidebar-inner::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, .28);
  background-clip: padding-box;
}

/* Sidebar nav (Bootstrap-ish, Brutus-inspired) */
.app-side-link {
  display: flex;
  align-items: center;
  gap: .60rem;
  padding: .42rem .55rem;
  border-radius: 14px;
  border: 1px solid transparent;
  color: rgba(229,231,235,.80);
  position: relative;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

[data-bs-theme="light"] .app-side-link {
  color: rgba(15, 23, 42, .72);
}

.app-side-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 0; /* remove icon outline to reduce visual weight */
  background: transparent;
  font-size: 14px;
  flex: 0 0 auto;
  margin-right: .15rem; /* hard spacing even if flex gap is overridden */
}

[data-bs-theme="light"] .app-side-icon {
  background: rgba(15,23,42,.03);
}

.app-side-link:hover {
  background: rgba(255,255,255,.04);
  border-color: var(--app-border-strong);
  color: var(--app-text);
}

.app-side-link.active,
.app-side-link.active:hover {
  background: rgba(124,58,237,.20);
  border-color: rgba(124,58,237,.30);
  color: var(--app-text);
}

.app-side-link.active::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 4px;
  height: 22px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(124,58,237, .95);
}

.app-side-link span:last-child {
  font-weight: 550;
}

.app-side-text {
  font-size: .92rem;
}

@media (max-width: 767.98px) {
  .app-sidebar {
    border-right: 0;
  }
}

/* === Cards === */

.card {
  border-radius: var(--app-radius);
  border-color: var(--app-border) !important;
  background: var(--app-surface);
  box-shadow: var(--app-shadow-sm);
}

.card:hover {
  border-color: var(--app-border-strong) !important;
}

.card-header {
  border-bottom-color: var(--app-border) !important;
  background: transparent;
}

.card-header.bg-body-tertiary {
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent) !important;
}

[data-bs-theme="light"] .card-header.bg-body-tertiary {
  background: rgba(15, 23, 42, .03) !important;
}

.card.shadow-sm,
.shadow-sm {
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 10px 24px rgba(0,0,0,.18) !important;
}

/* Metric tiles */
.display-6 {
  font-weight: 720;
  letter-spacing: -.02em;
}

/* === Tables === */

.table {
  --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--app-border);
}

.table thead th {
  font-size: .82rem;
  text-transform: none;
  letter-spacing: .02em;
  color: var(--app-muted);
}

.table-light {
  --bs-table-bg: transparent;
  --bs-table-color: var(--app-text);
}

[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: rgba(124,58,237,.10);
}

[data-bs-theme="light"] .table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: rgba(124,58,237,.06);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: rgba(255,255,255,.02);
}

[data-bs-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: rgba(15,23,42,.02);
}

/* === Forms === */

.form-control,
.form-select {
  border-radius: 12px;
  border-color: var(--app-border);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: rgba(15, 26, 51, .72);
  color: var(--app-text);
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: rgba(226, 232, 240, .42);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 .25rem var(--app-focus);
  border-color: rgba(124,58,237,.55);
}

.form-text {
  color: var(--app-muted) !important;
}

/* === Buttons === */

.btn {
  border-radius: 999px;
}

.btn-sm {
  padding-left: .85rem;
  padding-right: .85rem;
}

.btn-primary {
  box-shadow: 0 8px 18px rgba(124,58,237,.22);
}

.btn-outline-secondary {
  border-color: var(--app-border-strong);
}

[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background: rgba(255,255,255,.05);
}

/* === Badges === */

.badge {
  border-radius: 999px;
  font-weight: 650;
  letter-spacing: .02em;
}

[data-bs-theme="dark"] .badge.text-bg-info {
  background-color: rgba(56, 189, 248, .16) !important;
  color: #bae6fd !important;
  border: 1px solid rgba(56, 189, 248, .28);
}

/* === List groups === */

.list-group-item {
  border-color: var(--app-border) !important;
}

[data-bs-theme="dark"] .list-group-item {
  background: rgba(15, 26, 51, .55);
}

[data-bs-theme="dark"] .list-group-item-action:hover {
  background: rgba(124,58,237,.10);
}

/* === Utilities === */

.text-muted {
  color: var(--app-muted) !important;
}

code {
  color: inherit;
  background: rgba(124, 58, 237, .10);
  border: 1px solid rgba(124, 58, 237, .18);
  border-radius: 10px;
  padding: .08rem .38rem;
}

hr {
  border-top-color: var(--app-border);
  opacity: 1;
}

/* Mobile */
@media (max-width: 576px) {
  main.container-fluid {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .card-body {
    padding: 1rem;
  }

  .table > :not(caption) > * > * {
    padding: .55rem;
  }

  h1.h3 {
    font-size: 1.35rem;
  }
}

/* === Info icon (tooltips) === */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  margin-left: 0.35rem;
  border-radius: 999px;
  border: 1px solid var(--app-border-strong);
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  user-select: none;
}

.info-icon:hover {
  color: var(--bs-body-color);
  border-color: var(--app-border-strong);
}

.info-icon:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--app-focus);
}