/* ═══════════════════════════════════════════════════════════
   ANNUAL SALARY CALCULATOR - TOOL APP CSS  (TOOL HALF)
   Upload to: /wp-content/uploads/2024/02/salarycalculator/annualsalary/annualsalarytool.css
   Prefix: asc- (annual-salary-calculator)
   Site Design System: Dark #0A0F1C | Green Silo #10B981
   Font: DM Sans (matches site)

   Loads BEFORE annualsalary.css. Never merge the two files.

   COPIED, NOT AUTHORED. Derived from the silo reference
   salarybreakuptool.css, fetched live 24 Aug 2026, with the donor
   prefix renamed throughout to asc-. Unused donor components were
   DELETED rather than left behind as dead rules:
     the view toggle   controls, toggle-label, switch, slider and
                       toggle-help. This calculator has no monthly
                       and annual view switch, because annual IS the
                       output it exists to produce.
     the row dots      row-dot and its four colour classes. The
                       result tables here use row state classes only.
   The donor hero block is KEPT, class names asc-tool-hero,
   asc-tool-h1, asc-tool-badge, asc-tool-sub, asc-tool-tags,
   asc-tool-tag and asc-tool-link. The page's one H1 ships inside
   annualsalarycalculator.html, so the hero belongs in this file.
   Those names all carry the tool infix, so this file and
   annualsalary.css never style the same class. Verified by script:
   zero class overlap between the two stylesheets.

   Input rules kept from the donor, per s.9a INPUT FIELD RULES:
   44px left padding so the rupee icon clears the typed digits, and
   native number spinners hidden on every numeric input.
   ═══════════════════════════════════════════════════════════ */

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

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

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

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

.asc-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;
}

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

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

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

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

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

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

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

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

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

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

.asc-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;
}

.asc-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. */
.asc-input::-webkit-outer-spin-button,
.asc-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.asc-input[type="number"] { -moz-appearance: textfield; }

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

.asc-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;
}

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

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

.asc-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;
}

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

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

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

.asc-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;
}

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

/* Error */
.asc-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;
}

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

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

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

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

/* Result banner */
.asc-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;
}

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

.asc-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;
}

.asc-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;
}

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

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

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

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

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

.asc-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;
}

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

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

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

.asc-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;
}

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

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

.asc-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);
}

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

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

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

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

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

.asc-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);
}

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

.asc-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);
}

.asc-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 */
.asc-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 */
.asc-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.asc-btn-copy,
.asc-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;
}

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

.asc-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) {
  .asc-grid-3 { grid-template-columns: 1fr; }
  .asc-form { padding: 20px 18px; }
  .asc-calc-header { padding: 20px 18px 16px; }
  .asc-results { padding: 0 18px 24px; }
  .asc-result-banner { flex-direction: column; }
  .asc-result-divider { width: 100%; height: 1px; }
  .asc-result-main { padding: 24px 20px 16px; }
  .asc-result-meta { padding: 16px 20px 20px; flex-wrap: wrap; }
  .asc-meta-item { min-width: 33%; border-right: none; }
  .asc-btn-calc { flex: 1 1 100%; }
  .asc-btn-clear { flex: 1 1 100%; justify-content: center; }
}

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


/* ═══════════════════════════════════════════════════════════
   ADDITIONS - the page hero, moved up from widget 01, 22 Aug 2026
   PAGE ASSEMBLY ORDER puts the tool app in container 1, so the
   breadcrumb, the badge, the page's ONE H1, the hero sub and the
   tags all live in salarybreakupcalculator.html now. These rules are
   the widget-half hero rules renamed to tool-half names, values
   unchanged, so the render is identical. The originals are archived
   in REMOVED-from-salarybreakup-css.txt.
   ═══════════════════════════════════════════════════════════ */

.asc-tool-hero {
  text-align: center;
  padding: 48px 20px 28px;
  max-width: 860px;
  margin: 0 auto;
}

.asc-tool-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;
}

.asc-tool-h1 {
  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;
}

.asc-tool-h1 span { color: #10B981; }

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

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

.asc-tool-tag {
  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. Carries the tool infix so
   this file and annualsalary.css never style the same class. The
   widget half keeps its own inline link class for widgets 01, 04, 05,
   06, 07 and 10, and the two never meet. */
.asc-tool-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;
}

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

@media (max-width: 768px) {
  .asc-tool-hero { padding: 36px 18px 22px; }
}

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


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

   Two blocks only. This page's third result table carries a link in
   its last column, which the donor tables never did, and narrow
   phones need the donor table min-width relaxed so the two column
   tables stop scrolling sideways.
   ═══════════════════════════════════════════════════════════ */

/* Links written into a result table cell by annualsalarytool.js.
   Named asc-cell-link so the tool half and the widget half never
   style the same class. !important beats the Elementor kit colour. */
.asc-cell-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;
}

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

/* Row state for a line the entered figure already has deducted */
.asc-row-note td { color: #5A7090; }

/* NARROW PHONES: let the two column tables fit without scrolling.
   The donor sets .asc-table min-width 340px, which is 1px wider than
   the content column on a 375px phone, so even the two column
   conversion and period tables scrolled sideways. */
@media (max-width: 480px) {
  .asc-table { min-width: 288px; }
}