/* public/css/simulation.css */

:root {
    /* Inherit global variables from home.css */
    --sim-card-bg: var(--card-bg);
    --sim-input-bg: var(--body-bg);
    --sim-table-stripe: rgba(0, 0, 0, 0.03);
    --sim-table-hover: rgba(0, 0, 0, 0.06);
    --sim-receipt-bg: var(--light-bg); /* Changed from --white */
  }
  
  html[data-theme="dark"] {
    --sim-card-bg: var(--dark-card-bg);
    --sim-input-bg: var(--dark-bg);
    --sim-table-stripe: rgba(255, 255, 255, 0.05);
    --sim-table-hover: rgba(255, 255, 255, 0.1);
    --sim-receipt-bg: var(--dark-card-bg);
  }
  
  /* --- Simulation Page Specific Layout --- */
  .simulation-page-main {
    padding-top: calc(var(--header-height) + 40px); /* Space below fixed header + extra */
    padding-bottom: 60px;
  }
  
  .simulation-container {
     /* Uses global .container styles */
     width: 90%;
     max-width: 1200px; /* Slightly wider container */
     margin: 0 auto;
     padding: 0 15px;
  }
  
  /* --- Main Card Wrapper --- */
  .sim-main-card {
    background-color: var(--sim-card-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 25px var(--shadow-color);
    overflow: hidden; /* Clip header corners */
    border: 1px solid var(--border-color);
  }
  
  .sim-card-header {
    background-color: var(--primary-color);
    color: var(--light-bg);
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: none; /* Remove default border */
  }
  
  html[data-theme="dark"] .sim-card-header {
      background-color: var(--dark-primary-accent);
      color: var(--dark-bg); /* Dark text on bright blue */
  }
  
  
  .sim-card-header__logo {
      height: 35px; /* Adjust size */
      width: auto;
      filter: brightness(0) invert(1); /* Make logo white */
  }
  html[data-theme="dark"] .sim-card-header__logo {
     /* Adjust filter if needed for dark mode, e.g., remove it if logo is already light */
     filter: none;
  }
  
  .sim-card-header__title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
  }
  
  .sim-card-body {
    padding: 25px;
  }
  
  @media (min-width: 768px) {
    .sim-card-body {
        padding: 30px 40px;
    }
  }
  
  /* --- Input/Summary Wrapper --- */
  .sim-input-summary-wrapper {
    display: flex;
    flex-direction: column; /* Stack on mobile by default */
    gap: 30px; /* Gap between input and summary */
    margin-bottom: 40px; /* Space before schedule/receipt */
  }
  
  @media (min-width: 992px) { /* Side-by-side on larger screens */
    .sim-input-summary-wrapper {
      flex-direction: row;
      align-items: stretch; /* Make columns equal height if needed */
      gap: 40px;
    }
    .sim-column {
        flex-basis: 50%; /* Equal width columns */
        display: flex; /* Ensure inner card fills height */
    }
    .sim-column .sim-inner-card {
        width: 100%; /* Make inner card take full width of column */
    }
  }
  
  
  /* --- Inner Cards (Input, Summary, etc.) --- */
  .sim-inner-card {
    background-color: var(--body-bg); /* Match body bg */
    border-radius: var(--border-radius);
    box-shadow: 0 3px 10px var(--shadow-color);
    border: 1px solid var(--border-color);
    height: 100%; /* Make cards in row same height */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow var(--transition-smooth), transform var(--transition-smooth);
  }
  .sim-inner-card:hover {
      /* Subtle hover for inner cards */
      transform: translateY(-2px);
      box-shadow: 0 6px 15px var(--shadow-hover-color);
  }
  
  
  .sim-inner-card__header {
    background-color: var(--card-bg); /* Slightly different bg for header */
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
  }
  
  .sim-inner-card__title {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-accent);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .sim-inner-card__title i {
      font-size: 1.1em; /* Adjust icon size if needed */
  }
  
  .sim-inner-card__body {
    padding: 20px;
    flex-grow: 1; /* Allow body to grow */
  }
  
  /* --- Form Styles --- */
  .sim-form-group {
    margin-bottom: 1.25rem; /* ~mb-3 */
  }
  
  .sim-form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-secondary-color);
  }
  
  .sim-input-group {
    display: flex;
    align-items: stretch; /* Make items same height */
    width: 100%;
  }
  
  .sim-input {
    display: block;
    width: 100%;
    padding: 10px 15px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-color);
    background-color: var(--sim-input-bg);
    background-clip: padding-box;
    border: 1px solid var(--border-color);
    appearance: none; /* Remove default styling */
    border-radius: var(--border-radius);
    transition: border-color var(--transition-speed) ease-in-out, box-shadow var(--transition-speed) ease-in-out;
    flex-grow: 1; /* Allow input to take space */
  }
  /* Style for invalid state */
  .sim-input.is-invalid {
      border-color: #dc3545; /* Bootstrap danger color */
      box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
  }
  .sim-input:focus {
    color: var(--text-color);
    background-color: var(--sim-input-bg);
    border-color: var(--primary-accent);
    outline: 0;
     box-shadow: 0 0 0 3px rgba(var(--rgb-primary-accent), 0.2); /* Use RGB variable if defined */
     /* Fallback box-shadow */
     box-shadow: 0 0 0 3px rgba(22, 75, 146, 0.2);
  }
  html[data-theme="dark"] .sim-input:focus {
     box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3); /* Dark mode focus */
  }
  
  .sim-input-group-text {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-secondary-color);
    text-align: center;
    white-space: nowrap;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
  }
  
  /* Adjust input group rounding */
  .sim-input-group > :not(:first-child):not(.dropdown-menu) {
      margin-left: -1px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
  }
  .sim-input-group > :not(:last-child):not(.dropdown-menu) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
  }
  
  .sim-form-text {
    margin-top: 0.25rem;
    font-size: .875em;
    color: var(--text-secondary-color);
  }
  
  /* Radio Button Group (Calculation Type) */
  .sim-btn-group {
    display: flex;
    width: 100%;
  }
  .sim-btn-group > .sim-btn-check + .sim-btn-outline {
    /* Inherit base .btn styles */
    border-color: var(--primary-accent);
    color: var(--primary-accent);
    flex: 1; /* Make buttons equal width */
    border-radius: 0; /* Remove individual radius */
    margin-left: -1px; /* Overlap borders */
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
  }
  .sim-btn-group > .sim-btn-check + .sim-btn-outline:first-of-type {
      border-top-left-radius: var(--border-radius);
      border-bottom-left-radius: var(--border-radius);
      margin-left: 0;
  }
  .sim-btn-group > .sim-btn-check + .sim-btn-outline:last-of-type {
      border-top-right-radius: var(--border-radius);
      border-bottom-right-radius: var(--border-radius);
  }
  .sim-btn-group > .sim-btn-check:checked + .sim-btn-outline {
    background-color: var(--primary-accent);
    color: var(--light-bg);
    z-index: 1; /* Bring checked button forward */
    border-color: var(--primary-accent); /* Ensure border matches */
  }
  html[data-theme="dark"] .sim-btn-group > .sim-btn-check:checked + .sim-btn-outline {
     color: var(--dark-bg); /* Dark text on bright blue */
     background-color: var(--dark-primary-accent);
     border-color: var(--dark-primary-accent);
  }
  html[data-theme="dark"] .sim-btn-group > .sim-btn-check + .sim-btn-outline {
      color: var(--dark-primary-accent);
      border-color: var(--dark-primary-accent);
  }
  
  .sim-btn-check { /* Hide actual radio */
      position: absolute;
      clip: rect(0,0,0,0);
      pointer-events: none;
  }
  .sim-btn-outline { /* Style the label like a button */
      padding: 10px 15px;
      border: 1px solid var(--primary-accent); /* Use accent */
      text-align: center;
      cursor: pointer;
      font-weight: 500;
      background-color: transparent; /* Ensure transparent base */
  }
  .sim-btn-outline:hover {
      background-color: rgba(var(--rgb-primary-accent), 0.1); /* Subtle hover */
  }
  html[data-theme="dark"] .sim-btn-outline:hover {
      background-color: rgba(var(--rgb-dark-primary-accent), 0.15);
  }
  
  
  /* Calculate Button */
  .sim-calculate-btn {
      /* Use global .btn and .btn--primary styles */
      width: 100%;
      padding: 12px 20px; /* Larger padding */
      font-size: 1.1rem;
      margin-top: 1.5rem; /* Add space above button */
  }
  
  /* --- Payment Summary --- */
  .summary-placeholder {
      text-align: center;
      padding: 40px 20px;
      color: var(--text-secondary-color);
      display: flex; /* Default state */
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 300px; /* Ensure some height */
      border: 2px dashed var(--border-color);
      border-radius: var(--border-radius);
  }
  .summary-placeholder i {
      font-size: 3.5rem;
      margin-bottom: 1rem;
      opacity: 0.5;
      color: var(--text-secondary-color);
  }
  .summary-placeholder p {
      font-size: 1rem;
  }
  
  #paymentSummary {
      display: none; /* Hidden initially */
      animation: fadeIn 0.6s ease-out;
  }
  
  .summary-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* Two columns */
      gap: 15px;
      margin-bottom: 10px; /* Reduced margin */
  }
  
  .stat-card {
      background-color: var(--body-bg); /* Match body bg */
      border-radius: var(--border-radius);
      padding: 15px;
      box-shadow: 0 2px 8px var(--shadow-color);
      border: 1px solid var(--border-color);
      height: 100%;
      text-align: center;
      transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
  }
  .stat-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px var(--shadow-hover-color);
  }
  
  .stat-card__label {
      color: var(--text-secondary-color);
      margin-bottom: 0.5rem;
      font-size: 0.85rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5px;
  }
  
  .stat-card__value {
      color: var(--primary-accent);
      margin-bottom: 0;
      font-weight: 600;
      font-size: 1.4rem;
      word-break: break-word;
      line-height: 1.2;
  }
  
  .summary-note {
      font-size: 0.8rem;
      text-align: center;
      margin-top: 0; /* Pull closer to grid */
      margin-bottom: 20px; /* Space before chart */
      color: var(--text-secondary-color);
  }
  
  @media (max-width: 575px) {
      .summary-grid {
          grid-template-columns: 1fr; /* Stack on extra small */
      }
      .stat-card__value {
          font-size: 1.2rem;
      }
  }
  
  /* Chart Container */
  .chart-container {
      position: relative;
      height: 250px; /* Fixed height */
      margin-top: 25px; /* Adjusted margin */
      margin-bottom: 15px;
  }
  
  #paymentChart {
      /* Chart.js handles sizing */
  }
  
  
  /* --- Payment Schedule --- */
  #paymentScheduleCard {
      display: none; /* Hidden initially */
      animation: fadeIn 0.6s ease-out 0.2s; /* Delayed fade in */
      animation-fill-mode: backwards; /* Apply start state before animation */
      margin-top: 25px;
  }
  
  .schedule-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap; /* Allow wrap on small screens */
      gap: 10px;
  }
  
  .schedule-nav-group {
      display: flex;
      gap: 5px; /* Space between nav buttons */
  }
  
  .schedule-nav-btn {
      /* Use global .btn .btn--secondary .btn--small styles */
      padding: 6px 12px;
      font-size: 0.85rem;
  }
  .schedule-nav-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      background-color: var(--card-bg);
      border-color: var(--border-color);
      color: var(--text-secondary-color);
      box-shadow: none;
      transform: none;
  }
  html[data-theme="dark"] .schedule-nav-btn:disabled {
      background-color: var(--dark-card-bg);
      border-color: var(--dark-border);
      color: var(--dark-text-secondary);
  }
  
  #currentYearDisplay {
      font-weight: 600;
      color: var(--primary-accent) !important;
      background-color: transparent !important; /* Override potential button styles */
      border-color: var(--primary-accent) !important;
      cursor: default;
  }
  #currentYearDisplay:hover { transform: none; box-shadow: none; }
  html[data-theme="dark"] #currentYearDisplay {
      color: var(--dark-primary-accent) !important;
      border-color: var(--dark-primary-accent) !important;
  }
  
  
  .table-container-full {
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      overflow: hidden; /* Clip table corners */
  }

  .table-responsive-wrapper {
    width: 100%;
    overflow-x: auto; /* This enables horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    /* margin-bottom: 1rem; /* Optional: Add some space below the table if needed */
    border: 1px solid var(--border-color); /* Match inner card border */
    border-radius: var(--border-radius); /* Match inner card border radius */
    /* If sim-inner-card__body has padding, you might not need border/radius here,
       but if sim-inner-card__body has padding:0, this will look better. */
}
  
  .sim-table {
    width: 100%;
    min-width: 800px;
    margin-bottom: 0; /* Remove default margin */
    font-size: 0.9rem;
    border-collapse: collapse; /* Ensure borders connect */
  }
  
  .sim-table thead th {
        position: sticky;
        top: 0; /* Required for sticky positioning */
        z-index: 10;
      background-color: var(--primary-color);
      color: var(--light-bg);
      font-weight: 600;
      padding: 10px 15px;
      text-align: left;
      white-space: nowrap; /* Prevent header wrapping */
  }
  html[data-theme="dark"] .sim-table thead th {
     background-color: var(--dark-primary-accent);
     color: var(--dark-bg);
  }
  
  .sim-table tbody tr {
      border-bottom: 1px solid var(--border-color);
      transition: background-color var(--transition-speed) ease;
  }
  .sim-table tbody tr:last-child {
      border-bottom: none; /* Remove bottom border on last row */
  }
  .sim-table tbody tr:nth-of-type(even) {
      background-color: var(--sim-table-stripe);
  }
  .sim-table tbody tr:hover {
      background-color: var(--sim-table-hover);
  }
  /* Optional: Style for floating rate rows */
  .sim-table tbody tr.floating-rate-row td {
      /* Example: slightly different text color */
      /* color: var(--secondary-color); */
  }
  html[data-theme="dark"] .sim-table tbody tr.floating-rate-row td {
      /* color: var(--dark-secondary-accent); */
  }
  
  
  .sim-table td {
        white-space: nowrap;
      padding: 10px 15px;
      vertical-align: middle;
      text-align: right; /* Align numbers right */
  }
  .sim-table td:first-child, /* Month Number */
  .sim-table td:nth-child(2) { /* Month Name */
      text-align: left; /* Align first two columns left */
  }
  
  
  /* --- Payment Receipt --- */
  #paymentReceiptCard {
      display: none; /* Hidden initially */
      animation: fadeIn 0.6s ease-out 0.4s; /* Delayed fade in */
      animation-fill-mode: backwards;
      margin-top: 25px;
  }
  
  .receipt-container {
      background-color: var(--sim-receipt-bg);
      border: 1px dashed var(--border-color);
      border-radius: var(--border-radius);
      padding: 25px;
  }
  html[data-theme="dark"] .receipt-container {
     border-color: var(--dark-border);
  }
  
  .receipt-header {
      text-align: center;
      margin-bottom: 25px;
      padding-bottom: 15px;
      border-bottom: 1px solid var(--border-color);
  }
  .receipt-header__title {
      font-family: var(--font-display);
      color: var(--primary-accent);
      font-size: 1.6rem;
      margin-bottom: 5px;
  }
  .receipt-header__subtitle {
      font-size: 0.9rem;
      color: var(--text-secondary-color);
      margin: 0;
  }
  .receipt-logo { /* Style added for logo in receipt */
      max-height: 40px;
      width: auto;
      margin-bottom: 10px;
      filter: var(--logo-filter, none); /* Use variable for potential dark mode filter */
  }
  html[data-theme="dark"] .receipt-logo {
      /* Example: Invert if needed for dark background */
      /* --logo-filter: brightness(0) invert(1); */
  }
  
  
  .receipt-details-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px 30px; /* Reduced row gap */
      margin-bottom: 15px; /* Reduced margin */
  }
  
  @media (min-width: 768px) {
      .receipt-details-grid {
          grid-template-columns: 1fr 1fr; /* Two columns */
      }
  }
  
  .receipt-detail-item {
      display: flex;
      justify-content: space-between;
      align-items: baseline; /* Align text baseline */
      padding: 6px 0; /* Reduced padding */
      border-bottom: 1px dotted var(--border-color);
      font-size: 0.95rem; /* Slightly smaller */
  }
  .receipt-detail-item:last-child {
      border-bottom: none;
  }
  
  .receipt-detail-item strong {
      font-weight: 600;
      color: var(--text-color);
      margin-right: 10px;
      white-space: nowrap; /* Prevent label wrapping */
  }
  .receipt-detail-item span {
      color: var(--text-secondary-color);
      text-align: right;
      word-break: break-word; /* Allow long values to wrap */
  }
  html[data-theme="dark"] .receipt-detail-item strong {
     color: var(--dark-text);
  }
  html[data-theme="dark"] .receipt-detail-item span {
     color: var(--dark-text-secondary);
  }
  
  
  .receipt-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 25px;
  }
  .receipt-print-btn {
      /* Use global .btn .btn--secondary .btn--small styles */
      padding: 8px 15px;
      font-size: 0.9rem;
  }
  
  
  /* Print Specific Styles */
  @media print {
      body {
          background-color: #fff !important; /* Ensure white background */
          color: #000 !important;
          font-size: 10pt;
          margin: 0;
          padding: 0;
          -webkit-print-color-adjust: exact; /* Chrome/Safari */
          print-color-adjust: exact; /* Standard */
      }
  
      .site-header, .footer-section, .floating-contact-btn, .theme-toggle-btn, .simulation-page-main > *:not(.sim-main-card), .sim-card-body > *:not(#paymentReceiptCard), .sim-input-summary-wrapper, #paymentScheduleCard, .receipt-actions, .sim-card-header__logo /* Hide sim logo */ {
          display: none !important; /* Hide everything except the receipt card content */
      }
  
      #paymentReceiptCard, .sim-main-card, .sim-card-body, .receipt-container {
          display: block !important;
          box-shadow: none !important;
          border: none !important;
          margin: 0 !important;
          padding: 10mm !important; /* Add margins for printing */
          width: 100% !important;
          background-color: #fff !important; /* Force white background */
          color: #000 !important; /* Force black text */
          page-break-inside: avoid;
      }
  
      .receipt-header {
          border-bottom: 1px solid #ccc;
          padding-bottom: 10px;
          margin-bottom: 15px;
      }
       .receipt-header__title {
          font-size: 14pt;
          color: #000 !important; /* Black title */
      }
       .receipt-header__subtitle {
          font-size: 9pt;
          color: #555 !important;
      }
      .receipt-logo { /* Show logo in print header */
          display: block !important;
          max-width: 150px;
          margin: 0 auto 10px auto;
          filter: grayscale(1); /* Grayscale logo for print */
      }
  
  
      .receipt-details-grid {
          display: block; /* Stack details */
      }
      .receipt-detail-item {
          padding: 5px 0;
          border-bottom: 1px dotted #ccc;
          display: flex;
          justify-content: space-between;
          page-break-inside: avoid;
      }
      .receipt-detail-item strong {
          color: #000 !important;
          font-weight: bold;
          width: 45%; /* Allocate width */
      }
      .receipt-detail-item span {
          color: #333 !important;
          width: 55%; /* Allocate width */
          text-align: right;
      }
  
      .summary-note { /* Notes section for print */
          margin-top: 20px;
          padding-top: 15px;
          border-top: 1px solid #ccc;
          font-size: 8pt;
          color: #666 !important;
          text-align: left; /* Left align notes */
      }
  
      a { text-decoration: none; color: inherit !important; }
  
      /* Hide Chart and Table in print */
      .chart-container, .table-container-full, .schedule-header {
          display: none !important;
      }
  
  }
  
  /* Error Message Styling */
  .error-message {
      font-size: 0.85rem;
      margin-top: 5px;
      color: #dc3545; /* Bootstrap danger color */
      font-weight: 500;
  }
  
  .sim-input.is-invalid {
      border-color: #dc3545;
      /* box-shadow: none; Remove focus shadow when invalid */
  }
  .sim-input.is-invalid:focus {
      border-color: #dc3545;
       box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25); /* Keep focus shadow red */
  }
  
  
  /* Animation */
  @keyframes fadeIn {
      from { opacity: 0; transform: translateY(15px); }
      to { opacity: 1; transform: translateY(0); }
  }
  
  /* Re-use global animation classes if defined in home.css */
  .animate-on-scroll {
    opacity: 0;
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    will-change: opacity, transform;
  }
  .animate-on-scroll.is-visible {
    opacity: 1;
    transform: none !important;
  }
  [data-animation="animate__fadeInUp"] { transform: translateY(40px); }
  [data-animation="animate__fadeInLeft"] { transform: translateX(-40px); }
  [data-animation="animate__fadeInRight"] { transform: translateX(40px); }
  [data-animation="animate__fadeInDown"] { transform: translateY(-40px); }