/**
 * Fotbal.live - Theme Design System
 * Dark pitch green + red LIVE accent
 * Mobile-first, accessible contrast
 */

/* ══════════════════════════════════════════════════
   1. CSS VARIABLES
   ══════════════════════════════════════════════════ */
:root {
    /* Primary palette */
    --fl-primary: #1B4332;
    --fl-primary-dark: #143326;
    --fl-primary-darkest: #0D2119;
    --fl-secondary: #2D6A4F;
    --fl-secondary-dark: #245740;
    --fl-accent: #E10600;
    --fl-accent-dark: #B80500;
    --fl-accent-light: #95D5B2;

    /* Backgrounds */
    --fl-bg: #F8F9FA;
    --fl-bg-surface: #FFFFFF;

    /* Text */
    --fl-text: #212529;
    --fl-text-muted: #6c757d;
    --fl-text-light: #F8F9FA;

    /* Semantic */
    --fl-success: #198754;
    --fl-warning: #FFC107;
    --fl-danger: #DC3545;
    --fl-info: #0dcaf0;

    /* Shadows */
    --fl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --fl-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --fl-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

    /* Radius */
    --fl-radius: 8px;
    --fl-radius-lg: 12px;

    /* Typography */
    --fl-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ══════════════════════════════════════════════════
   9. DARK MODE PREPARATION
   ══════════════════════════════════════════════════ */
[data-theme="dark"] {
    --fl-bg: #36393c;
    --fl-bg-surface: #122A20;
    --fl-text: #F1F3F5;
    --fl-text-muted: #ADB5BD;
    --fl-text-light: #F1F3F5;
    --fl-primary: #36393c;
    --fl-primary-dark: #36393c;
    --fl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
    --fl-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --fl-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ══════════════════════════════════════════════════
   2. BOOTSTRAP OVERRIDES
   ══════════════════════════════════════════════════ */
:root,
[data-bs-theme="light"] {
    --bs-primary: #1B4332;
    --bs-primary-rgb: 27, 67, 50;
    --bs-success: #198754;
    --bs-success-rgb: 25, 135, 84;
    --bs-danger: #DC3545;
    --bs-danger-rgb: 220, 53, 69;
    --bs-warning: #FFC107;
    --bs-warning-rgb: 255, 193, 7;
    --bs-info: #0dcaf0;
    --bs-info-rgb: 13, 202, 240;
    --bs-body-bg: var(--fl-bg);
    --bs-body-color: var(--fl-text);
    --bs-body-font-family: var(--fl-font);
}

/* ══════════════════════════════════════════════════
   10. TYPOGRAPHY
   ══════════════════════════════════════════════════ */
body {
    font-family: var(--fl-font);
    color: var(--fl-text);
    background-color: var(--fl-bg);
}

.public-card-header,
.team-card-header,
.public-section-header,
.card-header.public-card-header,
.card-header.public-section-header {
    background: linear-gradient(135deg, #e8eff6 0%, #d7e3f1 100%);
    border-bottom: 2px solid transparent !important;
    border-image: linear-gradient(90deg, rgba(66, 112, 156, .82) 0%, rgba(99, 152, 188, .62) 100%) 1;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .58), inset 0 1px 0 rgba(255, 255, 255, .35);
    padding: .75rem 1rem !important;
}

.public-card-header h5,
.team-card-header h5,
.public-section-header h5 {
    margin: 0;
    font-weight: 700;
    color: #29465f;
}

.public-card-header h5,
.team-card-header h5 {
    font-size: .95rem;
    letter-spacing: .01em;
}

.public-card-header h5 i,
.team-card-header h5 i,
.public-section-header h5 i {
    color: #5f7f9d !important;
}

.public-card-header h5 i,
.team-card-header h5 i {
    font-size: 1rem;
}

.public-modal-header {
    background: linear-gradient(135deg, #edf4f0 0%, #d8e7df 100%);
    border-bottom: 1px solid rgba(86, 123, 106, .18) !important;
}

.public-modal-title {
    color: #244b3a;
}

.public-modal-title i {
    color: #567b6a !important;
}

.public-soft-table thead,
.public-soft-table thead.table-light {
    --bs-table-bg: #edf4f0;
    --bs-table-striped-bg: #edf4f0;
    color: #355a49;
}

.public-badge-dark {
    background: #5c6a63 !important;
}

.public-badge-accent {
    background: #5f8f79 !important;
}

.public-card-shell,
.team-page-card,
.public-match-card {
    border-radius: 1rem !important;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(17, 44, 31, .08) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-weight: 600;
}

.section-header {
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--fl-text-muted);
}

/* ══════════════════════════════════════════════════
   3. NAVBAR
   ══════════════════════════════════════════════════ */
.navbar.bg-primary {
    background: var(--fl-primary) !important;
}

.navbar.bg-primary .navbar-brand,
.navbar.bg-primary .nav-link {
    color: #fff !important;
    transition: color 0.2s, border-color 0.2s;
}

.navbar.bg-primary .nav-link:hover,
.navbar.bg-primary .nav-link:focus {
    color: var(--fl-accent-light) !important;
}

.navbar.bg-primary .nav-link.active,
.navbar.bg-primary .nav-item.active>.nav-link {
    border-bottom: 2px solid var(--fl-accent);
    padding-bottom: calc(0.5rem - 2px);
}

.navbar-brand img {
    height: 32px;
    width: auto;
    margin-right: 6px;
    vertical-align: middle;
}

.navbar .dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: var(--fl-shadow);
    border-radius: var(--fl-radius);
    background: rgba(232, 245, 233, 0.85);
}

/* ── Admin nav pills - green instead of blue ── */
.admin-nav-wrap .nav-pills .nav-link.active,
.admin-nav-wrap .nav-pills .nav-link.active:hover {
    background-color: #2D6A4F !important;
    color: #fff !important;
}

.admin-nav-wrap .nav-pills .nav-link:not(.active):hover {
    background-color: rgba(45, 106, 79, 0.10);
    color: #2D6A4F;
}

/* ── Admin card-headers pastel ── */
.admin-card-green .card-header {
    background: rgba(45, 106, 79, 0.10) !important;
}

.admin-card-blue .card-header {
    background: rgba(13, 110, 253, 0.10) !important;
}

.admin-card-purple .card-header {
    background: rgba(111, 66, 193, 0.10) !important;
}

.admin-card-teal .card-header {
    background: rgba(13, 202, 240, 0.10) !important;
}

.admin-card-yellow .card-header {
    background: rgba(255, 193, 7, 0.12) !important;
}

.admin-card-red .card-header {
    background: rgba(220, 53, 69, 0.10) !important;
}

/* ══════════════════════════════════════════════════
   4. FOTBAL.LIVE BUTTON SYSTEM
   ══════════════════════════════════════════════════ */

/* ── Base transition for all fl buttons ────────── */
[class*="btn-fl-"] {
    border: none;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    padding: 8px;
}

[class*="btn-fl-"]:hover {
    transform: translateY(-1px);
}

[class*="btn-fl-"]:active {
    transform: translateY(0);
}

[class*="btn-fl-"]:disabled,
[class*="btn-fl-"].disabled {
    opacity: 0.6;
    pointer-events: none;
    transform: none;
}

/* ── Primary - main action green ──────────────── */
.btn-fl-primary {
    background: #2D6A4F;
    color: #FFFFFF;
}

.btn-fl-primary:hover,
.btn-fl-primary:focus-visible {
    background: #1B4332;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(45, 106, 79, 0.35);
}

.btn-fl-primary:active {
    background: #143326;
    color: #FFFFFF;
}

/* ── Primary2 - main action blue ──────────────── */
.btn-fl-primary2 {
    background: #3376be;
    color: #FFFFFF;
}

.btn-fl-primary2:hover,
.btn-fl-primary2:focus-visible {
    background: #3376be;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(32, 20, 96, 0.35);
}

.btn-fl-primary:active {
    background: #3376be;
    color: #FFFFFF;
}

/* ── Primary3 - main action purple ──────────────── */
.btn-fl-primary3 {
    background: #96418e;
    color: #FFFFFF;
}

.btn-fl-primary3:hover,
.btn-fl-primary3:focus-visible {
    background: #96418e;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(150, 65, 142, 0.35);
}

.btn-fl-primary3:active {
    background: #96418e;
    color: #FFFFFF;
}

/* ── Primary4 - main action purple ──────────────── */
.btn-fl-primary4 {
    background: #94a842;
    color: #FFFFFF;
}

.btn-fl-primary4:hover,
.btn-fl-primary4:focus-visible {
    background: #94a842;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(148, 168, 66, 0.35);
}

.btn-fl-primary4:active {
    background: #94a842;
    color: #FFFFFF;
}

/* ── LIVE - red accent with glow ──────────────── */
.btn-fl-live {
    background: #E10600;
    color: #FFFFFF;
    box-shadow: 0 0 12px rgba(225, 6, 0, 0.3);
}

.btn-fl-live:hover,
.btn-fl-live:focus-visible {
    background: #B30500;
    color: #FFFFFF;
    box-shadow: 0 0 20px rgba(225, 6, 0, 0.5);
}

.btn-fl-live:active {
    background: #900400;
    color: #FFFFFF;
}

/* ── Secondary - light gray ──────────────────── */
.btn-fl-secondary {
    background: #5b5d5c;
    color: #FFFFFF;
}

.btn-fl-secondary:hover,
.btn-fl-secondary:focus-visible {
    background: #5b5d5c;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(149, 213, 178, 0.4);
}

.btn-fl-secondary:active {
    background: #5b5d5c;
    color: #FFFFFF;
}

/* ── Secondary - light gray ──────────────────── */
.btn-fl-secondary2 {
    background: #39b3dc;
    color: #FFFFFF;
}

.btn-fl-secondary2:hover,
.btn-fl-secondary2:focus-visible {
    background: #39b3dc;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(23, 139, 178, 0.4);
}

.btn-fl-secondary2:active {
    background: #39b3dc;
    color: #FFFFFF;
}

/* ── Warning - orange ─────────────────────────── */
.btn-fl-warning {
    background: #F4A261;
    color: #FFFFFF;
}

.btn-fl-warning:hover,
.btn-fl-warning:focus-visible {
    background: #E76F51;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(244, 162, 97, 0.4);
}

.btn-fl-warning:active {
    background: #D45D3C;
    color: #FFFFFF;
}

/* ── Danger - destructive red ─────────────────── */
.btn-fl-danger {
    background: #DC3545;
    color: #FFFFFF;
}

.btn-fl-danger:hover,
.btn-fl-danger:focus-visible {
    background: #BB2D3B;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.35);
}

.btn-fl-danger:active {
    background: #A52834;
    color: #FFFFFF;
}

/* ── Dark - admin/neutral ─────────────────────── */
.btn-fl-dark {
    background: #36393c;
    color: #FFFFFF;
}

.btn-fl-dark:hover,
.btn-fl-dark:focus-visible {
    background: #36393c;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(33, 37, 41, 0.3);
}

.btn-fl-dark:active {
    background: #36393c;
    color: #FFFFFF;
}

/* ── Match Mode - large tile buttons ──────────── */
.btn-fl-match {
    min-height: 80px;
    padding: 16px 20px;
    font-size: 1.15rem;
    font-weight: 700;
    border-radius: 12px;
    box-shadow: var(--fl-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-fl-match:hover {
    box-shadow: var(--fl-shadow);
}

@media (max-width: 575.98px) {
    .btn-fl-match {
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════
   5. CARDS
   ══════════════════════════════════════════════════ */
.card {
    background: var(--fl-bg-surface);
    border: none;
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-shadow-sm);
    border-top: 3px solid var(--fl-primary);
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.card:hover {
    box-shadow: var(--fl-shadow);
}

.card .card-header:not(.public-card-header):not(.public-section-header) {
    background: var(--fl-bg-surface);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════
   6. LIVE MATCH INDICATOR / BADGE
   ══════════════════════════════════════════════════ */
.badge-live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--fl-accent) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.3em 0.6em;
    border-radius: 4px;
    animation: livePulse 1.5s ease-in-out infinite;
}

.badge-live::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
}

@keyframes livePulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* Live pulse utility (existing class) */
.live-pulse {
    animation: livePulse 1.5s ease-in-out infinite;
}

.fl-goal-ball-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    line-height: 1;
}

.fl-goal-ball-icon::before {
    content: '\26BD\FE0E';
}

.match-state-badge {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.8rem;
    border: 1px solid rgba(34, 41, 47, 0.12);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.72), 0 8px 18px rgba(15, 23, 42, 0.12);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #1f2937;
    text-transform: uppercase;
}

.match-state-win {
    background: linear-gradient(180deg, #e7f7ea 0%, #c9ebd2 100%);
    border-color: rgba(63, 145, 92, 0.28);
    color: #20623d;
}

.match-state-draw {
    background: linear-gradient(180deg, #fff0dd 0%, #ffd9ac 100%);
    border-color: rgba(202, 132, 42, 0.28);
    color: #8c5312;
}

.match-state-loss {
    background: linear-gradient(180deg, #fde3e4 0%, #f7bcc0 100%);
    border-color: rgba(198, 91, 104, 0.3);
    color: #9d3342;
}

.match-state-live {
    background: linear-gradient(180deg, #dceeff 0%, #b9dafc 100%);
    border-color: rgba(73, 126, 198, 0.28);
    color: #2455a0;
}

.match-state-paused {
    background: linear-gradient(180deg, #eee5ff 0%, #d7c5ff 100%);
    border-color: rgba(118, 94, 188, 0.28);
    color: #6440ad;
}

.match-state-ready {
    background: linear-gradient(180deg, #dcf6f0 0%, #b6e8db 100%);
    border-color: rgba(64, 153, 133, 0.28);
    color: #1f7463;
}

.match-state-draft {
    background: linear-gradient(180deg, #edf0f3 0%, #d8dde3 100%);
    border-color: rgba(104, 116, 128, 0.24);
    color: #57606b;
}

.match-state-cancelled {
    background: linear-gradient(180deg, #f6e7e8 0%, #eccfd3 100%);
    border-color: rgba(145, 90, 98, 0.26);
    color: #7f4852;
}

.match-state-default {
    background: linear-gradient(180deg, #edf0f3 0%, #d8dde3 100%);
    border-color: rgba(104, 116, 128, 0.24);
    color: #57606b;
}

@media (max-width: 576px) {
    .match-state-badge {
        width: 1.7rem;
        height: 1.7rem;
        flex-basis: 1.7rem;
        font-size: 0.74rem;
    }
}

/* ══════════════════════════════════════════════════
   7. RATING COLOR SCALE
   ══════════════════════════════════════════════════ */
.rating-low {
    color: #DC3545;
    font-weight: 700;
}

.rating-mid {
    color: #FFA630;
    font-weight: 700;
}

.rating-good {
    color: #95D5B2;
    font-weight: 700;
}

.rating-excellent {
    color: #198754;
    font-weight: 700;
}

/* Badge variants for rating */
.badge.rating-low {
    background: #DC3545 !important;
    color: #fff !important;
}

.badge.rating-mid {
    background: #FFA630 !important;
    color: #fff !important;
}

.badge.rating-good {
    background: #95D5B2 !important;
    color: #1B4332 !important;
}

.badge.rating-excellent {
    background: #198754 !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════════════
   8. ADMIN PANEL STYLE
   ══════════════════════════════════════════════════ */
.admin-header {
    background: var(--fl-primary);
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: var(--fl-radius) var(--fl-radius) 0 0;
}

.admin-header h1,
.admin-header h2,
.admin-header h3 {
    color: #fff;
    margin: 0;
}

.stat-card {
    background: var(--fl-bg-surface);
    border: none;
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-shadow-sm);
    border-left: 4px solid var(--fl-secondary);
    padding: 1rem 1.25rem;
    transition: box-shadow 0.2s;
}

.stat-card:hover {
    box-shadow: var(--fl-shadow);
}

.stat-card.stat-success {
    border-left-color: var(--fl-success);
}

.stat-card.stat-warning {
    border-left-color: var(--fl-warning);
}

.stat-card.stat-danger {
    border-left-color: var(--fl-danger);
}

.stat-card.stat-accent {
    border-left-color: var(--fl-accent);
}

.stat-card .stat-icon {
    font-size: 1.5rem;
    color: var(--fl-text-muted);
    opacity: 0.7;
}

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--fl-text);
}

.stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--fl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════
   FORM FOCUS STYLING
   ══════════════════════════════════════════════════ */
.form-control:focus,
.form-select:focus {
    border-color: var(--fl-accent-light);
    box-shadow: 0 0 0 0.25rem rgba(45, 106, 79, 0.2);
}

/* ══════════════════════════════════════════════════
   ALERT OVERRIDES
   ══════════════════════════════════════════════════ */
.alert-success {
    --bs-alert-bg: #d1f0e0;
    --bs-alert-border-color: #a3d9be;
    --bs-alert-color: #0f5132;
}

.alert-danger {
    --bs-alert-bg: #f8d7da;
    --bs-alert-border-color: #f5c2c7;
    --bs-alert-color: #842029;
}

/* ══════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════ */
footer {
    background: var(--fl-primary);
    color: rgba(255, 255, 255, 0.7);
    border-top: none !important;
}

footer small {
    color: rgba(255, 255, 255, 0.7);
}

/* ══════════════════════════════════════════════════
   SCORE DISPLAY - green gradient
   ══════════════════════════════════════════════════ */
.score-display {
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #1B4332 0%, #2D6A4F 50%, #40916C 100%);
}

.score-display::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* ══════════════════════════════════════════════════
   MATCH CARD STATUS - updated colors
   ══════════════════════════════════════════════════ */
.match-card-live {
    border-color: var(--fl-accent) !important;
    border-top: 3px solid var(--fl-accent) !important;
}

.match-card-ready {
    border-top-color: var(--fl-secondary) !important;
}

.match-card-finished {
    border-top-color: var(--fl-text-muted) !important;
}

/* ══════════════════════════════════════════════════
   PITCH - keep green field unchanged
   ══════════════════════════════════════════════════ */
.pitch-position {
    border-color: var(--fl-primary);
}

.pitch-position.occupied {
    background: var(--fl-secondary);
    color: white;
    border-color: white;
}

/* ══════════════════════════════════════════════════
   PLAYER SELECTION - theme colors
   ══════════════════════════════════════════════════ */
.player-select-btn:hover,
.player-select-btn:active {
    background: var(--fl-secondary);
    color: white;
}

/* ══════════════════════════════════════════════════
   TIMELINE - updated home goal accent
   ══════════════════════════════════════════════════ */
.timeline-event.evt-goal_home {
    border-left-color: var(--fl-secondary);
}

.timeline-event .event-minute {
    color: var(--fl-primary);
}

/* ══════════════════════════════════════════════════
   PUBLIC MATCH - focus ring update
   ══════════════════════════════════════════════════ */
#public-match .card .form-control:focus {
    box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.25);
    border-color: var(--fl-secondary);
}