/* Standard Lys Modus */
body {
    background-color: #f0f2f5;
    transition: background-color 0.3s;
    font-family: sans-serif;
}

.playerInput {
    text-align: center; /* Sentrerer teksten horisontalt */
    /* Valgfritt: gjør den enda mer brukervennlig */
    width: 100%;
    font-size: 3rem; /* Stor og tydelig tekst */
    font-weight: bold;
    border: none;
    background: transparent;
    outline: none; /* Fjerner den blå rammen når man trykker */
}

/* Store knapper for tablet-fingre */
.btn-score {
    width: 100px;
    height: 100px;
    font-size: 3rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Litt ekstra luft for tablet */
.card-body {
    min-height: 150px;
}

body .form-control {
    font-size: 2.5rem;
}

.card {
    transition: background-color 0.3s, color 0.3s;
}


/* Mørk Modus overstyringer */
body.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

    body.dark-mode .card {
        background-color: #1e1e1e !important;
        color: #ffffff;
        border: 1px solid #333;
    }

    body.dark-mode .form-control {
        background-color: #2c2c2c;
        color: white;
        border: none;
        font-size: 2.5rem;
    }

    body.dark-mode h1, body.dark-mode h2 {
        color: #ffffff;
    }

/* Beholder som fyller hele skjermhøyden minus headeren */
.h-100-container {
    display: flex;
    flex-wrap: wrap;
    height: 75vh; /* Bruker 75% av skjermhøyden */
    align-content: stretch;
}

.col {
    display: flex;
}

.card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0 !important;
    padding: 0.5rem !important;
    min-height: 0; /* Tillater kortet å krympe */
}

/* Dynamisk størrelse på tallene */
.display-1 {
    font-size: calc(2rem + 3vh) !important;
    margin: 0.2rem 0 !important;
}

.h4 {
    font-size: calc(1rem + 1vh);
    margin-bottom: 0;
}

.hf4 {
    color: orangered;
    font-size: calc(1rem + 1vh);
    margin-bottom: 0;
}

/* Generell stil for poengknappene */
.btn-score, .btn-danger, .btn-success {
    min-width: 80px; /* Sikrer bredde */
    min-height: 80px; /* Sikrer høyde */
    font-size: 2.5rem; /* Gjør + og - tegnet gigantisk */
    font-weight: bold;
    border-radius: 15px; /* Myke hjørner */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s active; /* Gir en liten "klikk-effekt" */
    touch-action: manipulation; /* Hindrer dobbelttapping-zoom på mobil */
}

    /* Effekt når man trykker på knappen (valgfritt) */
    .btn-score:active {
        transform: scale(0.95);
    }

/* Spesifikk justering for iPhone/små skjermer */
@media (max-width: 576px) {
    .btn-score, .btn-danger, .btn-success {
        min-width: 60px;
        min-height: 60px;
        font-size: 1.8rem;
    }
}
/* Når dokumentet er i fullskjerm, skjul standard ASP.NET header og footer */
:fullscreen header, :fullscreen footer, :fullscreen .navbar {
    display: none !important;
}

/* For eldre nettbrett (Safari/Chrome) */
:-webkit-full-screen header, :-webkit-full-screen .navbar {
    display: none !important;
}

/* Sørg for at tavlen alltid kan bruke 100% av skjermbredden */
.container-fluid {
    max-width: 100% !important;
}

/* Oppdatert til å treffe container-fluid i fullskjerm */
:fullscreen .container-fluid {
    max-width: 100% !important;
    margin: 0;
    padding: 20px;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.player-container {
    gap: 10px;
    padding: 10px;
}

.player-column {
    flex: 1 1 22%; /* Voks, krymp, og start på ca 22% bredde */
    min-width: 200px; /* Hindrer at de blir knøttsmå */
    max-width: 48%; /* Hindrer at 1 spiller tar 100% bredde */
    transition: all 0.3s ease;
}

    /* Spesialhåndtering for når det er kun 1 spiller */
    /* Hvis det bare er ett element, vil justify-content-center sentrere det */
    .player-column:only-child {
        max-width: 50%;
        margin: 0 auto;
    }

/* På mobil/iPhone (større enn 450px høyde i portrait) */
@media (max-width: 576px) {
    .player-column {
        flex: 1 1 45%; /* 2 i bredden på små skjermer */
        max-width: 100%;
    }
}

/* På iPhone Landscape (veldig lav skjerm) */
@media (max-height: 450px) and (orientation: landscape) {
    .player-column {
        flex: 1 1 23%; /* Tvinger 4 i bredden i landscape */
        max-width: 24%;
    }
    /* Gjør innholdet mer kompakt her som før */
    .display-4 {
        font-size: 1.5rem !important;
    }
}
.made-by-sidebar {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(180deg); /* Sentrerer vertikalt og snur teksten */
    writing-mode: vertical-lr; /* Gjør teksten vertikal */
    text-align: center;
    font-size: 0.8rem;
    color: #6c757d; /* Diskret gråfarge */
    text-transform: uppercase;
    letter-spacing: 2px;
    z-index: 1000;
    pointer-events: none; /* Gjør at man kan trykke "gjennom" teksten hvis nødvendig */
    padding-left: 5px;
    opacity: 0.6;
}

/* Skjul merkingen i mørk modus eller endre farge */
body.dark-mode .made-by-sidebar {
    color: #adb5bd;
}

/* Skjul den på veldig små skjermer (iPhone portrait) for å unngå rot */
@media (max-width: 576px) {
    .made-by-sidebar {
        display: none;
    }
}