/* CostusWorx Retire — app layer on the CostusWorx Fluent kit (Dynamics 365 look).
   Load order: assets/css/app.css (legacy) → assets/fluent-kit/fluent-core.css (synced kit, do not edit)
   → this file. Aliases the legacy variables to kit tokens and maps legacy classes onto the look.
   Tokens only outside TOKENS: php <kit>/tools/check_layer.php public/assets/css/fluent.css */

/* ===== TOKENS ===== */
:root {
  /* legacy remap: Retire's names are aliases of kit tokens. The tenant colour now lives in
     --tenant-primary (header chrome); actions use the Fluent blue like every CostusWorx app. */
  --brand: var(--v6-action); --brand-light: var(--v6-action-h); --brand-dark: var(--v6-t1);
  --accent: var(--v6-warn); --success: var(--v6-ok); --danger: var(--v6-bad);
  --bg: var(--v6-canvas); --surface: var(--v6-surface); --border: var(--v6-row);
  --text: var(--v6-t1); --text-muted: var(--v6-t3);
  --radius: var(--v6-r-md); --shadow: var(--v6-sh2);
  --tenant-primary: #1B4F72;          /* fallback; _layout.php sets the tenant's colour inline */
  --tenant-accent: #2E86C1;
  --ret-suggest-hit: #FFF4CE;         /* fund-search match highlight (Fluent warning-bar yellow) */
  --ret-unverified-bg: #FFFBF2;       /* unverified fund row tint */
}

/* ===== BASE ===== */
body, body *:not(svg):not(path):not(code):not(.v6-mono) { font-family: var(--v6-font) !important; }
body { line-height: var(--v6-lh-body); }
code, .fund-badge-isin { font-family: var(--v6-font-mono); }
td, .stat-value, .price, .success-ring { font-variant-numeric: tabular-nums; }

/* ── Header extras ── */
.v6-hdr-brand { padding-left: 8px; }
.hdr-plan { margin-left: 8px; padding: 2px 8px; border-radius: var(--v6-r-pill); background: var(--v6-on-chrome-field); color: var(--v6-surface); font-size: var(--v6-fs-cap); white-space: nowrap; }
.hdr-admin-pill { margin-left: 8px; }
.v6-footer .version-banner { margin-left: 12px; color: var(--v6-t4); }
.v6-footer .debug-on { color: var(--v6-bad); }

/* ── Page header → command bar above a 20px title (every view's .page-header: h1 + actions) ── */
.page-header { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 2px; margin: 0 -24px 16px; padding: 0 16px; }
.page-header::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 44px; background: var(--v6-surface); border-bottom: var(--v6-card-w) solid var(--v6-edge-strong); z-index: -1; }
.page-header:not(:has(> :not(h1)))::before { display: none; }
.page-header > :not(h1) { order: 1; min-height: 44px; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; color: var(--v6-t3); font-size: var(--v6-fs-cap); }
.page-header > h1 { order: 2; flex-basis: 100%; padding: 16px 8px 0; margin: 0; font-size: var(--v6-fs-sub1); line-height: var(--v6-lh-sub1); font-weight: 600; color: var(--v6-t1); }
.page-header .btn-primary, .page-header .btn-outline, .page-header .btn-outline-sm, .page-header .btn-link, .page-header .btn-danger {
  height: var(--v6-ctl-h); padding: 0 8px; border: 0; border-radius: var(--v6-r-sm); background: transparent; color: var(--v6-t1);
  font-size: var(--v6-fs-body); font-weight: 400; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.page-header .btn-primary { color: var(--v6-action); font-weight: 600; }
.page-header .btn-primary:hover, .page-header .btn-outline:hover, .page-header .btn-outline-sm:hover, .page-header .btn-link:hover, .page-header .btn-danger:hover { background: var(--v6-surface-2); color: var(--v6-t1); text-decoration: none; }
.page-header form { display: inline-flex; }

/* ── Type ── */
h1 { font-size: var(--v6-fs-sub1); line-height: var(--v6-lh-sub1); font-weight: 600; color: var(--v6-t1); }
h2 { font-size: var(--v6-fs-sub2); line-height: var(--v6-lh-sub2); font-weight: 600; color: var(--v6-t1); }
h3 { font-size: var(--v6-fs-body); line-height: var(--v6-lh-body); font-weight: 600; color: var(--v6-t1); }
.card h2, .card h3, .chart-card h3, .scenario-card h3, .plan-card h2 { margin-bottom: 12px; }
.text-muted { color: var(--v6-t3); }
small { font-size: var(--v6-fs-cap); }
a { color: var(--v6-action); }

/* ── KPI tiles ── */
.stats-grid { gap: 16px; margin-bottom: 16px; }
.stat-card { text-align: left; }
.stat-value { font-size: var(--v6-fs-sub1); line-height: var(--v6-lh-sub1); font-weight: 600; color: var(--v6-t1); }
.stat-label { font-size: var(--v6-fs-cap); line-height: var(--v6-lh-cap); color: var(--v6-t3); margin-top: 2px; }
.upgrade-link { font-size: var(--v6-fs-cap); color: var(--v6-action); }
.progress-bar { height: 4px; background: var(--v6-hover); border-radius: 2px; }
.progress-fill { background: var(--v6-action); }

/* ── Grids (44px rows, white header) ── */
.data-table { border-collapse: separate; border-spacing: 0; overflow: hidden; }
.data-table thead tr { background: var(--v6-surface); color: var(--v6-t2); }
.data-table th { height: var(--v6-row-h); padding: 0 8px; font-size: var(--v6-fs-body); font-weight: 600; color: var(--v6-t2); border-bottom: var(--v6-line) solid var(--v6-stroke); white-space: nowrap; }
.data-table td { height: var(--v6-row-h); padding: 4px 8px; font-size: var(--v6-fs-body); border-bottom: var(--v6-line) solid var(--v6-row); }
.data-table tbody tr:nth-child(even) { background: transparent; }
.data-table tbody tr:hover td { background: var(--v6-surface-2); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td a { text-decoration: none; }
.data-table td a:hover { text-decoration: underline; }

/* ── Forms (32px fields, bottom-stroke focus) ── */
.form-row label, .form label { font-size: var(--v6-fs-body); font-weight: 400; color: var(--v6-t2); }
input, select, textarea { font-size: var(--v6-fs-body); color: var(--v6-t1); background: var(--v6-surface); border: var(--v6-line) solid var(--v6-stroke2); border-bottom-color: var(--v6-t3); border-radius: var(--v6-r-sm); }
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]), select { height: var(--v6-ctl-h); padding: 0 8px; }
select { padding-right: 28px; }
textarea { padding: 6px 8px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--v6-stroke2); border-bottom: 2px solid var(--v6-action); box-shadow: none; }
input[readonly] { background: var(--v6-surface-2); color: var(--v6-t2); border-color: transparent; }
input[type=checkbox], input[type=radio] { accent-color: var(--v6-action); }
.form-section h2 { font-size: var(--v6-fs-sub2); color: var(--v6-t1); border-bottom: var(--v6-line) solid var(--v6-row); padding-bottom: 8px; margin-bottom: 12px; }
.popi-section { border-left-width: 4px; border-left-color: var(--v6-action); }
.checkbox-label { font-size: var(--v6-fs-body); }

/* ── Buttons ── */
.btn-primary, .btn-outline, .btn-outline-sm, .btn-danger { font-size: var(--v6-fs-body); font-weight: 600; height: var(--v6-ctl-h); padding: 0 12px; border-radius: var(--v6-r-sm); display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; }
.btn-primary { background: var(--v6-action); border: var(--v6-line) solid var(--v6-action); color: var(--v6-surface); }
.btn-primary:hover { background: var(--v6-action-h); }
.btn-outline { background: var(--v6-surface); border: var(--v6-line) solid var(--v6-stroke2); color: var(--v6-t1); }
.btn-outline:hover { background: var(--v6-surface-2); color: var(--v6-t1); }
.btn-outline-sm { height: 24px; padding: 0 8px; font-size: var(--v6-fs-cap); background: var(--v6-surface); border: var(--v6-line) solid var(--v6-stroke2); color: var(--v6-t1); }
.btn-outline-sm:hover { background: var(--v6-surface-2); }
.btn-danger { background: var(--v6-surface); border: var(--v6-line) solid var(--v6-bad-line); color: var(--v6-bad); }
.btn-danger:hover { background: var(--v6-bad-bg); color: var(--v6-bad-h); }
.btn-link { color: var(--v6-action); font-size: var(--v6-fs-body); }
.btn-full { width: 100%; height: 40px; }
button:disabled { background: var(--v6-disabled-bg); color: var(--v6-disabled-fg); border-color: transparent; cursor: default; }

/* ── Message bars ── */
.alert { border-radius: var(--v6-r-sm); padding: 8px 12px; font-size: var(--v6-fs-body); }
.alert-error, .alert-danger { background: var(--v6-bad-bg); border: var(--v6-line) solid var(--v6-bad-line); color: var(--v6-bad-h); }
.alert-success { background: var(--v6-ok-bg); border: var(--v6-line) solid var(--v6-ok); color: var(--v6-ok-h); }
.alert-warning, .alert-info { background: var(--v6-notice-bg); border: var(--v6-line) solid var(--v6-notice-line); color: var(--v6-t1); }

/* ── Pills: risk profile + risk level map onto status colours ── */
.badge { font-size: var(--v6-fs-cap); line-height: var(--v6-lh-cap); font-weight: 600; border-radius: var(--v6-r-pill); padding: 2px 8px; background: var(--v6-disabled-bg); color: var(--v6-t2); }
.badge-conservative { background: var(--v6-sel); color: var(--v6-action-ink); }
.badge-moderate, .badge-low, .badge-medium_low { background: var(--v6-ok-bg); color: var(--v6-ok-h); }
.badge-aggressive, .badge-medium, .badge-medium_high { background: var(--v6-warn-bg); color: var(--v6-warn); }
.badge-high { background: var(--v6-bad-bg); color: var(--v6-bad-h); }
/* account / tenant / run statuses */
.badge-active, .badge-verified, .badge-completed, .badge-matched { background: var(--v6-ok-bg); color: var(--v6-ok-h); }
.badge-suspended, .badge-failed, .badge-cancelled, .badge-error { background: var(--v6-bad-bg); color: var(--v6-bad-h); }
.badge-pending, .badge-trial, .badge-unmatched, .badge-unverified { background: var(--v6-warn-bg); color: var(--v6-warn); }
.stats-grid-sm { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* ── Cards, scenarios, plans ── */
.card-grid { gap: 16px; }
.scenario-card { color: var(--v6-t1); text-decoration: none; }
.scenario-card:hover { transform: none; }
.scenario-meta, .client-meta { font-size: var(--v6-fs-cap); color: var(--v6-t3); }
.client-meta { font-size: var(--v6-fs-body); }
.plan-current { border-color: var(--v6-action); }
.plan-badge { background: var(--v6-action); color: var(--v6-surface); font-size: var(--v6-fs-cap); }
.price { font-size: var(--v6-fs-title3); line-height: var(--v6-lh-title3); font-weight: 600; color: var(--v6-t1); }
.price-period, .plan-features { font-size: var(--v6-fs-body); }
.plan-features li { border-bottom-color: var(--v6-row); }
.feat-off { color: var(--v6-t4); }
.empty-state { background: var(--v6-surface); border: 2px dashed var(--v6-row); border-radius: var(--v6-r-md); color: var(--v6-t3); }

/* ── Simulation + results ── */
.sim-controls { gap: 16px; padding: 12px 16px; }
.sim-controls label { font-size: var(--v6-fs-body); font-weight: 600; }
.sim-status { font-size: var(--v6-fs-body); color: var(--v6-t3); }
.success-meter { padding: 24px; }
.success-ring { font-size: var(--v6-fs-title3); line-height: var(--v6-lh-title3); font-weight: 600; }
.success-detail { color: var(--v6-t3); }
.charts-grid { gap: 16px; }
.chart-card h3 { font-size: var(--v6-fs-body); color: var(--v6-t1); }
.export-bar { gap: 8px; }

/* ── Fund search ── */
.fund-search-label { font-size: var(--v6-fs-body); color: var(--v6-t2); }
.fund-suggestions { background: var(--v6-surface); border: var(--v6-line) solid var(--v6-stroke2); border-top: 0; border-radius: 0 0 var(--v6-r-sm) var(--v6-r-sm); box-shadow: var(--v6-sh16); }
.fund-suggestion-item { font-size: var(--v6-fs-body); border-bottom-color: var(--v6-row); }
.fund-suggestion-item:hover, .fund-suggestion-item.active { background: var(--v6-sel); }
.fund-suggestion-name { color: var(--v6-t1); }
.fund-suggestion-name strong { color: var(--v6-t1); background: var(--ret-suggest-hit); }
.fund-suggestion-meta, .fund-suggestion-loading, .fund-suggestion-empty { font-size: var(--v6-fs-cap); color: var(--v6-t3); }
.fund-badge { background: var(--v6-sel); border: var(--v6-line) solid var(--v6-sel-strong); border-radius: var(--v6-r-sm); font-size: var(--v6-fs-cap); }
.fund-badge-name { color: var(--v6-action-ink); }
.fund-badge-warn { color: var(--v6-warn); font-size: var(--v6-fs-cap); }
.fund-badge-unverified { background: var(--v6-warn-bg); border-color: var(--v6-warn); }
.fund-tag { font-size: var(--v6-fs-cap); border-radius: var(--v6-r-pill); letter-spacing: 0; text-transform: none; }
.fund-tag-verified { background: var(--v6-ok-bg); color: var(--v6-ok-h); }
.fund-tag-unverified { background: var(--v6-warn-bg); color: var(--v6-warn); }
.fund-suggestion-item.fund-unverified { background: var(--ret-unverified-bg); }
.optional-tag { font-size: var(--v6-fs-cap); color: var(--v6-t3); }

/* ── Sign-in (DealerPulse pattern: navy gradient, rounded 3D card) ── */
.auth-page { background: linear-gradient(160deg, var(--v6-brand-deep), var(--v6-brand) 60%, var(--v6-brand-line)); }
.auth-card { position: relative; border-radius: var(--v6-r-lg); border: 2px solid var(--v6-brand-ink); background: var(--v6-block-bg); box-shadow: var(--v6-raise-login); color: var(--v6-brand); padding: 32px 28px 24px; }
.auth-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--v6-chrome), var(--v6-chrome-accent), var(--v6-chrome)); border-radius: var(--v6-r-lg) var(--v6-r-lg) 0 0; }
.auth-logo { font-size: var(--v6-fs-sub1); line-height: var(--v6-lh-sub1); font-weight: 600; color: var(--v6-brand); text-align: center; }
.auth-card h2 { font-size: var(--v6-fs-body); color: var(--v6-t3); text-align: center; margin-bottom: 20px; }
.auth-card .form label { color: var(--v6-brand); font-weight: 600; }
.auth-card input:not([type=checkbox]) { color: var(--v6-brand); border-color: var(--v6-brand-soft); border-bottom-color: var(--v6-brand); }
.auth-card .btn-primary { background: var(--v6-brand); border-color: var(--v6-brand); }
.auth-card .btn-primary:hover { background: var(--v6-brand-deep); }
.auth-footer { font-size: var(--v6-fs-cap); color: var(--v6-t3); margin-top: 16px; }
.auth-links { text-align: right; margin: -4px 0 12px; font-size: var(--v6-fs-cap); }
.auth-links a { color: var(--v6-action-ink); }
.auth-intro { font-size: var(--v6-fs-body); color: var(--v6-t2); margin: 0 0 16px; }

/* Show/hide password: the eye sits inside the input; padding-right keeps text clear of it. */
.pw-wrap { position: relative; display: block; }
/* Same :not() chain as the base input rule above, plus .pw-wrap, so this out-ranks its padding. */
.pw-wrap input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]) { padding-right: 40px; }
.pw-peek { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--v6-t3); cursor: pointer; border-radius: var(--v6-r-sm); }
.pw-peek:hover { color: var(--v6-brand); }
.pw-peek:focus-visible { outline: 2px solid var(--v6-action); outline-offset: 1px; }
.pw-peek[aria-pressed=true] { color: var(--v6-action-ink); }

/* D365's smallest everyday text is Caption 1 (12px): floor legacy inline 9-11.5px (SVG chart labels excluded). */
body [style*="font-size:9px"]:not(text):not(tspan), body [style*="font-size: 9px"]:not(text):not(tspan),
body [style*="font-size:10px"]:not(text):not(tspan), body [style*="font-size: 10px"]:not(text):not(tspan),
body [style*="font-size:11px"]:not(text):not(tspan), body [style*="font-size: 11px"]:not(text):not(tspan),
body [style*="font-size:.7rem"], body [style*="font-size:0.7rem"], body [style*="font-size:.75rem"], body [style*="font-size:0.75rem"],
body [style*="font-size:.65rem"], body [style*="font-size:0.65rem"] { font-size: var(--v6-fs-cap) !important; }

@media (max-width: 768px) {
  .page-header { margin: 0 -12px 12px; padding: 0 8px; }
  .charts-grid { grid-template-columns: 1fr; }
  .v6-hdr .hdr-plan, .v6-footer .version-banner { display: none; }
}

/* ===== COMPONENTS ===== */
/* Large block (same tokens as the kit's .v6-block) */
.card, .form-section, .chart-card, .success-meter, .sim-controls, .data-table {
  border: var(--v6-card-w) solid var(--v6-card-line); border-radius: var(--v6-r-md); box-shadow: var(--v6-raise); background: var(--v6-block-bg); }
.card, .form-section, .chart-card { margin-right: 4px; }
.data-table { background: var(--v6-surface); margin-bottom: 16px; }
.scenario-card:hover { box-shadow: var(--v6-raise); }
/* Small tile */
.stat-card {
  border: var(--v6-card-w) solid var(--v6-card-line); border-radius: var(--v6-r-md); box-shadow: var(--v6-raise-sm); background: var(--v6-block-bg); padding: 10px 14px 12px; margin-right: 4px; }
.stat-card:hover { box-shadow: var(--v6-raise); }
@media print {
  .card, .form-section, .chart-card, .success-meter, .sim-controls, .data-table, .stat-card { border: 1px solid var(--v6-print-line); box-shadow: none; background: var(--v6-surface); }
}