/* ══════════════════════════════════════════════════════════
   LEAVE ENCASHMENT CALCULATOR - TOOL APP CSS  (TOOL HALF)
   Upload to: /wp-content/uploads/2024/02/salarycalculator/leaveencashment/leaveencashmenttool.css
   Prefix: le- (leave-encashment-calculator, registered in s.9d)
   Site Design System: Dark #0A0F1C | Green Silo #10B981
   Font: DM Sans (matches site)
   Loads BEFORE leaveencashment.css. Never merge the two.

   COPIED, NOT AUTHORED. Derived from posttaxtool.css, fetched live
   23 Aug 2026 from /salary-calculators/leave-encashment-calculator/, which the
   owner named as the visual reference for this build and which is
   itself salarybreakuptool.css with the prefix renamed. Every ptsc-
   string is renamed to le-.
   Input rules carried through the whole chain: 44px left padding so
   the rupee icon clears the digits, and native number spinners
   hidden, per s.9a INPUT FIELD RULES.
   New rules sit in the ADDITIONS block at the end and nothing above
   that line is edited.
   ══════════════════════════════════════════════════════════ */

/* ── CALCULATOR SECTION ── */
.le-calc-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 20px 48px;
}

.le-calc-card {
  background: #111B2E;
  border: 1px solid rgba(55,75,100,0.3);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

/* Green top accent */
.le-calc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #10B981, #34D399, #059669);
}

/* Card Header */
.le-calc-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 32px 20px;
  border-bottom: 1px solid rgba(55,75,100,0.2);
}

.le-calc-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(16,185,129,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px !important;
  flex-shrink: 0;
}

.le-calc-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 4px;
}

.le-calc-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #5A7090;
  line-height: 1.6;
}

/* ── FORM ── */
.le-form {
  padding: 28px 32px;
}

.le-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.le-field-group {
  display: flex;
  flex-direction: column;
}

.le-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #C8D8E8;
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}

.le-label-unit {
  color: #5A7090;
  font-weight: 400;
}

.le-field-hint {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #5A7090;
  margin-top: 5px;
  line-height: 1.5;
}

.le-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.le-input-icon {
  position: absolute;
  left: 14px;
  font-size: 14px !important;
  color: #5A7090;
  pointer-events: none;
  z-index: 1;
}

.le-input {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px 12px 44px;
  background: rgba(10,15,28,0.6);
  border: 1px solid rgba(55,75,100,0.4);
  border-radius: 10px;
  color: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.le-input::placeholder { color: #374B64; }

/* Native number spinners clash with the dark theme. Hidden 21 Aug 2026.
   Arrow keys still step the value; typing is the primary path. */
.le-input::-webkit-outer-spin-button,
.le-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.le-input[type="number"] { -moz-appearance: textfield; }

.le-input:focus {
  border-color: #10B981;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.12);
  background: rgba(16,185,129,0.04);
}

.le-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A7090' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.le-select option {
  background: #111B2E;
  color: #FFFFFF;
}

/* ── BUTTONS ── */
.le-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.le-btn-calc {
  flex: 1;
  min-width: 200px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #10B981;
  color: #fff;
  border: none;
  padding: 14px 28px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s;
}

.le-btn-calc:hover {
  background: #0EA573;
  box-shadow: 0 8px 24px rgba(16,185,129,0.3);
  transform: translateY(-1px);
}

.le-btn-calc:active { transform: scale(0.98); }

.le-btn-icon { font-size: 16px !important; }

.le-btn-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  background: transparent;
  border: 1px solid rgba(55,75,100,0.4);
  color: #8899AA;
  padding: 14px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s;
  white-space: nowrap;
}

.le-btn-clear:hover {
  border-color: rgba(239,68,68,0.4);
  color: #F87171;
  background: rgba(239,68,68,0.06);
}

/* Error */
.le-error {
  display: none;
  margin-top: 14px;
  padding: 12px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #FCA5A5;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 10px;
  text-align: center;
}

.le-error.le-visible { display: block; }

/* ── RESULTS ── */
.le-results {
  display: none;
  padding: 0 32px 32px;
  border-top: 1px solid rgba(55,75,100,0.2);
}

.le-results.le-visible {
  display: block;
  animation: le-fade-up 0.5s ease-out;
}

@keyframes le-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Result banner */
.le-result-banner {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, rgba(16,185,129,0.12) 0%, rgba(16,185,129,0.05) 100%);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: 16px;
  margin: 24px 0;
  overflow: hidden;
}

.le-result-main {
  padding: 28px 32px;
  text-align: center;
  flex-shrink: 0;
}

.le-result-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #5A7090;
  margin-bottom: 8px;
}

.le-result-value {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  color: #10B981;
  line-height: 1;
  letter-spacing: -1px;
}

.le-result-annual {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #5A7090;
  margin-top: 6px;
}

.le-result-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(55,75,100,0.3);
}

.le-result-meta {
  display: flex;
  flex: 1;
  padding: 20px 28px;
}

.le-meta-item {
  flex: 1;
  text-align: center;
  padding: 0 12px;
  border-right: 1px solid rgba(55,75,100,0.2);
}

.le-meta-item:last-child { border-right: none; }

.le-meta-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #5A7090;
  margin-bottom: 6px;
}

.le-meta-value {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #C8D8E8;
}

.le-meta-deduct { color: #F87171; }

/* ── TABLE ── */
.le-table-section { margin-bottom: 20px; }

.le-table-heading {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #C8D8E8;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.le-table-wrapper {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(55,75,100,0.3);
}

.le-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  min-width: 340px;
}

.le-table th {
  background: rgba(10,15,28,0.6);
  color: #8899AA;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(55,75,100,0.3);
}

.le-table td {
  padding: 12px 16px;
  color: #C8D8E8;
  border-bottom: 1px solid rgba(55,75,100,0.15);
  vertical-align: middle;
}

.le-table tbody tr:last-child td { border-bottom: none; }
.le-table tbody tr:hover td { background: rgba(55,75,100,0.1); }

.le-table th.le-amount,
.le-table td.le-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.le-table td small {
  display: block;
  font-size: 14px;
  color: #5A7090;
  margin-top: 2px;
  line-height: 1.4;
}

/* Row states */
.le-row-earn td { color: #C8D8E8; }

.le-row-sub td {
  background: rgba(59,130,246,0.06);
  color: #93C5FD;
  font-weight: 700;
  border-top: 1px solid rgba(59,130,246,0.2);
}

.le-row-deduct td { color: #F87171; }

.le-row-total td {
  background: rgba(16,185,129,0.07);
  color: #10B981;
  font-weight: 700;
  border-top: 1px solid rgba(16,185,129,0.2);
}

.le-row-ctc td {
  background: rgba(245,158,11,0.06);
  color: #FCD34D;
  font-weight: 700;
  border-top: 1px solid rgba(245,158,11,0.2);
}

/* Explanation box */
.le-explanation {
  background: rgba(16,185,129,0.06);
  border: 1px solid rgba(16,185,129,0.2);
  border-left: 4px solid #10B981;
  border-radius: 10px;
  padding: 16px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #8899AA;
  margin-bottom: 20px;
}

/* Result actions */
.le-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.le-btn-copy,
.le-btn-clear-results {
  min-height: 44px;
  background: transparent;
  border: 1px solid rgba(55,75,100,0.4);
  color: #5A7090;
  padding: 10px 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s;
}

.le-btn-copy:hover {
  border-color: rgba(16,185,129,0.5);
  color: #10B981;
  background: rgba(16,185,129,0.06);
}

.le-btn-clear-results:hover {
  border-color: rgba(239,68,68,0.4);
  color: #F87171;
  background: rgba(239,68,68,0.06);
}

/* ── RESPONSIVE 768 ── */
@media (max-width: 768px) {
  .le-grid-3 { grid-template-columns: 1fr; }
  .le-form { padding: 20px 18px; }
  .le-calc-header { padding: 20px 18px 16px; }
  .le-results { padding: 0 18px 24px; }
  .le-result-banner { flex-direction: column; }
  .le-result-divider { width: 100%; height: 1px; }
  .le-result-main { padding: 24px 20px 16px; }
  .le-result-meta { padding: 16px 20px 20px; flex-wrap: wrap; }
  .le-meta-item { min-width: 33%; border-right: none; }
  .le-btn-calc { flex: 1 1 100%; }
  .le-btn-clear { flex: 1 1 100%; justify-content: center; }
}

/* ── RESPONSIVE 480 ── */
@media (max-width: 480px) {
  .le-calc-section { padding: 14px 16px 36px; }
  .le-calc-icon { width: 44px; height: 44px; font-size: 22px !important; }
  .le-calc-title { font-size: 18px; }
  .le-table th, .le-table td { padding: 10px 12px; font-size: 14px; }
  .le-result-main { padding: 20px 16px 14px; }
  .le-result-meta { padding: 14px 16px 18px; }
  .le-meta-item { min-width: 50%; padding: 6px; }
  .le-result-actions { flex-direction: column; }
  .le-btn-copy, .le-btn-clear-results { width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   ADDITIONS ONLY - rules above this line came from the donor chain
   and are never edited. Everything below is specific to
   /salary-calculators/leave-encashment-calculator/.
   ══════════════════════════════════════════════════════════ */

/* ── HERO (tool half, because the page's one H1 lives here) ──
   Values copied from the donor widget stylesheet salarybreakup.css so
   the hero renders identically to the silo reference page. They live in
   the TOOL file, not the widget file, because the H1 and the hero markup
   ship inside leaveencashmentcalculator.html. Zero class overlap with posttax.css. */
.le-hero {
  text-align: center;
  padding: 48px 20px 28px;
  max-width: 860px;
  margin: 0 auto;
}

.le-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 14px;
  color: #10B981;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.le-hero-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 14px;
  line-height: 1.2;
}

.le-hero-title span { color: #10B981; }

.le-hero-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: #8899AA;
  max-width: 680px;
  margin: 0 auto 24px;
  line-height: 1.7;
}

.le-hero-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.le-htag {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #10B981;
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: 8px;
  padding: 6px 14px;
}

/* Inline links inside the hero paragraph. Named le-hero-link, not
   le-link, so the tool half and the widget half never style the same
   class. !important beats the Elementor kit link colour. */
.le-hero-link {
  color: #10B981 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(16,185,129,0.3);
  transition: color 0.2s, border-color 0.2s;
}

.le-hero-link:hover {
  color: #34D399 !important;
  border-bottom-color: #34D399;
}

/* ── EXEMPTION LIMIT ROW STATES (set by leaveencashmenttool.js) ──
   The Section 10(10AA) table prints all FOUR limits every time, not
   only the one that binds, so a reader can see WHY they were capped
   and by how much the other three missed. Same idea as the post-tax
   slab table showing the bands a salary never reaches.
     le-limit-bind   the lowest of the four, the one that decides
     le-limit-slack  a limit that did not bind, or any limit at all
                     when the payout is wholly exempt or wholly
                     taxable and the four way test never runs */
.le-table tbody tr.le-limit-bind td {
  color: #10B981;
  font-weight: 700;
  background: rgba(16,185,129,0.06);
}

.le-table tbody tr.le-limit-slack td { color: #5A7090; }
.le-table tbody tr.le-limit-slack:hover td { background: rgba(55,75,100,0.06); }

.le-table td.le-limit-note {
  font-size: 13px;
  color: #5A7090;
  text-align: left;
  white-space: normal;
}

.le-table tbody tr.le-limit-bind td.le-limit-note { color: #34D399; }

/* ── FULL WIDTH FIELD ROW ──
   The optional lifetime-exemption field is one input on its own row
   under the two grids, because it is the only field most readers
   leave empty and pairing it with a required field reads as though
   it were required too. */
.le-grid-1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

/* ── HERO RESPONSIVE ── */
@media (max-width: 768px) {
  .le-hero { padding: 36px 18px 22px; }
}

@media (max-width: 480px) {
  .le-hero { padding: 28px 16px 18px; }
  .le-hero-badge { font-size: 13px; padding: 6px 14px; }
  .le-htag { font-size: 13px; padding: 6px 12px; }
}

/* ── NARROW PHONES: let the two-column tables fit without scrolling ──
   The donor sets .le-table min-width 340px, which is 1px wider than
   the content column on a 375px phone, so even the two-column payout
   and tax tables scrolled. The three-column exemption limit table
   still scrolls on its own content width, which is correct. */
@media (max-width: 480px) {
  .le-table { min-width: 288px; }
}