/* ═══════════════════════════════════════════════════════════════════════════
   FRAGWAY CS2 PUGS — Theme Patch v1.0
   Brings cs2.fragway.net visual identity in line with www.fragway.net
   
   INSTALL: Add ONE line to includes/header.php, just after the panel.css link:
   <link rel="stylesheet" href="/assets/css/fragway-theme.css">
   
   Then upload this file to: /var/www/matchzy/assets/css/fragway-theme.css
   No other files need to be changed.
═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. COLOUR SYSTEM OVERRIDE ───────────────────────────────────────────
   fragway.net uses: dark navy cards (#0f1823), orange (#ff6600), 
   green accent for "WAY" branding (#00e676), particle dot bg
──────────────────────────────────────────────────────────────────────────*/
:root {
    /* Background — navy blue matching fragway.net */
    --bg:          #0a0d14;
    --bg-card:     #0f1823;
    --bg-dark:     #070a0f;
    --bg-elevated: #131d2a;
    --bg-hover:    #172030;

    /* Borders — slightly blue-tinted to match fragway.net */
    --border:       #1e2d3d;
    --border-light: #253545;
    --border-focus: #ff6600;

    /* Orange — exact fragway.net orange */
    --orange:        #ff6600;
    --orange-dark:   #cc5200;
    --orange-glow:   rgba(255,102,0,0.18);
    --orange-border: rgba(255,102,0,0.35);
    --orange-dim:    rgba(255,102,0,0.08);
    --amber:         #ff6600;
    --amber-dark:    #cc5200;
    --amber-glow:    rgba(255,102,0,0.12);
    --amber-border:  rgba(255,102,0,0.28);
    --accent:        #ff6600;
    --primary:       #ff6600;
    --primary-dark:  #cc5200;
    --primary-glow:  rgba(255,102,0,0.18);
    --primary-border:rgba(255,102,0,0.35);

    /* Green — fragway.net "WAY" brand green, used sparingly */
    --fragway-green:        #00e676;
    --fragway-green-dim:    rgba(0,230,118,0.08);
    --fragway-green-border: rgba(0,230,118,0.25);
    --fragway-green-glow:   rgba(0,230,118,0.15);
}

/* ── 2. TOPNAV — orange bottom line (matches fragway.net horizontal dividers) */
.topnav {
    background: rgba(7, 10, 15, 0.97) !important;
    border-bottom: 1px solid var(--border) !important;
}
.topnav::after {
    background: linear-gradient(90deg, var(--orange), var(--fragway-green) 50%, transparent) !important;
    opacity: 0.6 !important;
}

/* ── 3. LOGO — "FRAG" white, "WAY" green (matches fragway.net footer) */
.topnav-logo-name {
    color: var(--text);
}
.topnav-logo span {
    color: var(--fragway-green) !important;
}
.topnav-logo i {
    color: var(--orange) !important;
}

/* ── 4. SIDEBAR — darker navy, green active states */
.sidebar {
    background: var(--bg-dark) !important;
    border-right-color: var(--border) !important;
}

/* ── 5. CARDS — navy background with glowing green top corner on hover */
.card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    transition: border-color .2s, box-shadow .2s !important;
}
.card:hover {
    border-color: var(--orange-border) !important;
    box-shadow: 0 0 20px rgba(255,102,0,0.06) !important;
}

/* Card corner bracket decorations (fragway.net signature style) */
.card::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 16px;
    height: 16px;
    border-top: 2px solid var(--fragway-green);
    border-right: 2px solid var(--fragway-green);
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.card:hover::after {
    opacity: 0.7;
}
/* Bottom-left corner */
.card::before {
    background: var(--orange) !important;
}

/* ── 6. STAT CARDS — navy, green bottom line on hover */
.stat-card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}
.stat-card:hover {
    border-color: var(--orange-border) !important;
    box-shadow: 0 4px 24px rgba(255,102,0,0.08) !important;
}
.stat-card::after {
    background: linear-gradient(90deg, var(--orange), var(--fragway-green)) !important;
}
.stat-card:hover::after {
    opacity: 1 !important;
}

/* ── 7. BUTTONS — match fragway.net orange buttons exactly */
.btn-primary {
    background: var(--orange) !important;
    color: #fff !important;
    letter-spacing: 1.5px;
}
.btn-primary:hover {
    background: #ff7722 !important;
    box-shadow: 0 0 24px rgba(255,102,0,0.4) !important;
}

/* ── 8. NAV ACTIVE STATE — green left border (fragway.net uses green accents) */
.nav a.active {
    color: var(--orange) !important;
    border-left-color: var(--orange) !important;
    background: var(--orange-dim) !important;
}

/* ── 9. PAGE HEADER — orange underline with green glow */
.page-header::after {
    background: linear-gradient(90deg, var(--orange), var(--fragway-green)) !important;
    width: 64px !important;
    height: 2px !important;
}

/* ── 10. SCORE HEADER — navy gradient matching fragway.net */
.score-header {
    background: linear-gradient(135deg, rgba(255,102,0,0.07), transparent 40%, rgba(0,230,118,0.04)) !important;
}

/* ── 11. HORIZONTAL DIVIDERS — fragway.net signature orange lines */
.divider {
    border-top: 1px solid var(--border) !important;
    position: relative;
}
.divider::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, var(--orange), transparent);
}

/* ── 12. SECTION LABELS — green // prefix (matches fragway.net tactical style) */
.arena-section-label::before {
    color: var(--fragway-green) !important;
}
.nav-section::before {
    color: var(--fragway-green) !important;
}
.page-subtitle::before {
    color: var(--fragway-green) !important;
    opacity: 0.8 !important;
}

/* ── 13. ONLINE STATUS — brighter green matching fragway.net */
.status-dot.online {
    background: var(--fragway-green) !important;
    box-shadow: 0 0 8px var(--fragway-green-glow) !important;
}
.text-green, .status-online {
    color: var(--fragway-green) !important;
}

/* ── 14. LIVE BADGE — orange pulse */
.badge-live {
    background: rgba(255,102,0,0.12) !important;
    color: var(--orange) !important;
    border-color: var(--orange-border) !important;
}
.badge-live::before {
    background: var(--orange) !important;
}

/* ── 15. TABLE ROW HOVER — orange left border */
tr:hover td:first-child {
    border-left-color: var(--orange) !important;
}

/* ── 16. FORM FOCUS — orange glow */
.form-control:focus {
    border-color: var(--orange) !important;
    box-shadow: 0 0 0 2px rgba(255,102,0,0.12) !important;
}

/* ── 17. TOPNAV GRADIENT GLOW — subtle orange at top */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--orange) 30%, var(--fragway-green) 70%, transparent);
    z-index: 9999;
    pointer-events: none;
    opacity: 0.5;
}

/* ── 18. CARD HEADER — slightly darker navy */
.card-header {
    background: rgba(7, 10, 15, 0.6) !important;
    border-bottom-color: var(--border) !important;
}
.card-title i {
    color: var(--orange) !important;
}

/* ── 19. SCOREBOARD WINNER COLOR — keep green */
.score-team.winner .score-team-name {
    color: var(--fragway-green) !important;
    text-shadow: 0 0 20px rgba(0,230,118,0.3);
}

/* ── 20. FOOTER — orange top line matching fragway.net */
.sidebar-footer {
    border-top-color: var(--border) !important;
}
.sidebar-footer::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, var(--orange), transparent);
    margin-bottom: 12px;
    margin-left: -16px;
    margin-right: -16px;
}

/* ── MATCH STATUS BADGE COLOURS ─────────────────────────────────────────── */
/* Finished — green */
.badge-finished {
    background: rgba(0,230,118,0.10) !important;
    color: #00e676 !important;
    border-color: rgba(0,230,118,0.30) !important;
}

/* Cancelled — sky blue */
.badge-cancelled {
    background: rgba(0,191,255,0.10) !important;
    color: #00bfff !important;
    border-color: rgba(0,191,255,0.30) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BACKGROUND SYSTEM — Options A + B + E
   A: Subtle branded dot grid — body background
   B: CS2 hero image behind homepage header
   E: Ambient map background on match pages
══════════════════════════════════════════════════════════════════════════════ */

/* ── A: Dot grid texture ─────────────────────────────────────────────────────
   Uses !important to beat panel.css body { background: var(--bg) } shorthand
   Orange primary dots at 28px spacing, green secondary at 56px              */
body {
    background-image:
        radial-gradient(circle, rgba(255,102,0,0.07) 1px, transparent 1px),
        radial-gradient(circle, rgba(0,230,118,0.03) 1px, transparent 1px) !important;
    background-size: 28px 28px, 56px 56px !important;
    background-position: 0 0, 14px 14px !important;
    background-attachment: fixed !important;
}

/* ── B: Homepage hero background image ───────────────────────────────────────
   .home-hero added to .page-header on index.php only
   ::after used — ::before is taken by existing orange glow blob             */
.home-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius);
}
.home-hero::after {
    content: '';
    position: absolute;
    inset: -6px;
    background-image: url('https://cdn.akamai.steamstatic.com/apps/csgo/maps/de_nuke.jpg');
    background-size: cover;
    background-position: center 35%;
    opacity: 0.09;
    filter: blur(3px) saturate(0.3) brightness(0.45);
    z-index: -1;
    pointer-events: none;
}

/* ── E: Ambient match map background ─────────────────────────────────────────
   body.has-map-bg + --fw-page-map-bg CSS var set by enhancements.js
   Spreads the current match map behind the whole page at low opacity         */
body.has-map-bg::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: var(--fw-page-map-bg, none);
    background-size: cover;
    background-position: center;
    opacity: 0.07;
    filter: blur(14px) saturate(0.18) brightness(0.3);
    z-index: -2;
    pointer-events: none;
}