/* ═══════════════════════════════════════════
   salary.css — Salary Calculator specific styles
   Requires: calc-global.css
═══════════════════════════════════════════ */

:root {
    --sal-blue:      #2563EB;
    --sal-blue-soft: #DBEAFE;
}

.c-navy  { color: var(--navy); }
.c-pur   { color: #6D28D9; }
.c-slate { color: var(--slate); }
.c-red   { color: var(--danger); }
.c-amber { color: #92400E; }

.page-header-sub {
    font-size: .8rem;
    color: var(--slate);
    margin-top: .3rem;
}

.ded-note {
    font-size: .69rem;
    color: var(--slate);
    margin-top: 6px;
    line-height: 1.5;
}

select.ig-num {
    appearance: none;
    background: var(--white);
    cursor: pointer;
}

.donut-svg-wrap svg {
    width: 190px;
    height: 190px;
}

/* ═══════════════════════════════════════════
   DONUT TOOLTIP — salary-specific ID
   calc-global.css only styles #donutTip; this
   page uses #salDonutTip instead, so it needs
   its own matching rule (same pattern as #donutTip).
═══════════════════════════════════════════ */

#salDonutTip {
    position: absolute;
    bottom: 105%;
    left: 50%;
    transform: translateX(-50%);
    background: #0D2545;
    border-radius: 16px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s;
    z-index: 20;
    width: 192px;
    box-shadow: 0 20px 40px rgba(13,37,69,.35), 0 4px 12px rgba(13,37,69,.2);
}

/* ═══════════════════════════════════════════
   REGIME TOGGLE CARDS
   Not present in calc-global.css — this pattern
   originated in it.css for the Income Tax
   Calculator's New/Old regime selector, and is
   duplicated here since salary.php reuses the
   same UI. If this ever becomes used by a third
   calculator, move this block into calc-global.css
   instead of copying it a third time.
═══════════════════════════════════════════ */

.regime-toggle-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.regime-toggle-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem .9rem;
    border-radius: var(--r-md);
    border: 1.5px solid var(--slate-line);
    background: var(--white);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    transition: border-color .2s var(--ease), background .2s var(--ease), transform .18s var(--ease-spring);
}

.regime-toggle-card:hover {
    border-color: var(--navy);
}

.regime-toggle-card[aria-pressed="true"] {
    border-color: var(--navy);
    background: var(--navy-light);
    transform: translateY(-1px);
}

.rtc-indicator {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--slate-line);
    flex-shrink: 0;
    transition: border-color .2s, background .2s;
}

.regime-toggle-card[aria-pressed="true"] .rtc-indicator {
    border-color: var(--navy);
    background: var(--navy);
    box-shadow: inset 0 0 0 3px var(--white);
}

.rtc-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.rtc-title {
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink);
}

.rtc-sub {
    font-size: .66rem;
    color: var(--slate);
}

.rtc-badge {
    display: none;
    color: var(--navy);
    font-size: .8rem;
    font-weight: 800;
    flex-shrink: 0;
}

.regime-toggle-card[aria-pressed="true"] .rtc-badge {
    display: block;
}

/* ═══════════════════════════════════════════
   EMPTY-FIELD VALIDATION PROMPT
   Also missing from calc-global.css — present in
   hra.css only today. Included here defensively
   in case validation is added to salary.js later;
   harmless if unused.
═══════════════════════════════════════════ */

.field-empty-prompt {
    font-size: .7rem;
    color: var(--danger);
    margin-top: 5px;
    display: none;
    align-items: center;
    gap: 4px;
    background: var(--danger-soft);
    border: 1px solid #FECACA;
    border-radius: 8px;
    padding: .3rem .6rem;
}
.field-empty-prompt.show { display: flex; }

@media (max-width: 700px) {
    .regime-toggle-wrap { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .result-grid { grid-template-columns: 1fr 1fr !important; }
    .regime-toggle-wrap { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   UX ADDITIONS (v2.0) — clarity, hierarchy, a11y
   All additive: no existing rule above is changed,
   only new selectors introduced. Uses the same
   tokens as calc-global.css (--navy, --slate, etc.)
   so it stays visually identical to the rest of
   the calculator suite.
═══════════════════════════════════════════ */

/* Step indicator next to "Salary Details" / "Tax Settings" section labels */
.step-tag {
    display: inline-flex;
    align-items: center;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--slate);
    opacity: .65;
    margin-left: 8px;
}

/* Inline "?" help glyph — reuses ig-tag's rounded-pill language at a smaller scale */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1;
    color: var(--slate);
    background: var(--slate-light);
    border: 1px solid var(--slate-line);
    cursor: help;
    margin-left: 6px;
    flex: none;
    transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.help-icon:hover,
.help-icon:focus-visible {
    background: var(--navy-light);
    color: var(--navy);
    border-color: var(--navy);
}

.ig-label { display: flex; align-items: center; }
.ig-label label { display: inline-flex; align-items: center; }

/* CTC is the primary driver input — give it a touch more visual weight */
.primary-field .ig-label label { font-weight: 700; color: var(--navy); }
.primary-field .ig-num { font-weight: 800; }

/* Short lead-in copy under a section-label, e.g. "Start with your annual CTC..." */
.flow-note {
    font-size: .7rem;
    color: var(--slate);
    opacity: .85;
    margin: 2px 0 14px;
    line-height: 1.55;
}


/* Optional-setting checkbox row (e.g. "Cap PF at ₹15,000/month wage") */
.ig-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
}
.ig-checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--navy);
    cursor: pointer;
    flex-shrink: 0;
}