/* ═══════════════════════════════════════════════════════════════════════════ */
/* L2C Experts Brand Skin (T30 — quick-260528-i86)                            */
/* ═══════════════════════════════════════════════════════════════════════════ */
/*                                                                            */
/* Purpose:                                                                   */
/*   Override the generic purple/violet palette inherited from the starter    */
/*   template with the L2C Experts corporate identity: near-black + blue      */
/*   accents. Colors sourced from https://l2cexperts.com/ CSS + logo SVG.    */
/*                                                                            */
/* Load order:                                                                */
/*   This file MUST be linked AFTER style.css so the cascade applies these    */
/*   overrides on top of the base theme. Order matters.                       */
/*                                                                            */
/* Rule:                                                                      */
/*   Do NOT change layout, only colors / fonts / minor visual treatments.    */
/*   No touch to display / grid / flex / width / padding / margin / position. */
/*   No external network deps — no at-import, no Google Fonts, no CDN.        */
/*                                                                            */
/* ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Dark family — from the L2C logo near-black #18161B */
    --l2c-dark-900: #18161B;   /* logo near-black (body bg, nav, ink) */
    --l2c-dark-700: #2A2730;   /* slightly lighter dark (gradient end) */
    --l2c-dark-500: #3D3A45;   /* mid dark (tertiary hover) */

    /* Blue family — L2C primary accent, the "2" in the logo */
    --l2c-blue-500: #00A0DB;   /* primary blue (buttons, accents, focus) */
    --l2c-blue-600: #0081BB;   /* blue hover (darker) */
    --l2c-blue-gray: #45647F;  /* secondary tonal accent */

    /* Surfaces & ink */
    --l2c-ink:   #454545;    /* body text */
    --l2c-paper: #F6F6F6;    /* light section background */
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* Typography                                                                  */
/* ─────────────────────────────────────────────────────────────────────────── */

body {
    /* T106 — keep the flag web font first so inherited elements (team-flag spans,
       champion, the representation dropdown <li> items) render flag emoji. skin.css
       loads after style.css, so without this its 'Inter'-first stack would shadow
       style.css's body rule and flags would fall back to bare two-letter codes.
       unicode-range (see style.css @font-face) scopes the flag font to flag glyphs,
       so body text still uses Inter. */
    font-family: 'Twemoji Country Flags', 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--l2c-ink);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* Card header — white with blue left accent bar                               */
/* ─────────────────────────────────────────────────────────────────────────── */

.card-header {
    background: #ffffff;
    border-bottom: 1px solid #DCDCDC;
    border-left: 4px solid var(--l2c-blue-500);
}

.card-header h1 {
    letter-spacing: 0.02em;
    color: var(--l2c-dark-900);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* Navigation bar                                                              */
/* ─────────────────────────────────────────────────────────────────────────── */

.nav {
    background: var(--l2c-dark-900);
    border-bottom: 2px solid var(--l2c-blue-500);
}

.main-nav-brand {
    letter-spacing: 0.04em;
    color: #ffffff;
    font-size: x-large;
}

.nav-brand {
    letter-spacing: 0.04em;
    color: #ffffff;
}

.nav a.active {
    color: var(--l2c-blue-500);
    border-bottom: 2px solid var(--l2c-blue-500);
}

.nav a:hover {
    color: var(--l2c-blue-500);
}

.nav-admin {
    background: var(--l2c-dark-700);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* Primary button — L2C blue, white text, sharp corners (brand signature)      */
/* ─────────────────────────────────────────────────────────────────────────── */
a .btn-primary,
.btn-primary {
    background: var(--l2c-blue-500);
    color: #ffffff;
    font-weight: 700;
    border-radius: 0;
}

a .btn-primary:hover,
.btn-primary:hover {
    background: var(--l2c-blue-600);
    color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* Form controls — blue focus ring instead of purple                           */
/* ─────────────────────────────────────────────────────────────────────────── */

input:focus,
select:focus,
textarea:focus {
    border-color: var(--l2c-blue-500);
    outline-color: var(--l2c-blue-500);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* T55 — Language switcher: brand-blue hover/focus accent on the dark nav.       */
/* White text on the dark nav already passes WCAG AA; the blue is a UI accent    */
/* (border/outline only, not text), so contrast budget is unaffected.            */
/* ─────────────────────────────────────────────────────────────────────────── */

.nav-lang-select:hover {
    border-color: var(--l2c-blue-500);
}

.nav-lang-select:focus,
.nav-lang-select:focus-visible {
    border-color: var(--l2c-blue-500);
    outline-color: var(--l2c-blue-500);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* Headings on light surfaces — near-black text                                */
/* ─────────────────────────────────────────────────────────────────────────── */

.card h1,
.card h2,
.card h3,
.card-body h1,
.card-body h2,
.card-body h3 {
    color: #212529;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* Links inside content areas — brand blue with darker hover                   */
/* ─────────────────────────────────────────────────────────────────────────── */

/* T49 — group cards are now two clickable zones; the admin zone carries the
   brand-blue accent (the main zone keeps the dark group name as-is). */
.card-body a.group-card-admin {
    color: var(--l2c-blue-500);
}

.card-body a.group-card-admin:hover {
    color: var(--l2c-blue-600);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* Sharp corners — architectural precision, brand signature of l2cexperts.com  */
/* ─────────────────────────────────────────────────────────────────────────── */

.card,
.btn,
.btn-primary,
input,
select,
textarea {
    border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Argentina skin preset (Phase 06.1 — D-15/D-16/D-21; SKIN-04)              */
/* ═══════════════════════════════════════════════════════════════════════════ */
/*                                                                            */
/* Rule: Colors and fonts ONLY — NEVER display/grid/flex/width/padding/      */
/*       margin/position. The :root l2c block above remains the default.     */
/* Palette: White/paper #F3EEEB · dark blue #2B2D44 · deep blue #232D4F     */
/*          light blue #A6CAEE · mid blue #68A4D8 · near-black #110F10      */
/*          gold #DDBC5F (decoration only on light surfaces — WCAG AA fail  */
/*          as text on white/light-blue; passes as fg text on dark surfaces) */
/*                                                                            */
/* ═══════════════════════════════════════════════════════════════════════════ */

[data-skin="argentina"] {
    --l2c-dark-900: #2B2D44;   /* nav / dark surfaces (dark blue) */
    --l2c-dark-700: #232D4F;   /* deep blue (gradient end) */
    --l2c-dark-500: #5C6FA7;   /* tertiary */
    --l2c-blue-500: #68A4D8;   /* primary accent (argentina mid blue) */
    --l2c-blue-600: #5C6FA7;   /* accent hover */
    --l2c-blue-gray: #A6CAEE;  /* secondary tonal accent (light blue) */
    --l2c-ink:   #110F10;      /* near-black body text */
    --l2c-paper: #F3EEEB;      /* light surface (warm white/paper) */
    /* gold accent — decoration only on light surfaces (UI-SPEC D-21).           */
    /* Use as: card-header left-accent bar, nav active-link border, focus ring.  */
    /* FORBIDDEN as body text on white/light surfaces (WCAG contrast 1.6:1 FAIL). */
    --l2c-accent-gold: #DDBC5F;
}

/* Gold as left-accent bar on card-header (decoration, never text) */
[data-skin="argentina"] .card-header {
    border-left-color: var(--l2c-accent-gold);
}

/* Gold as nav active-link indicator */
[data-skin="argentina"] .nav a.active {
    color: var(--l2c-accent-gold);
    border-bottom-color: var(--l2c-accent-gold);
}

/* Gold focus ring (decoration, keyboard UX) */
[data-skin="argentina"] input:focus,
[data-skin="argentina"] select:focus,
[data-skin="argentina"] textarea:focus {
    border-color: var(--l2c-accent-gold);
    outline-color: var(--l2c-accent-gold);
}

/* Language switcher follows the gold accent under the Argentina skin (T55). */
[data-skin="argentina"] .nav-lang-select:hover,
[data-skin="argentina"] .nav-lang-select:focus,
[data-skin="argentina"] .nav-lang-select:focus-visible {
    border-color: var(--l2c-accent-gold);
    outline-color: var(--l2c-accent-gold);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* T31 — post-match Statut cell: result + points + last-update timestamp       */
/* ─────────────────────────────────────────────────────────────────────────── */

.match-result {
    font-size: 1.15em;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--l2c-dark-900);
    margin-bottom: 4px;
}

.points-earned {
    display: inline-block;
    padding: 2px 10px;
    font-weight: 600;
    font-size: 0.9em;
    background: #16a34a;
    color: #ffffff;
    margin-bottom: 4px;
}

.match-status-meta {
    font-size: 0.85em;
    opacity: 0.75;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 2px;
}

.match-status-meta .lock-badge {
    font-size: 0.85em;
}

.updated-at {
    font-variant-numeric: tabular-nums;
}