/* Military Pay Table Plugin Styles */

.mpt-calculator {
    background: linear-gradient(135deg, #1c2315 0%, #4b5320 100%);
    border-radius: 8px;
    padding: 1.5rem;
    color: white;
    max-width: 400px;
}
.mpt-calculator h3 {
    color: #d4a017;
    margin: 0 0 1rem 0;
}
.mpt-calculator select {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    background: rgba(255,255,255,0.1);
    color: white;
    font-size: 1rem;
}
.mpt-calculator select option {
    background: #1c2315;
    color: white;
}
.mpt-result {
    background: rgba(212,160,23,0.2);
    border: 2px solid #d4a017;
    border-radius: 4px;
    padding: 1rem;
    text-align: center;
}
.mpt-amount {
    font-size: 2rem;
    font-weight: 800;
    color: #d4a017;
}
.mpt-amount.mpt-annual {
    font-size: 1.25rem;
}
.mpt-label {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-top: 0.5rem;
}

.mpt-tsp-ticker {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 1rem;
    background: #f1f5f9;
    border-radius: 4px;
}
.mpt-tsp-fund {
    flex-shrink: 0;
    background: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    text-align: center;
}
.mpt-fund-name {
    display: block;
    font-weight: 700;
    font-size: 0.875rem;
    color: #475569;
}
.mpt-fund-change {
    font-weight: 600;
}
.mpt-fund-change.up { color: #16a34a; }
.mpt-fund-change.down { color: #dc2626; }

.mpt-table-wrap {
    overflow-x: auto;
    margin: 1.5rem 0;
}
.mpt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.mpt-table th, .mpt-table td {
    padding: 0.75rem 0.5rem;
    text-align: right;
    border: 1px solid #e2e8f0;
}
.mpt-table th {
    background: #4b5320;
    color: white;
}
.mpt-table td:first-child, .mpt-table th:first-child {
    text-align: left;
    font-weight: 600;
}
.mpt-table tr:nth-child(even) { background: #f8fafc; }
.mpt-table tr:hover { background: rgba(75,83,32,0.1); }

@media (max-width: 768px) {
    .mpt-calculator { max-width: 100%; }
    .mpt-amount { font-size: 1.5rem; }
}