/* Wealth & Family Management — design system */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
  --sidebar-w: 15.5rem;
  --header-h: 0px;

  --font-ui: 'DM Sans', system-ui, -apple-system, sans-serif;

  --bg-app: #eef1f6;
  --bg-sidebar: #1c2433;
  --bg-sidebar-hover: #263044;
  --bg-card: #ffffff;
  --bg-inset: #e4e9f0;
  --bg-input: #ffffff;

  --text: #1a2332;
  --text-muted: #5c6678;
  --text-sidebar: #94a3b8;
  --text-sidebar-active: #f1f5f9;

  --accent: #3d6ea8;
  --accent-soft: #e3edf7;
  --accent-hover: #2f5685;
  --danger: #c44a3a;
  --danger-soft: #fceeea;
  --warn: #b8860b;
  --profit: #2d7a4a;
  --loss: #b33;

  --border: #cdd5e0;
  --border-strong: #a8b4c4;
  --shadow: 0 1px 2px rgba(26, 35, 50, 0.06), 0 8px 24px rgba(26, 35, 50, 0.07);
  --radius: 10px;
  --radius-sm: 6px;

  --space-xs: 0.35rem;
  --space-sm: 0.65rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  --transition: 160ms ease;
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  max-width: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: clip;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-app);
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
}

/* Shell layout — header is a fixed sidebar via web component */
app-header {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  z-index: 200;
}

app-footer {
  display: block;
  margin-left: var(--sidebar-w);
}

.app-status {
  margin: 0 0 0 var(--sidebar-w);
  padding: 0.65rem 1.25rem;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 0.875rem;
}

.app-status.error {
  background: var(--danger-soft);
  color: var(--danger);
}

main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  min-width: 0;
  max-width: 100%;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  overflow-anchor: none;
}

main > section {
  display: none;
  flex-direction: column;
  gap: var(--space-lg);
  width: min(100%, 72rem);
  min-width: 0;
  max-width: 100%;
  margin: 0 auto;
  animation: fade-in 220ms ease;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Page chrome */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.page-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.page-lead {
  margin: 0.25rem 0 0;
  max-width: 42rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* Context controls (account picker, asset type, etc.) */
main section > aside,
.context-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

main section > aside label,
.context-bar label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

main section > aside select,
main section > aside input[type=month],
.context-bar select,
.context-bar input[type=month] {
  min-width: 10rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  font: inherit;
  color: var(--text);
}

main section aside#assetType.focus {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

/* Layout primitives */
.vertical {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  width: 100%;
  align-items: flex-start;
}

.horizontal > article {
  flex: 1 1 18rem;
  min-width: 0;
}

/* Cards / panels */
.card,
main section fieldset {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #fff 0%, var(--bg-inset) 100%);
}

.panel-head legend,
.panel-title {
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.panel-body {
  padding: var(--space-lg);
  min-width: 0;
}

/* Horizontal scroll host for wide data tables (use on a wrapper around the table). */
.table-scroll {
  display: block;
  width: 100%;
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.hint {
  margin: 0 0 var(--space-md);
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.field-hint {
  margin: -0.25rem 0 var(--space-xs);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
}

.empty[hidden],
[hidden] {
  display: none !important;
}

.empty {
  margin: var(--space-md) 0;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}

/* Tabs */
.crud-tabs,
.meeting-tabs,
.planning-section-tabs,
.trades-page-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0 var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: var(--bg-inset);
}

.crud-tab,
.meeting-tab,
.planning-section-tab,
.trades-page-tab {
  margin: 0;
  padding: 0.55rem 0.9rem;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.crud-tab:hover,
.meeting-tab:hover,
.planning-section-tab:hover,
.trades-page-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.6);
}

.crud-tab.active,
.meeting-tab.active,
.planning-section-tab.active,
.trades-page-tab.active {
  color: var(--accent);
  background: var(--bg-card);
  border-bottom-color: var(--accent);
}

.trades-page-tab:disabled,
.crud-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.crud-tab-panel,
.meeting-tab-panel,
.planning-section-panel {
  width: 100%;
}

/* Forms */
main section fieldset.entry,
main section fieldset.items {
  width: 100%;
}

main section article fieldset form,
main section fieldset.entry form {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
}

main section article fieldset form label,
main section fieldset.entry form label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}

main section article fieldset form input,
main section article fieldset form select,
main section article fieldset form textarea,
main section fieldset.entry form input,
main section fieldset.entry form select,
main section fieldset.entry form textarea {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  font: inherit;
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

main section article fieldset form input:focus,
main section article fieldset form select:focus,
main section fieldset.entry form input:focus,
main section fieldset.entry form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

main section article fieldset form input[type=checkbox] {
  width: auto;
  display: inline-block;
}

/* Buttons */
main section button,
main section input[type=submit],
main section input[type=button] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

main section button:hover,
main section input[type=submit]:hover,
main section input[type=button]:hover {
  background: var(--accent-hover);
  color: #fff;
}

main section button.gray,
main section input[type=button].gray,
main section input[type=submit].gray {
  background: var(--bg-inset);
  border-color: var(--border);
  color: var(--text);
}

main section button.gray:hover,
main section input[type=button].gray:hover,
main section input[type=submit].gray:hover {
  background: var(--border);
  color: var(--text);
}

.crud-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
}

.crud-list-toolbar button {
  margin: 0;
}
.crud-entry-toolbar,
.meeting-entry-toolbar,
.entry-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  margin: 0 0 var(--space-md);
  border-bottom: 1px solid var(--border);
}

/* New / Edit header row, then [Delete] … [secondary] [Cancel] [Primary]. */
.crud-entry-title {
  order: -2;
  flex: 1 0 100%;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  overflow-wrap: anywhere;
}

[data-crud-entity] > [data-op=remove] {
  order: -1;
  margin-right: auto;
}

main section .crud-tab-panel fieldset.items > legend,
main section .meeting-tab-panel fieldset.items > legend {
  display: none;
}

main section .crud-tab-panel > article,
main section .meeting-tab-panel > article {
  margin: 0;
}

/* Data tables */
main section fieldset.items {
  display: flex;
  flex-direction: column;
  min-height: 12rem;
  min-width: 0;
  overflow: hidden;
}

main section fieldset.items > dl,
main section fieldset.items > div.items-list,
main section fieldset.items > div.items-scroll {
  flex: 1;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

main section fieldset.items table.items-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
  table-layout: auto;
}

main section fieldset.items table.items-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

main section fieldset.items table.items-table th {
  padding: 0.55rem 0.75rem;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
}

main section fieldset.items table.items-table th.num {
  text-align: right;
}

main section fieldset.items table.items-table tbody tr.outer {
  cursor: pointer;
  transition: background var(--transition);
}

main section fieldset.items table.items-table tbody tr.outer:hover td {
  background: var(--accent-soft);
}

main section fieldset.items table.items-table tbody tr.outer.selected td {
  background: var(--accent-soft);
}

main section fieldset.items table.items-table tbody tr.outer.selected {
  box-shadow: inset 3px 0 0 var(--accent);
}

main section fieldset.items table.items-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

main section fieldset.items table.items-table td.name {
  font-weight: 600;
  background: #f4f7fb;
}

main section fieldset.items table.items-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

main section fieldset.items table.items-table tbody tr.filtered-out,
main section tr.outer.filtered-out,
main section fieldset div.outer.filtered-out {
  display: none;
}

/* Legacy dl list rows */
main fieldset div.outer {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 3rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
}

main fieldset div.outer:hover {
  background: var(--accent-soft);
}

main fieldset div.outer.selected {
  box-shadow: inset 3px 0 0 var(--accent);
  background: var(--accent-soft);
}

main fieldset div.outer label {
  flex: 0 0 14rem;
  display: flex;
  align-items: center;
  padding: 0.65rem 0.75rem;
  font-weight: 600;
  background: var(--bg-inset);
  border-right: 1px solid var(--border);
}

main fieldset div.inner {
  flex: 1;
  display: flex;
  align-items: stretch;
  padding: 0.35rem 0.5rem;
  gap: 0.5rem;
}

main fieldset div.inner div.wrapper {
  flex: 1;
  min-width: 0;
}

main fieldset div.inner dt {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 0.15rem 0.35rem;
}

main fieldset div.inner dd {
  margin: 0;
  padding: 0.1rem 0.35rem 0.35rem;
  font-variant-numeric: tabular-nums;
}

td.num.profit, .profit { color: var(--profit); font-weight: 600; }
td.num.loss, .loss { color: var(--loss); font-weight: 600; }

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-lg);
}

@media (max-width: 960px) {
  :root {
    --sidebar-w: 0px;
    --header-h: 3.35rem;
  }

  app-header {
    width: 100%;
    height: var(--header-h);
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 300;
  }

  app-header[menu-open] {
    height: auto;
  }

  app-footer,
  main,
  .app-status {
    margin-left: 0;
    margin-top: var(--header-h);
  }

  main {
    padding: var(--space-md);
  }

  body.menu-open {
    overflow: hidden;
  }

  /* Catch-all: panel bodies can pan sideways when a wide table isn't wrapped. */
  main .panel-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* Wide data: keep columns readable and scroll sideways instead of crushing. */
  main section fieldset.items table.items-table {
    min-width: max(100%, 32rem);
  }

  main section fieldset.items table.items-table td {
    overflow: visible;
    text-overflow: clip;
  }

  main .table-scroll,
  main .dashboard-table-scroll,
  main .gex-snapshots-wrap,
  main .portfolio-allocation-results,
  main .portfolio-allocation-scroll,
  main .saved-batches-summary,
  main .saved-batches-stats-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  main .table-scroll > table,
  main .dashboard-table-scroll > table,
  main .gex-snapshots-wrap > table,
  main table.gex-snapshots-table,
  main table.portfolio-allocation-table,
  main table.saved-batches-stats-table,
  main table.dashboard-table,
  main table.budget-summary-table,
  main table.account-transactions-stats-table,
  main table.planning-stats-table,
  main table.agenda-closed-table,
  main table.grocery-list-table {
    width: max-content;
    max-width: none;
    min-width: max(100%, 28rem);
  }
}

/* Click-to-enlarge charts (static/js/chartZoom.js) */
.accounting-chart-wrap canvas,
.cashflow-chart-wrap canvas {
  cursor: zoom-in;
}

dialog.chart-zoom-dialog {
  width: 85vw;
  height: 85vh;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.35);
}

dialog.chart-zoom-dialog[open] {
  display: flex;
  flex-direction: column;
}

dialog.chart-zoom-dialog::backdrop {
  background: rgba(15, 23, 42, 0.6);
}

dialog.chart-zoom-dialog .chart-zoom-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #fff 0%, var(--bg-inset) 100%);
}

dialog.chart-zoom-dialog .chart-zoom-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

dialog.chart-zoom-dialog .chart-zoom-close {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

dialog.chart-zoom-dialog .chart-zoom-close:hover {
  background: var(--border);
}

dialog.chart-zoom-dialog .chart-zoom-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-lg);
}

@media (max-width: 720px) {
  dialog.chart-zoom-dialog .chart-zoom-body {
    padding: var(--space-sm);
  }
}