/* ═══════════════════════════════════════════════════════════════════
   zones.css  —  FinNavigator™ v1.0
   Zone accordion: fn-zone, fn-zone-tab, fn-zone-body, chevron, footer
   Asset tile system: fn-tile, drawers, holdings table, IP drawer
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   ZONE ACCORDION (shared by all tabs)
   ══════════════════════════════════════════════════════════════════ */

.fn-wrap { display: flex; flex-direction: column; gap: 12px; }

/* Zone container */
.fn-zone {
  border-radius: var(--radius); overflow: hidden;
  border: 1.5px solid; transition: box-shadow .2s;
}

/* Zone-type modifiers (assets) */
.fn-zone-taxable  { border-color: #BFDBFE; background: #EEF6FF; }
.fn-zone-deferred { border-color: #FED7AA; background: #FFF7ED; }
.fn-zone-roth     { border-color: #BBF7D0; background: #F0FDF4; }
.fn-zone-liab     { border-color: #FECDD3; background: #FFF1F2; }

/* Zone-tab (form zones — no footer) */
.fn-zone-tab { border-color: var(--border-light); background: var(--surface-alt); }

/* Zone header */
.fn-zone-hdr {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; cursor: pointer; user-select: none;
  transition: filter .15s;
}
.fn-zone-hdr:hover { filter: brightness(.97); }
.fn-zone-icon  { font-size: 20px; flex-shrink: 0; }
.fn-zone-titles { flex: 1; min-width: 0; }
.fn-zone-title  { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
/* R7: icon · name · % · $ · chevron — fn-zone-name is the colored zone title in hdr */
.fn-zone-name  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; flex: 1; }
/* R7: percentage always #94a3b8 muted grey, never the zone color */
.fn-zone-pct   { font-size: 11px; font-weight: 400; color: #94a3b8; margin-right: 6px; flex-shrink: 0; min-width: 36px; text-align: right; }
.fn-zone-sub   { font-size: 11px; color: var(--muted); margin-top: 1px; }
.fn-zone-total { font-size: 15px; font-weight: 800; margin-right: 4px; flex-shrink: 0; }
.fn-zone-chev  { font-size: 11px; opacity: .5; transition: transform .25s; flex-shrink: 0; }
.fn-zone.open .fn-zone-chev { transform: rotate(90deg); }

/* Zone body — hidden when closed */
.fn-zone-body  { display: none; padding-bottom: 4px; }
.fn-zone.open .fn-zone-body { display: block; }
.fn-zone-body-inner { padding: 16px 20px 20px; }

/* Zone sub-header (used inside deferred zone for categories) */
.fn-zone-sub-hdr {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 6px 18px; border-top: 1px solid; margin-top: 2px;
  background: rgba(255,255,255,.5); grid-column: 1 / -1;
}

/* Zone footer */
.fn-zone-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; border-top: 1px solid;
}
.fn-foot-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.fn-foot-val { font-size: 18px; font-weight: 800; }
.fn-foot-badge { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 12px; }

/* ── Tab zone (form tabs don't have footer) ── */
.fn-zone-tab .fn-zone-total   { display: none; }
.fn-zone-tab .fn-zone-hdr-total { display: none; }
.fn-zone-tab .fn-zone-body { padding-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════
   ASSET TILE GRID
   ══════════════════════════════════════════════════════════════════ */

.fn-tiles {
  padding: 10px 12px 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.fn-tiles > .fn-zone-sub-hdr,
.fn-tiles > .fn-ip-grid-wrap { grid-column: 1 / -1; }
.fn-ip-inner-wrap { display: flex; flex-direction: column; gap: 8px; }

/* Tile card */
.fn-tile {
  background: var(--surface); border-radius: 10px; border: 1.5px solid #e2e8f0;
  overflow: hidden; transition: border-color .15s, box-shadow .15s;
  display: flex; flex-direction: column;
}
.fn-tile.open,
.fn-tile.fn-tile-holdings-open {
  grid-column: 1 / -1;
  box-shadow: 0 4px 14px rgba(26,58,92,.1);
}
.fn-zone-taxable  .fn-tile.open { border-color: var(--blue); }
.fn-zone-deferred .fn-tile.open { border-color: #D97706; }
.fn-zone-roth     .fn-tile.open { border-color: #16A34A; }
.fn-zone-liab     .fn-tile.open { border-color: #DC2626; }
.fn-tile-auto { background: #F8FAFC; grid-column: 1 / -1; }

/* Tile header row */
.fn-tile-row {
  display: flex; flex-direction: column;
  padding: 12px 12px 10px; cursor: pointer; flex: 1;
}
.fn-tile.open .fn-tile-row {
  flex-direction: row; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid #f1f5f9;
  flex: 0 0 auto;
}
.fn-tile-auto .fn-tile-row { cursor: default; flex-direction: row; align-items: center; gap: 10px; padding: 11px 14px; }
.fn-tile-info { flex: 1; min-width: 0; }
.fn-tile-name { font-size: 12px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.fn-tile-hint { font-size: 10px; color: var(--muted); margin-top: 3px; line-height: 1.4; }

/* Tile value */
.fn-tile-val {
  font-size: 17px; font-weight: 800; color: var(--navy);
  margin-top: 8px; letter-spacing: -.3px;
}
.fn-tile.open .fn-tile-val,
.fn-tile-auto .fn-tile-val { font-size: 15px; font-weight: 700; margin-top: 0; min-width: 80px; text-align: right; flex-shrink: 0; }
.fn-tile-val.empty { color: #94a3b8; font-size: 12px; font-weight: 400; margin-top: 6px; }
.fn-tile.open .fn-tile-val.empty,
.fn-tile-auto .fn-tile-val.empty { margin-top: 0; }

/* Edit/Add button */
.fn-tile-btn {
  display: none;
  padding: 5px 12px; border-radius: 7px; font-size: 11px; font-weight: 700;
  cursor: pointer; border: 1.5px solid #e2e8f0; color: #64748b; background: transparent;
  white-space: nowrap; flex-shrink: 0; transition: all .15s;
}
.fn-tile.open .fn-tile-btn,
.fn-tile-auto .fn-tile-btn { display: inline-block; }
.fn-tile-btn:hover  { border-color: var(--blue); color: var(--blue); background: #EEF6FF; }
.fn-tile-btn.edit   { background: #EEF6FF; border-color: var(--blue); color: var(--blue); }
.fn-tile-btn.edit:hover { background: var(--blue); color: #fff; }

/* Tile drawer */
.fn-drawer { display: none; padding: 12px 14px 14px; border-top: 1.5px dashed #e2e8f0; background: #FAFCFF; }
.fn-tile.open .fn-drawer { display: block; }
.fn-drawer-fields { display: grid; gap: 10px; align-items: end; margin-bottom: 10px; }
.fn-drawer-field label { font-size: 11px; font-weight: 600; color: #475569; display: block; margin-bottom: 4px; }
.fn-done-btn {
  width: 100%; padding: 10px; margin-top: 8px;
  background: var(--navy); color: #fff; border: none;
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 700;
  transition: opacity .15s;
}
.fn-done-btn:hover { opacity: .88; }

/* Holdings table */
.fn-holdings-detail { border-top: 1px solid #EDF2F7; background: #FAFCFF; }
.fn-holdings-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.fn-holdings-tbl th {
  background: #EEF6FF; color: var(--navy); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; padding: 8px 10px; text-align: left;
}
.fn-holdings-tbl th:nth-child(n+4) { text-align: right; }
.fn-holdings-tbl td { padding: 7px 10px; border-bottom: 1px solid #f1f5f9; font-size: 12px; color: #374151; }
.fn-holdings-tbl td:nth-child(n+4) { text-align: right; }
.fn-holdings-tbl tr:hover td { background: #F8FBFF; }
.fn-hld-num  { text-align: right !important; }
.fn-hld-name { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-hld-del, .fn-hld-save {
  background: none; border: none; cursor: pointer; font-size: 12px; padding: 2px 6px;
  border-radius: 4px; transition: background .1s;
}
.fn-hld-del  { color: #b91c1c; } .fn-hld-del:hover  { background: #FFF1F2; }
.fn-hld-save { color: var(--green); } .fn-hld-save:hover { background: var(--green-bg); }
.fn-hld-badge { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: #EEF6FF; color: var(--blue); margin-left: 4px; vertical-align: middle; }
.fn-ticker { font-family: 'Courier New', monospace; font-weight: 700; font-size: 11px; color: var(--navy); }

/* Import inline */
.fn-import-toggle-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.fn-import-toggle-btn {
  flex: 1; padding: 8px 14px; background: var(--bg); color: var(--text-light);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; text-align: left;
  transition: all .15s;
}
.fn-import-toggle-btn:hover, .fn-import-toggle-btn.open { border-color: var(--blue); color: var(--blue); background: #EEF6FF; }
.fn-imp-chev { float: right; font-size: 10px; }
.fn-hld-clear-btn { padding: 6px 12px; background: none; border: 1px solid #FECDD3; color: #b91c1c; border-radius: 6px; font-size: 11px; font-weight: 600; }

.fn-import-tabs { display: flex; border-bottom: 1.5px solid #e2e8f0; background: #F8FAFC; }
.fn-import-tab {
  flex: 1; padding: 9px 12px; font-size: 12px; font-weight: 600;
  border: none; background: none; cursor: pointer; color: #64748b;
  border-bottom: 2.5px solid transparent; transition: .15s;
}
.fn-import-tab:hover:not(.fn-import-tab-dis) { color: var(--navy); }
.fn-import-tab.active { color: var(--navy); border-bottom-color: var(--navy); }
.fn-import-tab-dis { opacity: .38; cursor: not-allowed; }
.fn-import-pane { padding: 12px 14px; }

/* Mini edit inputs (inside holdings table) */
.fn-mini-inp {
  width: 100%; padding: 4px 6px; border: 1px solid #e2e8f0;
  border-radius: 4px; font-size: 11px; font-family: inherit;
  background: var(--surface);
}
.fn-mini-inp:focus { outline: none; border-color: var(--blue); }
.fn-mini-sel { padding: 4px 6px; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 11px; font-family: inherit; }
.fn-mini-num { text-align: right; }
.fn-hld-editing td { background: #EEF6FF !important; }
.fn-add-row-btn {
  width: 100%; padding: 8px; margin-top: 6px;
  background: #F8FBFF; border: 1.5px dashed #BFDBFE;
  border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--navy);
  transition: all .15s;
}
.fn-add-row-btn:hover { border-color: var(--blue); background: #EEF6FF; color: var(--blue); }
.fn-save-manual-btn {
  width: 100%; padding: 11px; margin-top: 8px;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  color: #fff; border: none; border-radius: 10px;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(26,58,92,.25);
  transition: opacity .15s;
}
.fn-save-manual-btn:hover { opacity: .9; }

/* ── Asset summary cards ── */
.fn-sum-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 8px; }
.fn-sum-card {
  border-radius: 10px; padding: 12px 14px; text-align: center;
  border: 1.5px solid transparent;
}
.fn-sum-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #64748b; margin-bottom: 4px; }
.fn-sum-val { font-size: 17px; font-weight: 700; }
.fn-sum-sub { font-size: 9px; color: #64748b; margin-top: 2px; }

/* ── Risk tolerance bar ── */
.fn-risk-wrap { background: var(--bg); border-radius: var(--radius-sm); border: 1px solid var(--border-light); padding: 12px 16px; margin-bottom: 2px; }
.fn-risk-row  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fn-risk-lbl  { font-size: 12px; font-weight: 700; color: var(--navy); }
.fn-risk-btns { display: flex; gap: 6px; }
.fn-risk-btn {
  padding: 6px 14px; background: var(--surface); color: var(--text-light);
  border: 1.5px solid var(--border); border-radius: 20px;
  font-size: 12px; font-weight: 600; transition: all .15s;
}
.fn-risk-btn:hover  { border-color: var(--blue); color: var(--blue); }
.fn-risk-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── Investment Property tile ── */
.fn-ip-item {
  background: var(--surface); border-radius: 10px;
  border: 1.5px solid #DDD6FE; overflow: hidden;
  display: flex; flex-direction: column;
  grid-column: 1 / -1;
  transition: border-color .15s, box-shadow .15s;
}
.fn-ip-item.open { border-color: #7c3aed; box-shadow: 0 4px 14px rgba(124,58,237,.12); }
.fn-ip-item .fn-tile-row { flex-direction: row; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; border-bottom: none; }
.fn-ip-item.open .fn-tile-row { border-bottom: 1px solid #EDE9FE; flex: 0 0 auto; }
.fn-ip-drawer { display: none; padding: 14px 16px 16px; background: #FDFCFF; border-top: 1.5px dashed #DDD6FE; }
.fn-ip-item.open .fn-ip-drawer { display: block; }
.fn-ip-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 10px; }
.fn-ip-field { display: flex; flex-direction: column; gap: 4px; }
.fn-ip-field label { font-size: 11px; font-weight: 600; color: #475569; }
.fn-ip-field-full { grid-column: 1 / -1; }
.fn-ip-metrics { margin: 10px 0 4px; border-top: 1px solid #EDE9FE; padding-top: 10px; }
.fn-ip-metrics-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.fn-ip-metric-tile { background: #F5F3FF; border: 1px solid #DDD6FE; border-radius: 8px; padding: 9px 10px; }
.fn-ip-metric-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #64748b; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-ip-metric-val   { font-size: 16px; font-weight: 800; color: var(--navy); line-height: 1.1; }
.fn-ip-metric-sub   { font-size: 9px; color: #94a3b8; margin-top: 2px; }
.fn-ip-drawer-footer { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #EDE9FE; }
.fn-ip-del-btn { background: none; border: 1px solid #FECDD3; color: #b91c1c; border-radius: 7px; padding: 7px 14px; font-size: 12px; font-weight: 600; margin-left: auto; transition: all .15s; }
.fn-ip-del-btn:hover { background: #FFF1F2; border-color: #FCA5A5; }
.fn-ip-add-row { margin-top: 8px; grid-column: 1 / -1; }
.fn-ip-add-btn {
  background: #F5F3FF; color: #7C3AED; border: 1.5px dashed #C4B5FD;
  border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.fn-ip-add-btn:hover { background: #EDE9FE; }
.fn-ip-footer-summary { margin: 4px 12px 12px; padding: 10px 14px; background: #F5F3FF; border: 1px solid #DDD6FE; border-radius: 8px; }

/* IP chooser */
.fn-ip-chooser { background: linear-gradient(135deg,#F8FAFF,#F0F4FF); border: 1.5px solid #BFDBFE; border-radius: 14px; padding: 20px; margin-bottom: 12px; grid-column: 1/-1; }
.fn-ip-chooser-title { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 14px; text-align: center; }
.fn-ip-chooser-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fn-ip-chooser-btn {
  background: var(--surface); border: 1.5px solid #e2e8f0;
  border-radius: 11px; padding: 16px; cursor: pointer;
  text-align: center;
}
.fn-ip-chooser-btn:hover { border-color: var(--blue); background: #EEF6FF; }
.fn-ip-chooser-cons:hover { border-color: var(--blue); }
.fn-ip-chooser-det { cursor: default; text-align: left; }
.fn-ip-chooser-det:hover { border-color: #7c3aed; background: #F5F3FF; }
.fn-ip-chooser-icon { font-size: 28px; margin-bottom: 6px; text-align: center; }
.fn-ip-chooser-lbl  { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.fn-ip-chooser-sub  { font-size: 11px; color: var(--muted); line-height: 1.4; }
.fn-ip-count-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #e2e8f0; flex-wrap: wrap; }
.fn-ip-count-lbl { font-size: 11px; font-weight: 600; color: #475569; flex-shrink: 0; }
.fn-ip-count-ctrl { display: flex; align-items: center; gap: 4px; }
.fn-ip-cnt-btn { width: 26px; height: 26px; background: #F5F3FF; border: 1px solid #DDD6FE; border-radius: 6px; font-size: 14px; font-weight: 700; color: #7c3aed; }
.fn-ip-cnt-btn:hover { background: #EDE9FE; }
.fn-ip-cnt-val { font-size: 14px; font-weight: 700; color: var(--navy); padding: 0 4px; background: var(--surface); height: 28px; line-height: 28px; display: inline-block; }
.fn-ip-add-confirm-btn { margin-left: auto; padding: 6px 12px; background: #7c3aed; color: #fff; border: none; border-radius: 7px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.fn-ip-add-confirm-btn:hover { background: #6d28d9; }

/* ── Responsive ── */
@media (max-width: 700px) { .fn-tiles { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) {
  .fn-tiles { grid-template-columns: 1fr; }
  .fn-tile.open { grid-column: 1; }
  .fn-zone-total { display: none; }
  .fn-drawer-fields { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .fn-ip-row-2 { grid-template-columns: 1fr; }
  .fn-ip-metrics-grid { grid-template-columns: 1fr 1fr; }
  .fn-ip-chooser-opts { grid-template-columns: 1fr; }
}
@media (max-width: 380px) { .fn-ip-metrics-grid { grid-template-columns: 1fr; } }
@media (max-width: 500px) { .fn-sum-grid { grid-template-columns: 1fr; } }

/* ── Real Estate pair layout (R2: two halves side by side) ── */
/* .fn-re-pair: grid-column:1/-1, 2 cols: IPs left, Primary Residence right */
.fn-re-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  grid-column: 1 / -1;
}
.fn-re-ip-wrap  { display: flex; flex-direction: column; gap: 8px; }
.fn-re-res-wrap { display: flex; flex-direction: column; }
@media (max-width: 640px) { .fn-re-pair { grid-template-columns: 1fr; } }