/* =====================================================
   ELO RATING CALCULATOR v2.1 — Light Theme
   Font: DM Sans + DM Mono via Google Fonts
   Theme: Clean white + Navy/Teal/Gold — matches Chess Results Pro
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&family=Playfair+Display:wght@700&display=swap');

/* ---- Root Variables (Light) ---- */
.elo-wrap {
    --elo-bg:        #ffffff;
    --elo-surface:   #f5f7fa;
    --elo-surface2:  #eef1f6;
    --elo-border:    #dde3ee;
    --elo-navy:      #1a2744;
    --elo-teal:      #0e9f8e;
    --elo-teal-dim:  rgba(14,159,142,0.10);
    --elo-gold:      #f0a500;
    --elo-gold-dim:  rgba(240,165,0,0.10);
    --elo-p1:        #1a56a0;
    --elo-p1-dim:    rgba(26,86,160,0.09);
    --elo-p2:        #c2185b;
    --elo-p2-dim:    rgba(194,24,91,0.08);
    --elo-green:     #0b8070;
    --elo-green-dim: rgba(11,128,112,0.10);
    --elo-red:       #d32f2f;
    --elo-red-dim:   rgba(211,47,47,0.09);
    --elo-text:      #1a2744;
    --elo-muted:     #6b7a99;
    --elo-radius:    14px;
    --elo-radius-sm: 8px;
    --elo-shadow:    0 4px 24px rgba(26,39,68,0.10);
    font-family: 'DM Sans', sans-serif;
}

/* ---- Wrapper ---- */
.elo-wrap {
    max-width: 780px;
    margin: 32px auto;
    background: var(--elo-bg);
    border-radius: 20px;
    box-shadow: var(--elo-shadow);
    border: 1px solid var(--elo-border);
    overflow: hidden;
    color: var(--elo-text);
}

/* ---- Header ---- */
.elo-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 26px 32px 22px;
    background: linear-gradient(135deg, #1a2744 0%, #243358 100%);
    border-bottom: 3px solid var(--elo-teal);
}

.elo-header-icon {
    font-size: 36px;
    line-height: 1;
}

.elo-title {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px;
    letter-spacing: -0.3px;
}

.elo-subtitle {
    font-size: 13px;
    color: rgba(255,255,255,0.60);
    margin: 0;
    font-weight: 400;
}

/* ---- Form ---- */
.elo-form {
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--elo-bg);
}

.elo-players-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.elo-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.elo-field-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.elo-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--elo-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Player badges */
.elo-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}
.elo-badge-p1 { background: var(--elo-p1-dim); color: var(--elo-p1); border: 1px solid rgba(26,86,160,0.20); }
.elo-badge-p2 { background: var(--elo-p2-dim); color: var(--elo-p2); border: 1px solid rgba(194,24,91,0.20); }

/* Inputs */
.elo-input {
    background: var(--elo-bg);
    border: 1.5px solid var(--elo-border);
    border-radius: var(--elo-radius-sm);
    color: var(--elo-text);
    padding: 11px 13px;
    font-size: 15px;
    font-family: 'DM Mono', monospace;
    font-weight: 500;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.elo-input:focus {
    outline: none;
    border-color: var(--elo-teal);
    box-shadow: 0 0 0 3px var(--elo-teal-dim);
    background: #fff;
}

.elo-select {
    cursor: pointer;
    background-color: var(--elo-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7a99' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.elo-select option {
    background: #ffffff;
    color: #1a2744;
}

/* Result Toggle */
.elo-result-toggle {
    display: flex;
    gap: 8px;
}

.elo-toggle-opt {
    flex: 1;
    cursor: pointer;
}

.elo-toggle-opt input[type="radio"] {
    display: none;
}

.elo-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 6px;
    border-radius: var(--elo-radius-sm);
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid var(--elo-border);
    background: var(--elo-surface);
    color: var(--elo-muted);
    transition: all 0.18s ease;
    cursor: pointer;
    text-align: center;
    user-select: none;
    white-space: nowrap;
}

.elo-toggle-btn:hover {
    border-color: var(--elo-teal);
    color: var(--elo-teal);
    background: var(--elo-teal-dim);
}

.elo-toggle-opt input:checked + .elo-toggle-btn.elo-win {
    border-color: var(--elo-green);
    background: var(--elo-green-dim);
    color: var(--elo-green);
}
.elo-toggle-opt input:checked + .elo-toggle-btn.elo-draw {
    border-color: var(--elo-gold);
    background: var(--elo-gold-dim);
    color: var(--elo-gold);
}
.elo-toggle-opt input:checked + .elo-toggle-btn.elo-loss {
    border-color: var(--elo-red);
    background: var(--elo-red-dim);
    color: var(--elo-red);
}

/* Submit Button — teal to match chess theme */
.elo-btn {
    background: linear-gradient(135deg, #0b8070 0%, #0e9f8e 100%);
    color: #ffffff;
    border: none;
    border-radius: var(--elo-radius-sm);
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s;
    box-shadow: 0 4px 16px rgba(14,159,142,0.25);
    width: 100%;
}

.elo-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(14,159,142,0.35);
    background: linear-gradient(135deg, #0d9080 0%, #11b8a6 100%);
}

.elo-btn:active {
    transform: translateY(0);
}

.elo-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ---- Result Card ---- */
#elo-result-area {
    padding: 0 32px;
}

.elo-result-card {
    background: var(--elo-surface);
    border: 1px solid var(--elo-border);
    border-radius: var(--elo-radius);
    border-top: 3px solid var(--elo-teal);
    padding: 24px;
    margin-bottom: 24px;
    animation: elo-slide-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes elo-slide-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.elo-result-heading {
    font-size: 11px;
    font-weight: 700;
    color: var(--elo-teal);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 0 0 16px;
}

.elo-result-players {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    margin-bottom: 20px;
}

.elo-player-result {
    background: #ffffff;
    border: 1px solid var(--elo-border);
    border-radius: var(--elo-radius-sm);
    padding: 16px;
    text-align: center;
}

.elo-player-result.p1-result { border-top: 3px solid var(--elo-p1); }
.elo-player-result.p2-result { border-top: 3px solid var(--elo-p2); }

.elo-player-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--elo-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.elo-rating-new {
    font-family: 'DM Mono', monospace;
    font-size: 28px;
    font-weight: 500;
    color: var(--elo-navy);
    line-height: 1;
    margin-bottom: 6px;
}

.elo-rating-change {
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
}

.elo-rating-change.pos  { background: var(--elo-green-dim); color: var(--elo-green); }
.elo-rating-change.neg  { background: var(--elo-red-dim);   color: var(--elo-red); }
.elo-rating-change.zero { background: var(--elo-surface2);  color: var(--elo-muted); }

.elo-vs-divider {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--elo-muted);
    text-align: center;
}

.elo-result-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.elo-meta-pill {
    font-size: 12px;
    font-weight: 500;
    background: #ffffff;
    border: 1px solid var(--elo-border);
    border-radius: 20px;
    padding: 5px 12px;
    color: var(--elo-muted);
}

.elo-meta-pill strong { color: var(--elo-navy); }

.elo-error-msg {
    background: var(--elo-red-dim);
    border: 1px solid rgba(211,47,47,0.20);
    border-radius: var(--elo-radius-sm);
    color: var(--elo-red);
    padding: 12px 16px;
    font-size: 13px;
    margin-bottom: 20px;
}

/* ---- History Table ---- */
.elo-history-section {
    padding: 8px 32px 32px;
}

.elo-history-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--elo-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 12px;
}

.elo-table-wrap {
    overflow-x: auto;
    border-radius: var(--elo-radius-sm);
    border: 1px solid var(--elo-border);
}

.elo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 600px;
    background: #fff;
}

.elo-table thead tr {
    background: var(--elo-navy);
}

.elo-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: none;
    white-space: nowrap;
}

.elo-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--elo-border);
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    color: var(--elo-text);
    vertical-align: middle;
}

.elo-table tbody tr:last-child td {
    border-bottom: none;
}

.elo-table tbody tr:nth-child(even) {
    background: var(--elo-surface);
}

.elo-table tbody tr:hover {
    background: var(--elo-teal-dim);
}

.elo-table tbody tr:first-child td {
    background: rgba(240,165,0,0.06);
}

.elo-table tbody tr:first-child td:first-child::after {
    content: ' ✦';
    color: var(--elo-gold);
    font-size: 10px;
}

/* Table specific cells */
.elo-bold { font-weight: 700; color: var(--elo-navy); }

.elo-pos { color: var(--elo-green); font-weight: 700; }
.elo-neg { color: var(--elo-red);   font-weight: 700; }

.elo-time { color: var(--elo-muted); font-size: 12px; }

.elo-result-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
    font-family: 'DM Sans', sans-serif;
}

.elo-badge-win  { background: var(--elo-green-dim); color: var(--elo-green); border: 1px solid rgba(11,128,112,0.20); }
.elo-badge-draw { background: var(--elo-gold-dim);  color: var(--elo-gold);  border: 1px solid rgba(240,165,0,0.25); }
.elo-badge-loss { background: var(--elo-red-dim);   color: var(--elo-red);   border: 1px solid rgba(211,47,47,0.20); }

/* ---- Delete Button ---- */
.elo-del-btn {
    background: none;
    border: 1.5px solid rgba(211,47,47,0.25);
    color: var(--red);
    border-radius: 6px;
    width: 26px;
    height: 26px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.elo-del-btn:hover {
    background: var(--elo-red-dim);
    border-color: var(--red);
    transform: scale(1.1);
}
.elo-del-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* ---- Table Footer (Totals) ---- */
.elo-tfoot-row td {
    padding: 11px 14px;
    background: var(--elo-navy);
    color: rgba(255,255,255,0.75);
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    border-top: 2px solid var(--elo-teal);
}

.elo-tfoot-label {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    color: rgba(255,255,255,0.85) !important;
    letter-spacing: 0.3px;
}

.elo-tfoot-val {
    font-weight: 700 !important;
    font-size: 13px !important;
}

.elo-tfoot-row td.elo-pos { color: #4ade80 !important; }
.elo-tfoot-row td.elo-neg { color: #f87171 !important; }

/* ---- Responsive ---- */
@media (max-width: 620px) {
    .elo-header { padding: 20px; }
    .elo-form { padding: 20px; }
    #elo-result-area { padding: 0 20px; }
    .elo-history-section { padding: 8px 20px 24px; }
    .elo-players-grid,
    .elo-row-grid { grid-template-columns: 1fr; }
    .elo-result-players { grid-template-columns: 1fr 1fr; }
    .elo-vs-divider { display: none; }
    .elo-title { font-size: 18px; }
}