/* ═══════════════════════════════════════════════════════════
   salary.css — Salary & bonus tracking styles
   ═══════════════════════════════════════════════════════════ */

/* ─── Üst Özet Kartları ─── */
.salary-strip {
    display: flex; gap: 10px; overflow-x: auto;
    padding: 0 0 14px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.salary-strip::-webkit-scrollbar { display: none; }

.salary-hcard {
    flex-shrink: 0; background: var(--bg-card); border-radius: 16px;
    border: 1px solid var(--border-soft); padding: 14px 16px;
    display: flex; align-items: center; gap: 12px; min-width: 135px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    transition: box-shadow 0.2s, transform 0.15s;
}
.salary-hcard:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}
.salary-hcard-full { min-width: 170px; }

.salary-hcard-icon {
    width: 38px; height: 38px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.salary-hcard-icon svg { width: 18px; height: 18px; }

.salary-hcard:first-child .salary-hcard-icon { background: rgba(37,99,235,0.1); color: #2563eb; }
.salary-hcard:first-child .salary-hcard-value { color: #2563eb; }
.salary-hcard:nth-child(2) .salary-hcard-icon { background: rgba(5,150,105,0.1); color: #059669; }
.salary-hcard:nth-child(2) .salary-hcard-value { color: #059669; }
.salary-hcard:nth-child(3) .salary-hcard-icon { background: rgba(217,119,6,0.1); color: #d97706; }
.salary-hcard:nth-child(3) .salary-hcard-value { color: #d97706; }

[data-theme="dark"] .salary-hcard:first-child .salary-hcard-icon { background: rgba(37,99,235,0.18); }
[data-theme="dark"] .salary-hcard:first-child .salary-hcard-value { color: #60a5fa; }
[data-theme="dark"] .salary-hcard:nth-child(2) .salary-hcard-icon { background: rgba(5,150,105,0.18); }
[data-theme="dark"] .salary-hcard:nth-child(2) .salary-hcard-value { color: #34d399; }
[data-theme="dark"] .salary-hcard:nth-child(3) .salary-hcard-icon { background: rgba(217,119,6,0.18); }
[data-theme="dark"] .salary-hcard:nth-child(3) .salary-hcard-value { color: #fbbf24; }

.salary-hcard-body {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.salary-hcard-label {
    font-size: 0.6rem; color: var(--text-tertiary); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.salary-hcard-value {
    font-size: 0.95rem; font-weight: 800; color: var(--text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ─── Maaş Kartları ─── */
.s-card {
    background: var(--bg-card); border-radius: 14px;
    border: 1px solid var(--border-soft); margin-bottom: 10px;
    overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    transition: box-shadow 0.2s, transform 0.15s;
}
.s-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}

.s-card-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px 0 14px;
}
.s-card-month {
    font-size: 0.75rem; font-weight: 700; color: var(--text-secondary);
    display: flex; align-items: center; gap: 6px;
}
.s-card-month svg { width: 13px; height: 13px; opacity: 0.4; }
.s-card-del {
    background: none; border: none; cursor: pointer; padding: 4px 6px;
    color: var(--text-tertiary); border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    display: flex; align-items: center;
}
.s-card-del:hover { background: rgba(220,38,38,0.1); color: #dc2626; }
.s-card-del svg { width: 13px; height: 13px; display: block; }

.s-card-body {
    padding: 8px 14px 14px 14px;
}
.s-card-net {
    font-size: 1.3rem; font-weight: 800; color: #2563eb;
    font-variant-numeric: tabular-nums; line-height: 1.2;
    letter-spacing: -0.02em;
}
.s-card-meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 4px;
}
.s-card-meta span {
    font-size: 0.7rem; color: var(--text-tertiary); font-weight: 500;
}
.s-card-bonus {
    color: #d97706 !important; font-weight: 700 !important;
}

[data-theme="dark"] .s-card-net { color: #60a5fa; }
[data-theme="dark"] .s-card-bonus { color: #fbbf24 !important; }

/* ─── Mobile ─── */
@media (max-width: 600px) {
    .salary-hcard { min-width: 115px; padding: 12px 14px; }
    .salary-hcard-full { min-width: 145px; }
    .salary-hcard-value { font-size: 0.85rem; }
    .s-card-net { font-size: 1.1rem; }
}