/* =========================================================
   PBC TOURNAMENT — DESIGN SYSTEM 2026
   PATCH 01 — Socle visuel global public + privé
   Référence : PBC Control Center
   ========================================================= */

:root {
    --pbc-ui-bg: #0a0c10;
    --pbc-ui-surface: #0d1016;
    --pbc-ui-panel: #151922;
    --pbc-ui-panel-soft: #1a1f29;
    --pbc-ui-panel-hover: #202631;
    --pbc-ui-border: rgba(255,255,255,.075);
    --pbc-ui-border-strong: rgba(255,212,0,.23);
    --pbc-ui-text: #f7f8fb;
    --pbc-ui-muted: #8e96a6;
    --pbc-ui-yellow: #ffd400;
    --pbc-ui-yellow-soft: rgba(255,212,0,.12);
    --pbc-ui-green: #39d98a;
    --pbc-ui-green-soft: rgba(57,217,138,.12);
    --pbc-ui-blue: #55aaff;
    --pbc-ui-blue-soft: rgba(85,170,255,.12);
    --pbc-ui-purple: #a77bff;
    --pbc-ui-purple-soft: rgba(167,123,255,.12);
    --pbc-ui-orange: #ff9f43;
    --pbc-ui-orange-soft: rgba(255,159,67,.12);
    --pbc-ui-red: #ff5d68;
    --pbc-ui-red-soft: rgba(255,93,104,.12);
    --pbc-ui-radius: 16px;
    --pbc-ui-radius-lg: 22px;
    --pbc-ui-shadow: 0 18px 48px rgba(0,0,0,.28);
}

/* ---------- Base commune ---------- */
body.pbc-private,
body.pbc-public {
    min-width: 320px;
    background:
        radial-gradient(circle at 72% -10%, rgba(255,212,0,.07), transparent 34rem),
        var(--pbc-ui-bg) !important;
    color: var(--pbc-ui-text) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.45;
}

.pbc-private .container,
.pbc-public .container.public-container {
    width: min(100%, 1320px);
}

.pbc-private h1,.pbc-private h2,.pbc-private h3,.pbc-private h4,
.pbc-public h1,.pbc-public h2,.pbc-public h3,.pbc-public h4 {
    color: var(--pbc-ui-text);
    letter-spacing: -.02em;
}

.pbc-private .muted,
.pbc-public .muted { color: var(--pbc-ui-muted) !important; }

/* ---------- Surfaces génériques ---------- */
.pbc-private .card,
.pbc-private .dashboard-panel,
.pbc-public .card {
    background: linear-gradient(180deg, var(--pbc-ui-panel) 0%, #121720 100%) !important;
    color: var(--pbc-ui-text) !important;
    border: 1px solid var(--pbc-ui-border) !important;
    border-radius: var(--pbc-ui-radius) !important;
    box-shadow: none !important;
}

.pbc-private .hero,
.pbc-public .hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255,212,0,.06), transparent 44%),
        var(--pbc-ui-panel) !important;
    color: var(--pbc-ui-text) !important;
    border: 1px solid var(--pbc-ui-border) !important;
    border-left: 4px solid var(--pbc-ui-yellow) !important;
    border-radius: var(--pbc-ui-radius-lg) !important;
    box-shadow: var(--pbc-ui-shadow) !important;
}

.pbc-private .hero p,
.pbc-public .hero p { color: #b8c0cd !important; }

/* ---------- Boutons ---------- */
.pbc-private .btn,
.pbc-public .btn,
.pbc-public .public-btn {
    min-height: 40px;
    border-radius: 11px !important;
    border: 1px solid transparent;
    transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}

.pbc-private .btn:hover,
.pbc-public .btn:hover,
.pbc-public .public-btn:hover { transform: translateY(-1px); }

.pbc-private .btn,
.pbc-public .btn,
.pbc-public .public-btn.primary {
    background: var(--pbc-ui-yellow) !important;
    color: #111 !important;
}

.pbc-private .btn.secondary,
.pbc-public .btn.secondary,
.pbc-public .public-btn.ghost {
    background: var(--pbc-ui-panel-soft) !important;
    color: var(--pbc-ui-text) !important;
    border-color: var(--pbc-ui-border) !important;
}

.pbc-private .btn.dark,
.pbc-public .btn.dark {
    background: #090b0f !important;
    color: #fff !important;
    border-color: var(--pbc-ui-border) !important;
}

.pbc-private .btn.ok,
.pbc-public .btn.ok {
    background: var(--pbc-ui-green-soft) !important;
    color: #82efb4 !important;
    border-color: rgba(57,217,138,.24) !important;
}

.pbc-private .btn.danger,
.pbc-public .btn.danger {
    background: var(--pbc-ui-red-soft) !important;
    color: #ff969e !important;
    border-color: rgba(255,93,104,.24) !important;
}

/* ---------- Formulaires ---------- */
.pbc-private label,
.pbc-public label { color: #dfe3ea; }

.pbc-private input,.pbc-private select,.pbc-private textarea,
.pbc-public input,.pbc-public select,.pbc-public textarea {
    background: #0f131a !important;
    color: var(--pbc-ui-text) !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 10px !important;
    outline: none;
}

.pbc-private input:focus,.pbc-private select:focus,.pbc-private textarea:focus,
.pbc-public input:focus,.pbc-public select:focus,.pbc-public textarea:focus {
    border-color: rgba(255,212,0,.62) !important;
    box-shadow: 0 0 0 3px rgba(255,212,0,.08);
}

.pbc-private input::placeholder,.pbc-private textarea::placeholder,
.pbc-public input::placeholder,.pbc-public textarea::placeholder { color: #667080; }

/* ---------- Tableaux ---------- */
.pbc-private table,
.pbc-public table {
    overflow: hidden;
    border-radius: 12px;
}

.pbc-private th,.pbc-public th {
    color: var(--pbc-ui-muted) !important;
    background: rgba(255,255,255,.025);
    border-bottom-color: rgba(255,255,255,.09) !important;
}

.pbc-private td,.pbc-public td {
    color: #e8ebf0;
    border-bottom-color: rgba(255,255,255,.065) !important;
}

.pbc-private tbody tr:hover td,
.pbc-public tbody tr:hover td { background: rgba(255,255,255,.025); }

/* ---------- Badges / états ---------- */
.pbc-private .status,.pbc-public .status,
.pbc-private .pill,.pbc-public .pill {
    border: 1px solid var(--pbc-ui-border);
    background: rgba(255,255,255,.055);
    color: #dce1e8;
}

.pbc-private .status.live,.pbc-public .status.live {
    background: var(--pbc-ui-yellow-soft);
    color: #ffe34a;
    border-color: rgba(255,212,0,.23);
}
.pbc-private .status.scheduled,.pbc-public .status.scheduled {
    background: var(--pbc-ui-blue-soft);
    color: #8cc7ff;
    border-color: rgba(85,170,255,.23);
}
.pbc-private .status.submitted,.pbc-public .status.submitted {
    background: var(--pbc-ui-orange-soft);
    color: #ffc078;
    border-color: rgba(255,159,67,.23);
}
.pbc-private .status.validated,.pbc-public .status.validated {
    background: var(--pbc-ui-green-soft);
    color: #7eeab1;
    border-color: rgba(57,217,138,.23);
}
.pbc-private .status.cancelled,.pbc-public .status.cancelled {
    background: var(--pbc-ui-red-soft);
    color: #ff969e;
    border-color: rgba(255,93,104,.23);
}

/* ---------- Flash / alertes ---------- */
.pbc-private .flash,.pbc-public .flash {
    background: var(--pbc-ui-green-soft) !important;
    color: #82efb4 !important;
    border: 1px solid rgba(57,217,138,.25) !important;
    border-radius: 12px !important;
}
.pbc-private .flash.error,.pbc-public .flash.error {
    background: var(--pbc-ui-red-soft) !important;
    color: #ff969e !important;
    border-color: rgba(255,93,104,.25) !important;
}

/* ---------- Éléments hérités ---------- */
.pbc-private .event,
.pbc-public .event,
.pbc-private .scorebox,
.pbc-public .scorebox,
.pbc-private .role-note,
.pbc-public .role-note {
    background: var(--pbc-ui-panel) !important;
    color: var(--pbc-ui-text) !important;
    border-color: var(--pbc-ui-border) !important;
}

.pbc-private .event.live,
.pbc-public .event.live { border-left-color: var(--pbc-ui-yellow) !important; }

.pbc-private .team-badge img,.pbc-public .team-badge img,
.pbc-private .team-logo,.pbc-public .team-logo {
    background: #fff;
    border-color: rgba(255,255,255,.12) !important;
}

.pbc-private .team-placeholder,
.pbc-public .team-placeholder {
    background: var(--pbc-ui-panel-soft) !important;
    color: var(--pbc-ui-text);
}

/* ---------- Footer ---------- */
.pbc-private .footer,
.pbc-public .footer {
    color: var(--pbc-ui-muted) !important;
    border-top-color: var(--pbc-ui-border) !important;
}

/* =========================================================
   ESPACE PRIVÉ — langage visuel Control Center
   ========================================================= */
.pbc-private header {
    background: rgba(10,12,16,.94) !important;
    border-bottom: 1px solid var(--pbc-ui-border) !important;
    backdrop-filter: blur(18px);
}

.pbc-private header .brand b {
    background: var(--pbc-ui-yellow) !important;
    color: #111 !important;
}

.pbc-private header nav a {
    color: #d8dde6 !important;
    border: 1px solid transparent;
}
.pbc-private header nav a:hover {
    background: var(--pbc-ui-panel-soft) !important;
    border-color: var(--pbc-ui-border);
    color: #fff !important;
}

.pbc-private .tabs a {
    background: var(--pbc-ui-panel) !important;
    color: #dce1e8 !important;
    border: 1px solid var(--pbc-ui-border) !important;
}

/* =========================================================
   ESPACE PUBLIC — même ADN, navigation plus légère
   ========================================================= */
.pbc-public .public-header {
    background: rgba(10,12,16,.90) !important;
    border-bottom: 1px solid var(--pbc-ui-border) !important;
}

.pbc-public .public-brand-logo,
.pbc-public .public-brand-mark {
    background: var(--pbc-ui-yellow) !important;
    box-shadow: 0 9px 24px rgba(255,212,0,.16);
}

.pbc-public .public-nav a { color: #d8dde6; }
.pbc-public .public-nav a:hover {
    background: var(--pbc-ui-panel-soft);
    color: #fff;
}
.pbc-public .public-nav .public-login {
    background: var(--pbc-ui-yellow) !important;
    color: #111 !important;
}

.pbc-public .public-home-hero,
.pbc-public .public-featured-match,
.pbc-public .public-quick-card,
.pbc-public .public-next-row,
.pbc-public .public-home-visual {
    background-color: var(--pbc-ui-panel) !important;
    border-color: var(--pbc-ui-border) !important;
}

.pbc-public .public-home-hero {
    background:
        linear-gradient(135deg, rgba(255,212,0,.065), transparent 45%),
        var(--pbc-ui-panel) !important;
    box-shadow: var(--pbc-ui-shadow);
}

.pbc-public .public-highlight {
    background: var(--pbc-ui-yellow-soft) !important;
    border-color: rgba(255,212,0,.20) !important;
}
.pbc-public .public-highlight.urgent {
    background: var(--pbc-ui-red-soft) !important;
    border-color: rgba(255,93,104,.25) !important;
}

.pbc-public .public-empty-state {
    background: rgba(21,25,34,.58);
    border-color: rgba(255,255,255,.11) !important;
}

@media (max-width: 850px) {
    .pbc-private .container,
    .pbc-public .container.public-container { padding-inline: 13px; }

    .pbc-private header nav {
        background: rgba(10,12,16,.98) !important;
        border-bottom: 1px solid var(--pbc-ui-border);
    }

    .pbc-public .public-nav {
        background: rgba(13,16,22,.99) !important;
        border: 1px solid var(--pbc-ui-border) !important;
        box-shadow: var(--pbc-ui-shadow);
    }
}