/* Shaxpoint — shared utility classes pulled from the Stitch design system.
 * Tailwind handles the bulk of styling; this file is just for the bits Tailwind
 * can't express cleanly (glassmorphism backdrop blur, branded gradient pattern,
 * Material Symbols fill variation).
 */

/* Branded background — charcoal canvas with subtle green glow */
.bg-pattern {
    background-image:
        radial-gradient(circle at 50% 50%, rgba(186, 246, 0, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 100% 0%, rgba(186, 246, 0, 0.1) 0%, transparent 30%);
    background-color: #121414;
    background-size: cover;
    background-position: center;
}

/* Cards — glassmorphic effect using a navy tint over the charcoal canvas */
.glass-panel {
    background-color: rgba(22, 32, 61, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.glass-panel-elevated {
    background-color: rgba(22, 32, 61, 0.8);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(186, 246, 0, 0.3);
}

/* Material Symbols default — "filled" variant for icons */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Bottom nav — appears on every in-tournament screen */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background-color: rgba(12, 15, 15, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.bottom-nav-inner {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    max-width: 640px;
    margin: 0 auto;
    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
}
.bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    text-decoration: none;
    color: #c3caac;
    font-family: Inter, system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color 0.15s;
}
.bottom-nav a .material-symbols-outlined {
    font-size: 22px;
    padding: 6px 18px;
    border-radius: 9999px;
    transition: background-color 0.15s, color 0.15s;
}
.bottom-nav a:hover { color: #e2e2e2; }
.bottom-nav a:hover .material-symbols-outlined { background-color: rgba(255, 255, 255, 0.05); }
.bottom-nav a.active { color: #baf600; }
.bottom-nav a.active .material-symbols-outlined {
    background-color: #baf600;
    color: #263500;
    font-variation-settings: 'FILL' 1;
}
.bottom-nav a.active:hover .material-symbols-outlined { background-color: #a3d800; }
.bottom-nav a[data-disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Sensible default page padding when bottom-nav is present */
.has-bottom-nav { padding-bottom: 72px; }

/* Tournament desktop nav — sits in the page header on md+ screens. The mobile
 * bottom-nav remains the entry point on phones. */
.tnav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    font-family: Inter, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #c3caac;
    transition: color 120ms, background-color 120ms;
    text-decoration: none;
    white-space: nowrap;
}
.tnav-link:hover { color: #e2e2e2; background-color: rgba(255, 255, 255, 0.04); }
.tnav-link.active {
    color: #baf600;
    background-color: rgba(186, 246, 0, 0.1);
}
.tnav-link[data-disabled] { opacity: 0.4; pointer-events: none; cursor: not-allowed; }

/* Strip the native number-input spinner across all browsers — the page already
 * has its own controls (e.g. the score +/- circles), so the OS buttons are noise. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ---------------------------------------------------------------------------
 * Toast notifications (used by shared/ui.js, shx.toast(...))
 * Stack from the top of the screen on mobile, top-right on desktop.
 * Auto-injected; pages don't need to add any markup.
 * ------------------------------------------------------------------------- */
.shx-toast-container {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 1000;
    pointer-events: none;
    padding: 0 12px;
}
@media (min-width: 640px) {
    .shx-toast-container {
        left: auto;
        right: 16px;
        top: 16px;
        align-items: flex-end;
        padding: 0;
    }
}
.shx-toast {
    pointer-events: auto;
    background-color: rgba(22, 32, 61, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left-width: 4px;
    border-radius: 10px;
    padding: 12px 16px;
    color: #e2e2e2;
    font-family: Inter, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    min-width: 260px;
    max-width: 420px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.35);
    transform: translateY(-8px);
    opacity: 0;
    transition: transform 200ms ease, opacity 200ms ease;
}
.shx-toast.shown { transform: translateY(0); opacity: 1; }
.shx-toast.leaving { transform: translateY(-8px); opacity: 0; }
.shx-toast .icon { flex-shrink: 0; font-size: 20px; line-height: 1; margin-top: 1px; }
.shx-toast .body { flex: 1; min-width: 0; }
.shx-toast.ok    { border-left-color: #baf600; }
.shx-toast.ok    .icon { color: #baf600; }
.shx-toast.error { border-left-color: #ffb4ab; }
.shx-toast.error .icon { color: #ffb4ab; }
.shx-toast.info  { border-left-color: #bfc5e4; }
.shx-toast.info  .icon { color: #bfc5e4; }

/* ---------------------------------------------------------------------------
 * Modal dialog (used by shared/ui.js, shx.confirm(...))
 * One <dialog>-style overlay with backdrop + focus-trapped panel.
 * ------------------------------------------------------------------------- */
.shx-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 11, 22, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 16px;
    opacity: 0;
    transition: opacity 150ms ease;
}
.shx-modal-backdrop.shown { opacity: 1; }
.shx-modal {
    background-color: rgba(22, 32, 61, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 420px;
    color: #e2e2e2;
    font-family: Inter, system-ui, sans-serif;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.96);
    transition: transform 150ms ease;
}
.shx-modal-backdrop.shown .shx-modal { transform: scale(1); }
.shx-modal h3 {
    font-family: Montserrat, system-ui, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #ffffff;
    margin: 0 0 8px;
}
.shx-modal p {
    margin: 0 0 24px;
    color: #c3caac;
    line-height: 1.5;
}
.shx-modal .actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.shx-modal button {
    font-family: Inter, system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 11px 18px;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    transition: filter 120ms ease, background-color 120ms ease;
}
.shx-modal button.cancel { background: transparent; color: #c3caac; border: 1px solid rgba(255,255,255,0.12); }
.shx-modal button.cancel:hover { color: #ffffff; border-color: rgba(255,255,255,0.3); }
.shx-modal button.confirm { background: #baf600; color: #263500; }
.shx-modal button.confirm:hover { filter: brightness(1.05); }
.shx-modal button.confirm.danger { background: #ffb4ab; color: #690005; }
.shx-modal button:focus-visible { outline: 2px solid #baf600; outline-offset: 2px; }
body.shx-modal-open { overflow: hidden; }