/* Basic styles (Astra-friendly, no frameworks) */
#handicapWrapper { 
    max-width: 1100px; 
    margin: 20px auto; 
    background: #fff; 
    padding: 18px; 
    border-radius: 6px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); 
}

#controls { 
    display:flex; 
    gap:10px; 
    align-items:center; 
    margin-bottom:12px; 
}

#searchInput { 
    padding:8px; 
    border:1px solid #ccc; 
    border-radius:4px; 
    width:260px; 
}

#refreshBtn { 
    padding:8px 12px; 
    background:#0086bb; 
    color:#fff; 
    border:none; 
    border-radius:4px; 
    cursor:pointer; 
}

#refreshBtn:disabled { 
    opacity:0.6; 
    cursor:not-allowed; 
}

#playerTable { 
    width:100%; 
    border-collapse:collapse; 
}

#playerTable th, #playerTable td { 
    padding:8px 10px; 
    border:1px solid #e6e6e6; 
    text-align:left; 
    vertical-align: middle;
}

#playerTable th { 
    background:#f5f5f5; 
    font-weight:600; 
}

#playerTable tr:nth-child(even) { 
    background:#fafafa; 
}

.view-history-btn { 
    padding:6px 8px; 
    border-radius:4px; 
    background:#0086bb; 
    color:#fff; 
    border:none; 
    cursor:pointer; 
}

.view-history-btn:hover { 
    opacity:0.9; 
}

/* Trend cell: center the icon and reserve width */
.trend-cell {
    text-align: center;
    width: 70px;         /* gives room for the SVG arrow/dash */
    white-space: nowrap;
}

/* Trend Icons */
.trend-icon {
    display: inline-block;
    vertical-align: middle;
    width: 34px;    /* match JS SVG width */
    height: 24px;   /* match JS SVG height */
    line-height: 24px;
}

/* Dash (same) alignment */
.trend-icon path[fill="#666"] { 
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    fill: #666;     /* ensures dash is gray */
}

/* Modal */
.modal { 
    display:none; 
    position:fixed; 
    left:0; 
    top:0; 
    width:100%; 
    height:100%; 
    background:rgba(0,0,0,0.5); 
    align-items:center; 
    justify-content:center; 
    z-index:9999; 
}

.modal-content { 
    background:#fff; 
    padding:18px; 
    border-radius:6px; 
    max-width:500px; 
    width:95%; 
    max-height:80vh; 
    overflow:auto; 
    position:relative;
}

.modal-content h2 { 
    margin-top:0; 
}

.modal-content ul { 
    padding-left:1.2rem; 
}

#modalCloseBtn { 
    background:#ddd; 
    border:none; 
    padding:6px 8px; 
    border-radius:4px; 
    cursor:pointer; 
    position:absolute;
    top:10px;
    right:10px; 
}