/* ─────────────────────────────────────────
   Global polish
   ───────────────────────────────────────── */
html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    background: #0a0c10;
}

/* Gentle page-level background gradient for depth */
#page-content {
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(209, 122, 0, 0.06), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(0, 255, 157, 0.035), transparent 60%);
    min-height: 100vh;
}

/* ─────────────────────────────────────────
   Scrollbars
   ───────────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: #2a3441 transparent;
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: #1e2a38;
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: #2f3e52;
    background-clip: content-box;
    border: 2px solid transparent;
}

/* ─────────────────────────────────────────
   Cards — subtle shadow + hairline border
   ───────────────────────────────────────── */
#page-content [style*="border-radius: 6px"],
#page-content [style*="borderRadius: 6px"] {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.02) inset,
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 8px 24px -12px rgba(0, 0, 0, 0.55);
    transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}

/* ─────────────────────────────────────────
   Tables — row hover, crisper separators
   ───────────────────────────────────────── */
table {
    border-collapse: collapse;
}
tbody tr {
    transition: background 120ms ease;
}
tbody tr:hover {
    background: rgba(255, 255, 255, 0.025);
}
th {
    text-transform: uppercase;
}

/* ─────────────────────────────────────────
   Buttons — smoother focus + hover
   ───────────────────────────────────────── */
button {
    transition: color 120ms ease, background 120ms ease, opacity 120ms ease, transform 120ms ease;
}
button:hover {
    opacity: 0.85;
}
button:active {
    transform: translateY(1px);
}
button:focus-visible {
    outline: 2px solid rgba(209, 122, 0, 0.5);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Account-name buttons keep accent underline on hover */
button[id*="account-btn"]:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    opacity: 1;
}

/* Stat cards get a subtle lift on hover when clickable */
button[id*="__stat__"]:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 2px 4px rgba(0, 0, 0, 0.4),
        0 12px 28px -10px rgba(0, 0, 0, 0.6) !important;
    opacity: 1;
}

/* ─────────────────────────────────────────
   Inputs
   ───────────────────────────────────────── */
input, select, textarea {
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #D17A00 !important;
    box-shadow: 0 0 0 3px rgba(209, 122, 0, 0.15);
}

/* ─────────────────────────────────────────
   Plotly — keep legend non-interactive cursor
   ───────────────────────────────────────── */
.js-plotly-plot .legend .traces,
.js-plotly-plot .legend .traces text,
.js-plotly-plot .legend .traces rect,
.js-plotly-plot .legend .bg {
    cursor: default !important;
}

/* ─────────────────────────────────────────
   Selection
   ───────────────────────────────────────── */
::selection {
    background: rgba(209, 122, 0, 0.35);
    color: #ffffff;
}