/* Global Styles */
body {
  font-family: "Arial", sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background-color: var(--background-color, #f5f5f5);
  color: var(--text-color, #13213f);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Layout */
header {
  background-color: var(--header-bg, #13213f);
  padding: 1rem;
}

main {
  flex: 1;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

footer {
  background-color: var(--footer-bg, #13213f);
  color: var(--footer-text, #ffffff);
  text-align: center;
  padding: 1rem;
  width: 100%;
}

/* Typography */
h1,
h2,
h3 {
  color: var(--primary-color, #13213f);
  margin-top: 0;
}

.highlight {
  color: var(--secondary-color, #ff99a8);
}

/* Navigation */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  color: var(--header-text, #ffffff);
  font-weight: bold;
  font-size: 1.5rem;
  text-decoration: none;
}

.logo img {
  height: 40px;
  margin-right: 10px;
}

.nav-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-left: 2rem;
  margin-right: 10rem;
}

.nav-links a {
  color: var(--nav-text-color, #ffffff);
  text-decoration: none;
  margin-right: 1rem;
}

.nav-links a:hover {
  color: var(--nav-text-hover-color, #ff99a8);
}

.nav-buttons {
  display: flex;
  gap: 1rem;
}

.nav-button {
  background-color: var(--button-bg, #ff99a8);
  color: var(--button-text, #13213f);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
}

.nav-button:hover {
  background-color: var(--primary-color, #ff7a8e);
}

/* Forms and Buttons */
form {
  max-width: 400px;
  margin: 0 auto;
  background-color: var(--background-color, #ffffff);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

input,
select,
button {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 1px solid #13213f;
  border-radius: 4px;
  box-sizing: border-box;
}

button,
.button {
  background-color: var(--button-bg, #ff99a8);
  color: var(button-text, #13213f);
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

button:hover,
.button:hover {
  background-color: var(--button-bg, #ff99a8);
}

/* Alerts */
.alert {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 4px;
  transition: opacity 0.5s ease;
}

.alert-error {
  background-color: var(--error-color, #ff99a8);
  color: #13213f;
}

.alert-success {
  background-color: var(--success-color, #ff99a8);
  color: #13213f;
}

/* Cards */
.card {
  background-color: var(--card-bg, #ffffff);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Dashboard Styles */
.dashboard {
  max-width: 1200px;
  margin: 0 auto;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.date-picker {
  display: flex;
  gap: 0.5rem;
}

.date-button {
  background-color: #f0f0f0;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
}

.date-button.active {
  background-color: var(--primary-color, #ff99a8);
  color: var(--background-color, #ffffff);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.main-balance,
.predicted-retirement-balance {
  display: flex;
  flex-direction: column;
  height: 400px; /* Increased height to accommodate the chart */
}

.income-chart-container {
  flex-grow: 1; /* Allow the chart container to grow and fill the available space */
  min-height: 200px; /* Minimum height for the chart */
  width: 100%;
  position: relative;
}

.chart-container canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.disclaimer {
  font-size: 0.8em;
  color: #666;
  margin-top: 10px;
}

.main-balance,
.total-earnings {
  grid-column: span 1;
}

.financial-advice,
.assets {
  grid-column: span 2;
}

.balance-amount,
.earnings-amount {
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0.5rem 0;
}

.balance-change,
.earnings-change {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.positive {
  color: #4caf50;
}

.negative {
  color: #f44336;
}

/* Chart container styles */
.inv-chart-container {
  height: 200px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

#balance-chart,
#earnings-chart {
  width: 100% !important;
  height: 100% !important;
}

.financial-advice {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--background-color, #ffffff);
  color: var(--secondary-color, #13213f);
}

.financial-advice h2 {
  margin-bottom: 1rem;
}

.financial-advice p {
  margin-bottom: 1.5rem;
}

.financial-advice .button {
  align-self: flex-start;
  background-color: var(--button-bg, #13213f);
  color: var(--button-text, #ffffff);
}

.financial-advice .button:hover {
  background-color: var(--button-hover, #1e3a5f);
}

.assets-table {
  width: 100%;
  border-collapse: collapse;
}

.assets-table th,
.assets-table td {
  text-align: left;
  padding: 0.75rem;
  border-bottom: 1px solid #e0e0e0;
}

.assets-table th {
  font-weight: bold;
  color: #666;
}
/* Responsive Design */
@media (max-width: 768px) {
  .nav-links {
    flex-direction: column;
    align-items: flex-start;
  }

  .retirement-planner .input-section {
    flex-direction: column;
  }

  .retirement-planner .input-group {
    width: 100%;
  }

  .insurance-cards {
    flex-direction: column;
  }

  .nav-buttons {
    margin-top: 1rem;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .main-balance,
  .total-earnings,
  .statistics,
  .assets {
    grid-column: span 1;
  }

  .date-picker {
    flex-wrap: wrap;
  }
  .transactions {
    grid-column: span 1;
  }

  .transactions-table {
    font-size: 14px;
  }

  .transactions-table th,
  .transactions-table td {
    padding: 8px;
  }
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  border-radius: 5px;
  width: 300px;
  text-align: center;
}

.modal-content h2 {
  margin-top: 0;
}

.modal-content button {
  margin-top: 10px;
}

/* Email Client Styles */

.email-client .logo {
  display: none;
}

.email-client {
  display: grid;
  grid-template-columns: 200px 300px 1fr;
  height: calc(100vh - 60px); /* Adjust for header height */
  background-color: #f3f2f1;
  color: #252423;
}

.email-sidebar {
  background-color: #f3f2f1;
  padding: 20px;
  border-right: 1px solid #e1dfdd;
  display: flex;
  flex-direction: column;
  height: 100%;
  align-content: start;
}

.new-mail-btn {
  width: 100%;
  padding: 10px;
  background-color: var(--button-bg, #ff99a8);
  color: #13213f;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 20px;
}

.email-nav {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.email-nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.email-nav li {
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.email-nav li:hover {
  background-color: #e1dfdd;
}

.email-list {
  background-color: white;
  border-right: 1px solid #e1dfdd;
  overflow-y: auto;
}

.email-list-header {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #e1dfdd;
}

.email-list-header span {
  flex: 1;
  text-align: center;
  cursor: pointer;
}

.email-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #e1dfdd;
  cursor: pointer;
}

.email-item:hover,
.email-item.active {
  background-color: #f3f2f1;
}

.sender-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
}

.email-details {
  flex-grow: 1;
}

.email-sender {
  font-weight: bold;
}

.email-subject,
.email-preview,
.email-time {
  color: #605e5c;
}

.email-preview {
  font-size: 0.9em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.email-time {
  font-size: 0.8em;
}

.email-content {
  padding: 20px;
  overflow-y: auto;
}

.email-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #13213f;
  color: white;
  margin-bottom: 20px;
}

.email-header h3 {
  color: white;
  margin: 0;
}

.email-actions {
  display: flex;
  gap: 10px;
}

.icon-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
  padding: 5px;
  color: white;
}

.icon-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.email-section {
  margin-bottom: 20px;
}

.article {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}

.article-content {
  flex: 1;
  padding-right: 20px;
}

.article-image {
  width: 200px;
  height: 150px;
  object-fit: cover;
}

.read-more {
  display: inline-block;
  margin-top: 10px;
  color: var(--button-bg, #ff99a8);
  text-decoration: none;
  font-weight: bold;
}

.read-more:hover {
  text-decoration: underline;
}

/* Investment Page Styles */
.current-investments {
  padding: 20px;
  height: 550px;
}

.investment-content {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.investment-controls {
  flex: 0 0 60%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.investment-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stock-name {
  width: 120px;
  font-size: 14px;
}

.stock-range {
  flex: 1;
  max-width: 450px;
}

.percentage {
  width: 40px;
  text-align: right;
  font-size: 14px;
}

.change-investments {
  align-self: flex-start;
  margin-top: 10px;
}

.investment-charts {
  flex: 0 0 35%;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.chart-wrapper {
  height: 150px;
  position: relative;
}

.chart-wrapper h4 {
  text-align: left;
  margin-bottom: 5px;
  font-size: 14px;
}

.chart-container {
  height: 100%;
  width: 100%;
  position: relative;
}

/* Transactions Panel Styles */
.transactions {
  grid-column: span 2;
  overflow-x: auto;
}

.transactions-table {
  width: 100%;
  border-collapse: collapse;
}

.transactions-table th,
.transactions-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

.transactions-table th {
  background-color: #f5f5f5;
  font-weight: bold;
  color: #333;
}

.transactions-table tr:hover {
  background-color: #f9f9f9;
}

.transactions-table .positive {
  color: #4caf50;
}

.transactions-table .negative {
  color: #f44336;
}

/* Insurance page styles */
.insurance {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.insurance h1 {
  text-align: center;
  color: #1a2b6d;
  margin-bottom: 30px;
}

.insurance-cards {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}

.insurance-cards .card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 25px;
  transition: box-shadow 0.3s ease;
}

.insurance-cards .card:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.insurance-cards .card h2 {
  color: #1a2b6d;
  margin-bottom: 15px;
  font-size: 1.5em;
}

.insurance-cards .card p {
  color: #4a4a4a;
  margin-bottom: 20px;
  line-height: 1.6;
  flex-grow: 1;
}

.insurance-cards .card .button {
  display: inline-block;
  background-color: #ff9999;
  color: #1a2b6d;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  font-weight: bold;
  text-align: center;
  align-self: flex-start;
}

.insurance-cards .card .button:hover {
  background-color: #ff7777;
}

.insurance-info {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 25px;
  margin-top: 30px;
}

.insurance-info h2 {
  color: #1a2b6d;
  margin-bottom: 15px;
}

.insurance-info ul {
  padding-left: 20px;
  margin-bottom: 20px;
}

.insurance-info li {
  margin-bottom: 10px;
  color: #4a4a4a;
}

.insurance-info .button {
  display: inline-block;
  background-color: #ff9999;
  color: #1a2b6d;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  font-weight: bold;
}

.insurance-info .button:hover {
  background-color: #ff7777;
}

/* education content area */

.widget-posts__rating__header {
  background-color: var(--card-bg, #ff9999);
}

/* web page styling of emails*/

.feature-img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  border-radius: 5px;
}

/* Styles for the CTA cards */
.cta-cards {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.cta-card {
  flex: 1;
  background-color: var(--card-bg, #ffffff);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.cta-card h3 {
  color: #13213f;
  margin-bottom: 10px;
}

.cta-card p {
  color: #666;
  margin-bottom: 20px;
}

.cta-card .cta-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: transparent;
  border-color: var(--primary-color);
  color: var(--primary-color, #13213f);
  text-decoration: none;
  border: 2px solid;
  border-radius: 4rem;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.cta-card .cta-button:hover {
  border-color: var(--primary-color-offset, #ff7a8e);
  color: var(---primary-color-offset);
  background-color: transparent;
}

.login-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: transparent;
  border-color: var(--primary-color);
  color: var(--primary-color, #13213f);
  text-decoration: none;
  border: 2px solid;
  border-radius: 4rem;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.login-button:hover {
  background-color: var(--primary-color-offset, #ff7a8e);
  color: var(--background-color);
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
  .cta-cards {
    flex-direction: column;
  }

  .cta-card {
    margin-bottom: 20px;
  }
}

/* Retirement Calculator Styles */
.tools-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.calculator-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.calc-input-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 200px;
}

.calc-explanation-section {
  flex: 1;
}

.input-row {
  display: flex;
  gap: 15px;
}

.input-column {
  flex: 1;
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  color: #13213f;
}

.input-group input,
.input-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

button {
  background-color: #ff99a8;
  color: #13213f;
  border: none;
  padding: 12px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
  margin-top: 20px;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #ff7a8e;
}

.results-section {
  flex: 1;
  display: none; /* Initially hidden */
}

.retirement-insights {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.insights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.history-chart-container {
  height: 400px;
  width: 100%;
  margin-top: 20px;
}

.cta-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  gap: 15px;
}

.cta-button {
  flex: 1;
  padding: 10px 20px;
  text-decoration: none;
  text-align: center;
  background-color: transparent;
  border-color: var(--primary-color);
  color: var(--primary-color, #13213f);
  border: 2px solid;
  border-radius: 4rem;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  border-color: var(--primary-color-offset, #ff7a8e);
  color: var(---primary-color-offset);
  background-color: transparent;
}

/* Responsive Design */
@media (max-width: 768px) {
  .calculator-grid {
    flex-direction: column;
  }

  .input-row {
    flex-direction: column;
  }

  .cta-buttons {
    flex-direction: column;
  }
}

/* Super Comparison Tool Styles */
.calculator-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.compare-input-section,
.compare-explanation-section,
.compare-results-section {
  flex: 1 1 300px;
}
.compare-input-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 300px;
}

.compare-explanation-section {
  flex: 1;
}
.compare-results-section {
  display: flex;
  flex-direction: column;
}

.compare-insights {
  margin-bottom: 20px;
}

.compare-chart-container {
  height: 300px;
  width: 100%;
}

@media (min-width: 768px) {
  .compare-input-section {
    flex: 0 0 300px;
  }

  .compare-explanation-section,
  .compare-results-section {
    flex: 1 1 calc(50% - 10px);
  }
}

#comparisonChart {
  max-width: 100%;
  height: auto;
}