/* Capa de modernització visual sobre Bootstrap 3.
   Els colors de marca (var(--custom-color-1) / var(--custom-color-2)) es
   defineixen a base.html a partir de settings.CUSTOM_COLOR_1/2. */

html, body {
  background-color: #f2f4f7;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  color: #333333;
  -webkit-font-smoothing: antialiased;
}

.container {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  padding: 24px 28px 32px;
  margin-top: 24px;
  margin-bottom: 24px;
}

/* Capçalera ------------------------------------------------------------ */

#header {
  margin: -24px -28px 20px;
}

.navbar {
  border-radius: 10px 10px 0 0;
  border: none;
  margin-bottom: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.navbar-brand {
  display: flex;
  align-items: center;
  height: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.navbar-nav > li > a {
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Botons ----------------------------------------------------------------- */

.btn {
  border-radius: 6px;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.05s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary,
.btn-default,
.btn-danger,
.btn-success,
.btn-warning,
.btn-info {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Targetes / panells / wells --------------------------------------------- */

.panel,
.well {
  border: 1px solid #e8eaed;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.panel-heading {
  border-radius: 7px 7px 0 0 !important;
  font-weight: 600;
}

/* Taules ------------------------------------------------------------------ */

.table {
  background-color: #ffffff;
}

.table > thead > tr > th {
  border-bottom: 2px solid #e8eaed;
  font-weight: 600;
  color: #555555;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #fafbfc;
}

.table-hover > tbody > tr:hover {
  background-color: #f0f7fc;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  border-color: #ebedf0;
}

/* Alerta crítica: per marcar files que requereixen atenció immediata (p. ex.
   acumulació d'expulsions). Pensada perquè destaqui per sobre de l'estil
   zebrat/hover normal de les taules. */
tr.alerta-critica > td {
  background-color: #f5c2c7 !important;
  color: #58151c !important;
  font-weight: 700;
  border-color: #eba7ae !important;
}
tr.alerta-critica:hover > td {
  background-color: #f1aeb5 !important;
}

/* Formularis --------------------------------------------------------------- */

.form-control {
  border-radius: 6px;
  border-color: #d8dce1;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
  border-color: var(--custom-color-1, #66afe9);
  box-shadow: 0 0 0 3px rgba(14, 177, 255, 0.15);
}

/* Alertes ------------------------------------------------------------------ */

.alert {
  border: none;
  border-left: 4px solid transparent;
  border-radius: 6px;
}

.alert-success { border-left-color: #3c9a5f; }
.alert-info { border-left-color: #31708f; }
.alert-warning { border-left-color: #8a6d3b; }
.alert-danger { border-left-color: #a94442; }

/* Etiquetes / medalles ------------------------------------------------------ */

.label {
  border-radius: 10px;
  font-weight: 500;
  padding: 0.3em 0.7em;
}

/* Menú lateral --------------------------------------------------------------- */

#submenu.nav-pills > li > a {
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Paginació ------------------------------------------------------------------- */

.pagination > li > a,
.pagination > li > span {
  border-color: #e2e5e9;
  color: var(--custom-color-2, #337ab7);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
  background-color: var(--custom-color-1, #337ab7);
  border-color: var(--custom-color-1, #337ab7);
}

/* Dropdowns -------------------------------------------------------------------- */

.dropdown-menu {
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  padding: 6px;
}

.dropdown-menu > li > a {
  border-radius: 5px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: #f0f7fc;
  color: #222222;
}

/* Existent ----------------------------------------------------------------------- */

.progress {
  position: relative;
  border-radius: 8px;
}

.progress span {
  position: absolute;
  display: block;
  width: 100%;
  color: black;
}