/*!
 * Intento fer un CSS específic per a mí...
 */

/*  Llista - seleccionar totes les linies */

#bulkOptionsContainer {
    padding: 0px;;
}

/*!
 * Loader... això és la funció que fa apareixer el rellotge / cercle de càrrega d'una pàgina 
 */
/* Loader corregit */
#load-screen {
  position:fixed;
  inset:0;
  width:100%;
  height:100vh;
  background:rgba(255,255,255,0.85);
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .3s ease;
}
#load-screen.hidden { opacity:0; pointer-events:none; }
#loading {
  width:120px;
  height:120px;
  background:url(../imatges/loader.gif) center/60% no-repeat;
}
        
/*!
 * Estil pel "pager" que és per a crear els indexos de paginació (final del index.php) - estem creant la class active_link
 */

.pager li .active_link {
background: rgb(178, 241, 96) !important;
}

    
/*!
 * Caixes de text amb títol i barra de progrés - W3Schools Scroll Indicator
 */
 /* Style the header: fixed position (always stay at the top) */
 /* Antic:
   .aj-content {
    padding: 10px 10px;
    padding-right: 15px;
    padding-left: 15px;
    border: 1px solid rgb(193, 193, 193);
    width: 1150px auto;
    height: 200px;
    background: rgb(232, 232, 232);
    overflow: auto;
  }
 */

  .aj-content {
    padding: 10px 10px;
    padding-right: 15px;
    padding-left: 15px;
    width: 95%;
    margin-left: 25px;
    border: 1px solid rgb(18, 18, 18);
    height: 200px;
    background: rgb(18, 18, 18);
    overflow: auto;
  }

/*!
 * Caixes de text sense barra de progrés del 80% de l'amplada - W3Schools Scroll Indicator
 */
  .aj-content-80 {
    width: 95%;
    margin-left: 10px;
    margin-top: 10px;
/*    text-align: center; */
    border: 1px solid rgb(18, 18, 18);
    height: 100px;
    background: rgb(18, 18, 18);
    overflow: auto;
  }

/*!
 * Contenidor amb una fotografia i un titular a dalt a l'esquerra
 */
  .aj-container {
    position: relative;
    max-width: auto;
    height: auto;
    margin: 0 auto;
  }
  
  .aj-container img {
    vertical-align: middle;
    height: 400px;
    width: auto;
  }
  
  .aj-container .content {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.6 ); /* Black background with 0.6 opacity */
    color: #f1f1f1;
    width: 30%;
    padding-left: 20px;
  }

  .aj-container .fade {   /* Fading animation */
      animation-name: fade;
      animation-duration: 5.5s;
    }

    @keyframes fade {
      from {opacity: .6} 
      to {opacity: 1}
    }


/*!
 * Estils recomanats pel GitHub Copilot al programar Estades
 */

    .search-result-item {
      padding: 10px;
      cursor: pointer;
  }
  .search-result-item:hover {
      background-color: #f0f0f0;
  }
  .form-group .form-control {
      width: 100%;
  }
  .form-group .form-control-inline {
      display: inline-block;
      width: calc(25% - 10px);
      margin-right: 10px;
  }
  .form-group .form-control-inline:last-child {
      margin-right: 0;
  }
  .form-group .form-control-half {
      display: inline-block;
      width: calc(12.5% - 10px);
      margin-right: 10px;
  }
  .form-group .form-control-half:last-child {
      margin-right: 0;
  }

  .underline-group {
    position: relative;
    padding-bottom: 5px;
    margin-bottom: 0px; /* Espai entre línies */
}

.underline-group::after {
    content: "";
    position: absolute;
    left: 0; /* Ajustem l'amplada del subratllat */
    right: 10; /* Ajustem l'amplada del subratllat */
    bottom: 0;
    height: 2px;
    background-color: #ff6600; /* Color diferent per a la línia */
}
  
.highlight-group {
  position: relative;
  padding: 10px;
  margin-bottom: 0px; /* Espai entre grups */
  border: 1px solid #ff6600; /* Color del quadre */
  border-radius: 5px; /* Corbes suaus a les cantonades */
  background-color: #fff5e6; /* Color de fons pàlid */
}

.highlight-group input {
  background-color: #fff; /* Color de fons dels camps d'entrada */
  border: 1px solid #ced4da; /* Contorn dels camps d'entrada */
  border-radius: 4px; /* Corbes suaus als camps d'entrada */
  padding: 5px; /* Espai intern dels camps d'entrada */
}


/* Estil del popup */
.popup {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 1000;
  font-size: 14px;
  color: #333;
  border-radius: 5px;
}

/* Fletxa del popup */
.popup::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #ccc transparent transparent transparent;
}

/* texturitzat del cap de setmana a la llista d'estades */
.cap-de-setmana {
  background-image: repeating-linear-gradient(
      45deg, 
      darkgray, 
      darkgray 2px, 
      transparent 2px, 
      transparent 4px
  );
  background-size: 100% 100%;
}

/* Estils per als diferents estats */
.estat-1 {
  background-color: yellow; /* R - Reserva Pendent - Groc */
}

.estat-2 {
  background-color: lightblue; /* A - Reserva Assignada - Blau cel */
}

.estat-3 {
  background-color: lightgreen; /* E - Estada - Verd clar */
}

.estat-4 {
  background-color: red; /* P - Pendent de cobrar - Vermell */
}

.estat-5 {
  background-color: white; /* L - Cobrada - Blanc */
}

.estat-6 {
  background-color: white; /* C - Cancel·lada - Blanc */
  text-decoration: line-through; /* Text tatxat */
}

.estat-6 button {
  text-decoration: line-through !important; /* Força el text tatxat */
}

.estat-6 .text-estat {
  text-decoration: line-through;
}

.estat-alerta {
  background-color: #ff9999 !important; /* Vermell intens */
  color: white !important; /* Text blanc per contrast */
}

/* Combinació de patró de cap de setmana amb colors d'estat */
.cap-de-setmana.estat-A {
  background-image: repeating-linear-gradient(
      45deg,
      darkgray,
      darkgray 2px,
      lightblue 2px,
      lightblue 4px
  );
}

.cap-de-setmana.estat-E {
  background-image: repeating-linear-gradient(
      45deg,
      darkgray,
      darkgray 2px,
      yellow 2px,
      yellow 4px
  );
}

.cap-de-setmana.estat-P {
  background-image: repeating-linear-gradient(
      45deg,
      darkgray,
      darkgray 2px,
      white 2px,
      white 4px
  );
  color: white; /* Text blanc per contrast */
}

.cap-de-setmana.estat-L {
  background-image: repeating-linear-gradient(
      45deg,
      darkgray,
      darkgray 2px,
      lightgreen 2px,
      lightgreen 4px
  );
}

.cap-de-setmana.estat-R {
  background-image: repeating-linear-gradient(
      45deg,
      darkgray,
      darkgray 2px,
      red 2px,
      red 4px
  );
}

.cap-de-setmana.estat-C {
  background-image: repeating-linear-gradient(
      45deg,
      darkgray,
      darkgray 2px,
      white 2px,
      white 4px
  );
  text-decoration: line-through; /* Text tatxat */
}

/* Fixar la primera columna de la taula */
.table-responsive th:first-child,
.table-responsive td:first-child {
    position: sticky;
    left: 0;
    z-index: 3; /* Assegura que la primera columna estigui per sobre de les altres */
    background-color: lightgray; /* Color de fons per a la columna fixa */
    border: 1px solid red !important; /* Força els límits de les cel·les */
}

.table-responsive th,
.table-responsive td {
    overflow: hidden; /* Evita que el contingut sobresurti */
    text-overflow: ellipsis; /* Mostra punts suspensius si el text és massa llarg */
    white-space: nowrap; /* Evita que el text es trenqui en diverses línies */
    border: 1px solid red !important; /* Força els límits de les cel·les */
}

/* Ajustar el botó per fer-lo més petit */
.btn-custom {
    padding: 0; /* Elimina el farciment intern */
    margin: 0; /* Elimina els marges */
    font-size: 14px; /* Ajusta el tamany de la lletra */
    line-height: 1; /* Redueix l'alçada de la línia */
    background: none; /* Elimina el fons */
    border: none; /* Elimina la vora */
    color: #007bff; /* Manté el color d'enllaç de Bootstrap */
    cursor: pointer; /* Manté el cursor de mà */
}

/* Opcional: Subratllat en passar el ratolí */
.btn-custom:hover {
    text-decoration: underline;
}

/* Ajustar el formulari per evitar espai addicional */
form {
    margin: 0; /* Elimina els marges del formulari */
    padding: 0; /* Elimina el farciment del formulari */
    display: inline; /* Assegura que el formulari es comporti com un element en línia */
}

/* barra de control dels trams de preus */ 
.barra-responsive {
    display: flex;
    width: 100%;
    min-width: 200px;
    max-width: 100vw;
    height: 20px;
}
.dia-barra {
    flex: 1 1 0;
    min-width: 1px;
    height: 20px;
    margin: 0;
}
.dies-labels, .mesos-labels {
    display: flex;
    width: 100%;
    min-width: 200px;
    max-width: 100vw;
}
.dia-label {
    flex: 1 1 0;
    min-width: 1px;
    text-align: center;
    font-size: 10px;
    height: 14px;
    line-height: 14px;
    color: #333;
}
.mes-label {
    flex: 1 1 0;
    min-width: 1px;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    height: 14px;
    line-height: 14px;
    color: #333;
}
@media (max-width: 600px) {
    .barra-responsive, .dia-barra { height: 12px; }
    .dia-label, .mes-label { font-size: 8px; height: 10px; line-height: 10px; }
}


/* parpelleig dels trams de preus */ 
@keyframes parpelleigBuit {
    0%, 100% { background: #fff; }
    50% { background: #a94442; } /* Vermell fosc */
}
@keyframes parpelleigMulti {
    0%, 100% { background: #fff; }
    50% { background: #003366; } /* Blau fosc */
}
.parpelleig-buit {
    animation: parpelleigBuit 2s infinite;
}
.parpelleig-multi {
    animation: parpelleigMulti 2s infinite;
}

@keyframes parpelleigBuitBarra {
    0%, 100% { background: #eee; }
    50% { background: #a94442; } /* Vermell fosc */
}
@keyframes parpelleigMultiBarra {
    0%, 100% { background: #eee; }
    50% { background: #003366; } /* Blau fosc */
}
.parpelleig-buit-barra {
    animation: parpelleigBuitBarra 2s infinite;
}
.parpelleig-multi-barra {
    animation: parpelleigMultiBarra 2s infinite;
}

/* Ajustar la mida de la taula preustrams */
.table th, .table td {
    max-width: 80px;
    width: 70px;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 1.4rem !important;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preustrams-input {
    width: 48px !important;    /* Amplada */
    min-width: 40px;           /* Amplada mínima */
    max-width: 60px;           /* Amplada màxima */
    padding-left: 2px;         /* Farciment esquerra */
    padding-right: 2px;        /* Farciment dreta */
    font-size: 1.3rem;         /* Mida de la lletra */
    text-align: center;         /* Text alineat a la dreta */
    /* Si vols controlar l'alçada: */
    height: 20px;              /* (Exemple d'alçada, pots ajustar-la) */
}

.table input,
.form-control {
    font-size: 1.2rem !important;
}

/* Chrome, Safari, Edge */
.preustrams-input::-webkit-outer-spin-button,
.preustrams-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox i estàndard */
.preustrams-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}


/* Afegits per preus trams */
/* Força scroll disponible per la pàgina de preus */
html.preustrams-page,
body.preustrams-page {
  overflow:auto !important;
  height:auto !important;
}

/* Elimina margin/padding excessiu si cal */
body.preustrams-page { margin-top:60px; padding-top:0 !important; }

.preustrams-header-bar {
    background:#222; color:#fff; padding:15px 20px; border-bottom:3px solid #444;
    display:flex; flex-direction:column; height: 62px;
}
.preustrams-selector { display:flex; flex-wrap:wrap; gap:15px; align-items:center; width:100%; }
.preustrams-buttons { display:flex; gap:10px; flex-wrap:wrap; }
.est-badge { font-size:1rem; }
.preustrams-wrapper { padding:20px 15px; }
.preustrams-section { margin-bottom:28px; background:lavenderblush; padding:10px 5px; }
.preustrams-panel {
    background:#f8f8f8; border:2px solid lightgray; border-radius:8px;
    padding:12px 10px 10px 10px;
}
.preustrams-table, .preustrams-matriu { background:#f9f9f9; }
.preus-inline { display:flex; align-items:center; justify-content:center; gap:4px; }
.preus-inline input { width:80px; }

.barra-responsive { display:flex; }
.dies-labels, .mesos-labels { display:flex; }
.dia-label, .mes-label { width:8px; font-size:10px; text-align:center; }
.parpelleig-multi-barra { animation: flash 1s infinite; }
.parpelleig-buit-barra { animation: flash-soft 2s infinite; }
@keyframes flash { 0%,100% { opacity:1; } 50% { opacity:.3; } }
@keyframes flash-soft { 0%,100% { opacity:1; } 50% { opacity:.55; } }

/* Si la side-nav (fixed) està tapant contingut, assegura espai lateral: */
body.preustrams-page #page-wrapper {
    min-height: auto;
    overflow: visible;
}

.preustrams-subnav {
  background:#121212;
  border:none;
  border-radius:0;
  min-height:52px;
  margin-bottom:15px;
}
.preustrams-subnav .navbar-brand.preustrams-title {
  color:#fff;
  font-size:14px;
  font-weight:600;
  padding-top:25px;
  padding-bottom:15px;
}
.preustrams-subnav .navbar-brand.preustrams-title:hover {
  color:#e0e0e0;
}
.preustrams-form {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  margin:0;
  gap:18px;
}
.preustrams-group {
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
}
.preustrams-label {
  background:#121212;
  color:lightblue;
  font-size:14px;
  line-height:14px;
  padding:0;
  margin-top:12px;
  display:inline-block;
}

/* Highlight for the active filter button in estades list
   Keep the original state's background color (from .estat-X) and do not force blue/white.
   We emphasize the active button by increasing vertical padding, min-height, border and a subtle shadow.
*/
.filter-active {
  background-color: inherit !important; /* keep the state's own background */
  color: inherit !important; /* keep the original text color */
  border: 2px solid rgba(0,0,0,0.18) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08) !important;
  display: inline-block;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  min-height: 44px !important; /* make the active button taller */
  line-height: 1.2;
  transform-origin: center center;
  transition: padding .12s ease, box-shadow .12s ease, transform .08s ease;
}

/* Optional small scale on hover/focus to emphasise interaction */
.filter-active:hover, .filter-active:focus {
  transform: translateY(-2px) scaleY(1.02);
}

/* Title color for the estades list - keep it consistent with menu points */
.list-title {
  color: #CCCCFF; /* lavender-blue per la petició */
}
.preustrams-select,
.preustrams-select-wide {
  height:28px;
  margin-top:12px;
  padding:2px 6px;
  font-size:16px;
}
.preustrams-select { width:90px; }
.preustrams-select-wide { width:110px; }
.preustrams-buttons .btn {
  height:28px;
  line-height:14px;
  margin-top:12px;
  font-size:12px;
  padding:4px 8px;
}
.preustrams-estat {
  margin-top:12px;
}
.est-badge {
  font-size:12px;
  padding:6px 10px;
}

fieldset.border {
  border: 1px solid #ccc !important;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
}
legend.w-auto {
  font-size: 1rem;
  font-weight: bold;
}

.titol-contacte {
    font-size: 1.2rem !important; /* El doble de la mida normal */
    font-weight: bold;
}

/* fer els fieldset d'e-mails i telèfons una mica més compactes */
fieldset.compact { padding: .5rem; }
fieldset.compact .titol-contacte { font-size: 1.5rem; }

.hr-separador {
    border: 0;
    height: 1px;
    background: #222; /* Més fosc */
    margin: 10px 0 20px 0;
    opacity: 1;
}

/* Compacta les columnes de radio i accions */
#taulaEmails th, #taulaTelfs th, #taulaAdreces th,
#taulaEmails td, #taulaTelfs td, #taulaAdreces td {
    vertical-align: middle;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}
.titol-contacte { font-size: 1.7rem; font-weight: bold; }
.input-estret { width: 60px !important; min-width: 0 !important; }
.input-accio { width: 35px !important; min-width: 0 !important; }
.input-princ { width: 25px !important; min-width: 0 !important; }

.tooltip-popup {
    position: absolute;
    z-index: 9999;
    background: #fff;
    color: #333;
    border: 1px solid #888;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    font-size: 0.95em;
    white-space: pre-line;
    max-width: 350px;
    display: none;
}