/* ============================================================
   TradeRadar — Global Professional Dark Theme
   Ek hi file jo Site.Master ke through poori app par lagti hai.
   Bootstrap 5.3 ke native dark mode (data-bs-theme="dark") ke upar
   premium brand layer add karti hai.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
    --tr-bg: #0b0e14;
    --tr-bg-2: #0e1320;
    --tr-panel: #131722;
    --tr-panel-2: #1a1f2e;
    --tr-border: #232a3b;
    --tr-text: #e6edf3;
    --tr-muted: #8b949e;
    --tr-accent: #7c3aed;
    --tr-accent-2: #2563eb;
    --tr-green: #22c55e;
    --tr-red: #f87171;
    --tr-amber: #eab308;
    --tr-gold: #fbbf24;

    /* Bootstrap variable overrides (brand color) */
    --bs-primary: #7c3aed;
    --bs-primary-rgb: 124, 58, 237;
    --bs-link-color: #a78bfa;
    --bs-link-hover-color: #c4b5fd;
    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html, body {
    background: radial-gradient(1200px 700px at 85% -15%, #1b2238 0%, var(--tr-bg) 55%) fixed !important;
    color: var(--tr-text) !important;
    font-family: var(--bs-body-font-family);
    min-height: 100vh;
}

/* ---------- Top Navigation ---------- */
.tr-nav {
    background: rgba(13, 17, 28, .82) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--tr-border);
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: .6rem 0;
}
.tr-brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 800; font-size: 20px; letter-spacing: -.4px;
    color: var(--tr-text) !important; text-decoration: none;
}
.tr-brand .mark {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, var(--tr-accent), var(--tr-accent-2));
    display: grid; place-items: center; font-size: 19px;
    box-shadow: 0 6px 18px rgba(124, 58, 237, .45);
}
.tr-brand .sub { font-size: 11px; color: var(--tr-gold); font-weight: 600; display: block; margin-top: -3px; }
.tr-nav .nav-link {
    color: var(--tr-muted) !important; font-weight: 600; font-size: 14px;
    border-radius: 9px; padding: 7px 14px !important; transition: all .15s;
}
.tr-nav .nav-link:hover { color: #fff !important; background: rgba(124, 58, 237, .14); }
.tr-nav .nav-link.active { color: #fff !important; background: rgba(124, 58, 237, .22); }

/* ---------- Buttons ---------- */
.btn-glow, .btn-primary {
    background: linear-gradient(135deg, var(--tr-accent), var(--tr-accent-2)) !important;
    border: none !important; color: #fff !important; font-weight: 700;
    border-radius: 11px; box-shadow: 0 6px 18px rgba(124, 58, 237, .38);
}
.btn-glow:hover, .btn-primary:hover { filter: brightness(1.08); }
.btn-ghost, .btn-outline-light {
    background: var(--tr-panel-2) !important; border: 1px solid var(--tr-border) !important;
    color: var(--tr-text) !important; font-weight: 600; border-radius: 10px;
}
.btn-ghost:hover, .btn-outline-light:hover { border-color: var(--tr-accent) !important; color: #fff !important; }
.btn-warning { background: linear-gradient(135deg, #f59e0b, #f43f5e) !important; border: none !important; color: #fff !important; font-weight: 700; border-radius: 10px; }
.btn-success { background: linear-gradient(135deg, #16a34a, #22c55e) !important; border: none !important; color: #fff !important; border-radius: 10px; }
.btn-danger { background: linear-gradient(135deg, #e11d48, #f43f5e) !important; border: none !important; color: #fff !important; border-radius: 10px; }
.btn { font-weight: 600; }

/* ---------- Cards / Panels ---------- */
.card, .cardx, .glass {
    background: var(--tr-panel) !important;
    border: 1px solid var(--tr-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
    color: var(--tr-text);
}
.card .card-body { color: var(--tr-text); }
.cardx:hover { border-color: rgba(124, 58, 237, .5) !important; transform: translateY(-2px); transition: all .18s; }

/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(135deg, rgba(124, 58, 237, .22), rgba(37, 99, 235, .14)) !important;
    border: 1px solid var(--tr-border);
    border-radius: 20px !important; padding: 30px 32px !important; color: var(--tr-text) !important;
    position: relative; overflow: hidden;
}
.hero h1 { font-weight: 800; letter-spacing: -.5px; }
.hero p { color: var(--tr-muted) !important; }

/* ---------- Pills / Badges ---------- */
.pill {
    background: rgba(124, 58, 237, .16) !important; color: #c4b5fd !important;
    border: 1px solid rgba(124, 58, 237, .3); border-radius: 999px;
    padding: 4px 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
}

/* ---------- Tables ---------- */
.table { color: var(--tr-text) !important; --bs-table-bg: transparent; }
.table > :not(caption) > * > * { background: transparent !important; border-color: var(--tr-border) !important; }
.table thead th { color: var(--tr-muted) !important; text-transform: uppercase; font-size: 11px; letter-spacing: .5px; border-bottom: 1px solid var(--tr-border) !important; }
.table-dark { --bs-table-bg: var(--tr-panel-2); }
.table-hover > tbody > tr:hover > * { background: rgba(124, 58, 237, .08) !important; }
/* GridView (legacy) */
table.GridView, .grid, .gridview { background: transparent; color: var(--tr-text); }

/* ---------- Forms ---------- */
.form-control, .form-select {
    background: var(--tr-panel-2) !important; border: 1px solid var(--tr-border) !important;
    color: var(--tr-text) !important; border-radius: 10px;
}
.form-control:focus, .form-select:focus { border-color: var(--tr-accent) !important; box-shadow: 0 0 0 .2rem rgba(124, 58, 237, .25) !important; }
.form-control::placeholder { color: #5b6472; }
.form-label { color: var(--tr-muted); font-weight: 600; }

/* ---------- Alerts ---------- */
.alert-info { background: rgba(37, 99, 235, .1) !important; border: 1px solid rgba(37, 99, 235, .3) !important; color: #93c5fd !important; border-radius: 12px; }
.alert-warning { background: rgba(234, 179, 8, .1) !important; border: 1px solid rgba(234, 179, 8, .3) !important; color: #fde047 !important; border-radius: 12px; }
.alert-success { background: rgba(34, 197, 94, .1) !important; border: 1px solid rgba(34, 197, 94, .3) !important; color: #86efac !important; border-radius: 12px; }
.alert-danger { background: rgba(248, 113, 113, .1) !important; border: 1px solid rgba(248, 113, 113, .3) !important; color: #fca5a5 !important; border-radius: 12px; }

/* ---------- Footer ---------- */
.tr-footer {
    border-top: 1px solid var(--tr-border); margin-top: 40px; padding: 26px 0;
    color: var(--tr-muted); font-size: 13px;
}
.tr-footer a { color: var(--tr-muted); text-decoration: none; }
.tr-footer a:hover { color: var(--tr-accent); }

/* ---------- Auth (Login/Register) ---------- */
.tr-auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.tr-auth-card { max-width: 420px; width: 100%; }
.tr-auth-card .mark-lg {
    width: 54px; height: 54px; border-radius: 14px; margin: 0 auto 14px;
    background: linear-gradient(135deg, var(--tr-accent), var(--tr-accent-2));
    display: grid; place-items: center; font-size: 28px; box-shadow: 0 8px 22px rgba(124, 58, 237, .45);
}

a { color: var(--bs-link-color); }
h1, h2, h3, h4, h5, h6 { color: var(--tr-text); }
.text-muted { color: var(--tr-muted) !important; }