/* ============================================================
   CALM SKIN — overrides layered on top of style.css.
   Loaded AFTER style.css so these win. Namespaced cx-* classes
   power the new sport-first home + fixtures; the :root overrides
   recolour the existing ticket/login/status screens to match.
   ============================================================ */

:root {
    --bg: #0d0e10;
    --cell: #181a1d;
    --cell2: #141619;
    --seam: #000;
    --amber: #ffc24d;
    --amber-dim: #c89438;

    /* Recolour the existing app palette to the calm scheme */
    --accent: #ffc24d;
    --accent-soft: rgba(255,194,77,0.12);
    --accent-text: #ffc24d;
    --green: #46d97a;
    --green-soft: rgba(70,217,122,0.12);
    --orange: #ffc24d;
    --red: #ff5347;
    --text: #f4efe3;
    --text-secondary: rgba(244,239,227,0.62);
    --text-tertiary: rgba(244,239,227,0.34);
    --text-quaternary: rgba(244,239,227,0.2);
    --divider: rgba(255,255,255,0.07);
    --disp: "Oswald", Impact, "Arial Narrow", sans-serif;
    --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

body { font-family: var(--mono); }

/* Kill the glassmorphism "AI look": ambient glows + blur bars */
.ambient-bg, .glow, .glow-1, .glow-2, .glow-3 { display: none !important; }

.navbar {
    background: #0d0e10;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid #23252a;
}
.nav-title { font-family: var(--disp); letter-spacing: 1px; text-transform: uppercase; color: var(--amber); }
.nav-back { color: var(--text-secondary); }

/* Primary buttons (login, New Ticket): solid amber + dark text, kill blue gradient */
.action-btn.primary {
    background: var(--amber) !important;
    border: 1px solid var(--amber-dim) !important;
    color: #160a08 !important;
}
.action-btn.primary .action-title {
    color: #160a08 !important;
    background: none !important;
    -webkit-text-fill-color: #160a08 !important;
}
.action-btn.primary .action-icon { background: rgba(0,0,0,0.15) !important; }

/* Input focus ring: amber, not blue */
.search-input:focus {
    border-color: var(--amber-dim) !important;
    box-shadow: 0 0 0 3px rgba(255,194,77,0.12) !important;
}

/* ==================== CALM HOME + FIXTURES (cx-*) ==================== */
.cx-wrap { max-width: 980px; margin: 0 auto; padding: 0 16px 24px; }

.cx-hdr { display:flex; align-items:center; gap:13px; padding:22px 2px 16px; border-bottom:1px solid #23252a; }
.cx-lamp { width:12px; height:12px; border-radius:50%; background:var(--green); box-shadow:0 0 8px rgba(70,217,122,.5); flex:0 0 auto; }
.cx-hdr h1 { font-family:var(--disp); font-weight:600; font-size:clamp(22px,5.5vw,30px); letter-spacing:1.5px; text-transform:uppercase; margin:0; color:var(--amber); }
.cx-hdr .cx-sub { font-size:12px; letter-spacing:1px; color:var(--text-tertiary); margin-top:3px; }
.cx-hdr .cx-clock { margin-left:auto; text-align:right; font-variant-numeric:tabular-nums; }
.cx-hdr .cx-clock .t { font-family:var(--disp); font-size:30px; letter-spacing:1px; color:var(--text); }
.cx-hdr .cx-clock .z { font-size:10px; letter-spacing:1px; color:var(--text-tertiary); text-transform:uppercase; }

.cx-back { margin:16px 0 0; }
.cx-back button { font-family:var(--disp); font-size:16px; letter-spacing:1px; text-transform:uppercase; color:var(--text-secondary);
    background:var(--cell2); border:1px solid #2a2d33; border-radius:6px; padding:12px 18px; cursor:pointer; }
.cx-back button:hover { border-color:var(--amber); color:var(--amber); }

.cx-home { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; }
.cx-tile { display:flex; flex-direction:column; justify-content:flex-end; gap:10px; text-align:left; cursor:pointer;
    min-height:230px; padding:24px; border-radius:12px; border:1px solid #2a2d33; color:var(--text); width:100%;
    background:linear-gradient(180deg,var(--cell) 0 calc(50% - .5px),var(--seam) 50%,var(--cell2) calc(50% + .5px) 100%); }
.cx-tile:hover { border-color:var(--amber); }
.cx-tile .tag { font-family:var(--disp); font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--amber); }
.cx-tile .tt { font-family:var(--disp); font-size:clamp(30px,8vw,44px); letter-spacing:1px; text-transform:uppercase; line-height:.95; }
.cx-tile .ts { font-size:14px; color:var(--text-secondary); line-height:1.4; }
.cx-tile .go { font-family:var(--disp); font-size:15px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-tertiary); margin-top:4px; }

.cx-days { display:flex; gap:8px; overflow-x:auto; padding:18px 0 6px; scrollbar-width:none; }
.cx-days::-webkit-scrollbar { display:none; }
.cx-day { flex:0 0 auto; font-family:var(--disp); font-size:15px; letter-spacing:1px; text-transform:uppercase;
    padding:11px 18px; color:var(--text-secondary); background:var(--cell2); border:1px solid #2a2d33; border-radius:6px; cursor:pointer; }
.cx-day .n { font-family:var(--mono); font-size:12px; color:var(--text-tertiary); margin-left:7px; }
.cx-day.on { background:var(--cell); border-color:var(--amber); color:var(--amber); }

.cx-grp { font-family:var(--disp); font-size:16px; letter-spacing:2px; text-transform:uppercase; color:var(--amber-dim);
    margin:26px 0 10px; display:flex; align-items:center; gap:12px; }
.cx-grp::after { content:""; flex:1; height:1px; background:#23252a; }

.cx-row { display:grid; grid-template-columns:94px 1fr; gap:14px;
    background:linear-gradient(180deg,var(--cell) 0 calc(50% - .5px),var(--seam) 50%,var(--cell2) calc(50% + .5px) 100%);
    border:1px solid #23252a; border-radius:8px; padding:16px; margin-bottom:10px; align-items:center; }
.cx-row .when { text-align:center; }
.cx-row .when .t { font-family:var(--disp); font-size:24px; color:var(--text); letter-spacing:1px; font-variant-numeric:tabular-nums; line-height:1; margin-top:5px; }
.cx-row .when .d { font-size:13px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.6px; line-height:1.2; }
.cx-row .when .d.today { display:inline-block; color:var(--bg); background:var(--amber); padding:3px 9px; border-radius:3px; }
.cx-row .when .d.soon { color:var(--amber); }
.cx-row .when .d.past { color:var(--text-tertiary); opacity:.6; }
.cx-row .when .tz { font-size:10px; color:var(--text-tertiary); letter-spacing:1px; margin-top:2px; }
.cx-row .when .live { display:inline-block; font-family:var(--disp); font-size:12px; letter-spacing:1px; color:#160a08;
    background:var(--red); padding:3px 9px; border-radius:3px; margin-top:8px; }
.cx-row .body .lg { font-size:13px; letter-spacing:.5px; color:var(--amber-dim); text-transform:uppercase; margin-bottom:5px; }
.cx-row .body .fx { font-family:var(--disp); font-size:clamp(19px,4.6vw,23px); letter-spacing:.3px; color:var(--text); line-height:1.18; margin-bottom:4px; }
.cx-row .body .fx .v { color:var(--text-tertiary); font-size:.78em; margin:0 8px; text-transform:lowercase; }
.cx-row .body .ven { font-size:13px; color:var(--text-tertiary); margin-bottom:12px; }
.cx-row .body .wlab { font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--text-tertiary); margin-bottom:8px; }
.cx-row .body .cg { margin-bottom:12px; }
.cx-row .body .cg:last-child { margin-bottom:0; }
.cx-row .body .cglab { font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--amber); margin-bottom:7px; }
.cx-row .body .ch { display:flex; flex-wrap:wrap; gap:8px; }
.cx-row .body .ch a { font-size:14px; letter-spacing:.3px; color:var(--text); text-decoration:none;
    border:1px solid #33373d; background:#1b1e22; padding:8px 12px; border-radius:6px; cursor:default; }
.cx-row .body .ch a:hover { border-color:var(--amber); color:var(--amber); }

.cx-empty { font-family:var(--disp); font-size:16px; letter-spacing:1px; text-transform:uppercase; color:var(--text-tertiary); padding:30px 4px; }

.cx-utils { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:28px; padding-top:18px; border-top:1px solid #23252a; }
.cx-utils button { font-family:var(--mono); font-size:13px; letter-spacing:.5px; color:var(--text-secondary);
    background:var(--cell2); border:1px solid #2a2d33; border-radius:6px; padding:10px 14px; cursor:pointer; }
.cx-utils button:hover { border-color:var(--amber); color:var(--amber); }
.cx-utils .logout { margin-left:auto; font-size:13px; color:var(--amber); cursor:pointer; }

/* ==================== ACCOUNT ==================== */
.cx-acct { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; align-items:start; }
.cx-acct-card { border:1px solid #23252a; border-radius:10px;
    background:linear-gradient(180deg,var(--cell) 0 calc(50% - .5px),var(--seam) 50%,var(--cell2) calc(50% + .5px) 100%); padding:6px 18px; }
.cx-acct-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 0; border-bottom:1px solid var(--divider); }
.cx-acct-row:last-child { border-bottom:none; }
.cx-acct-lab { font-family:var(--disp); font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-tertiary); }
.cx-acct-val { font-family:var(--mono); font-size:16px; color:var(--text); text-align:right; word-break:break-word; }
.cx-acct-soon { font-family:var(--disp); font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--amber);
    border:1px solid var(--amber-dim); border-radius:4px; padding:4px 10px; }
.cx-acct-qr { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
    border:1px solid #23252a; border-radius:10px; background:var(--cell2); padding:22px 18px; }
.cx-acct-qrlab { font-family:var(--disp); font-size:14px; letter-spacing:2px; text-transform:uppercase; color:var(--amber); }
.cx-acct-qrimg { width:100%; max-width:260px; height:auto; border-radius:8px; display:block; }
.cx-acct-qrnote { font-size:12px; line-height:1.5; color:var(--text-tertiary); max-width:280px; }
.cx-acct-save { font-family:var(--disp); font-size:15px; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none;
    color:#160a08; background:var(--amber); border:1px solid var(--amber-dim); border-radius:6px; padding:12px 24px; cursor:pointer; }
.cx-acct-save:hover { background:#ffce6e; }

@media (max-width:560px) {
    .cx-home { grid-template-columns:1fr; }
    .cx-tile { min-height:150px; }
    .cx-row { grid-template-columns:70px 1fr; gap:13px; padding:14px; }
    .cx-acct { grid-template-columns:1fr; }
}