/* ===== Global Reset ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  background: #0f172a;
  color: #f1f5f9;
  padding-top: 70px; /* because header is sticky */
}

/* ===== Page Wrapper ===== */
.wrapper {
  max-width: 850px;
  margin: auto;
  width: 100%;
  padding: 16px;
}

/* ===== Card / Inputs / Outputs (Shared Style) ===== */
.card {
  background: #020617;
  border-radius: 16px;
  border: 1px solid #1e293b;
  padding: 20px;
  margin-top: 20px;
  width: 100%;
  max-width: 1200px;  /* Increased width */
  margin: 0 auto 20px auto;
  padding: 20px;
}

.section-title {
  font-size: 1.4rem;
  margin-bottom: 14px;
  font-weight: 700;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: #94a3b8;
}

input[type="number"],
input[type="range"] {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #1e293b;
  background: #0f172a;
  color: #f1f5f9;
}

button {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  margin-top: 10px;
}

.btn-primary {
  background: #22c55e;
  color: #032915;
}

.output-box {
  margin-top: 16px;
  padding: 16px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 10px;
}

.output-label {
  font-size: 0.85rem;
  color: #94a3b8;
}

.output-value {
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 4px;
}

/* ===== SWP TABLE ===== */
.swp-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  font-size: 0.9rem;
}

.swp-table thead {
  background: #1e293b;
}

.swp-table th, .swp-table td {
  padding: 10px;
  border-bottom: 1px solid #2a3441;
  text-align: left;
  color: #e2e8f0;
}

.swp-table tr:hover {
  background: rgba(34, 197, 94, 0.07);
}

.swp-table td {
  font-variant-numeric: tabular-nums;
}

.swp-table th {
  color: #38bdf8;
  font-weight: 600;
}

/* --- Minor addition for subtitle --- */
.section-subtitle {
  color: #94a3b8;
  font-size: 0.9rem;
  margin-top: 4px;
  margin-bottom: 8px;
}

/* --- Main SWP Layout --- */
.swp-main-card {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.swp-input-panel,
.swp-summary-panel {
  flex: 1;
}

@media (max-width: 900px) {
  .swp-main-card {
    flex-direction: column;
  }
}

/* Panel titles */
.panel-title {
  font-size: 1rem;
  margin-bottom: 10px;
  font-weight: 600;
}

/* 3-column input grid */
.swp-input-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

@media (max-width: 900px) {
  .swp-input-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .modern-input-grid,
  .swp-input-grid,
  .input-grid-two {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.swp-input-grid .field select {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #1e293b;
  background: #0f172a;
  color: #f1f5f9;
}

/* Summary panel */
.swp-summary-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

/* Tablets — 2 columns */
@media (min-width: 600px) {
    .swp-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop — 3 columns */
@media (min-width: 900px) {
    .swp-summary-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.summary-item {
  background: #0f172a;
  border-radius: 10px;
  border: 1px solid #1e293b;
  padding: 10px;
}

.summary-label {
  font-size: 0.8rem;
  color: #94a3b8;
}

.summary-value {
  margin-top: 4px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #38bdf8;
  font-variant-numeric: tabular-nums;
}

/* Chart container */
.chart-container {
  margin-top: 12px;
  background: #0b1220;
  border-radius: 12px;
  border: 1px solid #1e293b;
  padding: 10px;
  height: 220px;
}

.chart-container canvas {
 width: 100%; /* Removing !important is key */
 height: 100%;
}

/* Enhanced SWP table */
.swp-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 0.85rem;
}

.swp-table thead {
  background: #1e293b;
}

.swp-table th,
.swp-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #2a3441;
  text-align: right;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}

.swp-table th:first-child,
.swp-table td:first-child {
  text-align: left;
}

.swp-table th {
  color: #38bdf8;
  font-weight: 600;
}

.swp-table tr:hover {
  background: rgba(34, 197, 94, 0.08);
}

/* ---- Disclaimer Link ---- */
.disclaimer-link-container {
  margin-top: 10px;
}

.disclaimer-link-container a {
  color: #38bdf8;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
}

.disclaimer-link-container a:hover {
  color: #7dd3fc;
}

/* ---- Modal Overlay ---- */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(4px);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
}

/* ---- Modal Box ---- */
.modal-content {
  background: #0f172a;
  border: 1px solid #1e293b;
  padding: 20px;
  border-radius: 12px;
  max-width: 500px;
  width: 100%;
  color: #e2e8f0;
}

.modal-content h2 {
  margin-bottom: 10px;
  font-size: 1.2rem;
  color: #38bdf8;
}

.modal-content p {
  font-size: 0.9rem;
  line-height: 1.4rem;
  color: #cbd5e1;
}

/* ---- Close Button ---- */
.modal-close-btn {
  background: #2563eb;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  color: white;
  margin-top: 15px;
  cursor: pointer;
}

.modal-close-btn:hover {
  background: #1e40af;
}

.tooltip {
  position: relative;
  display: inline-block;
  margin-left: 6px;
  cursor: pointer;
  color: #38bdf8;
  font-size: 0.85rem;
}

.tooltip:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: 20px;
  background: #0f172a;
  color: #e2e8f0;
  padding: 8px 10px;
  width: 220px;
  border-radius: 8px;
  border: 1px solid #1e293b;
  font-size: 0.75rem;
  line-height: 1.2rem;
  z-index: 9999;
  white-space: normal;
}

.tooltip:hover::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 14px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #1e293b transparent;
  z-index: 10000;
}

.hidden {
  display: none !important;
}

.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.swp-export-container {
  text-align: right;
  margin-bottom: 8px;
}

.swp-export-link {
  color: #38bdf8;      /* Light blue */
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

.swp-export-link:hover {
  text-decoration: underline;
}
.currency-box {
  margin-left: auto;
  padding-right: 20px;
}

#globalCurrencyPicker {
  padding: 6px 10px;
  border-radius: 6px;
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid #334155;
  font-size: 0.9rem;
  cursor: pointer;
}

#globalCurrencyPicker:hover {
  border-color: #38bdf8;
}
.currency-input {
  position: relative;
  width: 100%;
}

.currency-input .currency-symbol {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #94a3b8;
  font-size: 0.85rem;
}

.amount-input {
  width: 100%;
  padding: 8px 10px 8px 30px;  /* SAME padding as other inputs + space for symbol */
  font-size: 0.9rem;           /* Match your existing input font */
  background: #0f172a;         /* Match existing input background */
  color: #e2e8f0;              /* Match existing text color */
  border: 1px solid #334155;   /* Match your panel border */
  border-radius: 6px;          /* Match your existing radius */
  outline: none;
  box-sizing: border-box;      /* Prevent size expansion */
}

.amount-input:focus {
  border-color: #38bdf8;       /* Match your focus color */
}

.field select {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.9rem;
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 6px;
  outline: none;
}

.field select:focus {
  border-color: #38bdf8;
}


.summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 12px;
}

.summary-card {
    flex: 1 1 calc(33% - 20px);
    background: #0f172a;
    padding: 18px 20px;
    border-radius: 10px;
    border: 1px solid #1e293b;
    color: #e2e8f0;
    min-width: 230px;
}

/* ADD THIS MEDIA QUERY for Tablets/Small Laptops (2-column layout) */
@media (max-width: 1000px) {
     .summary-row {
         gap: 12px;
    }
     .summary-card {
         flex: 1 1 calc(50% - 10px);
        /* Switch to max two cards per row */
         min-width: auto;
        /* Allow the cards to shrink */
    }
}
/* ADD THIS MEDIA QUERY for Mobile Phones (1-column layout) */
 @media (max-width: 500px) {
     .summary-card {
         flex: 1 1 100%;
        /* Switch to one card per row */
         padding: 14px;
    }
}

.summary-card h4 {
    font-size: 0.95rem;
    opacity: 0.75;
    margin-bottom: 6px;
}

.summary-card div {
    font-size: 1.2rem;
    font-weight: 600;
    color: #38bdf8;
}


/* GRID FOR EPS & DURATION */
.pe-input-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 24px;
  margin-bottom: 20px;
}

/* MINI PE CARD */
.pe-card {
  grid-column: span 1;
  background: #0a1222;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.pe-card h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #e2e8f0;
}

/* INNER GRID FOR THE 3 PE FIELDS */
.pe-range-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(80px, 1fr));
  gap: 14px;
}

.field.small label {
  margin-bottom: 4px;
}

/* MOBILE */
@media (max-width: 700px) {
  .pe-input-grid {
    grid-template-columns: 1fr;
  }

  .pe-card {
    grid-column: 1;
  }

  .pe-range-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}




.pe-note {
  margin-top: 10px;
  font-size: 0.85rem;
  color: #9ca3af;
}

.pe-note code {
  font-size: 0.8rem;
  background: #020617;
  padding: 2px 4px;
  border-radius: 4px;
}

.pe-matrix-wrapper {
  margin-top: 20px;
  overflow-x: auto;
}

.pe-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.pe-matrix-table th,
.pe-matrix-table td {
  border: 1px solid #1f2937;
  padding: 6px 8px;
  text-align: center;
  white-space: nowrap;
}

.pe-matrix-table th {
  background: #020617;
  color: #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 1;
}

.pe-corner-header {
  min-width: 150px;
}

.pe-cell {
  color: #e5e7eb;
}

.pe-cell.pe-neg {
  color: #fecaca;
}

.pe-cell.pe-pos {
  color: #bbf7d0;
}

.input-grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 12px;
}

@media (max-width: 900px) {
  .input-grid-two {
    grid-template-columns: 1fr;
  }
}


.field,
.nice-field {
  display: flex;
  flex-direction: column;
  min-width: 0;      /* 🔥 CRITICAL for responsiveness */
  width: 100%;
}



/* Calculate button area */
.calculate-block {
  margin-top: 25px;
  width: 100%;
  padding: 0 5px;
}

/* Full width calculate button */
.full-width-btn {
  width: 100%;
  padding: 14px;
  font-size: 1.05rem;
  border-radius: 6px;
}

/* Disclaimer hyperlink (left aligned) */
.disclaimer-link-left {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.9rem;
  color: #38bdf8;
  text-decoration: underline;
  cursor: pointer;
}

.disclaimer-link-left:hover {
  color: #7dd3fc;
}

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #0f172a;
  padding: 25px;
  max-width: 500px;
  color: #e2e8f0;
  border-radius: 10px;
}

.modal-close-btn {
  margin-top: 20px;
  padding: 10px 16px;
  cursor: pointer;
  background: #1e293b;
  color: #cbd5e1;
  border: 1px solid #334155;
  border-radius: 6px;
}
.chart-note {
  margin-top: 10px;
  text-align: center;
  font-size: 0.92rem;
  color: #94a3b8; /* soft grey */
  max-width: auto;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}
.amort-container {
  width: 100%;
  margin-top: 20px;
}

.year-row {
  background: #1e293b;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  color: #e2e8f0;
}

.year-row:hover {
  background: #334155;
}

.month-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  display: none; /* collapsed by default */
}

.month-table th, .month-table td {
  border: 1px solid #334155;
  padding: 8px 10px;
  font-size: 0.9rem;
}

.month-table th {
  background: #0f172a;
  color: #cbd5e1;
}

.expand-link, .export-link {
  cursor: pointer;
  color: #38bdf8;
  font-size: 0.9rem;
  text-decoration: underline;
}

.expand-link:hover, .export-link:hover {
  color: #7dd3fc;
}


/* 2-column layout */
.modern-input-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
    /* Use 1fr for desktop flexibility */
     gap: 18px 22px;
     margin-bottom: 15px;
}

/* Each field styling */
.nice-field label {
  font-size: 0.9rem;
  margin-bottom: 4px;
  display: block;
  color: #cbd5e1;
}

.input-box {
  width: 100%;
  padding: 10px 12px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 0.95rem;
}

.input-box:focus {
  outline: none;
  border-color: #38bdf8;
  background: #0f172a;
}

.readonly {
  background: #0f172a !important;
  opacity: 0.8;
}

/* Dropdown */
.dropdown-box {
  appearance: none;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDE0IDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBvbHlnb24gcG9pbnRzPSIwLDAgNyw4IDE0LDAiIGZpbGw9IiM2MDY5N2QiLz48L3N2Zz4=");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* Rental Section */
.rental-group {
  margin-top: 20px;
  padding: 18px;
  border-radius: 10px;
  background: #0f172a;
  border: 1px solid #1e293b;
}

.section-subtitle {
  margin-bottom: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: #38bdf8;
}

/* Checkbox */
.checkbox-field.full-width {
  grid-column: 1 / -1;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  color: #cbd5e1;
}


.tooltip-icon {
      margin-left: 6px;
      cursor: pointer;
      color: #38bdf8;
      font-size: 14px;
      font-weight: bold;
    }
.tooltip-icon:hover { color: #7dd3fc; }

.tooltip-icon[data-tip] {
      position: relative;
    }
.tooltip-icon[data-tip]:hover:after {
      content: attr(data-tip);
      position: absolute;
      top: 22px;
      left: 0;
      background: #0f172a;
      color: #e2e8f0;
      padding: 10px;
      font-size: 0.8rem;
      border-radius: 6px;
      width: 240px;
      z-index: 10;
      line-height: 1.3;
      border: 1px solid #334155;
    }
	
	
/* Fix for the infinite growth loop */
.chart-fixed-height {
  position: relative;
  height: 300px; /* You must define a specific height */
  width: 100%;
  max-width: 100%;
}

.chart-cell {
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
	
/* --------------------------------------------------
CHARTS: Two-column layout (responsive)
-------------------------------------------------- */
.chart-grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Mobile: stack charts */
@media (max-width: 768px) {
  .chart-grid-two {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------
   GORGEOUS GLASSMORPHIC HEADER
-------------------------------------------------- */
.top-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  background: rgba(2, 6, 23, 0.75);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  z-index: 20000;
}

/* Branding */
.logo {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  -webkit-background-clip: text;
  color: transparent;
}

.header-tools {
    display: flex;
    align-items: center;
    gap: 15px;
}


/* --------------------------------------------------
   CURRENCY SELECTOR
-------------------------------------------------- */
.currency-box select {
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(51, 65, 85, 0.55);
  color: #e2e8f0;
  font-size: 0.9rem;
  cursor: pointer;
  transition: 0.25s;
}

.currency-box select:hover {
  background: rgba(30, 41, 59, 1);
  border-color: #38bdf8;
}


/* --------------------------------------------------
   DESKTOP MENU
-------------------------------------------------- */
.menu {
  display: flex;
  gap: 28px;
}

.menu a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.95rem;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 500;
  transition: 0.25s ease;
}

.menu a:hover {
  background: rgba(148, 163, 184, 0.18);
  color: #f8fafc;
}

.menu a.active {
  background: #22c55e;
  color: #02140a;
  font-weight: 700;
}


/* --------------------------------------------------
   HAMBURGER BUTTON (ANIMATED)
-------------------------------------------------- */
/* HIDE hamburger on desktop */
.menu-toggle {
  display: none;
  background: transparent !important;
  border: none !important;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 22px;
  position: relative;
  z-index: 9999;
}

/* SHOW hamburger ONLY on small screens */
@media (max-width: 768px) {
  .menu-toggle {
    display: flex !important;
  }
}

/* Hamburger bars */
.menu-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #fff;
  border-radius: 3px;
  transition: 0.25s ease-in-out;
}

/* When toggled */
.menu-toggle.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}


/* --------------------------------------------------
   MOBILE MENU BEHAVIOR
-------------------------------------------------- */
@media (max-width: 850px) {

  .menu-toggle {
    display: flex; /* Visible on mobile */
  }

  .menu {
    display: none; /* Hide menu */
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 64px;
    left: 0;
    background: rgba(2, 6, 23, 0.95);
    padding: 20px 0;
    border-bottom: 1px solid rgba(148,163,184,0.12);
    box-shadow: 0 4px 14px rgba(0,0,0,0.28);
    animation: fadeSlideDown 0.3s ease;
  }

  .menu.show {
    display: flex; /* Show when toggled */
  }

  .currency-box {
    margin-left: auto; /* Push currency picker to the left of the toggle */
  }

  .menu a {
    padding: 14px 22px;
    font-size: 1.05rem;
    border-radius: 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.4);
  }
}

/* Mobile menu slide animation */
@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}