@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
/* CSS per a la taula en pantalles petites */
/* Ajustaments responsius de la taula */
/* Taula per a pantalles grans */
.table-responsive-custom {
    max-width: 100%; /* Per a pantalles grans */
}

/* Mides intermedies */
@media (max-width: 1200px) {
    .table-responsive-custom {
        max-width: 90%; /* Redueix una mica en pantalles m�s petites */
    }
}

@media (max-width: 992px) {
    .table-responsive-custom {
        max-width: 80%;
    }
}

/* Per a tauletes */
@media (max-width: 768px) {
    .table-responsive-custom {
        max-width: 70%;
    }
}

/* Per a m�bils */
@media (max-width: 480px) {
    .table-responsive-custom {
        max-width: 100vw; /* Ocupa tota l'amplada disponible */
        overflow-x: auto; /* Evita el desbordament si la taula �s gran */
        display: block;
        /*white-space: nowrap;*/
        /*max-width: 90%;*/ /* Redueix l'amplada m�xima per a una millor visualitzaci� en m�bils */
        margin: 0 auto; /* Centra la taula dins del contenidor */
        padding: 0 10px; /* Afegeix una mica de marge intern als costats */
    }

        .table-responsive-custom .table {
            width: 100% !important; /* For�a que la taula ocupi el 100% de l'amplada del contenidor */
            max-width: inherit !important; /* Assegura que l'amplada m�xima de la taula sigui la del contenidor */
            table-layout: auto; /* Permet que les columnes s'ajustin segons el contingut */
        }
}



html, body {
    height: 100%;
    margin: 0;
}

.page {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.sidebar {
    /* Estils per la barra lateral */
}

.content-container {
    display: flex;
    flex-direction: column;
    flex: 1; /* El contingut principal s'est�n per ocupar l'espai disponible */
}

.content {
    flex: 1; /* El contingut ocupa tot l'espai disponible abans del footer */
    padding-bottom: 44px; /* Deixa lliure l'alçada del peu (veure .footer): que mai el tapi. */
}

/* Peu de pàgina: SEMPRE fixe a baix de tot de la finestra, igual a totes
   les pantalles. Es defineix aquí (CSS global, sempre carregat) en lloc de
   dins de MainLayout.razor.css (CSS aïllat de Blazor per component) perquè
   aquest darrer depèn que el bundle de CSS aïllat es regeneri correctament
   en cada build/hot-reload -- cosa que no sempre passa de manera fiable --
   i quan no ho fa, el peu deixa de quedar fixe silenciosament. Una única
   definició (aquí) que sempre es carrega és més simple i robusta. */
.footer {
    background-color: #f8f9fa;
    text-align: center;
    padding: 10px 0;
    border-top: 1px solid #d6d5d5;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    box-sizing: border-box;
    z-index: 1030;
}

@media (min-width: 641px) {
    .footer {
        left: 250px; /* Igual que l'amplada fixa de la barra lateral. */
        transition: left 180ms ease;
    }

    .page.menu-compacte .footer {
        left: 4.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer {
        transition: none;
    }
}

/* Fila de desplegables d'Organitzador/Torneig/Grup/Jornada
   (SelectorOrganitzacioTorneig.razor). Es defineix aquí (CSS global, sempre
   carregat) en lloc d'un .razor.css aïllat de Blazor pel mateix motiu que
   .footer: el bundle de CSS aïllat no sempre es regenera de manera fiable en
   cada build/hot-reload.
   S'usa CSS Grid (no flexbox) perquè totes les etiquetes/controls són fills
   directes (flat) d'aquest contenidor: amb grid-template-rows: auto auto i
   grid-auto-flow: column, la primera fila (etiquetes) i la segona (controls)
   queden garantides a la mateixa alçada per estructura, sense dependre que
   cada camp tingui exactament la mateixa alçada natural (com passava abans
   amb flexbox + subcomponents separats).
*/
.selector-organitzacio-torneig {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-template-rows: auto auto;
    column-gap: 1rem;
    row-gap: 0.25rem;
    align-items: start;
}

/* Bootstrap defineix .form-select amb width:100%, que dins d'un grid fa que
   cada select s'estiri a l'ample de tota la seva columna (per això ocupava
   mitja pantalla). Aquí es torna a l'ample compacte (el min-width de cada
   camp) en lloc d'estirar-se. */
.selector-organitzacio-torneig select {
    width: auto;
    justify-self: start;
    max-width: 320px; /* Un torneig/jornada amb nom llarg no ha d'estirar
                          tota la fila cap a la dreta: es talla amb "...". */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .selector-organitzacio-torneig {
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-auto-columns: initial;
    }
}


html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/*.form-group .col-sm-9 {
    padding-left: 0;
}

.form-group .form-control,
.form-group .form-check-input {
    max-width: 400px;*/ /* Adjust as needed */
/*}

.form-group .form-check-input {
    width: auto;
}*/