/* ============================================================
   Afranga · My investments · cards prototype
   Sits on top of invest-concepts.css (same tokens, tabs, filters,
   drawer, modal, order bar). Only what the cards add lives here.
   All sizing in rem.
   ============================================================ */

.mi-tabs__count { font: var(--body-m); color: var(--inv-warm); margin-left: 0.125rem; }

/* ---------- overview ---------- */

.mi-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.mi-stat { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.25rem 1.5rem; background: var(--white); border: 0.0625rem solid var(--track); border-radius: 1rem; }
.mi-stat__label { font: var(--overline); letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--inv-warm); }
.mi-stat__value { font: var(--inv-h3); }
.mi-stat__value--pos { color: var(--green); }
.mi-stat__sub { font: var(--body-s); color: var(--inv-warm); }

/* ---------- filters row additions ---------- */

.inv-filters { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.mi-dd--right { left: auto; right: 0; }
.mi-divider { flex: none; width: 0.0625rem; height: 1.5rem; margin: 0 0.5rem; background: var(--border); }
.mi-view { display: inline-flex; height: 2.5rem; padding: 0.1875rem; gap: 0.125rem; border: 0.0625rem solid var(--border); border-radius: 0.5rem; background: var(--white); }
.mi-view__opt { width: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.3125rem; color: var(--inv-warm); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.mi-view__opt svg { width: 1.125rem; height: 1.125rem; }
.mi-view__opt:hover { color: var(--text-primary); }
.mi-view__opt.is-on { background: var(--charcoal); color: var(--white); }
.mi-hint { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.5rem; background: var(--bg-light); border-radius: 0.75rem; font: var(--body-m); color: var(--inv-warm); }
.inv-dd__item:disabled { color: var(--text-muted); cursor: not-allowed; }

/* ---------- groups + list ---------- */

.mi-body { display: flex; flex-direction: column; gap: 0.75rem; }
.mi-list { display: flex; flex-direction: column; gap: 0.75rem; }
.mi-list--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

/* ---------- the card ---------- */

.mi-card {
  background: var(--white); border: 0.0625rem solid var(--track); border-radius: 1rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.mi-card:hover { border-color: var(--border); box-shadow: var(--shadow-card); }
.mi-card--picked { border-color: var(--charcoal); }
.mi-card__summary { cursor: pointer; display: flex; align-items: center; gap: 1.5rem; padding: 1.25rem 1.5rem; }
.mi-card__summary--off { cursor: default; }
.mi-card__check { flex: none; width: 1.25rem; display: inline-flex; }
.mi-card__id { flex: 1.4 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.mi-card__logo { height: 1.25rem; width: auto; display: block; margin-bottom: 0.25rem; }
.mi-card__loan { font: var(--label-m); }
.mi-card__meta { font: var(--body-s); color: var(--inv-warm); }
.mi-card__badges { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.125rem; }

.mi-col { flex: none; width: 8.5rem; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.mi-col--grow { flex: 1 1 0; width: auto; }
.mi-col__label { font: var(--overline); letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--inv-warm); }
.mi-col__value { font: var(--label-m); }
.mi-col__sub { font: var(--body-s); color: var(--inv-warm); }
.mi-col--lead .mi-col__value { font: var(--title-l); }
.mi-col--grow .mi-col__value { font: var(--body-m); }
.mi-col--warn .mi-col__value { color: #a3302c; }

.mi-progress { display: block; height: 0.375rem; margin: 0.4375rem 0; background: var(--track); border-radius: 62.4375rem; overflow: hidden; }
.mi-progress__fill { display: block; height: 100%; background: var(--charcoal); border-radius: inherit; }

.mi-card__action { flex: none; width: 10.5rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; text-align: right; }
.mi-card__btns { display: inline-flex; align-items: center; gap: 0.5rem; }
.mi-card__price { font: var(--body-s); color: var(--inv-warm); }
.mi-btn-menu { gap: 0.25rem; }
.mi-btn-menu svg { width: 0.875rem; height: 0.875rem; }
.mi-icon { flex: none; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.5rem; color: var(--text-primary); transition: background var(--t-fast) var(--ease); }
.mi-icon:hover { background: var(--surface-subtle); }
.mi-icon svg { width: 1.25rem; height: 1.25rem; }
.mi-icon:focus-visible, .mi-seg__opt:focus-visible, .mi-view__opt:focus-visible { outline: 0.125rem solid var(--charcoal); outline-offset: 0.125rem; }

/* the menu on a card */
.mi-menu { min-width: 19rem; white-space: normal; }
.mi-menu__item { height: auto; min-height: 2.25rem; flex-direction: column; align-items: flex-start; gap: 0; white-space: normal; }
.mi-menu__item > span:first-child { font: var(--label-m); }
.mi-menu__price { font: var(--body-s); color: var(--inv-warm); }
.mi-menu__blocked { padding: 0.5rem 0.75rem; font: var(--body-s); color: var(--inv-warm); max-width: 19rem; white-space: normal; }
.mi-menu__rule { height: 0.0625rem; margin: 0.25rem 0; background: var(--border); }

/* ---------- details in the side panel: one column, one fact per row ---------- */

.mi-details { display: flex; flex-direction: column; gap: 1.5rem; }
.mi-kvtable { display: flex; flex-direction: column; }
.mi-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 0.75rem 0; border-bottom: 0.0625rem solid var(--track); min-width: 0; }
.mi-kv:first-child { padding-top: 0; }
.mi-kv__label { flex: none; font: var(--body-m); color: var(--inv-warm); }
.mi-kv__val { font: var(--label-m); text-align: right; display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.5rem; }
.mi-flag { width: 1.25rem; height: 0.875rem; flex: none; }

.mi-sub { display: flex; flex-direction: column; gap: 0.5rem; }
.mi-sub__title { font: var(--overline); letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--inv-warm); }
.mi-sub__text { font: var(--body-m); color: var(--inv-warm); }
.mi-purchase { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: 0.75rem 1rem; background: var(--bg-light); border-radius: 0.75rem; font: var(--body-m); }
.mi-purchase__amt { font: var(--label-m); }
.mi-purchase__id { font: var(--body-s); color: var(--inv-warm); }
.mi-purchase__amt, .mi-purchase__id { text-align: right; }
.mi-panel__footer { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem 1.5rem 1.5rem; border-top: 0.0625rem solid var(--border); }
.mi-acts { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.mi-act { flex: 1 1 9rem; min-width: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.mi-act .inv-btn-md { width: 100%; padding: 0 0.75rem; }
.mi-act__price { font: var(--body-s); color: var(--inv-warm); text-align: center; }
.mi-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

.mi-dhead { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.mi-panel { width: 32rem; }

/* ---------- totals, empty state ---------- */

.mi-totals { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 2rem; padding: 1rem 1.5rem; background: var(--bg-light); border: 0.0625rem solid var(--track); border-radius: 1rem; font: var(--body-m); color: var(--inv-warm); }
.mi-totals__label { font: var(--label-m); color: var(--text-primary); margin-right: auto; }
.mi-totals strong { font: var(--label-m); color: var(--text-primary); margin-left: 0.25rem; }

.mi-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 3.5rem 1.5rem; background: var(--white); border: 0.0625rem solid var(--track); border-radius: 1rem; text-align: center; }
.mi-empty__title { font: var(--title-l); }
.mi-empty__text { font: var(--body-m); color: var(--inv-warm); margin-bottom: 0.75rem; }

.mi-error { font: var(--body-s); color: #a3302c; }
.mi-sale-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; font: var(--body-m); }
.mi-sale-line strong { font: var(--label-m); }

/* ---------- toast ---------- */

.mi-toast { position: fixed; left: 50%; bottom: 7.5rem; z-index: 80; transform: translateX(-50%); padding: 0.75rem 1.25rem; background: var(--charcoal); color: var(--white); border-radius: 0.75rem; font: var(--body-m); box-shadow: var(--shadow-pop); max-width: calc(100vw - 2rem); }

/* ---------- design tweaks panel (prototype only, not part of the design) ---------- */

.mi-tweaks {
  position: fixed; right: 1rem; top: 1rem; z-index: 60; width: 16rem; max-height: calc(100vh - 2rem); overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.875rem; padding: 1rem;
  background: var(--charcoal); color: var(--white); border-radius: 1rem; box-shadow: var(--shadow-pop);
}
.mi-tweaks--closed { width: auto; flex-direction: row; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font: var(--label-s); }
.mi-tweaks svg { width: 1rem; height: 1rem; }
.mi-tweaks__head { display: flex; align-items: center; justify-content: space-between; }
.mi-tweaks__title { display: inline-flex; align-items: center; gap: 0.5rem; font: var(--label-m); }
.mi-tweaks .inv-icon-btn { color: var(--white); }
.mi-tweaks .inv-link { color: var(--peach); align-self: flex-start; }
.mi-tweak { display: flex; flex-direction: column; gap: 0.375rem; }
.mi-tweak__label { font: var(--caption-s); color: rgba(255, 255, 255, 0.7); }
.mi-seg { display: flex; padding: 0.125rem; background: rgba(255, 255, 255, 0.1); border-radius: 0.5rem; }
.mi-seg__opt { flex: 1; padding: 0.375rem 0.25rem; border-radius: 0.375rem; font: var(--label-s); color: rgba(255, 255, 255, 0.8); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.mi-seg__opt.is-on { background: var(--white); color: var(--charcoal); }

@media (min-width: 75.0625rem) { .main--inv.has-tweaks { padding-right: 18rem; } }

/* ---------- two-column layout and narrow screens: the card stacks ---------- */

.mi-list--grid .mi-card__summary { flex-wrap: wrap; gap: 1rem 1.5rem; }
.mi-list--grid .mi-card__id { flex: 1 1 100%; }
.mi-list--grid .mi-col { flex: 1 1 0; width: auto; }
.mi-list--grid .mi-col--grow { flex: 1 1 100%; }
.mi-list--grid .mi-card__action { flex: 1 1 auto; width: auto; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 0.75rem; text-align: left; }

@media (max-width: 75rem) {
  .mi-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mi-list--grid { grid-template-columns: minmax(0, 1fr); }
  .mi-card__summary { flex-wrap: wrap; gap: 1rem 1.5rem; }
  .mi-card__id { flex: 1 1 100%; }
  .mi-col { flex: 1 1 0; width: auto; }
  .mi-col--grow { flex: 1 1 100%; }
  .mi-card__action { flex: 1 1 auto; width: auto; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 0.75rem; text-align: left; }
  .mi-tweaks { top: auto; bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mi-card, .mi-icon, .mi-seg__opt, .mi-view__opt { transition: none; }
}