:root {
    --color-primari: #0d6efd;
    --color-fons: #f0f2f5;
    --altura-navbar: 56px; /* Alçada estàndard de la barra de navegació de Bootstrap */
  }

  html, body {
    height: 100%;
    overflow: hidden; /* Evitem l'scroll a nivell de pàgina */
  }

  body {
    background-color: var(--color-fons);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
  }

  /* El contenidor principal de l'app (sota la navbar) ha d'ocupar l'espai restant */
  .app-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Conté el layout per evitar doble scroll */
    /* Calculem l'alçada restant de la pantalla */
    height: calc(100vh - var(--altura-navbar));
    padding-bottom: 1rem; /* Una mica d'espai al final */
  }

  /* Contenidor de càrrega mentre el backend obté les dades */
  .loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 50vh;
  }

  /* El contenidor de l'aplicació (filtres + taula) ha de ser flexible */
  #appContingut {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Assegurem que el contingut no es desbordi */
  }

  /* Afegim una vora inferior a la targeta de filtres per simular la vora superior de la taula que hem eliminat */
  #appContingut .card {
    border-bottom: 1px solid #dee2e6;
  }

  /* Estilització de la taula de permisos per a capçalera fixa */
  .taula-permisos thead th {
    position: -webkit-sticky; /* Per a Safari */
    position: sticky;
    top: 0;
    z-index: 10; /* Assegura que estigui per sobre del contingut que fa scroll */
    background-color: #f8f9fa; /* Color de fons per evitar que el contingut de sota es vegi */
    /* Simulem la vora inferior de la capçalera */
    border-bottom: 2px solid #dee2e6 !important;
  }
  
  /* Amplada específica per a la columna de l'alumne */
  .taula-permisos th:first-child,
  .taula-permisos td:first-child {
    width: 250px; /* Amplada fixa per a la columna de l'alumne */
    max-width: 250px;
    min-width: 250px;
  }

  /* Nova regla per a les columnes de permisos per fer-les uniformes */
  .taula-permisos th.permis-header,
  .taula-permisos td[data-id-permis] {
    width: 120px; /* Amplada fixa per a totes les columnes de permís */
    min-width: 120px;
    max-width: 120px;
    /* Les propietats d'overflow es mouen a un fill per no tallar el menú */
  }

  .taula-permisos th.permis-header .d-flex {
    /* Eliminem el padding que desplaçava el contingut. */
    /* Ara el justify-content:center del div actuarà sobre l'amplada total de la cel·la, */
    /* aconseguint un centrat visualment més correcte del grup (títol + icona). */
  }

  .permis-header-title {
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap; /* Evita que el text de la capçalera es trenqui */
    overflow: hidden;
    text-overflow: ellipsis; /* Afegeix '...' si el text és massa llarg */
    /* Afegim padding per evitar que el text es solapi amb les icones posicionades absolutament */
    padding: 0 30px;
  }

  /* Estils per al menú desplegable a les capçaleres */
  .permis-header .dropdown-massiu {
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0; /* Ocult per defecte */
    transition: opacity 0.2s ease-in-out;
  }

  .permis-header:hover .dropdown-massiu {
    opacity: 1; /* Es mostra en fer hover sobre la capçalera */
  }

  .dropdown-massiu .btn-link {
    text-decoration: none;
  }

  .dropdown-massiu .dropdown-menu {
    font-size: 0.9rem;
  }

  /* NOU: Estils per al menú desplegable a les files d'alumne */
  .taula-permisos td:first-child {
    position: relative; /* Per posicionar el menú a dins */
  }

  .dropdown-massiu-alumne {
    opacity: 0; /* Ocult per defecte */
    transition: opacity 0.2s ease-in-out;
  }

  .taula-permisos tr:hover .dropdown-massiu-alumne {
    opacity: 1; /* Es mostra en fer hover sobre la fila */
  }

  .dropdown-massiu-alumne .dropdown-menu {
    font-size: 0.9rem;
    z-index: 10; /* Assegurem que es mostri per sobre d'altres files */
  }

  /* El contenidor de la taula ha de créixer i permetre l'scroll intern */
  .table-responsive {
    flex-grow: 1; /* Ocupa l'espai restant */
    overflow-y: auto; /* AFEGEIX L'SCROLL VERTICAL NOMÉS AQUÍ */
    min-height: 200px; /* Una alçada mínima per quan hi ha pocs resultats */
  }

  .taula-permisos td {
    vertical-align: middle;
  }

  /* Simulem les vores de 'table-bordered' manualment per evitar conflictes de renderitzat */
  .taula-permisos th,
  .taula-permisos td {
    border: 1px solid #dee2e6;
  }

  /* Estils per les noves etiquetes de permís clicables */
  .permis-badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: .9em;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .375rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    width: 38px; /* Amplada fixa per a un aspecte quadrat */
    height: 38px; /* Alçada fixa */
    display: inline-flex; /* Per centrar la icona */
    align-items: center; /* Centrat vertical */
    justify-content: center; /* Centrat horitzontal */
  }
  
  .permis-badge:hover { filter: brightness(90%); } /* Una mica més fosc en hover */
  .permis-badge i { font-size: 1.4em; } /* Icona més gran */ /* Icona més gran */

  /* Estils de color per a cada estat del permís */
  .permis-badge.pendent { color: #495057; background-color: #e9ecef; border: 1px solid #ced4da; }
  .permis-badge.concedit { color: #0f5132; background-color: #d1e7dd; border: 1px solid #badbcc; }
  .permis-badge.denegat { color: #842029; background-color: #f8d7da; border: 1px solid #f5c2c7; }

  /* Ocultar elements dinàmicament */
  .d-none {
    display: none !important;
  }

  /* Estil per a les cel·les no editables */
  .cel-la-no-editable {
    background-color: #f8f9fa; /* Un fons gris per indicar que no es pot interactuar */
    cursor: not-allowed;
  }

  /* NOU: Estils per al badge d'administrador clicable */
  .admin-badge {
    cursor: pointer;
  }

  .admin-badge.disabled {
    cursor: not-allowed;
    opacity: 0.65;
  }

  /* NOU: Estil per a la icona d'informació del text legal a la capçalera */
  .info-icon {
    cursor: pointer;
    opacity: 0.6;
    position: absolute;
    right: 5px; /* Posicionem la icona a la dreta */
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d; /* Color gris (text-secondary de Bootstrap) per dissimular */
    transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
  }

  .info-icon:hover {
    opacity: 1;
    color: var(--color-primari); /* Color blau primari en passar el ratolí per sobre */
  }

  /* Quan una cel·la no és editable, el badge de dins tampoc ho ha de ser */
  .cel-la-no-editable .permis-badge {
    cursor: not-allowed;
    opacity: 0.6;
  }

  /* NOU: Estil per a l'estat 'NoAplicable' del badge */
  .permis-badge.noaplicable {
    color: #6c757d; /* Gris fosc */
    background-color: #e9ecef; /* Fons gris clar */
  }

  .cel-la-no-aplicable .permis-badge {
    /* La icona es mostrarà amb el nou estat 'noaplicable' */
  }

  /* Overlay per bloquejar la pantalla durant el desament */
  .overlay-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1050; /* Per sobre de la majoria d'elements */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* Assegurem que el modal de confirmació aparegui per sobre dels altres modals */
  #modalConfirmacio {
    z-index: 1060;
  }

  /* Assegurem que el modal d'alerta aparegui per sobre del de confirmació */
  #modalAlerta {
    z-index: 1070;
  }

  /* NOU: Estil per a l'agafador d'arrossegar */
  .drag-handle {
    cursor: grab;
  }