/*
 * Fodbold Data Hub - Generel Styling
 * Version: 2.0
 * Forfatter: Din Navn
 * Sidst opdateret: 27-08-2025
 *
 * Indhold:
 * 1. Globale Indstillinger & CSS Variabler
 * 2. Komponent: Kampliste
 * 3. Komponent: Næste Kamp Header
 * 4. Komponent: Head-to-Head (H2H)
 * 5. Komponent: Stillingstabel
 * 6. Responsivt Design (Media Queries)
 */

/* ============================================= */
/* == 1. GLOBALE INDSTILLINGER & CSS VARIABLER  == */
/* ============================================= */

:root {
    /* Farver */
    --color-white: #ffffff;
    --color-text-primary: #2c3e50;
    --color-text-secondary: #7f8c8d;
    --color-text-subtle: #95a5a6;
    --color-border: #ecf0f1;
    --color-background-light: #f9fafb;
    --color-background-hover: #eef0f3;
    --color-shadow: rgba(0,0,0,0.08);
    --color-shadow-hover: rgba(0,0,0,0.12);

    /* Farver til stillingstabel */
    --color-promotion: #0d5a1e;
    --color-promotion-playoff: #33a04a;
    --color-europa-league: #ff7b00;
    --color-europa-league-qual: #ffac65;
    --color-conference-league: #17a2b8;
    --color-conference-league-qual: #6cc7d5;
    --color-relegation: #dc3545;
    --color-relegation-playoff: #e87c87;

    /* Farver til Form-indikatorer */
    --color-form-win: #28a745;
    --color-form-draw: #ffc107;
    --color-form-loss: #dc3545;

    /* Typografi */
    --font-size-small: 12px;
    --font-size-normal: 14px;
    --font-size-large: 16px;
    --font-weight-normal: 600;
    --font-weight-bold: 700;

    /* Andre */
    --border-radius: 8px;
}

/* ======================================================= */
/* == NYT: KOMPONENT: SPILLER-STATISTIK LISTE             == */
/* == (Bruges til Topscorer- og Topassist-lister)         == */
/* ======================================================= */
.fdh-player-stats-list {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white); /* NYT: Giver den hvide baggrund */
    border-radius: var(--border-radius);   /* NYT: Giver runde hjørner */
    padding: 12px 24px;                   /* NYT: Giver luft/whitespace indeni boksen */
    box-shadow: var(--color-shadow);      /* NYT: Tilføjer en diskret skygge */
}

.fdh-player-stats-list .scorer-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
    transition: transform 0.2s ease-in-out; 
}

.fdh-player-stats-list .scorer-item:last-child {
    border-bottom: none;
}

.fdh-player-stats-list .scorer-item:hover {
    transform: scale(1.01); 
}

.fdh-player-stats-list .scorer-item .rank {
    font-size: 1.15em; /* Større skriftstørrelse, relativ til parent */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    min-width: 45px; /* Øget bredde for centrering */
    text-align: center; /* CENTRERET */
}

.fdh-player-stats-list .scorer-item .player-info {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.fdh-player-stats-list .scorer-item .player-info .player-photo {
    width: 50px; /* STØRRE BILLEDE */
    height: 50px; /* STØRRE BILLEDE */
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px; /* Justeret margin */
}

.fdh-player-stats-list .scorer-item .player-info .player-name {
    font-weight: var(--font-weight-normal);
    font-size: 1.1em; /* Større skriftstørrelse */
    color: var(--color-text-primary);
}

.fdh-player-stats-list .scorer-item .club-info {
    display: flex;
    align-items: center;
    width: 200px; /* Justeret bredde for at give mere plads */
    justify-content: flex-start;
}

.fdh-player-stats-list .scorer-item .club-info .club-logo {
    width: 32px; /* STØRRE LOGO */
    height: 32px; /* STØRRE LOGO */
    object-fit: contain;
    margin-right: 10px;
}

.fdh-player-stats-list .scorer-item .club-info .club-name {
    font-size: 1.0em; /* Større skriftstørrelse */
    color: var(--color-text-secondary);
}

.fdh-player-stats-list .scorer-item .stats {
    display: flex;
    justify-content: center; /* CENTRERET INDHOLD I STATS-BLOKKEN */
    min-width: 90px; /* Øget bredde for bedre centrering */
}

.fdh-player-stats-list .scorer-item .stat-item {
    text-align: center; /* CENTRERET */
}

.fdh-player-stats-list .scorer-item .stat-item .stat-value {
    font-size: 1.5em; /* MÆRKBART STØRRE VÆRDI */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.fdh-player-stats-list .scorer-item .stat-item .stat-label {
    display: block;
    font-size: 0.85em; /* Mindre label end værdi, men stadig læsbar */
    color: var(--color-text-secondary);
    margin-top: -2px;
}

/* RESPONSIVT DESIGN FOR SPILLER-LISTER */
@media (max-width: 768px) {
    .fdh-player-stats-list .scorer-item {
        padding: 8px 5px; /* Justeret padding for mobil */
    }
    .fdh-player-stats-list .scorer-item .club-info .club-name {
        display: none; /* Skjul klubnavn, behold logo */
    }
    .fdh-player-stats-list .scorer-item .club-info {
        width: auto;
    }
    .fdh-player-stats-list .scorer-item .player-info .player-photo {
        width: 40px; /* Lidt mindre på mobil */
        height: 40px;
        margin-right: 10px;
    }
    .fdh-player-stats-list .scorer-item .player-info .player-name {
        font-size: 1.05em;
    }
    .fdh-player-stats-list .scorer-item .stat-item .stat-value {
        font-size: 1.3em;
    }
    .fdh-player-stats-list .scorer-item .rank {
        min-width: 30px;
        font-size: 1.0em;
    }
}

/* ============================================= */
/* == 2. KOMPONENT: KAMPLISTE                 == */
/* ============================================= */

.fdh-match-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 10px 0 20px 0;
}

.fdh-match-row {
    display: flex;
    align-items: center;
    background-color: var(--color-white);
    padding: 8px 15px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px var(--color-shadow);
    transition: box-shadow 0.2s ease;
}

.fdh-match-row:hover {
    box-shadow: 0 4px 12px var(--color-shadow-hover);
}

.fdh-match-date {
    flex: 0 0 20%;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Ændret fra flex-end */
    text-align: left;
    border-right: none;
    padding-right: 0;
    margin-right: 20px;
}

.fdh-match-date span:first-child {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-normal);
    color: var(--color-text-primary);
}

.fdh-match-date span:last-child {
    font-size: var(--font-size-normal);
    color: var(--color-text-secondary);
}

.fdh-match-teams {
    flex: 1 1 55%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fdh-match-teams .team-home,
.fdh-match-teams .team-away {
    display: flex;
    align-items: center;
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-normal);
    flex-basis: 40%;
}

.fdh-match-teams .team-home {
    justify-content: flex-end;
}
.fdh-match-teams .team-home .team-name {
    text-align: right;
}

.fdh-match-teams .team-away {
    justify-content: flex-start;
}

/* Denne ultra-specifikke regel er nødvendig for at overskrive et temas generelle img-styling */
.fdh-match-list .fdh-match-row .fdh-match-teams img {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    margin: 0 8px !important;
}

.fdh-match-teams .match-score {
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    padding: 0 15px;
    text-align: center;
}

.fdh-match-competition {
    flex: 0 0 25%;
    text-align: right;
    font-size: var(--font-size-normal);
    color: var(--color-text-subtle);
    padding-left: 15px;
}

/* Runde-overskrift til grupperede kamplister (f.eks. hele liga-programmer) */
h4.fdh-round-heading {
    font-size: 26px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 10px 0;  /* Fjernet de 25px top-margin */
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
    text-align: center;
}

/* ============================================= */
/* == 3. KOMPONENT: NÆSTE KAMP HEADER         == */
/* ============================================= */

.fdh-match-header {
    text-align: center;
    background: var(--color-white);
    border-radius: 16px;
}

.fdh-match-header .fdh-top-line {
    font-size: 18px;
    color: var(--color-text-subtle);
	margin-bottom: 15px;
    font-weight: var(--font-weight-bold);
}

.fdh-match-header .fdh-teams {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: #333; /* Note: Denne farve var unik */
}

.fdh-match-header .fdh-teams > span {
    display: flex;
    align-items: center;
    gap: 15px;
}

.fdh-match-header .fdh-teams img {
    width: 80px !important;
    height: 80px !important;
}

.fdh-match-header .fdh-vs {
    font-size: 20px;
    color: #a0aec0; /* Note: Denne farve var unik */
    font-weight: 500;
}

/* Skjul mobil-versionen som standard (på desktop) */
.fdh-next-match-mobile-view {
    display: none;
}

/* ============================================= */
/* == 4. KOMPONENT: HEAD-TO-HEAD (H2H)        == */
/* ============================================= */

.fdh-h2h-latest-heading {
    margin-top: 20px;
}


/* ============================================= */
/* == 5. KOMPONENT: STILLINGSTABEL            == */
/* ============================================= */

.fdh-standings-container {
    max-width: 900px;
    margin: 20px auto;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    overflow: hidden;
}

/* Tabs */
.fdh-tabs {
    padding: 10px 20px 0 20px;
    border-bottom: 1px solid var(--color-background-hover);
    display: flex;
    gap: 10px;
}

.fdh-tab-button {
    padding: 15px 20px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    font-size: var(--font-size-large);
    color: #666;
    border-bottom: 3px solid transparent;
}

.fdh-tab-button.active {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
}

/* Tabel generelt */
.fdh-table-wrapper {
    overflow-x: auto;
}

.fdh-standings-container table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-large);
}

.fdh-standings-container th,
.fdh-standings-container td {
    padding: 12px 15px;
    text-align: center;
}

.fdh-standings-container th {
    background-color: var(--color-background-light);
    font-weight: var(--font-weight-normal);
    color: #555;
    text-transform: uppercase;
    font-size: var(--font-size-small);
}

.fdh-standings-container .fdh-team-header {
    text-align: left;
}

.fdh-standings-container tr:nth-child(even) {
    background-color: var(--color-background-light);
}

.fdh-standings-container tr:hover {
    background-color: var(--color-background-hover);
}

/* Hold-celle styling */
.fdh-team-cell { /* Bruges både i og udenfor .fdh-standings-container */
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: var(--font-weight-normal);
}

.fdh-team-logo {
    width: 24px;
    height: 24px;
}

/* Sidste kolonne (point) */
.fdh-standings-container td:last-child {
    font-weight: var(--font-weight-bold);
}

/* Positions-farver */
tr.fdh-pos-promotion-direct     { border-left: 5px solid var(--color-promotion); }
tr.fdh-pos-group-stage-cl        { border-left: 5px solid var(--color-promotion); }      /* Mørk grøn */
tr.fdh-pos-qualification-cl      { border-left: 5px solid var(--color-promotion-playoff); } /* Lysere grøn */
tr.fdh-pos-promotion-playoff     { border-left: 5px solid var(--color-promotion-playoff); }
tr.fdh-pos-group-stage-el        { border-left: 5px solid var(--color-europa-league); }
tr.fdh-pos-qualification-el      { border-left: 5px solid var(--color-europa-league-qual); }
tr.fdh-pos-group-stage-ecl       { border-left: 5px solid var(--color-conference-league); }
tr.fdh-pos-qualification-ecl     { border-left: 5px solid var(--color-conference-league-qual); }
tr.fdh-pos-relegation-direct     { border-left: 5px solid var(--color-relegation); }
tr.fdh-pos-relegation-playoff    { border-left: 5px solid var(--color-relegation-playoff); }

/* Form-indikatorer */
.fdh-form-indicators {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.fdh-form-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    cursor: help;
}

.fdh-form-W { background-color: var(--color-form-win); }
.fdh-form-D { background-color: var(--color-form-draw); }
.fdh-form-L { background-color: var(--color-form-loss); }

/* Tegnforklaring (Legend) */
.fdh-standings-legend {
    padding: 20px;
    background-color: var(--color-background-light);
    border-top: 1px solid var(--color-background-hover);
    display: flex;
    flex-wrap: wrap;
	gap: 6px 20px;
    font-size: 13px;
}

.fdh-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fdh-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

/* Tegnforklaring (Legend) */
.fdh-legend-color.fdh-pos-promotion-direct     { background-color: var(--color-promotion); }
.fdh-legend-color.fdh-pos-group-stage-cl       { background-color: var(--color-promotion); }      /* Mørk grøn */
.fdh-legend-color.fdh-pos-qualification-cl     { background-color: var(--color-promotion-playoff); } /* Lysere grøn */
.fdh-legend-color.fdh-pos-promotion-playoff    { background-color: var(--color-promotion-playoff); }
.fdh-legend-color.fdh-pos-group-stage-el       { background-color: var(--color-europa-league); }
.fdh-legend-color.fdh-pos-qualification-el     { background-color: var(--color-europa-league-qual); }
.fdh-legend-color.fdh-pos-group-stage-ecl      { background-color: var(--color-conference-league); }
.fdh-legend-color.fdh-pos-qualification-ecl    { background-color: var(--color-conference-league-qual); }
.fdh-legend-color.fdh-pos-relegation-direct    { background-color: var(--color-relegation); }
.fdh-legend-color.fdh-pos-relegation-playoff   { background-color: var(--color-relegation-playoff); }

/* Sidst opdateret */
.fdh-last-updated {
    padding: 15px 20px;
    font-size: var(--font-size-small);
    color: #888;
    text-align: right;
    border-top: 1px solid var(--color-background-hover);
}


/* ============================================= */
/* == 6. RESPONSIVT DESIGN (MAX-WIDTH: 768px) == */
/* ============================================= */
@media (max-width: 768px) {

    /* --- Generelle justeringer --- */
    .fdh-hide-mobile {
        display: none !important;
    }

    /* --- Komponent: Kampliste (Mobil) --- */
    .fdh-match-row {
        flex-direction: column;
        align-items: center;
        padding: 8px 10px;
        gap: 6px;
    }

    .fdh-match-date,
    .fdh-match-teams,
    .fdh-match-competition {
        margin: 0;
        padding: 0;
        border: none;
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .fdh-match-date        { order: 1; font-weight: bold; }
    .fdh-match-teams       { order: 2; }
    .fdh-match-competition { order: 3; font-size: var(--font-size-normal); color: var(--color-text-secondary); }

    .fdh-match-teams .match-score {
        padding: 0 8px;
    }

    /* Bindestreg KUN på mobil */
    .fdh-match-date span + span::before {
        content: "-";
        margin: 0 6px;
        color: var(--color-text-secondary);
    }

    /* --- Komponent: Næste Kamp Header (Mobil) --- */
    .fdh-next-match-desktop-view {
        display: none !important;
    }

    .fdh-next-match-mobile-view {
        display: block !important;
    }

    /* Fjern ramme, skygge og al indre padding fra den næste kamp på mobil */
    .fdh-next-match-mobile-view .fdh-match-row {
        background-color: transparent;
        box-shadow: none;
        padding: 0; /* Sætter top, bund, højre, venstre til 0 */
    }

    /* Fjern ydre margin fra den næste kamp på mobil */
    .fdh-next-match-mobile-view .fdh-match-list {
        margin: 0;
    }

    /* Gør skriften større (20px) KUN for "næste kamp" på mobil */
    .fdh-next-match-mobile-view .fdh-match-teams .team-home,
    .fdh-next-match-mobile-view .fdh-match-teams .team-away {
        font-size: 20px;
    }

    /* --- Komponent: Stillingstabel (Mobil) --- */
    .fdh-standings-container th,
    .fdh-standings-container td {
        padding: 10px 6px;
        font-size: 12px !important;
    }
    
    .fdh-standings-container .fdh-team-cell {
        text-align: left;
    }

    .fdh-form-indicators {
        gap: 3px;
    }

    .fdh-form-icon {
        width: 11px;
        height: 11px;
    }
}