/* ═══════════════════════════════════════════════════════════════════
   tabs.css  —  FinNavigator™ v1.0
   Tab-specific CSS: General, COL worksheet, General children cards,
   review, and any tab-specific layout classes.
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   GENERAL TAB
   ══════════════════════════════════════════════════════════════════ */

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

/* Intake context chips */
.gen-context { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 14px; background: var(--surface); border: 1.5px solid var(--border-light); border-radius: var(--radius-sm); }
.gen-chips   { display: flex; gap: 6px; flex-wrap: wrap; }
.gen-chip    { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 16px; font-size: 11px; font-weight: 700; }
.gen-chip-marital { background: #EEF6FF; color: #1e40af; border: 1px solid #BFDBFE; }
.gen-chip-wealth  { background: #FFF7ED; color: #92400e; border: 1px solid #FED7AA; }
.gen-chip-trust   { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }
.gen-edit-intake  { font-size: 11px; font-weight: 600; color: var(--muted); background: none; border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 4px 10px; transition: .15s; }
.gen-edit-intake:hover { color: var(--navy); border-color: var(--navy); }

/* People row — side by side for couples */
.gen-people-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gen-people-col { display: flex; flex-direction: column; }
@media (max-width: 640px) { .gen-people-row { grid-template-columns: 1fr; } }

/* Person preview */
.gen-person-preview { display: flex; align-items: center; gap: 10px; padding: 10px 16px 14px; }
.gen-avatar    { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--blue)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; flex-shrink: 0; }
.gen-person-info { display: flex; flex-direction: column; }
.gen-person-name { font-size: 15px; font-weight: 700; color: var(--navy); }
.gen-person-age  { font-size: 12px; color: var(--muted); }

/* Children */
.gen-children-wrap  { display: flex; flex-direction: column; gap: 6px; }
.gen-children-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 2px; }
.gen-children-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
@media (max-width: 500px) { .gen-children-cards { grid-template-columns: 1fr; } }
.gen-child-card     { background: var(--surface); border: 1.5px solid var(--border-light); border-radius: var(--radius-sm); padding: 12px; }
.gen-child-hdr      { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.gen-child-avatar   { width: 30px; height: 30px; background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; border-radius: 50%; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gen-child-titles   { display: flex; flex-direction: column; }
.gen-child-label    { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.gen-child-name     { font-size: 13px; font-weight: 700; color: var(--navy); }
.gen-child-fields   { grid-template-columns: 1fr 1fr; }
@media (max-width: 400px) { .gen-child-fields { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════
   COL TAB
   ══════════════════════════════════════════════════════════════════ */

.fn-hint-inline { font-size: 11px; color: var(--muted); font-style: italic; font-weight: 400; margin-left: 4px; }
.fn-col-bar     { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; margin-top: 10px; }
.fn-col-bar-blue  { background: #EEF6FF; color: #1e40af; border: 1px solid #BFDBFE; }
.fn-col-bar-amber { background: #FFF7ED; color: #92400e; border: 1px solid #FED7AA; }
.fn-col-sub       { background: var(--bg); border-radius: var(--radius-sm); padding: 12px; border: 1px solid var(--border-light); margin-top: 8px; }
.fn-col-sub-title { font-size: 11px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.fn-col-tax-note  { font-size: 11px; color: var(--muted); margin-top: 8px; padding: 6px 12px; background: var(--bg); border-radius: var(--radius-xs); }
.fn-tax-badge     { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; margin-right: 6px; vertical-align: middle; }
.fn-tax-known     { background: var(--green-bg);  color: var(--green); }
.fn-tax-est       { background: var(--amber-bg);  color: var(--amber); }

/* COL expense tiles */
.fn-col-expense-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
@media (max-width: 500px) { .fn-col-expense-tiles { grid-template-columns: 1fr; } }
.fn-col-etile         { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; transition: border-color .15s; }
.fn-col-etile.open    { border-color: var(--blue); }
.fn-col-etile-hdr     { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; user-select: none; }
.fn-col-etile-hdr:hover { background: var(--bg); }
.fn-col-etile-icon    { font-size: 22px; flex-shrink: 0; }
.fn-col-etile-info    { flex: 1; }
.fn-col-etile-title   { font-size: 13px; font-weight: 700; color: var(--navy); }
.fn-col-etile-sub     { font-size: 11px; color: var(--muted); }
.fn-col-etile-val     { font-size: 16px; font-weight: 800; color: var(--navy); flex-shrink: 0; }
.fn-col-etile-chev    { font-size: 11px; color: var(--muted); transition: transform .2s; flex-shrink: 0; }
.fn-col-etile.open .fn-col-etile-chev { transform: rotate(90deg); }

/* Worksheet */
.fn-worksheet    { border: 1.5px solid var(--border-light); border-radius: var(--radius-sm); overflow: hidden; margin-top: 4px; }
.fn-ws-head      { display: grid; grid-template-columns: 24px 1fr 120px 90px 60px 80px 28px; gap: 0; background: #EEF6FF; padding: 6px 10px; }
.fn-ws-hcol      { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--navy); }
.fn-ws-row       { display: grid; grid-template-columns: 24px 1fr 120px 90px 60px 80px 28px; gap: 0; align-items: center; padding: 5px 10px; border-bottom: 1px solid var(--border-light); }
.fn-ws-row:last-child { border-bottom: none; }
.fn-ws-row:hover      { background: #FAFCFF; }
.fn-ws-num    { font-size: 11px; color: var(--muted); text-align: center; }
.fn-ws-input  { width: 100%; padding: 5px 7px; border: 1px solid #e2e8f0; border-radius: 5px; font-size: 12px; font-family: inherit; background: var(--surface); }
.fn-ws-input:focus { outline: none; border-color: var(--blue); }
.fn-ws-select { padding: 5px 6px; border: 1px solid #e2e8f0; border-radius: 5px; font-size: 11px; font-family: inherit; background: var(--surface); width: 100%; }
.fn-ws-select:focus { outline: none; border-color: var(--blue); }
.fn-ws-amt    { text-align: right; }
.fn-ws-freq   { padding-left: 4px; }
.fn-ws-ann    { font-size: 12px; font-weight: 700; color: var(--navy); text-align: right; padding-right: 4px; }
.fn-ws-del    { background: none; border: none; color: #94a3b8; font-size: 13px; padding: 2px 6px; transition: color .1s; }
.fn-ws-del:hover { color: #dc2626; }
.fn-ws-empty  { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; }
.fn-ws-foot   { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg); border-top: 1px solid var(--border-light); }
.fn-ws-add    { padding: 7px 14px; background: none; border: 1.5px dashed #BFDBFE; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; color: var(--navy); transition: .15s; }
.fn-ws-add:hover { background: #EEF6FF; border-color: var(--blue); }
.fn-ws-done   { padding: 7px 14px; background: var(--navy); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; }
@media (max-width: 700px) {
  .fn-ws-head, .fn-ws-row { grid-template-columns: 24px 1fr 80px 70px 50px 65px 28px; }
}
@media (max-width: 500px) {
  .fn-ws-head { display: none; }
  .fn-ws-row  { grid-template-columns: 24px 1fr 70px 28px; grid-template-rows: auto auto; }
  .fn-ws-cat, .fn-ws-freq, .fn-ws-ann { display: none; }
}

/* COL Waterfall summary */
.fn-col-summary   { display: flex; flex-direction: column; gap: 0; }
.fn-wf-row        { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid var(--border-light); }
.fn-wf-row:last-child { border-bottom: none; }
.fn-wf-label      { font-size: 13px; color: var(--text-light); }
.fn-wf-val        { font-size: 14px; font-weight: 700; color: var(--navy); }
.fn-wf-top        { background: #EEF6FF; }
.fn-wf-minus .fn-wf-label { color: var(--muted); }
.fn-wf-minus .fn-wf-val   { color: var(--muted); }
.fn-wf-aftertax   { border-top: 2px solid var(--border-light); background: var(--bg); }
.fn-wf-aftertax .fn-wf-label { font-weight: 700; color: var(--navy); }
.fn-wf-aftertax .fn-wf-val   { font-size: 16px; }
.fn-col-final     { padding: 16px; margin-top: 4px; border-radius: var(--radius-sm); text-align: center; }
.fn-col-final-pos { background: var(--green-bg);  border: 2px solid var(--green-bdr); }
.fn-col-final-neg { background: var(--red-bg);    border: 2px solid var(--red-bdr);   }
.fn-col-final-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 4px; }
.fn-col-final-val   { font-size: 28px; font-weight: 800; letter-spacing: -.5px; }
.fn-col-final-sub   { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* Mortgage grid */
.fn-mtg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fn-mortgage-note { font-size: 11px; color: var(--muted); padding: 6px 10px; background: var(--bg); border-radius: var(--radius-xs); margin: 6px 0; }
.fn-bonds-note { font-size: 11px; color: var(--muted); padding: 5px 8px; border-radius: var(--radius-xs); margin: 4px 0; }
.fn-bonds-note.differ { background: #FFF7ED; color: #92400e; }
.fn-gain-inline { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 8px; }
.fn-gain-inline.pos { background: var(--green-bg); color: var(--green); }
.fn-gain-inline.neg { background: var(--red-bg);   color: var(--red);   }
.fn-hld-basis { color: var(--muted) !important; }
.fn-hld-clickable { cursor: pointer; text-decoration: underline dotted; }

/* ══════════════════════════════════════════════════════════════════
   REVIEW TAB — import existing review CSS
   ══════════════════════════════════════════════════════════════════ */
/* Review, KPI, rv2-* classes are kept in the existing style.css which
   is included alongside the new CSS. No duplication needed here. */