/** Fixa buggen där badge i tabbar klipps */
.mud-tab-badge {
    &.mud-badge-root {
        position: static;
        // Override absolute positioning from _badge.scss margin-left: 8px;

        .mud-badge-wrapper {
            position: static;
            // Override absolute positioning width: auto;
            // Allow natural width pointer-events: auto;
        }

        .mud-badge {
            position: static;
            // Override absolute positioning display: inline-flex;
        }
    }
}

/**
 * Opt-in: sätt klassen "medFullLabelbredd" på en Mud-inputkontroll (eller på en behållare runt flera)
 * för att låta labeln påverka kontrollens bredd, så att hela labeltexten alltid syns även när
 * den är längre än fältets värde. Labeln är normalt absolutpositionerad i MudBlazor och
 * bidrar därför inte till bredden. Här staplas label och input i samma grid-cell, vilket gör
 * att labeln räknas in i den intrinsiska bredden utan att påverka höjd eller placering.
 */
.medFullLabelbredd .mud-input-control-input-container {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr);
}

    .medFullLabelbredd .mud-input-control-input-container > * {
        grid-row: 1;
        grid-column: 1;
    }

    .medFullLabelbredd .mud-input-control-input-container > label.mud-input-label {
        position: relative;
        inset: auto;
        height: 0;
        align-self: start;
        justify-self: start;
        pointer-events: none;
        white-space: nowrap;
        max-width: none;
        overflow: visible;
        z-index: 1; /* Labeln staplas i samma grid-cell som inputen och måste ligga överst */
    }

    .medFullLabelbredd .mud-input-control-input-container legend {
        max-width: none;
    }

.mud-button, .mud-fab {
    text-transform: unset; /** Vill inte ha uppercase på knappar, vilket är MudBlazor-default */
}


.mud-nav-link {
    padding-left: 4px; /** 16 default */
}

.mud-nav-group * .mud-navmenu .mud-nav-item .mud-nav-link {
    /** padding-left: 20px; /** 36 default */
    /**padding-inline-start: 36px;   */
}

/** Minska ikonstorleken i navigationsmenyn */
.mud-drawer-content svg{
    font-size: 1.3rem;
}

/** Minska mellanrum till ikonen i navigationsmenyn */
.mud-nav-link .mud-nav-link-text {
    margin-left: 5px;
    margin-inline-start: 5px;
}

.undertryckt {
    font-style: italic;
    color: #c0c0c0 !important;
}

.fetstil, .fetstil td {
    font-weight: 600 !important;
}

.kursiv {
    font-style: italic !important;
}

.utanPadding {
    padding: 0px !important;
}
/*
.mud-typography-h6 {
    font-size: 16px;
}
    */

.högerjustera {
    text-align: right !important;
}

.högerjusterad {
    text-align: right !important;
}

    /** MudDataGrid lägger headerinnehållet i en flex-container, därför räcker inte text-align */
    .högerjusterad .column-header {
        justify-content: flex-end;
    }

.centrera {
    text-align: center !important;
}


.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: rgb(105 105 105); /** Ljusar upp färgen på input labels */
}
    
.nowrap {
    white-space: nowrap;
}

.miniikon {
    font-size: 1.0rem !important;
}
.mellanikon {
    font-size: 1.3rem;
}

.mud-list .flervalsdefinition {
    display: flex !important;
}


.en-rad {
    min-width: fit-content;
}


/*------------------------------------TABELLER-------------------------------------------*/

/*
.inaktiv-tabellrad {
    opacity: 0.6;
}

.mud-table-head, thead {
    background-color: #e7e7e7;
}

/* Vertikal linje till höger om en kolumn, i samma färg som linjerna mellan raderna */
.mud-table-cell.kolumnavdelare {
    border-right: 1px solid var(--mud-palette-table-lines);
}

/* Överordnad rubrikrad som grupperar kolumner (t.ex. "Totalt" över M, A, P, Utv) */
.mud-table-cell.överrubrik {
    text-align: center;
    border-bottom: none;
}

.mud-table-cell.överrubrik-tom {
    border-bottom: none;
}

/* Cellinnehållet i överkant, för tabeller där rader kan bli höga av radbrytningar */
.celler-överkant .mud-table-body .mud-table-cell {
    vertical-align: top;
}

/* Sträck i serietabellen: tjockt under lagen som går upp eller ned direkt, tunt under lagen som går till kval */
.tabellsträck-tjockt > .mud-table-cell {
    border-bottom: 2px solid var(--mud-palette-text-secondary);
}

.tabellsträck-tunt > .mud-table-cell {
    border-bottom: 2px solid var(--mud-palette-text-disabled);
}

/* Sortering sker genom klick på kolumnrubriken, pilknappen döljs för att spara plats i sidled */
.mud-data-grid .mud-table-cell .column-header .sort-direction-icon {
    display: none;
}

.vald-tabellrad .mud-table-cell {
    font-weight: bolder;
}

.dölj-inaktiv-rad {
    display: none;
}
    */
.tabell-supertajt .mud-table-cell {
    padding-left: 4px !important;
    padding-right: 4px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/*
 * Matchhändelsernas tidslinje ligger till vänster med begränsad bredd, i stället för att centreras över hela sidan.
 * Bredden kan inte styras av innehållet (max-content), eftersom MudTimeline ger varje sida 50 % och då radbryter allt.
 */
.matchtidslinje {
    max-width: 860px;
}

/* En händelse som tillkommer under en livematch glider in, markeras och får markören att pulsera */
.ny-händelse {
    animation: ny-händelse-in .6s ease-out;
}

    .ny-händelse .mud-timeline-item-content > div {
        border-radius: 6px;
        animation: ny-händelse-markering 4s ease-out;
    }

    .ny-händelse .mud-timeline-item-dot-inner {
        animation: ny-händelse-puls 1.2s ease-out 2;
    }

@keyframes ny-händelse-in {
    from { opacity: 0; transform: translateY(-16px); }
}

@keyframes ny-händelse-markering {
    0%, 40% { background-color: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent); }
    100% { background-color: transparent; }
}

@keyframes ny-händelse-puls {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-primary) 55%, transparent); }
    100% { box-shadow: 0 0 0 12px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .ny-händelse, .ny-händelse .mud-timeline-item-dot-inner { animation: none; }
}

/* Markering överst på tidslinjen när matchen pågår */
.mt-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 2px 0 12px;
    border-radius: 12px;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .05em;
    color: var(--mud-palette-error);
    border: 1px solid var(--mud-palette-error);
}

.mt-live-prick {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--mud-palette-error);
    animation: mt-live-puls 1.4s ease-out infinite;
}

@keyframes mt-live-puls {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-error) 60%, transparent); }
    70% { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .mt-live-prick { animation: none; }
}

/* Periodrubrik mellan periodernas MudTimeline och tiden närmast linjen */
.mt-periodnamn {
    padding: 2px 12px;
    margin: 6px 0;
    border-radius: 12px;
    font-weight: 600;
    font-size: .875rem;
    white-space: nowrap;
    background-color: var(--mud-palette-background-gray);
}

/* Rubrikraden centreras mot markören (38 px hög vid Size.Medium, textraden är 20 px) */
.matchtidslinje .mud-timeline-item-content {
    padding-top: 9px;
}

/* Markören på linjen är avlång i stället för rund, så att ikon och tid får plats bredvid varandra */
/* Den yttre pricken är genomskinlig, annars syns dess bakgrund som en ram runt den färgade markören */
.matchtidslinje .mud-timeline-item-dot.mud-timeline-dot-size-medium {
    width: auto;
    background: transparent;
}

    .matchtidslinje .mud-timeline-item-dot .mud-timeline-item-dot-inner.mud-timeline-dot-fill {
        width: auto;
        gap: 4px;
        padding: 0 10px 0 8px;
        border-radius: 15px;
    }

.matchtidslinje .mt-tid {
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Matcher i innevarande vecka markeras med en fetare vänsterkant */
.innevarande-vecka td:first-child {
    box-shadow: inset 1px 0 0 var(--mud-palette-primary);
}

/**
 * Rader som laddats till i en tabell glider in från det håll de lades till och markeras kort.
 * Två likadana animationer per håll: klassen växlar mellan dem vid varje laddning, så att animationen
 * startar om även på en rad som återanvänds med en klass av samma slag som vid förra laddningen.
 */
.ny-rad-ovan-0 { animation: ny-rad-ovan-0 1.2s ease-out; }
.ny-rad-ovan-1 { animation: ny-rad-ovan-1 1.2s ease-out; }
.ny-rad-under-0 { animation: ny-rad-under-0 1.2s ease-out; }
.ny-rad-under-1 { animation: ny-rad-under-1 1.2s ease-out; }

@keyframes ny-rad-ovan-0 {
    0% { opacity: 0; transform: translateY(-10px); background-color: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent); }
    35% { opacity: 1; transform: none; background-color: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent); }
}
@keyframes ny-rad-ovan-1 {
    0% { opacity: 0; transform: translateY(-10px); background-color: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent); }
    35% { opacity: 1; transform: none; background-color: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent); }
}
@keyframes ny-rad-under-0 {
    0% { opacity: 0; transform: translateY(10px); background-color: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent); }
    35% { opacity: 1; transform: none; background-color: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent); }
}
@keyframes ny-rad-under-1 {
    0% { opacity: 0; transform: translateY(10px); background-color: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent); }
    35% { opacity: 1; transform: none; background-color: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .ny-rad-ovan-0, .ny-rad-ovan-1, .ny-rad-under-0, .ny-rad-under-1 { animation-duration: 1ms; }
}

.tabell-tajt .mud-table-cell {
    padding-left: 6px !important;
    padding-right: 6px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.mud-icon-button {
    padding: 4px;
}
/*
.mud-table-foot .mud-table-row .mud-table-cell {
    font-weight: 500;
    line-height: 1.5rem;
}

    */
td .mud-typography-body1 {
    font-size: .875rem;
}
    
/*-------------------------------SPINNER-------------------------------------------------*/
/*Liten spinner*/
.spinner-prickar {
    margin: 0;
    width: 70px;
    text-align: center;
}

.spinner-prickar > div {
    width: 5px;
    height: 5px;
    background-color: #333;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner-prickar .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner-prickar .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

/*
 * Flikar i GitHub-stil: en tunn linje under fliklisten, den valda fliken med ram och rundade hörn som täcker linjen,
 * vanlig text med liten grå ikon och antal i en grå pill.
 */
.mud-tabs-tabbar {
    background-color: transparent;
}

    /* Linjen ritas före flikarna (::before), så att den valda flikens nederkant hamnar ovanpå och döljer den */
    .mud-tabs-tabbar::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

.mud-tab-slider {
    display: none;
}

/* MudBlazor ger listen min-höjd 48 px, vilket lyfter flikarna från linjen */
.mud-tabs-tabbar .mud-tabs-tabbar-inner {
    min-height: 0;
}

.mud-tabs-tabbar .mud-tab {
    position: relative;
    width: auto;
    min-width: 0 !important; /* MudBlazor sätter min-width: 160px direkt på fliken */
    min-height: 0;
    padding: 8px 16px;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    color: var(--mud-palette-text-primary);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 6px 6px 0 0;
}

    .mud-tabs-tabbar .mud-tab:hover {
        background-color: transparent;
    }

    .mud-tabs-tabbar .mud-tab.mud-tab-active {
        color: var(--mud-palette-text-primary);
        background-color: var(--mud-palette-surface);
        border-color: var(--mud-palette-lines-default);
        border-bottom-color: var(--mud-palette-surface);
    }

    .mud-tabs-tabbar .mud-tab .mud-tab-icon-text {
        width: 16px;
        height: 16px;
        margin-right: 4px;
        margin-inline-end: 4px;
        color: var(--mud-palette-text-secondary);
    }

.mud-tabs-panels {
    padding-top: 12px;
}

/*
 * På pekskärmar scrollas fliklisten med swipe i stället för MudBlazors scrollknappar.
 * Knapparna flyttar listen med transform, så den nollställs för att inte krocka med den vanliga scrollningen.
 */
@media (pointer: coarse) {
    .mud-tabs-tabbar .mud-tabs-scroll-button {
        display: none;
    }

    .mud-tabs-tabbar .mud-tabs-tabbar-content {
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

        .mud-tabs-tabbar .mud-tabs-tabbar-content::-webkit-scrollbar {
            display: none;
        }

        .mud-tabs-tabbar .mud-tabs-tabbar-content .mud-tabs-tabbar-wrapper {
            transform: none !important;
        }
}

.mud-tab-badge .mud-badge.mud-badge {
    min-width: 20px;
    height: auto;
    padding: 0 6px;
    font-size: .75rem;
    font-weight: 500;
    line-height: 18px;
    border-radius: 2em;
    /* !important eftersom märkets färgklass (mud-theme-primary) sätter färgerna med !important */
    color: var(--mud-palette-text-primary) !important;
    background-color: color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent) !important;
}

.mud-tooltip.mud-tooltip-default .mud-button-label {
    color: lightblue;
}