/* Base Reset & Body */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background: #f4f6f9;
  color: #333;
}

/* Menu Bar */
.menu-bar {
  background: #1e3c72;
  padding: 15px;
}

.menu-bar ul {
  display: flex;
  list-style: none;
  gap: 20px;
}

.menu-bar a {
  color: #fff;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 5px;
  font-weight: 600;
}

.menu-bar a:hover,
.menu-bar .active {
  background: #0f265c;
}

/* Layout */
.container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 55px);
}

.sidebar-left,
.sidebar-right {
  overflow-y: auto;
  padding: 20px;
}

/* Headings */
h2 {
  font-size: 18px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 15px;
  border-bottom: 2px solid #ececec;
  padding-bottom: 5px;
}

h3 {
  font-size: 16px;
  color: #555;
  margin-bottom: 10px;
}

/* Form Elements */
.form-category {
  background: #f9fafc;
  padding: 15px;
  margin-bottom: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

input[type="number"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #f3da89;
  border-radius: 6px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

input[type="number"]:focus {
  border-color: #1e3c72;
  box-shadow: 0 0 8px rgba(30, 60, 114, 0.2);
}

/* Rows & Centering */
.row {
  display: flex;
  gap: 12px;
}

.center-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Variable Income Toggle */
.toggle-header {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 18px;
  margin-bottom: 10px;
}

#toggle-variable-income {
  font-size: 24px;
  margin: 0 10px;
  color: #1e90ff;
}

#toggle-text {
  color: #1e90ff;
}

#variable-income-section {
  overflow: hidden;
  transition: max-height 0.4s ease;
}

/* Clear Button */
.clear-wrap {
  text-align: center;
  margin-top: 20px;
}

.clear-wrap button {
  background: #d41259;
  color: #fff;
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.clear-wrap button:hover {
  opacity: 0.9;
}

/* Calculation Table */
table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

thead {
  background: #1e3c72;
  color: #fff;
}

th, td {
  padding: 12px;
  border-bottom: 1px solid #ccc;
  text-align: center;
  font-size: 14px;
}

tbody tr:nth-child(even) {
  background: #e8f0fe;
}

tbody tr:hover {
  background: #dfe6f3;
}

/* Select Inputs */
.select-value-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

select {
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #dfe1e5;
  background: #fff;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

select:focus {
  border-color: #1e3c72;
  box-shadow: 0 0 8px rgba(30, 60, 114, 0.2);
}

/* Variable-Income Cards */
.variable-card-container {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.variable-card {
  flex: 1;
  padding: 20px;
  border-radius: 15px;
  color: #fff;
  text-align: center;
  transition: transform 0.3s ease;
}

.variable-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.overtime-card {
  background: linear-gradient(135deg, #ff7e5f, #feb47b);
}
.variable-card.overtime-card h3 {
  color: #000 !important;
}
.extra-allowances-card {
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
}
.variable-card.extra-allowances-card h3 {
  color: #000 !important;
}
.total-salary-card {
  background: linear-gradient(135deg, #8e44ad, #3498db);
}

.salary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.salary-row.values {
  margin-top: 5px;
}

/* Summary Cards Container */
.summary-card-container {
  display: grid;
  grid-template-columns: 180px 160px 1fr;
  grid-template-rows: 180px;
  grid-template-areas: "dbr eligible loan";
  gap: 16px;
  margin-top: 20px;
}

.dbr-card {
  grid-area: dbr;
  width: 180px;
  height: 180px;
}
/* ───────────────────────────────────────── */
/* Centered metallic chip on Eligible Limit */
/* with 24×36px outer chip                 */
/* ───────────────────────────────────────── */
.summary-card.eligible-card {
  position: relative;
  overflow: visible;
}

/* Outer chip body */
.summary-card.eligible-card::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 36px;
  background: linear-gradient(135deg,
    #605834 0%,
    #E0AA13 60%,
    #63593c 100%
  );
  border-radius: 4px;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.25),
    0 2px 6px rgba(0,0,0,0.4);
  z-index: 1;
}

/* Inner “contact” stripes */
.summary-card.eligible-card::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 28px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.6) 0px,
    rgba(255,255,255,0.6) 2px,
    transparent 2px,
    transparent 4px
  );
  border-radius: 2px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.2);
  z-index: 2;
}


.summary-card.eligible-card {
  grid-area: eligible;
  width: 160px;
  height: 180px;
  background: linear-gradient(135deg, #27303c, #323947, #232428);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.eligible-card h3 {
  color: #d0dfde;
  font-size: 13px;
  margin-bottom: 8px;
}

.eligible-card .card-value {
  color: #e0dfe7;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.loan-card {
  grid-area: loan;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "inputs emi"
    "inputs loan-amount"
    "inputs total-interest";
  gap: 8px 16px;
  padding: 12px;
}

/* Summary Card Base Styles */
.summary-card {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.summary-card h3 {
  font-size: 14px;
  color: #e5e7eb;
  margin-bottom: 8px;
}

/* Loan Details Card */
.loan-middle {
  grid-area: inputs;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.loan-row.emi {
  grid-area: emi;
  justify-self: end;
  align-self: start;
  width: 100%;
  max-width: 200px;
  background: linear-gradient(135deg, #dfe2de, #f4f5f4, #e7f1e7);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.loan-row.emi .loan-label {
  font-size: 13px;
  color: #e0e0e0;
}

.loan-row.emi .loan-value {
  font-size: 14px;
  font-weight: bold;
  color: #e0e0e0;
}

.loan-row.loan-amount {
  grid-area: loan-amount;
  justify-self: end;
  align-self: start;
  width: 100%;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.loan-row.total-interest {
  grid-area: total-interest;
  justify-self: end;
  align-self: start;
  width: 100%;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.loan-row.loan-amount .loan-label,
.loan-row.total-interest .loan-label {
  font-size: 13px;
  color: #333;
}

.loan-row.loan-amount .loan-value,
.loan-row.total-interest .loan-value {
  font-size: 14px;
  font-weight: bold;
  color: #d41259;
}

.loan-middle label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #333;
}

.loan-middle input,
.loan-middle select {
  margin-left: 8px;
  flex: 0 0 50px;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
}

/* DBR Octagon */
.dbr-card#dbr-octagon {
  width: 100%;
  height: 100%;
  background: #54875b;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  color: #333;
  transition: all 0.3s ease;
}

.dbr-card#dbr-octagon:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Credit Card Container */
.credit-card-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.credit-card-design {
  width: 240px;
  padding: 12px;
  background: linear-gradient(135deg, #1e3c72, #2a5298, #1b2a4f);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.card-strip {
  background: #fff;
  padding: 8px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-label,
.card-value {
  font-weight: bold;
  color: #000;
}

/* Refresh Icon */
#refresh-icon {
  cursor: pointer;
  margin-left: 4px;
  color: #1e90ff;
  font-size: 16px;
}

#refresh-icon:hover {
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

/* Info-Icon Tooltip */
.info-icon {
  cursor: pointer;
  font-size: 12px;
  color: #1e90ff;
  position: relative;
}

.info-icon:hover::after {
  content: attr(data-info);
  position: absolute;
  top: -30px;
  right: 0;
  background: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  width: 140px;
  text-align: center;
  z-index: 10;
}

.info-icon:hover::before {
  content: '';
  position: absolute;
  top: -12px;
  right: 15px;
  border: 6px solid transparent;
  border-bottom-color: #333;
}

/* Responsive Adjustments */
@media (min-width: 769px) {
  .container {
    flex-direction: row;
  }

  .sidebar-left {
    width: 40%;
    background: #fff;
    border-right: 1px solid #ececec;
  }

  .sidebar-right {
    width: 60%;
    background: #f7f7f7;
  }
}

@media (max-width: 768px) {
  .summary-card-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .dbr-card,
  .eligible-card {
    width: 100%;
    max-width: 240px;
    height: auto;
  }

  .loan-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .loan-middle {
    flex: none;
    width: 100%;
  }

  .loan-row.emi,
  .loan-row.loan-amount,
  .loan-row.total-interest {
    width: 100%;
    max-width: 240px;
    height: auto;
  }

  .loan-middle label {
    flex-direction: column;
    align-items: flex-start;
  }

  .loan-middle input,
  .loan-middle select {
    margin-left: 0;
    width: 100%;
  }

  .credit-card-container {
    align-items: center;
  }

  .variable-card-container {
    flex-direction: column;
  }

  .row {
    flex-direction: column;
  }
}
/* ────────────────────────────────── */
/* Loan Details Card: two‑column grid */
/* Inputs on left, outputs on right   */
/* ────────────────────────────────── */
.loan-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows:
    auto    /* inputs */
    auto    /* EMI Eligible */
    auto    /* Loan Amount */
    auto;   /* Total Interest */
  grid-template-areas:
    "inputs inputs"
    "inputs emi"
    "inputs loan-amount"
    "inputs total-interest";
  gap: 8px 16px;
  padding: 12px;
}

/* left column: your existing inputs */
.loan-middle {
  grid-area: inputs;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* hide separator if you still have one */
.loan-card hr {
  display: none;
}

/* EMI Eligible row, right‑column */
.loan-row.emi {
  grid-area: emi;
  justify-self: end;
  display: flex;
  gap: 8px;
}
.loan-row.emi .loan-label {
  font-size: 13px;
  color: #333;
}
.loan-row.emi .loan-value {
  font-size: 14px;
  font-weight: bold;
  color: #d41259;
}

/* Loan Amount row, right‑column */
.loan-row.loan-amount {
  grid-area: loan-amount;
  justify-self: end;
  display: flex;
  gap: 8px;
}
.loan-row.loan-amount .loan-label {
  font-size: 13px;
  color: #333;
}
.loan-row.loan-amount .loan-value {
  font-size: 14px;
  font-weight: bold;
  color: #d41259;
}

/* Total Interest row, right‑column */
.loan-row.total-interest {
  grid-area: total-interest;
  justify-self: end;
  display: flex;
  gap: 8px;
}
.loan-row.total-interest .loan-label {
  font-size: 13px;
  color: #333;
}
.loan-row.total-interest .loan-value {
  font-size: 14px;
  font-weight: bold;
  color: #d41259;
}

/* ensure your inputs still align */
.loan-middle label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.loan-middle input,
.loan-middle select {
  margin-left: 8px;
  flex: 0 0 50px;
  padding: 4px 6px;
  font-size: 13px;
}

/* refresh icon stays at the end of the last row */
#refresh-icon {
  margin-left: 4px;
}
/* ────────────────────────────────── */
/* Loan Details – refine input sizes */
/* ────────────────────────────────── */

/* all loan‑card inputs narrow & flush to their labels */
.loan-middle .loan-row > input,
.loan-middle .loan-row > select {
  flex: 0 0 60px;      /* fixed 60px width */
  margin-left: 4px;    /* small gap to label */
  padding: 4px 6px;
  font-size: 13px;
}

/* Center the EMI‑Eligible value */
.loan-row.emi {
  justify-content: center; /* center label+value container */
}
.loan-row.emi .loan-value {
  margin-left: 8px;        /* small gap after label */
  text-align: center;      /* center the number itself */
  flex: 0 0 auto;          /* don’t flex-grow */
}

/* Optional: tighten up the other loan‑row labels */
.loan-middle .loan-label,
.loan-row.emi .loan-label,
.loan-row.loan-amount .loan-label,
.loan-row.total-interest .loan-label {
  flex: 0 0 auto;
  width: auto;
  margin-right: 4px;
}

/*  Loan Amount & Total Interest still align right */
.loan-row.loan-amount,
.loan-row.total-interest {
  justify-content: flex-end;
}
/* ───────────────────────────────────────── */
/* Loan Details Card: 2‑column grid override */
/* ───────────────────────────────────────── */
.loan-card {
  display: grid !important;
  grid-template-columns: auto auto;
  grid-template-rows:
    auto    /* inputs */
    auto    /* EMI Eligible */
    auto    /* Loan Amount */
    auto;   /* Total Interest */
  grid-template-areas:
    "inputs emi"
    "inputs loan-amount"
    "inputs total-interest";
  gap: 8px 16px;
  padding: 12px;
}

/* 1) Inputs remain in left column */
.loan-middle {
  grid-area: inputs;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* inputs and extra margin */
.loan-middle .loan-row input,
.loan-middle .loan-row select {
  flex: 0 0 60px;     /* fixed width */
  margin-left: 4px;   /* small gap to label */
  padding: 4px 6px;
  font-size: 13px;
}

/* 2) EMI Eligible in right column, center */
.loan-row.emi {
  grid-area: emi;
  display: flex;
  justify-content: center;  /* center label+value container */
  align-items: center;
  gap: 8px;
}
.loan-row.emi .loan-label,
.loan-row.emi .loan-value {
  margin: 0;
  text-align: center;
}

/* 3) Loan Amount in right column, right‑align*/
.loan-row.loan-amount {
  grid-area: loan-amount;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.loan-row.loan-amount .loan-label,
.loan-row.loan-amount .loan-value {
  margin: 0;
}

/* 4) Total Interest in right column, right‑align */
.loan-row.total-interest {
  grid-area: total-interest;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.loan-row.total-interest .loan-label,
.loan-row.total-interest .loan-value {
  margin: 0;
}

/* Hide any leftover <hr> in .loan-card */
.loan-card hr {
  display: none;
}

/* Responsive sanity: full‑width on narrow screens */
@media (max-width: 768px) {
  .loan-card {
    display: flex;
    flex-direction: column;
  }
  .loan-row.emi,
  .loan-row.loan-amount,
  .loan-row.total-interest {
    justify-content: space-between;
  }
}
/* ────────────────────────────────── */
/* Tighten & align Loan‑card inputs  */
/* ────────────────────────────────── */
.loan-middle .loan-row {
  display: flex;
  align-items: center;
  gap: 50px;             /* small gap between label and field */
}

/* Specific override for the interest‑rate field */
.loan-middle .loan-row input#interest-rate {
  flex: 0 0 50px;       /* fixed 50px width */
  margin: 0;            /* no extra left-margin */
  padding: 4px 6px;     /* keep your padding */
  font-size: 13px;
}

/* same sizing to the other loan inputs */
.loan-middle .loan-row input[type="number"],
.loan-middle .loan-row select {
  flex: 10  50px;
  margin: 5;
  padding: 4px 6px;
  font-size: 13px;
}
/* ────────────────────────────────── */
/* all three loan‑card fields  */
/* to be exactly 100px wide         */
/* Center next to their labels */
/* ────────────────────────────────── */
.loan-middle .loan-row {
  display: flex;
  align-items: center;    /* vertical centering */
  gap: 8px;               /* small gap between label & field */
  margin-bottom: 8px;     /* space between rows */
}

.loan-middle .loan-row > input,
.loan-middle .loan-row > select {
  flex: 0 0 100px !important; /* fixed 100px width */
  width: 100px !important;    /* enforce in non‑flex contexts */
  margin: 0;                  /* no extra top/left margin */
  padding: 4px 6px;           /* keep your padding */
  font-size: 13px;            /* match other loan fields */
}
.loan-middle .loan-row > input,
.loan-middle .loan-row > select {
  flex: 100 0 100px !important;
  width: 50px !important;
  margin: 4px 0 0;      /* small vertical nudge under label */
  padding: 4px 6px;
  font-size: 13px;
}
/* ───────────────────────────────────────── */
/* Colorize the “DBR” heading in the DBR card */
/* ───────────────────────────────────────── */
.summary-card.dbr-card h3 {
  color: #f3f2f0;             /* a bright gold tone */
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  font-size: 16px;            /* bump up a touch if you like */
  margin-bottom: 6px;         /* tighten the spacing */
}
/* DBR Octagon: color bands */
#dbr-octagon {
  transition: background 0.3s ease;
}

/* up to 45% */
#dbr-octagon.low-dbr {
  background: #4caf50;   /* Material green 500 */
}

/* 45.0% up to 49.9% */
#dbr-octagon.medium-dbr {
  background: #ffb74d;   /* Material orange 300 */
}

/* 50% and above */
#dbr-octagon.high-dbr {
  background: #e57373;   /* Material red 300 */
}
/* ───────────────────────────────────────── */
/* layout table + centered 2nd column */
/* ───────────────────────────────────────── */
table {
  width: 100%;
  table-layout: fixed;        /* lock column widths */
}

/* no cell can expand the column */
table th,
table td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* center the Total CC % column (2nd) */
table th:nth-child(2),
table td:nth-child(2) {
  text-align: center;
}

/* (optional) explicitly divide into four equal columns */
table th:nth-child(1),
table td:nth-child(1) { width: 25%; }
table th:nth-child(2),
table td:nth-child(2) { width: 25%; }
table th:nth-child(3),
table td:nth-child(3) { width: 25%; }
table th:nth-child(4),
table td:nth-child(4) { width: 25%; }

/* ───────────────────────────────────────── */
/* Lock Loan‑card outputs into column 2     */
/* ───────────────────────────────────────── */
.loan-card {
  /* grid has two columns: inputs | outputs */
  grid-template-columns: 1fr auto !important;
  /* vertical center of each row, if you like */
  align-items: center;
}

/* force these three rows into that second column */
.loan-row.emi,
.loan-row.loan-amount,
.loan-row.total-interest {
  grid-column: 2;
  justify-self: start;   /* align at the left edge of the output column */
}

/* little gap between the label and its value */
.loan-row.emi .loan-value,
.loan-row.loan-amount .loan-value,
.loan-row.total-interest .loan-value {
  margin-left: 8px;
}

/* extra space between inputs and outputs in FF */
.loan-card {
  column-gap: 24px; /* increases the horizontal gap between the two columns */
}
/* simple popup overrides */
#reduction-popup { z-index: 999; }
#reduction-popup input[type="range"] { width:100%; margin:8px 0; }
#reduction-popup button { margin-top:12px; }