/*
 * Handball Data Hub - Generel Styling
 * Version: 1.0
 * Forfatter: B&R Media
 * Sidst opdateret: 02-12-2025
 *
 * Indhold:
 * 1. Globale Indstillinger & CSS Variabler
 * 2. Komponent: Kampliste
 * 3. Komponent: Næste Kamp Header
 * 4. Komponent: Stillingstabel
 * 5. 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-champions-league: #0056b3;
    --color-ehf-cup: #ff7b00;
    --color-ehf-cup-qual: #ffac65;
    --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;
}

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

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

.hdh-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;
}

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

.hdh-match-date {
    flex: 0 0 20%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    border-right: none;
    padding-right: 0;
    margin-right: 20px;
}

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

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

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

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

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

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

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

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

.hdh-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 */
h4.hdh-round-heading {
    font-size: 26px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 30px 0 10px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-border);
    text-align: center;
}

h4.hdh-round-heading:first-of-type {
    margin-top: 0;
}

/* ============================================= */
/* == 3. KOMPONENT: NÆSTE KAMP HEADER         == */
/* ============================================= */
.hdh-match-header {
    text-align: center;
    background: var(--color-white);
    border-radius: 16px;
}
.hdh-match-header .hdh-top-line {
    font-size: 18px;
    color: var(--color-text-subtle);
    margin-bottom: 15px;
    font-weight: var(--font-weight-bold);
}
.hdh-match-header .hdh-teams {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: #333;
}
.hdh-match-header .hdh-teams > span {
    display: flex;
    align-items: center;
    gap: 15px;
}
.hdh-match-header .hdh-teams img {
    width: 80px !important;
    height: 80px !important;
}
.hdh-match-header .hdh-vs {
    font-size: 20px;
    color: #a0aec0;
    font-weight: 500;
}
/* Skjul mobil-versionen som standard (på desktop) */
.hdh-next-match-mobile-view {
    display: none;
}

/* ============================================= */
/* == 4. KOMPONENT: STILLINGSTABEL            == */
/* ============================================= */

.hdh-standings-container {
    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;
}

/* Gruppe-overskrifter (til turneringer med puljer) */
h4.hdh-group-heading {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 30px 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-border);
    text-align: center;
}

.hdh-standings-grouped .hdh-standings-container:first-child h4.hdh-group-heading {
    margin-top: 0;
}

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

.hdh-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;
}

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

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

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

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

.hdh-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);
}

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

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

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

/* Hold-celle styling */
.hdh-team-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: var(--font-weight-normal);
}

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

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

/* Positions-farver - tilpasset håndbold */
tr.hdh-pos-promotion-direct     { border-left: 5px solid var(--color-promotion); }
tr.hdh-pos-group-stage-cl       { border-left: 5px solid var(--color-champions-league); }
tr.hdh-pos-promotion-playoff    { border-left: 5px solid var(--color-promotion-playoff); }
tr.hdh-pos-group-stage-el       { border-left: 5px solid var(--color-ehf-cup); }
tr.hdh-pos-qualification-el     { border-left: 5px solid var(--color-ehf-cup-qual); }
tr.hdh-pos-relegation-direct    { border-left: 5px solid var(--color-relegation); }
tr.hdh-pos-relegation-playoff   { border-left: 5px solid var(--color-relegation-playoff); }

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

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

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

/* Tegnforklaring (Legend) */
.hdh-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;
}

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

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

/* Tegnforklaring farver */
.hdh-legend-color.hdh-pos-promotion-direct     { background-color: var(--color-promotion); }
.hdh-legend-color.hdh-pos-group-stage-cl       { background-color: var(--color-champions-league); }
.hdh-legend-color.hdh-pos-promotion-playoff    { background-color: var(--color-promotion-playoff); }
.hdh-legend-color.hdh-pos-group-stage-el       { background-color: var(--color-ehf-cup); }
.hdh-legend-color.hdh-pos-qualification-el     { background-color: var(--color-ehf-cup-qual); }
.hdh-legend-color.hdh-pos-relegation-direct    { background-color: var(--color-relegation); }
.hdh-legend-color.hdh-pos-relegation-playoff   { background-color: var(--color-relegation-playoff); }

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


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

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

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

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

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

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

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

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

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

    /* Fjern ramme, skygge og al indre padding fra den næste kamp på mobil */
    .hdh-next-match-mobile-view .hdh-match-row {
        background-color: transparent;
        box-shadow: none;
        padding: 0;
    }

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

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

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

    .hdh-standings-container td:nth-last-child(2),
    .hdh-standings-container td:last-child {
        white-space: nowrap;
    }

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

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

/* ============================================= */
/* == 6. WRAPPER CLASSES                       == */
/* ============================================= */

.hdh-schedule-wrapper,
.hdh-upcoming-wrapper,
.hdh-results-wrapper,
.hdh-standings-wrapper {
    margin: 1em 0;
}

/* Standings table via shortcode */
.hdh-standings-wrapper {
    overflow-x: auto;
}

.hdh-standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px var(--color-shadow);
}

.hdh-standings-table th,
.hdh-standings-table td {
    padding: 10px 12px;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

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

.hdh-standings-table .col-team {
    text-align: left;
}

.hdh-standings-table .col-team .team-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 8px;
}

.hdh-standings-table .col-points {
    font-weight: var(--font-weight-bold);
}

/* Status-baserede række-farver */
.hdh-standings-table tr.status-promotion-direct { border-left: 4px solid var(--color-promotion); }
.hdh-standings-table tr.status-promotion-playoff { border-left: 4px solid var(--color-promotion-playoff); }
.hdh-standings-table tr.status-group-stage-cl { border-left: 4px solid var(--color-champions-league); }
.hdh-standings-table tr.status-group-stage-el { border-left: 4px solid var(--color-ehf-cup); }
.hdh-standings-table tr.status-relegation-playoff { border-left: 4px solid var(--color-relegation-playoff); }
.hdh-standings-table tr.status-relegation-direct { border-left: 4px solid var(--color-relegation); }

.hdh-standings-table tr.highlighted-team {
    background: rgba(255, 215, 0, 0.15) !important;
}

.hdh-standings-table tr:hover {
    background-color: var(--color-background-hover);
}

/* Form indicators in table */
.hdh-standings-table .col-form {
    display: flex;
    gap: 3px;
    justify-content: center;
}

.hdh-standings-table .form-indicator {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    color: white;
}

.hdh-standings-table .form-indicator.form-win { background: var(--color-form-win); }
.hdh-standings-table .form-indicator.form-draw { background: var(--color-form-draw); color: #333; }
.hdh-standings-table .form-indicator.form-loss { background: var(--color-form-loss); }