/* Basic branding and page styles for admin */
:root{ --primary:#2E5C3E; --accent:#6B9B7A; --muted:#6b7280; --bg:#f7fbf7; --card:#fff; --search-border: #0b6623 }

/* Badge colors for calculators (moved from inline styles) */
:root {
    --badge-superseded-bg: #e6f8ed; /* soft green background */
    --badge-superseded-color: #0b6623; /* green text */
    --badge-superseded-border: rgba(11,102,35,0.12);

    --badge-rule-bg: #fff3cd; /* existing rule-of-thumb yellow */
    --badge-rule-color: #856404;
    --badge-rule-border: rgba(133,100,4,0.12);
}
body{ font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:var(--bg); color:#0f172a; }
.header{ background:linear-gradient(90deg,var(--primary),var(--accent)); color:#fff; padding:12px 0; }
.header .nav{ display:flex; align-items:center; justify-content:space-between; max-width:1100px; margin:0 auto; padding:0 16px; }
.logo{ font-weight:700; font-size:1.25rem; color:#fff; text-decoration:none; }
.nav-links{ list-style:none; display:flex; gap:12px; align-items:center; margin:0; padding:0; }
.nav-links a{ color:#fff; text-decoration:none; padding:8px 10px; border-radius:6px; }
.nav-links a:hover{ background:rgba(255,255,255,0.06); }
.container{ max-width:1100px; margin:0 auto; padding:20px 16px; }
.rp-form-container{ background:var(--card); padding:16px; border-radius:8px; box-shadow:0 4px 12px rgba(16,24,40,0.04); }
.rp-form-group{ margin-bottom:12px }
.rp-form-control{ width:100%; padding:10px; border-radius:6px; border:1px solid #e6eef1 }
.rp-table{ width:100%; border-collapse:collapse; background:var(--card); border-radius:8px; overflow:hidden; box-shadow:0 4px 12px rgba(16,24,40,0.04); }
.rp-table th{ text-align:left; background:#f1f5f9; font-weight:600; }
.rp-table td, .rp-table th{ padding:12px; border-bottom:1px solid #f2f4f7 }
.alert{ padding:12px; border-radius:8px; margin:12px 0 }
.alert-success{ background:#e6f6ec; color:#0b6623 }
.alert-danger{ background:#fee2e2; color:#991b1b }
/* Footer: uses shared styles in components.css; keep this file for page-specific overrides only */


/* Prevent grid row hover from coloring form panels (e.g. Admin Investments) */
.rp-form-container .rp-grid-row,
.rp-form-container .rp-grid-row:hover,
.rp-card .rp-grid-row,
.rp-card .rp-grid-row:hover {
    background: transparent !important;
}

/* search result button styling for Investments page */
.search-result-btn {
  margin-right: 8px;
  padding: 6px 8px;
  border: 1px solid var(--search-border);
  background: transparent;
  color: inherit;
  border-radius: 6px;
}

.search-result-btn:hover {
  background: rgba(11,102,35,0.06);
}

/* stronger override so .rp-btn doesn't remove the border */
.rp-btn.search-result-btn {
  border: 1px solid var(--search-border) !important;
  background: transparent !important;
  color: inherit;
}

/* add vertical gap between stacked rows inside form container */
.rp-form-container .rp-grid-row + .rp-grid-row {
  margin-top: 20px;
}

/* two-column compact layout for Investments form */
.rp-two-col{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.rp-two-col .rp-form-group{ margin-bottom:8px }
@media (max-width:720px){ .rp-two-col{ grid-template-columns: 1fr; } }

/* vehicle list item styles for Investments page */
.rp-veh{ display:flex; align-items:flex-start; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #eef2f0; }
.rp-veh:last-child{ border-bottom:0 }
.rp-veh-main{ flex:1; min-width:0 }
.rp-veh-header{ font-weight:600; margin-bottom:6px; display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.rp-veh-name{ color:#334155; font-weight:400; margin-left:6px }
.rp-veh-meta{ color:#475569; font-size:0.95rem }
.rp-veh-actions{ margin-left:12px; display:flex; gap:6px; align-items:center }
.rp-badge{ font-size:0.75rem; padding:3px 6px; border-radius:6px; background:#eef6ec; color:var(--search-border); border:1px solid rgba(11,102,35,0.12); }
.rp-badge.warn{ background:#fff7ed; color:#b45309; border:1px solid rgba(180,83,9,0.12); }
.rp-badge.stale{ background:#fff7f7; color:#991b1b; border:1px solid rgba(153,27,27,0.08); }
.rp-veh .rp-btn.small{ padding:6px 8px; }

/* Calculator landing / page badges */
.calc-badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.85rem;
    white-space: nowrap;
}
.calc-badge--superseded {
    background: var(--badge-superseded-bg);
    color: var(--badge-superseded-color);
    border: 1px solid var(--badge-superseded-border);
}
.calc-badge--rule {
    background: var(--badge-rule-bg);
    color: var(--badge-rule-color);
    border: 1px solid var(--badge-rule-border);
}

/* compact layout for metadata blocks */
.rp-veh-meta-block{ display:flex; gap:12px; flex-wrap:wrap }

/* manual returns display row */
.rp-veh-returns{ margin-top:5px; font-size:0.8rem; color:#475569; letter-spacing:0.01em }

/* history / projection mini-bar */
.rp-veh-minibar{ display:flex; align-items:center; gap:10px; margin-top:6px; font-size:0.8rem; flex-wrap:wrap }
.rp-minibar-point{ display:flex; flex-direction:column; align-items:center; gap:1px }
.rp-minibar-label{ color:#94a3b8; font-size:0.72em }
.rp-minibar-pct{ font-weight:600 }
.rp-minibar-pos{ color:#0b6623 }
.rp-minibar-neg{ color:#991b1b }
.rp-minibar-today{ color:#94a3b8; font-size:0.85em; padding:0 2px }
.rp-minibar-forward{ opacity:0.75 }

.rp-form-container.investors-panel,
.investors-panel {
     max-width: none !important;
     width: 90% !important;
     padding-left: 20px !important;
     padding-right: 20px !important;
 }
 
 /* Individual investor panel sizing: use viewport width so panels scale and don't get capped at smaller values */
 .investor-panel {
     width: 80vw !important; /* ~90% of viewport */
     max-width: 1200px !important; /* don't grow beyond page design */
     margin-left: auto !important;
     margin-right: auto !important;
     box-sizing: border-box !important;
 }
 
 @media (max-width: 720px) {
     .investor-panel { width: 96vw !important; }
 }

/* Life stage date cell coloring: background + foreground per stage.
   Use CSS variables to allow easy tweaking of colors. Apply to the left Date cell
   in projection/lifestage grids via the class .rp-stage-cell and specific stage
   classes below. */
:root{
    --rp-stage-accum-bg: #e6f3ff; /* muted blue */
    --rp-stage-accum-color: #0b3d66;
    --rp-stage-active-bg: #eaf7ea; /* muted green */
    --rp-stage-active-color: #1b5e20;
    --rp-stage-slowdown-bg: #fff8e1; /* muted yellow */
    --rp-stage-slowdown-color: #8a5a00;
    --rp-stage-notravel-bg: #fff1f1; /* muted red */
    --rp-stage-notravel-color: #7a1b1b;
    --rp-stage-assisted-bg: #f5f5f5; /* muted grey */
    --rp-stage-assisted-color: #222222;
}

.rp-table td.rp-stage-cell { font-weight:600; border-right:1px solid rgba(0,0,0,0.04); }
.rp-table td.rp-stage-accumulation { background: var(--rp-stage-accum-bg); color: var(--rp-stage-accum-color); }
.rp-table td.rp-stage-active { background: var(--rp-stage-active-bg); color: var(--rp-stage-active-color); }
.rp-table td.rp-stage-slowdown { background: var(--rp-stage-slowdown-bg); color: var(--rp-stage-slowdown-color); }
.rp-table td.rp-stage-notravel { background: var(--rp-stage-notravel-bg); color: var(--rp-stage-notravel-color); }
.rp-table td.rp-stage-assisted { background: var(--rp-stage-assisted-bg); color: var(--rp-stage-assisted-color); }

/* Stage indicator badges (small pills shown in header) */
#rp-stage-indicators { display:flex; gap:6px; align-items:center; }
.rp-stage-badge { padding:4px 8px; border-radius:12px; font-size:12px; border:1px solid rgba(0,0,0,0.06); }
.rp-stage-badge.rp-stage-accumulation { background: var(--rp-stage-accum-bg); color: var(--rp-stage-accum-color); }
.rp-stage-badge.rp-stage-active { background: var(--rp-stage-active-bg); color: var(--rp-stage-active-color); }
.rp-stage-badge.rp-stage-slowdown { background: var(--rp-stage-slowdown-bg); color: var(--rp-stage-slowdown-color); }
.rp-stage-badge.rp-stage-notravel { background: var(--rp-stage-notravel-bg); color: var(--rp-stage-notravel-color); }
.rp-stage-badge.rp-stage-assisted { background: var(--rp-stage-assisted-bg); color: var(--rp-stage-assisted-color); }

/* Toast styles used by goals page toast notifications */
#toastContainer { pointer-events: none; }
.rp-toast { font-family: inherit; font-size: 0.95rem; }
.rp-toast-success { background: #28a745; }
.rp-toast-error { background: #dc3545; }

/* Message Indicator Styles */
.message-indicator {
    display: inline-block;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 16px;
    line-height: 1;
    margin-right: 6px;
    cursor: help;
    vertical-align: middle;
}

/* Ensure message indicators are left-justified in cells */
.rp-table td.rp-stage-cell .message-indicator {
    float: right;
    margin-left: 8px;
}

.rp-table td .message-indicator {
    float: right;
    margin-left: 8px;
}

/* Tooltip styling for message indicators */
.tooltip-inner {
    text-align: left;
    max-width: 400px;
    padding: 10px 12px;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Custom tooltip for message indicators (lightweight, no Bootstrap) */
.message-tooltip {
    position: fixed;
    z-index: 10000;
    background: #333;
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.message-tooltip br {
    display: block;
    content: "";
    margin: 4px 0;
}

/* Summary bar layout: split left (chart) and right (summary) side-by-side */
.summary-bar {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}
.summary-bar .summary-left,
.summary-bar .summary-right {
    min-width: 0; /* allow grid children to shrink properly */
}
.summary-bar .chart-container {
    height: 100px;
    width: 100%;
    display: flex;
}

.summary-bar .chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 720px) {
    .summary-bar { grid-template-columns: 1fr; }
}