/* ModusPortal: imatge de Moduspro (negre, blanc i gris). Bootstrap fa la resta. */
:root {
  --mp-black: #0b0b0b;
  --mp-ink: #181818;
  --mp-grey: #c6c6c6;
  --mp-grey-dark: #5f5d5a;
  --bs-primary: #111111;
  --bs-primary-rgb: 17, 17, 17;
  --bs-link-color: #111111;
  --bs-link-color-rgb: 17, 17, 17;
  --bs-link-hover-color: #5f5d5a;
  --bs-link-hover-color-rgb: 95, 93, 90;
}
body { background: #f4f4f2; color: var(--mp-ink); }

/* Barra superior */
.portal-nav { background: var(--mp-black); border-bottom: 3px solid var(--mp-grey); }
.portal-nav .nav-link { color: #e9e9e9; }
.portal-nav .nav-link:hover, .portal-nav .nav-link:focus { color: var(--mp-grey); }
/* El mòdul on ets: blanc i subratllat (el color per defecte de Bootstrap és fosc i no es veia). */
.portal-nav .nav-link.active, .portal-nav .nav-link.show { color: #fff; }
.portal-nav .nav-link.active { box-shadow: inset 0 -2px 0 #fff; }
.portal-nav .navbar-toggler { border-color: rgba(255,255,255,.4); }
.portal-nav .navbar-toggler-icon { filter: invert(1); }
.portal-brand { display: flex; align-items: center; gap: .6rem; font-family: "Exo 2", system-ui, sans-serif; font-weight: 700; font-size: 1.35rem; letter-spacing: .01em; }
.portal-brand .brand-modus { color: #fff; }
.portal-brand .brand-portal { color: var(--mp-grey); margin-left: -.45rem; }

/* Botons i pestanyes en negre */
.btn-primary {
  --bs-btn-bg: #111; --bs-btn-border-color: #111;
  --bs-btn-hover-bg: #333; --bs-btn-hover-border-color: #333;
  --bs-btn-active-bg: #000; --bs-btn-active-border-color: #000;
  --bs-btn-disabled-bg: #111; --bs-btn-disabled-border-color: #111;
}
.btn-outline-primary {
  --bs-btn-color: #111; --bs-btn-border-color: #111;
  --bs-btn-hover-bg: #111; --bs-btn-hover-border-color: #111; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #000; --bs-btn-active-border-color: #000;
}
.nav-tabs .nav-link { color: var(--mp-grey-dark); }
.nav-tabs .nav-link.active { color: #111; font-weight: 600; border-bottom-color: #fff; }
.form-control:focus, .form-select:focus { border-color: #111; box-shadow: 0 0 0 .2rem rgba(17,17,17,.15); }

/* Pantalla d'inici */
.module-card { color: inherit; border: 1px solid #e3e3e0; transition: box-shadow .15s, transform .15s, border-color .15s; }
.module-card:hover { border-color: #111; box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-1px); }
.module-badge {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  background: #111; color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}

/* Login i pantalles de seguretat (django-allauth) */
.auth-page { max-width: 30rem; }
.auth-page form:not(.d-inline) { margin: 0 auto; }
.login-logo { max-width: 260px; width: 70%; }
/* Els formularis de login i de seguretat són estrets; la resta ocupen l'espai que tenen. */
main:is(.auth-page, .allauth-page) form:not(.d-inline, .form-wide) { max-width: 28rem; }
main form input:is([type=text], [type=password], [type=email]):not(.form-control) {
  display: block; width: 100%; padding: .5rem .75rem; margin-top: .25rem;
  border: 1px solid #d1d1ce; border-radius: .375rem; background: #fff;
}
main form button[type=submit]:not(.btn) {
  margin-top: .75rem; padding: .5rem 1.25rem; border: 0; border-radius: .375rem;
  background: #111; color: #fff;
}
main form button[type=submit]:not(.btn):hover { background: #333; }