/* MarketChronos — base.css
 * Minimal own reset, responsive app-shell layout, shared components,
 * accessibility utilities and reusable entrance animations.
 * No external reset, no CDN, no frameworks. System font stack only.
 */

/* ---------- Minimal reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  font-size: 16px; /* rem root; sizes scale with user zoom */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-stack);
  background: var(--bg-base);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

button {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Tabular figures utility for any numeric display */
.tabular {
  font-variant-numeric: var(--numeric-tabular);
}

/* ---------- App shell ---------- */
.app-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 1fr; /* mobile: single column, no sidebar gutter */
}

.sidebar {
  display: none; /* hidden on mobile */
}

.main {
  padding: var(--space-3) var(--space-2) calc(var(--space-6) + var(--space-4));
  /* extra bottom padding on mobile clears the fixed bottom bar */
}

/* Fixed bottom navigation (mobile only) */
.bottom-bar {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: var(--space-0);
  padding: var(--space-1) var(--space-1) calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
  background: var(--surface-1);
  border-top: 1px solid var(--surface-3);
  z-index: 50;
}

/* ---------- 12-column grid ---------- */
.grid-12 {
  display: grid;
  grid-template-columns: 1fr; /* mobile: single column */
  gap: var(--space-2);
}

/* On mobile every span is full width */
.col-span-3,
.col-span-4,
.col-span-6,
.col-span-12 {
  grid-column: 1 / -1;
}

/* ---------- Desktop layout: >=1024px (sidebar appears) ---------- */
@media (min-width: 64em) {
  .app-shell {
    grid-template-columns: 16rem 1fr; /* fixed sidebar + content */
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    padding: var(--space-3) var(--space-2);
    background: var(--surface-1);
    border-right: 1px solid var(--surface-3);
  }

  .bottom-bar {
    display: none; /* sidebar replaces it on desktop */
  }

  .main {
    padding: var(--space-4) var(--space-4) var(--space-5);
  }
}

/* ---------- Wide desktop: >=90em (~1440px) full 12 columns ---------- */
@media (min-width: 90em) {
  .grid-12 {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-3);
  }

  .col-span-3 {
    grid-column: span 3;
  }
  .col-span-4 {
    grid-column: span 4;
  }
  .col-span-6 {
    grid-column: span 6;
  }
  .col-span-12 {
    grid-column: span 12;
  }
}

/* Intermediate desktop (1024–1439px): use 12 cols too so spans apply */
@media (min-width: 64em) and (max-width: 89.99em) {
  .grid-12 {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-2);
  }
  .col-span-3 {
    grid-column: span 6;
  }
  .col-span-4 {
    grid-column: span 6;
  }
  .col-span-6 {
    grid-column: span 6;
  }
  .col-span-12 {
    grid-column: span 12;
  }
}

/* ---------- Card ---------- */
.card {
  background: var(--surface-1);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
}

.card-label {
  font-size: var(--font-size-label);
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

.card-value {
  font-size: var(--font-size-value);
  font-weight: 600;
  font-variant-numeric: var(--numeric-tabular);
  margin-top: var(--space-0);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--color-text);
  font-size: var(--font-size-label);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.btn:hover {
  background: var(--surface-3);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--color-accent);
  border-color: transparent;
  color: #ffffff;
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
  background: var(--color-accent-bright);
}

/* ---------- Pills / temporal filters ---------- */
.pill-group {
  display: inline-flex;
  gap: var(--space-0);
  padding: var(--space-0);
  background: var(--surface-2);
  border-radius: var(--radius-pill);
}

.pill {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-label);
  font-weight: 600;
  padding: var(--space-0) var(--space-2);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.pill:hover {
  color: var(--color-text);
}

.pill.is-active {
  color: #ffffff;
  background: var(--color-accent);
}

/* ---------- Sidebar brand (desktop sidebar only) ----------
 * Lives at the top of .sidebar, above the nav items. The sidebar is
 * display:none on mobile, so this brand never renders there (mobile uses
 * the .bottom-bar). The arc symbol mirrors the public-pages logo. */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
}

.sidebar-brand-mark {
  width: 1.625rem; /* 26px */
  height: 1.625rem;
  flex: none;
  color: var(--color-accent-bright);
}

.sidebar-brand-name {
  font-size: var(--font-size-subtitle);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

/* ---------- Nav items ---------- */
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-label);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.nav-item:hover {
  color: var(--color-text);
  background: var(--surface-2);
}

.nav-item.is-active {
  color: var(--color-text);
  background: var(--surface-2);
}

.nav-item.is-active .nav-icon {
  color: var(--color-accent-bright);
}

/* Bottom-bar nav items stack icon over label */
.bottom-bar .nav-item {
  flex: 1;
  flex-direction: column;
  gap: var(--space-3xs);
  font-size: var(--font-size-caption);
  padding: var(--space-0);
}

.nav-icon {
  font-size: var(--font-size-subtitle);
  line-height: 1;
}

/* ---------- State utilities: color is NOT the only signal ---------- */
.is-positive {
  color: var(--color-positive);
  font-variant-numeric: var(--numeric-tabular);
}

.is-positive::before {
  content: '\25B2 '; /* ▲ */
  font-size: 0.8em;
}

.is-negative {
  color: var(--color-negative);
  font-variant-numeric: var(--numeric-tabular);
}

.is-negative::before {
  content: '\25BC '; /* ▼ */
  font-size: 0.8em;
}

/* ---------- Bars ---------- */
.bar-track {
  width: 100%;
  height: 0.5rem;
  background: var(--surface-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  width: var(--bar-value, 0%);
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}

/* ---------- Data table (holdings, position listings) ---------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-label);
}

.data-table thead th {
  color: var(--color-text-muted);
  font-size: var(--font-size-label);
  font-weight: 600;
  text-align: left;
  letter-spacing: 0.01em;
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--surface-3);
}

.data-table tbody td {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--surface-3);
}

.data-table tbody tr {
  transition: background var(--dur-fast) var(--ease-out);
}

.data-table tbody tr:hover {
  background: var(--surface-2);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Interactive rows: clickable (tabindex/role=button or .is-clickable) */
.data-table tbody tr.is-clickable,
.data-table tbody tr[role='button'],
.data-table tbody tr[tabindex] {
  cursor: pointer;
}

.data-table tbody tr.is-clickable:focus-visible,
.data-table tbody tr[role='button']:focus-visible,
.data-table tbody tr[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px; /* keep the ring inside the collapsed-border cell box */
}

/* Right-align numeric columns with tabular figures */
.data-table .num,
.data-table th[data-align='right'],
.data-table td[data-align='right'] {
  text-align: right;
  font-variant-numeric: var(--numeric-tabular);
}

/* Asset cell: icon + name + ticker */
.data-table .cell-asset {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.data-table .cell-asset .asset-ticker {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: 500;
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- Error panel (designed error state) ---------- */
.error-panel {
  background: var(--color-negative-bg);
  border: 1px solid var(--color-negative);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font-size: var(--font-size-label);
}

/* ---------- Keyframes (named by effect) ---------- */
@keyframes bar-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes draw-line {
  from {
    stroke-dashoffset: var(--draw-length, 1000);
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes slide-in-right {
  from {
    transform: translateX(2rem);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-rise {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cta-pulse {
  0%,
  100% {
    box-shadow: var(--shadow-glow);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5),
      0 0 32px rgba(59, 130, 246, 0.55);
  }
}

/* ---------- Animation utilities (only with motion preference) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .animate-bar .bar-fill {
    transform-origin: left center;
    animation: bar-grow var(--dur-enter) var(--ease-out) both;
  }

  /* SVG line draw-on. Each <path class="animate-draw"> MUST set --draw-length
   * to its own length (path.getTotalLength(), or any value >= the real length)
   * via inline style. stroke-dasharray = that length turns the dash into a
   * single segment as long as the path, so animating stroke-dashoffset from
   * --draw-length down to 0 reveals the stroke progressively. Without the
   * dasharray, stroke-dashoffset has no visible effect. */
  .animate-draw {
    stroke-dasharray: var(--draw-length, 1000);
    animation: draw-line var(--dur-enter) var(--ease-out) both;
  }

  .animate-slide-in {
    animation: slide-in-right var(--dur-base) var(--ease-out) both;
  }

  .animate-fade-rise {
    animation: fade-rise var(--dur-enter) var(--ease-out) both;
  }

  /* Calm idle pulse/glow — OPT-IN only, so a view with several CTAs stays
   * calm. Add .is-pulsing to the single primary action that should pulse. */
  .btn-primary.is-pulsing {
    animation: cta-pulse 2.8s var(--ease-out) infinite;
  }
}

/* In reduce: bars are shown complete and static, nothing animates */
@media (prefers-reduced-motion: reduce) {
  .animate-bar .bar-fill {
    transform: none;
  }
}