/* =====================================================================
   Asseta — Investment Analysis · module layer (an-*)
   Sits on top of tokens.css + module.css (AG Grid Quartz→Asseta theme is
   reused via the .dc-grid class). Everything here references design tokens.
   Covers: context bar · widgets section + widget chrome · grouped table cells.
   ===================================================================== */

/* module container (same rhythm as the data-connections module) */
.an-module { padding: var(--sp-20) var(--sp-32) var(--sp-40); }

/* ---------- page head ---------- */
.an-pagehead { display: flex; align-items: center; justify-content: space-between; margin: var(--sp-6) 0 var(--sp-12); }
.an-pagetitle { font: var(--fw-medium) var(--fs-28) var(--font); color: var(--text-primary); margin: 0; }
/* ---------- date range (lives in the page head, right of the title) ---------- */
.an-pagehead-actions { display: flex; align-items: center; gap: var(--sp-12); }
.an-dates { display: inline-flex; align-items: center; gap: var(--sp-6); }
.an-addwidget { display: inline-flex; align-items: center; gap: var(--sp-8); height: 48px; padding: 0 var(--sp-20); background: var(--pill); border: 0; border-radius: var(--r-pill); font: var(--fw-medium) var(--fs-14) var(--font); color: var(--text-primary); cursor: pointer; transition: background .2s; }
.an-addwidget:hover { background: var(--white); }
.an-addwidget svg { width: var(--ic-20); height: var(--ic-20); }
.an-date {
  display: inline-flex; align-items: center; gap: var(--sp-8); height: 48px; padding: 0 var(--sp-16);
  background: var(--pill); border: 0; border-radius: var(--r-pill);
  font: var(--fw-medium) var(--fs-14) var(--font); cursor: pointer; transition: background .2s;
}
.an-date:hover { background: var(--white); }
.an-date svg { color: var(--text-secondary); flex: 0 0 auto; }
.an-date-val { color: var(--text-primary); }
.an-dates .an-date-sep { color: var(--text-secondary); }

/* calendar popover (Asseta-styled) */
.an-dp {
  position: absolute; z-index: var(--z-menu); width: 248px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--shadow-menu); padding: var(--sp-12); font-family: var(--font);
}
.an-dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-8); }
.an-dp-title { font: var(--fw-medium) var(--fs-14) var(--font); color: var(--text-primary); }
.an-dp-nav { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: none; border-radius: var(--r-8); color: var(--text-secondary); cursor: pointer; transition: background .12s, color .12s; }
.an-dp-nav:hover { background: var(--hover-soft); color: var(--text-primary); }
.an-dp-wds { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: var(--sp-4); }
.an-dp-wd { text-align: center; font: var(--fw-medium) var(--fs-12) var(--font); color: var(--text-secondary); padding: var(--sp-4) 0; }
.an-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.an-dp-cell { height: 30px; }
.an-dp-day { height: 30px; border: 0; background: none; border-radius: var(--r-8); font: var(--fw-medium) var(--fs-12) var(--font); color: var(--text-primary); cursor: pointer; transition: background .12s, color .12s; }
.an-dp-day:hover { background: var(--hover-soft); }
.an-dp-day.is-sel { background: var(--accent); color: var(--white); }
.an-dp-day.is-sel:hover { background: var(--accent-hover); }

/* Time Period picker — dual-month range calendar + presets, Asseta design system */
.an-period {
  position: absolute; z-index: var(--z-menu); display: flex; align-items: stretch;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--shadow-pop); font-family: var(--font); overflow: hidden;
}
/* left column: presets + Apply */
.an-period-side { display: flex; flex-direction: column; width: 168px; flex: 0 0 168px; padding: var(--sp-12); border-right: 1px solid var(--border); }
.an-period-list { display: flex; flex-direction: column; gap: 2px; }
.an-period-opt { text-align: left; width: 100%; border: 0; background: none; padding: var(--sp-8) var(--sp-12); border-radius: var(--r-md); font: var(--fw-medium) var(--fs-14) var(--font); color: var(--text-primary); cursor: pointer; transition: background .12s; }
.an-period-opt:hover { background: var(--hover-soft); }
.an-period-opt.is-active { background: var(--seg-active); font-weight: var(--fw-semibold); }
.an-period-apply { margin-top: auto; height: 40px; border: 0; border-radius: var(--r-md); background: var(--accent); color: var(--white); font: var(--fw-semibold) var(--fs-14) var(--font); cursor: pointer; transition: background .15s; }
.an-period-apply:hover { background: var(--accent-hover); }
/* right: two months */
.an-period-cal { padding: var(--sp-16); }
.an-months { display: flex; gap: var(--sp-24); }
.an-month { position: relative; }
.an-month-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-12); }
.an-month-title { display: inline-flex; align-items: center; gap: var(--sp-4); border: 0; background: none; font: var(--fw-semibold) var(--fs-14) var(--font); color: var(--text-primary); cursor: pointer; padding: var(--sp-4) var(--sp-8); border-radius: var(--r-8); transition: background .12s; }
.an-month-title:hover { background: var(--hover-soft); }
.an-month-title svg { width: var(--ic-12); height: var(--ic-12); color: var(--text-secondary); }
/* month/year dropdown */
.an-my { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); z-index: 3; width: 236px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-menu); padding: var(--sp-8); }
.an-my-yr { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-8); }
.an-my-yrlabel { font: var(--fw-semibold) var(--fs-14) var(--font); color: var(--text-primary); }
.an-my-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.an-my-mo { padding: var(--sp-8) 0; border: 0; background: none; border-radius: var(--r-md); font: var(--fw-medium) var(--fs-14) var(--font); color: var(--text-primary); cursor: pointer; transition: background .12s; }
.an-my-mo:hover { background: var(--hover-soft); }
.an-my-mo.is-active { background: var(--accent); color: var(--white); }
.an-cal-nav { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: none; border-radius: var(--r-8); color: var(--text-secondary); cursor: pointer; transition: background .12s, color .12s; }
.an-cal-nav:hover { background: var(--hover-soft); color: var(--text-primary); }
.an-cal-nav svg { width: var(--ic-16); height: var(--ic-16); }
.an-cal-navsp { width: 28px; height: 28px; }
.an-month-wds { display: grid; grid-template-columns: repeat(7, 36px); margin-bottom: var(--sp-4); }
.an-month-wd { text-align: center; font: var(--fw-medium) var(--fs-12) var(--font); color: var(--text-secondary); padding: var(--sp-4) 0; }
.an-month-grid { display: grid; grid-template-columns: repeat(7, 36px); row-gap: 2px; }
.an-day { height: 34px; border: 0; background: none; font: var(--fw-medium) var(--fs-14) var(--font); color: var(--text-primary); cursor: pointer; display: grid; place-items: center; border-radius: var(--r-8); transition: background .1s; }
.an-day:hover { background: var(--hover-soft); }
.an-day.is-adjacent { color: var(--text-tertiary); }
.an-day.is-inrange { background: var(--accent-range); border-radius: 0; }
.an-day.is-inrange:hover { background: var(--accent-range); }
.an-day.is-start, .an-day.is-end, .an-day.is-single { background: var(--accent); color: var(--white); border-radius: var(--r-8); }
.an-day.is-start:hover, .an-day.is-end:hover, .an-day.is-single:hover { background: var(--accent-hover); }

/* ---------- widgets section ---------- */
.an-widgets { margin-top: var(--sp-20); }
.an-widget-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
@media (max-width: 1100px) { .an-widget-grid { grid-template-columns: 1fr; } }

.an-widget {
  position: relative; height: 100%;            /* fill the react-grid-layout cell */
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card-s);
  padding: var(--sp-16) var(--sp-20) var(--sp-20); display: flex; flex-direction: column; min-width: 0;
  transition: box-shadow .15s, opacity .15s;
}
/* drag handle (grip) — centered at the top, revealed on hover; only this is draggable */
.an-w-grip {
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 18px;
  border-radius: var(--r-frame); color: var(--text-secondary); background: none;
  cursor: grab; opacity: 0; transition: opacity .15s, background .15s; z-index: 2;
}
.an-widget:hover .an-w-grip { opacity: 1; }
.an-w-grip:hover { background: var(--hover-soft); color: var(--text-secondary); }
.an-w-grip:active { cursor: grabbing; }
.an-widget.is-dragging { opacity: .45; }
.an-widget.is-droptarget { box-shadow: 0 0 0 2px var(--accent); background: var(--accent-04); }
.an-w-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); margin-bottom: var(--sp-12); }
.an-w-title { font: var(--fw-medium) var(--fs-14) var(--font); color: var(--text-primary); }
.an-w-tools { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.an-w-tools button { width: 28px; height: 28px; border: 0; background: none; border-radius: var(--r-8); color: var(--text-secondary); cursor: pointer; display: grid; place-items: center; }
.an-w-tools button:hover { background: var(--hover-soft); color: var(--text-secondary); }
.an-w-body { flex: 1 1 auto; min-height: 0; }   /* fills the card; height driven by react-grid-layout */
.an-w-chart { width: 100%; height: 100%; display: flex; flex-direction: column; }
.an-w-chart > .recharts-responsive-container { flex: 1 1 auto; min-height: 0; }
.an-w-chart--bars { display: block; }
.an-w-empty { height: 100%; display: grid; place-items: center; color: var(--text-secondary); font: var(--fw-regular) var(--fs-14) var(--font); }

/* ---------- react-grid-layout: placeholder · lifted drag · resize handle ---------- */
.an-rgl { position: relative; }
/* drop placeholder — soft accent fill + solid accent outline (Asseta accent), card radius */
.an-rgl .react-grid-item.react-grid-placeholder {
  background: var(--accent-07); border: 1px solid var(--accent); border-radius: var(--r-card-s);
  opacity: 1; transition-duration: .12s; z-index: 2;
}
.an-rgl .react-grid-item.react-draggable-dragging { z-index: 3; }
.an-rgl .react-grid-item.react-draggable-dragging .an-widget { box-shadow: var(--shadow-modal); cursor: grabbing; }
.an-rgl .react-grid-item.resizing { z-index: 3; }
.an-rgl .react-grid-item.resizing .an-widget { box-shadow: var(--shadow-card); }
/* resize handle — diagonal dot-grip (navy@45%) in the corner, revealed on hover */
.an-rgl .react-resizable-handle {
  width: 18px; height: 18px; bottom: 3px; right: 3px; padding: 0;
  background-position: center; background-repeat: no-repeat; background-size: 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='%231a1e4699'%3E%3Ccircle cx='10' cy='2' r='1'/%3E%3Ccircle cx='10' cy='6' r='1'/%3E%3Ccircle cx='6' cy='6' r='1'/%3E%3Ccircle cx='10' cy='10' r='1'/%3E%3Ccircle cx='6' cy='10' r='1'/%3E%3Ccircle cx='2' cy='10' r='1'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0; transition: opacity .15s;
}
.an-rgl .react-grid-item:hover > .react-resizable-handle { opacity: .65; }
.an-rgl .react-resizable-handle:hover { opacity: 1; }

/* donut widget — ring (left) + centre readout + 2-column legend (right) */
.an-donut { display: flex; align-items: center; gap: var(--sp-24); width: 100%; height: 100%; }
.an-donut-chart { position: relative; flex: 0 0 46%; height: 100%; min-width: 0; }
.an-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding: 0 var(--sp-12); }
.an-donut-label { font: var(--fw-medium) var(--fs-12) var(--font); color: var(--text-secondary); margin-bottom: var(--sp-4); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-donut-total { font: var(--fw-semibold) var(--fs-20) var(--font); color: var(--text-primary); letter-spacing: -.01em; }
.an-donut-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-content: center; }
.an-donut-legend-item { display: flex; align-items: center; gap: var(--sp-8); font: var(--fw-medium) var(--fs-12) var(--font); color: var(--text-primary); white-space: nowrap; overflow: hidden; transition: opacity .12s; }
.an-donut-legend-item:not(.is-active) { opacity: .72; }
.an-donut-legend-item.is-dim { opacity: .35; }
.an-donut-sq { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.an-donut-leg-text { overflow: hidden; text-overflow: ellipsis; }

/* widget tooltip (Asseta card) */
.an-tip { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-8); box-shadow: var(--shadow-card); padding: var(--sp-8) var(--sp-12); }
.an-tip-name { font: var(--fw-medium) var(--fs-12) var(--font); color: var(--text-secondary); margin-bottom: var(--sp-2); }
.an-tip-val { font: var(--fw-semibold) var(--fs-14) var(--font); color: var(--text-primary); }
.an-tip-pct { font: var(--fw-medium) var(--fs-12) var(--font); color: var(--text-secondary); margin-top: var(--sp-2); }

/* ---------- table card (the grouped Asset Table, wrapped in widget chrome) ---------- */
.an-table-card {
  margin-top: var(--sp-16); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card-s); overflow: hidden;          /* clip the grid to the card's rounded corners */
}
.an-table-head {
  display: flex; align-items: center; gap: var(--sp-12);
  padding: var(--sp-16) var(--sp-20); border-bottom: 1px solid var(--border);
}
.an-table-title { font: var(--fw-medium) var(--fs-16) var(--font); color: var(--text-primary); }
.an-table-count { font: var(--fw-medium) var(--fs-12) var(--font); color: var(--text-secondary); }
.an-table-tools { margin-left: auto; display: flex; align-items: center; gap: var(--sp-8); }
/* the grid sits flush inside the card — drop its own outer frame; keep header/row hairlines */
.an-table-card .an-grid { margin-top: 0; }
.an-table-card .an-grid .ag-root-wrapper { border: none; border-radius: 0; }
/* white grid body (override the gray data-connections theme, scoped here only); header stays #F3F4F6 */
.an-table-card .ag-theme-quartz.an-grid {
  --ag-background-color: var(--white);
  --ag-odd-row-background-color: var(--white);
  --ag-header-background-color: var(--grid-header);   /* #F3F4F6 */
}
/* group-by segmented control */
.an-groupby { display: inline-flex; align-items: center; gap: var(--sp-6); }
.an-groupby-label { font: var(--fw-medium) var(--fs-12) var(--font); color: var(--text-secondary); }
/* outline variant for white surfaces: white fill + hairline border (not the gray pill) */
.an-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-pill); }
.an-seg-btn {
  height: 34px; padding: 0 var(--sp-12); border: 0; background: none; border-radius: var(--r-pill);
  font: var(--fw-medium) var(--fs-12) var(--font); color: var(--text-secondary); cursor: pointer; transition: background .15s, color .15s;
}
.an-seg-btn:hover:not(.is-active) { background: var(--hover-soft); color: var(--text-primary); }
.an-seg-btn.is-active { background: var(--seg-active); color: var(--navy); }
/* table-toolbar controls — outline variant for the white card: white fill + hairline border */
.an-table-tools .dc-density-btn:not(.is-active) { color: var(--text-secondary); }   /* idle density icons: tertiary → secondary (active stays primary) */
.an-table-tools .dc-density { background: var(--white); border: 1px solid var(--border); }
.an-table-tools .dc-iconbtn { background: var(--white); border: 1px solid var(--border); }
.an-table-tools .dc-iconbtn:hover { background: var(--hover-soft); }

/* grouped rows in the grid */
.an-grid .an-cell-num { justify-content: flex-end; }
.an-grid .ag-header-cell.an-head-num .ag-header-cell-label { justify-content: flex-end; }
/* header ↔ cell alignment: the reused dc-grid theme zeroes header padding-right (for DC hover icons);
   restore it so right-aligned number headers line up with the cell numbers; indent the group header
   to start at the top-level group name (caret + gap). */
.an-table-card .ag-theme-quartz.an-grid .ag-header-cell { padding-right: var(--sp-24); }
/* group header: master expand/collapse chevron + title, aligned to the row carets/names */
.an-grouphead { display: flex; align-items: center; gap: var(--sp-8); height: 100%; padding-left: 10px; }
.an-expandall { display: inline-flex; align-items: center; justify-content: center; width: var(--ic-16); height: var(--ic-16); flex: 0 0 var(--ic-16); padding: 0; border: 0; background: none; cursor: pointer; }
.an-grouphead .an-caret { color: var(--text-secondary); }
.an-expandall:hover .an-caret { color: var(--text-primary); }
.an-grouprow { display: flex; align-items: center; gap: var(--sp-8); width: 100%; }
.an-caret { display: inline-flex; align-items: center; justify-content: center; width: var(--ic-16); height: var(--ic-16); flex: 0 0 var(--ic-16); color: var(--text-secondary); transition: transform .15s; }
.an-caret.is-open { transform: rotate(90deg); }
.an-caret--leaf { visibility: hidden; }
.an-rowtext { display: flex; align-items: baseline; gap: var(--sp-8); min-width: 0; }
.an-rowname { font: var(--fw-regular) var(--fs-14) var(--font); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-rowname.is-group { font-weight: var(--fw-medium); color: var(--text-primary); }
.an-rowsub { font: var(--fw-medium) var(--fs-12) var(--font); color: var(--text-secondary); white-space: nowrap; }
.an-pct { font: var(--fw-regular) var(--fs-14) var(--font); color: var(--text-secondary); }
.an-pct.is-strong { color: var(--text-primary); font-weight: var(--fw-medium); }
.an-val { font: var(--fw-regular) var(--fs-14) var(--font); color: var(--text-secondary); }
.an-val.is-strong { color: var(--text-primary); font-weight: var(--fw-medium); }
.an-val.is-total { color: var(--text-primary); font-weight: var(--fw-semibold); }
.an-gl { font: var(--fw-regular) var(--fs-14) var(--font); }
.an-gl.pos { color: var(--st-green-fg); }
.an-gl.neg { color: var(--st-red-fg); }
.an-gl.is-strong { font-weight: var(--fw-medium); }

/* all rows white (hierarchy reads via bold group names + carets + indent); total row: strong top rule */
.an-grid .ag-row.an-row-group { background: var(--white); cursor: pointer; }   /* collapsed groups + leaves stay white; whole group row toggles expand */
/* only group rows are clickable here (toggle); leaves + pinned total are not — override the shared dc-grid row pointer */
.an-grid .ag-row.an-row-leaf, .an-grid .ag-row.an-row-total { cursor: default; }
/* non-clickable rows (leaves + pinned total) get no hover highlight — override the shared dc-grid row hover */
.ag-theme-quartz.dc-grid.an-grid .ag-row.an-row-leaf.ag-row-hover,
.ag-theme-quartz.dc-grid.an-grid .ag-row.an-row-total.ag-row-hover { background-color: var(--white) !important; }
.an-grid .ag-row.an-row-open { background: var(--row-open); }  /* only expanded groups get the subtle fill */
/* kill AG's own floating-bottom top border (the last body row's bottom hairline is the single separator) */
.an-table-card .an-grid .ag-floating-bottom { border-top: 0 !important; }
.an-grid .ag-floating-bottom .an-rowname { font-weight: var(--fw-semibold); color: var(--text-primary); }
.an-grid .ag-floating-bottom .ag-row { background: var(--white); }