/* app/static/css/style.css */

/* --- Font Definition --- */
body {
    font-family: 'Poppins', sans-serif;
}

/* --- Override Bootstrap Variables for a light, fresh theme --- */
:root {
    /* Primary Accent Color (Orange) */
    --bs-primary: #f39c12; /* Een iets vriendelijker oranje */
    --bs-primary-rgb: 243, 156, 18;
    --bs-primary-text-emphasis: #613e07;
    --bs-primary-bg-subtle: #fef5e8;
    --bs-primary-border-subtle: #fce3c0;

    /* Body colors for the light theme */
    --bs-body-color: #495057; /* Darker grey for text, better readability */
    --bs-body-bg: #f8f9fa;   /* A very light grey for the background */

    /* Border color for cards, inputs, etc. */
    --bs-border-color: #dee2e6;
    --bs-border-radius: 0.5rem; /* Iets rondere hoeken */
}

/* --- Component Styling --- */

/* Main layout to ensure footer stays at bottom on short pages */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1;
}

/* Card Styling for a modern, lifted look */
.card {
    border: none; /* We use shadow instead of borders */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease-in-out;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--bs-border-color);
}

/* Button Styling */
.btn {
    --bs-btn-border-radius: 0.375rem;
    font-weight: 500;
}
.btn-primary {
    /* Text on orange button should be dark for contrast */
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-color: #ffffff;
}
.btn-outline-primary {
    --bs-btn-hover-color: #ffffff; /* Make text white on hover for outline buttons */
}


/* Form Styling */
.form-control {
    background-color: #ffffff;
}

.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Custom Alert styling for a softer look */
.alert {
    --bs-alert-bg: var(--bs-primary-bg-subtle);
    --bs-alert-color: var(--bs-primary-text-emphasis);
    --bs-alert-border-color: var(--bs-primary-border-subtle);
}
.alert-success {
    --bs-alert-bg: var(--bs-success-bg-subtle);
    --bs-alert-color: var(--bs-success-text-emphasis);
    --bs-alert-border-color: var(--bs-success-border-subtle);
}
.alert-danger {
    --bs-alert-bg: var(--bs-danger-bg-subtle);
    --bs-alert-color: var(--bs-danger-text-emphasis);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
}
.alert-info {
    --bs-alert-bg: var(--bs-info-bg-subtle);
    --bs-alert-color: var(--bs-info-text-emphasis);
    --bs-alert-border-color: var(--bs-info-border-subtle);
}

/* --- HTMX Loading Indicator Styling --- */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* --- NIEUWE STYLES VOOR LANDINGSPAGINA'S --- */

/* Hero Sectie */
.landing-hero {
    padding: 6rem 1rem;
    background-size: cover;
    background-position: center center;
    margin-top: -1rem; /* Overlapt de container margin voor een full-width gevoel */
    margin-left: calc(-50vw + 50%); /* Zorgt voor full-width buiten de container */
    margin-right: calc(-50vw + 50%);
}
.hero-content {
    max-width: 800px;
    margin: 0 auto;
}
.hero-content .lead {
    color: rgba(255, 255, 255, 0.9);
}

/* Features Sectie */
.feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: .75rem;
}
.feature-icon i {
    font-size: 2rem;
}
.feature-card h3 {
    margin-top: 1rem;
    font-weight: 600;
}

/* Hoe het werkt Sectie */
.how-it-works-section {
    border-top: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
}
.step-icon {
    font-size: 3rem;
    color: var(--bs-primary);
    margin-bottom: 1rem;
}

/* Sport-specifieke Kaarten */
.card-cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: transform .3s ease-in-out;
}

.text-shadow-1 { text-shadow: 1px 1px 2px rgba(0, 0, 0, .5); }


/* --- NIEUWE STYLES VOOR VOORTGANGSBALK (met aanpassing) --- */
.stepper-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-bottom: 2rem;
}
.stepper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
    max-width: 800px; /* Max breedte voor grote schermen */
}
.stepper::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 10%; /* Lijn niet helemaal tot de rand */
    right: 10%;
    height: 2px;
    background-color: var(--bs-border-color);
    z-index: 0;
}
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
    width: 120px;
}
.step__icon {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, border-color 0.3s;
    margin-bottom: 0.5rem;
}
.step__content {
    color: var(--bs-gray-600);
}
.step__title {
    font-weight: 500;
    margin: 0;
    font-size: 1rem;
}
.step__subtitle {
    font-size: 0.85rem;
    color: var(--bs-gray-500);
    margin: 0;
}

/* Active state */
.step.step--active .step__icon {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
}
.step.step--active .step__title {
    color: var(--bs-body-color);
    font-weight: 600;
}
.step.step--active .step__subtitle {
    color: var(--bs-gray-600);
}

/* Completed state */
.step.step--completed .step__icon {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
    color: white;
}
/* Bootstrap-icon checkmark */
.step.step--completed .step__icon::before {
    font-family: 'bootstrap-icons';
    content: '\F26E'; 
    font-size: 1.25rem;
    line-height: 1;
}
.step.step--completed .step__title {
    color: var(--bs-body-color);
}

.card-add-new {
    display: block;
    height: 100%;
    color: var(--bs-body-color);
    text-decoration: none;
    background-color: var(--bs-body-bg);
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--bs-card-border-radius, var(--bs-border-radius));
    transition: all 0.2s ease-in-out;
}

.card-add-new:hover {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.tournament-card-archived {
    opacity: 0.65;
    transition: opacity 0.3s ease-in-out;
}
.tournament-card-archived:hover {
    opacity: 1;
}

/* --- START NIEUWE CSS VOOR DE CHECKLIST --- */
.checklist li {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}
.checklist li i {
    margin-right: 0.75rem;
    font-size: 1.2rem;
}
/* --- EINDE NIEUWE CSS --- */

/* +++ START NIEUWE CSS VOOR SCORE-INVOER +++ */
/* Verbeterde score-invoervelden in de wedstrijdlijst */
.score-input {
    /* Verwijder de pijltjes (spinners) in de meeste browsers */
    -moz-appearance: textfield;
    -webkit-appearance: none;
    margin: 0;
}

.score-input::-webkit-outer-spin-button,
.score-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Zorg voor voldoende breedte en centrering, zelfs met .form-control-sm */
.score-input.form-control-sm {
    min-width: 60px; /* Genoeg ruimte voor 2-3 cijfers */
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    text-align: center; /* Zorgt dat de tekst altijd gecentreerd is */
}
/* +++ EINDE NIEUWE CSS VOOR SCORE-INVOER +++ */

/* Voeg deze nieuwe code toe aan het einde van je style.css bestand */

/* +++ START NIEUWE CSS VOOR POULE PUNTEN BADGE +++ */
.poule-points-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    font-size: 0.9em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.75rem; /* Dit zorgt voor de mooie ronde hoeken */
    color: #fff; /* Witte tekst voor goed contrast */
    background-color: var(--bs-primary); /* Gebruikt je primaire thema-kleur */
    min-width: 28px; /* Zorgt dat de badge ook bij 1 punt mooi rond is */
}
/* +++ EINDE NIEUWE CSS VOOR POULE PUNTEN BADGE +++ */


/* --- Font Definition --- */
body {
    font-family: 'Poppins', sans-serif;
}

/* --- Override Bootstrap Variables for a light, fresh theme --- */
:root {
    /* Primary Accent Color (Orange) */
    --bs-primary: #f39c12; /* Een iets vriendelijker oranje */
    --bs-primary-rgb: 243, 156, 18;
    --bs-primary-text-emphasis: #613e07;
    --bs-primary-bg-subtle: #fef5e8;
    --bs-primary-border-subtle: #fce3c0;

    /* Body colors for the light theme */
    --bs-body-color: #495057; /* Darker grey for text, better readability */
    --bs-body-bg: #f8f9fa;   /* A very light grey for the background */

    /* Border color for cards, inputs, etc. */
    --bs-border-color: #dee2e6;
    --bs-border-radius: 0.5rem; /* Iets rondere hoeken */
}

/* --- Component Styling --- */

/* Main layout to ensure footer stays at bottom on short pages */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1;
}

/* Card Styling for a modern, lifted look */
.card {
    border: none; /* We use shadow instead of borders */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease-in-out;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--bs-border-color);
}

/* Button Styling */
.btn {
    --bs-btn-border-radius: 0.375rem;
    font-weight: 500;
}
.btn-primary {
    /* Text on orange button should be dark for contrast */
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-color: #ffffff;
}
.btn-outline-primary {
    --bs-btn-hover-color: #ffffff; /* Make text white on hover for outline buttons */
}


/* Form Styling */
.form-control {
    background-color: #ffffff;
}

.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Custom Alert styling for a softer look */
.alert {
    --bs-alert-bg: var(--bs-primary-bg-subtle);
    --bs-alert-color: var(--bs-primary-text-emphasis);
    --bs-alert-border-color: var(--bs-primary-border-subtle);
}
.alert-success {
    --bs-alert-bg: var(--bs-success-bg-subtle);
    --bs-alert-color: var(--bs-success-text-emphasis);
    --bs-alert-border-color: var(--bs-success-border-subtle);
}
.alert-danger {
    --bs-alert-bg: var(--bs-danger-bg-subtle);
    --bs-alert-color: var(--bs-danger-text-emphasis);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
}
.alert-info {
    --bs-alert-bg: var(--bs-info-bg-subtle);
    --bs-alert-color: var(--bs-info-text-emphasis);
    --bs-alert-border-color: var(--bs-info-border-subtle);
}

/* --- HTMX Loading Indicator Styling --- */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* --- NIEUWE STYLES VOOR LANDINGSPAGINA'S --- */

/* Hero Sectie */
.landing-hero {
    padding: 6rem 1rem;
    background-size: cover;
    background-position: center center;
    margin-top: -1rem; /* Overlapt de container margin voor een full-width gevoel */
    margin-left: calc(-50vw + 50%); /* Zorgt voor full-width buiten de container */
    margin-right: calc(-50vw + 50%);
}
.hero-content {
    max-width: 800px;
    margin: 0 auto;
}
.hero-content .lead {
    color: rgba(255, 255, 255, 0.9);
}

/* Features Sectie */
.feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: .75rem;
}
.feature-icon i {
    font-size: 2rem;
}
.feature-card h3 {
    margin-top: 1rem;
    font-weight: 600;
}

/* Hoe het werkt Sectie */
.how-it-works-section {
    border-top: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
}
.step-icon {
    font-size: 3rem;
    color: var(--bs-primary);
    margin-bottom: 1rem;
}

/* Sport-specifieke Kaarten */
.card-cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: transform .3s ease-in-out;
}

.text-shadow-1 { text-shadow: 1px 1px 2px rgba(0, 0, 0, .5); }


/* --- OUDE STIJLEN VOOR VOORTGANGSBALK (NU VERVANGEN) --- */
/* We laten deze hier staan voor het geval ze ergens anders worden gebruikt, 
   maar de nieuwe stijlen hieronder zullen ze overschrijven binnen de create-flow. */

.card-add-new {
    display: block;
    height: 100%;
    color: var(--bs-body-color);
    text-decoration: none;
    background-color: var(--bs-body-bg);
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--bs-card-border-radius, var(--bs-border-radius));
    transition: all 0.2s ease-in-out;
}

.card-add-new:hover {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.tournament-card-archived {
    opacity: 0.65;
    transition: opacity 0.3s ease-in-out;
}
.tournament-card-archived:hover {
    opacity: 1;
}

/* --- START NIEUWE CSS VOOR DE CHECKLIST --- */
.checklist li {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}
.checklist li i {
    margin-right: 0.75rem;
    font-size: 1.2rem;
}
/* --- EINDE NIEUWE CSS --- */

/* +++ START NIEUWE CSS VOOR SCORE-INVOER +++ */
/* Verbeterde score-invoervelden in de wedstrijdlijst */
.score-input {
    /* Verwijder de pijltjes (spinners) in de meeste browsers */
    -moz-appearance: textfield;
    -webkit-appearance: none;
    margin: 0;
}

.score-input::-webkit-outer-spin-button,
.score-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Zorg voor voldoende breedte en centrering, zelfs met .form-control-sm */
.score-input.form-control-sm {
    min-width: 60px; /* Genoeg ruimte voor 2-3 cijfers */
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    text-align: center; /* Zorgt dat de tekst altijd gecentreerd is */
}
/* +++ EINDE NIEUWE CSS VOOR SCORE-INVOER +++ */

/* Voeg deze nieuwe code toe aan het einde van je style.css bestand */

/* +++ START NIEUWE CSS VOOR POULE PUNTEN BADGE +++ */
.poule-points-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    font-size: 0.9em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.75rem; /* Dit zorgt voor de mooie ronde hoeken */
    color: #fff; /* Witte tekst voor goed contrast */
    background-color: var(--bs-primary); /* Gebruikt je primaire thema-kleur */
    min-width: 28px; /* Zorgt dat de badge ook bij 1 punt mooi rond is */
}
/* +++ EINDE NIEUWE CSS VOOR POULE PUNTEN BADGE +++ */


/* --- START: Compact Tournament Creation Flow Styles --- */
.create-flow-header {
    border-radius: var(--bs-border-radius);
    padding: 1rem 1rem;
}

/* Aangepaste, compactere stappenbalk */
.stepper-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 1.5rem; /* Ruimte tussen titel en stappenbalk */
}
.stepper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
    max-width: 600px;
}
.stepper::before {
    content: '';
    position: absolute;
    top: 15px; /* Lijn in het midden van het kleinere icoon */
    left: 10%;
    right: 10%;
    height: 2px;
    background-color: var(--bs-border-color);
    z-index: 0;
}
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
    width: 120px;
}
.step__icon {
    height: 30px; /* Kleiner icoon */
    width: 30px;  /* Kleiner icoon */
    border-radius: 50%;
    background-color: #ffffff; /* Witte achtergrond voor contrast */
    border: 2px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, border-color 0.3s;
    margin-bottom: 0.5rem;
}
.step__content {
    color: var(--bs-gray-600);
}
.step__title {
    font-weight: 500;
    margin: 0;
    font-size: 0.9rem; /* Kleinere titel */
}
.step__subtitle {
    font-size: 0.75rem; /* Kleinere ondertitel */
    color: var(--bs-gray-500);
    margin: 0;
}

/* Active state */
.step.step--active .step__icon {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
}
.step.step--active .step__title {
    color: var(--bs-body-color);
    font-weight: 600;
}
.step.step--active .step__subtitle {
    color: var(--bs-gray-600);
}

/* Completed state */
.step.step--completed .step__icon {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
    color: white;
}
.step.step--completed .step__icon::before {
    font-family: 'bootstrap-icons';
    content: '\F26E'; 
    font-size: 1rem; /* Iets kleiner checkmark */
    line-height: 1;
}
.step.step--completed .step__title {
    color: var(--bs-body-color);
}