/* --- Environnements : marque, menu, pastille --- */

/* Personnel = bleu, Travail = indigo (avec libellé et icône : jamais la couleur seule). */
:root { --space-color: var(--accent-fill); }
:root[data-space="work"] { --space-color: #5e5ce6; }

.brand { border: 0; font: inherit; cursor: pointer; text-align: left; position: relative; }
.brand__mark { background: linear-gradient(160deg, color-mix(in srgb, var(--space-color) 78%, #fff), var(--space-color)); }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__space { font-size: 12px; font-weight: 600; color: var(--text-3); }
.brand__chevron { color: var(--text-3); }
.brand[aria-expanded="true"] { box-shadow: var(--shadow-md), 0 0 0 2px var(--space-color); }
.space-dot { position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--badge); box-shadow: 0 0 0 2px var(--surface); }

.space-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  width: 320px;
  max-height: min(80dvh, 620px);
  overflow-y: auto;
  padding: 8px;
  border: 0;
  border-radius: 18px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--shadow-lg), 0 0 0 0.5px color-mix(in srgb, var(--text) 14%, transparent);
  color: var(--text);
}
.space-menu:popover-open { animation: modal-in var(--dur) var(--ease-spring); }
.space-menu__content { display: flex; flex-direction: column; gap: 2px; }
.space-menu__label { padding: 8px 10px 4px; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.space-menu__sep { height: 1px; margin: 6px 4px; background: var(--border); }
.space-menu__note { display: flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 13px; color: var(--text-3); }

.space-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--text);
  text-align: left;
}
.space-item:hover, .space-item:focus-visible { background: color-mix(in srgb, var(--text) 7%, transparent); }
.space-item__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent-fill);
  color: #fff;
}
.space-item[data-kind="work"] .space-item__icon { background: #5e5ce6; }
.space-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.space-item__name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-item__hint { font-size: 12.5px; color: var(--text-3); }
.space-item__check { color: var(--accent); }

.space-invite { display: flex; flex-direction: column; gap: 8px; margin: 2px 4px; padding: 10px 12px; border-radius: 12px; background: var(--accent-weak); font-size: 14px; }
.space-invite__actions { display: flex; justify-content: flex-end; gap: 6px; }

.space-account { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.space-account__text { display: flex; flex-direction: column; min-width: 0; }
.space-account__name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-account__email { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-sync { padding: 0 10px 6px 54px; font-size: 12.5px; color: var(--text-3); }
.space-sync:empty { display: none; }
.space-sync.is-error { color: var(--danger); }
.space-sync.is-synced::before { content: "● "; color: var(--ok); }
.space-action {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--text);
  font-size: 14.5px;
  text-align: left;
  text-decoration: none;
}
.space-action:hover, .space-action:focus-visible { background: color-mix(in srgb, var(--text) 7%, transparent); text-decoration: none; }
.space-action .icon { color: var(--text-3); }
.space-action--primary { color: var(--accent); font-weight: 600; }
.space-action--primary .icon { color: var(--accent); }

/* Pastille d'environnement (accueil, petit écran) */
.space-chip {
  position: relative;
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--shadow-sm), 0 0 0 0.5px color-mix(in srgb, var(--text) 12%, transparent);
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
}
.space-chip > .icon:first-child { color: var(--space-color); }
.desk-head__titles .space-chip { margin-bottom: 12px; }
@media (max-width: 767px) {
  .space-chip { display: inline-flex; }
  .space-chip { min-height: 44px; }
}

/* --- Bandeau lecture seule --- */
.readonly-banner {
  position: relative;
  z-index: 25;
  padding: 8px 16px;
  background: var(--warn-weak);
  color: var(--warn);
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}

/* --- Avatars, listes de personnes --- */
.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(160deg, color-mix(in srgb, var(--space-color) 70%, #fff), var(--space-color));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.avatar--lg { width: 52px; height: 52px; font-size: 18px; }
.avatar--pending { background: var(--fill); color: var(--text-3); }
.people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.person { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0; }
.person + .person { border-top: 1px solid var(--border); }
.person.is-disabled { opacity: .55; }
.person__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.person__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person__meta { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person__role { width: auto; min-height: 34px; padding-block: 4px; font-size: 13.5px; }
.person__badge { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.people__loading { padding: 12px 0; color: var(--text-3); font-size: 14px; }
.invite-row { display: flex; gap: 8px; }
.invite-row .input { flex: 1; min-width: 0; }

.account-row { display: flex; align-items: center; gap: 14px; }
.account-row__email { font-weight: 650; font-size: 16px; }

/* --- Connexion --- */

.auth-tabs { align-self: stretch; }
.auth-tabs .segmented__item { flex: 1; }
.auth-tabs .segmented__item > span { justify-content: center; width: 100%; }
.auth-submit { min-height: 44px; }
.auth-extra { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.auth-message { padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 550; }
.auth-message.is-error { background: var(--danger-weak); color: var(--danger); }
.auth-message.is-ok { background: var(--ok-weak); color: var(--ok); }

/* Lecture seule : on ne propose pas d'actions de création qui seraient refusées. */
:root[data-readonly] :is(.quick-add, .w-quick, .w-create, .w-empty .btn, .tile--create, .md-toolbar,
  .tasks-main .view-head .btn--primary, .cal-toolbar .btn--primary, .notes-list__head .btn--primary,
  .notes-editor__empty .btn, .side-heading .btn, .note-meta__links .btn, .place-route) { display: none !important; }

/* Dans la feuille mobile, le titre de la feuille suffit. */
.modal .space-menu__label:first-child { display: none; }

/* --- Page de connexion --- */

:root[data-screen="login"] .topbar { display: none; }
.login {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
.login__card {
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px 28px 24px;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow-lg), 0 0 0 0.5px color-mix(in srgb, var(--text) 10%, transparent);
}
.login__brand { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.login__mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent-fill) 75%, #fff), var(--accent-fill));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), var(--shadow-md);
  color: #fff;
}
.login__app { font-size: 15px; font-weight: 650; color: var(--text-2); }
.login__title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: var(--tracking-title); text-align: center; }
.login__sub { margin: 6px 0 0; color: var(--text-2); text-align: center; font-size: 15px; }
.login__form .field__label { font-weight: 600; }
.login__form .input { min-height: 44px; font-size: 16px; }
.login__password { position: relative; display: block; }
.login__password .input { width: 100%; padding-right: 84px; }
.login__reveal {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}
.login__reveal:hover { background: var(--accent-weak); }
.login__submit { min-height: 48px; font-size: 16px; }
.login__extra { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; }
.login__switch, .login__hint { width: 100%; margin: 6px 0 0; text-align: center; font-size: 14px; color: var(--text-2); }
.login__foot { margin: 0; font-size: 12.5px; color: var(--text-2); }
.login__foot .icon { vertical-align: -2px; }

/* Identifiants à transmettre (création de compte par l'administrateur). */
.credentials { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.credentials__list { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; }
.credentials__list dt { color: var(--text-2); font-size: 14px; }
.credentials__list dd { margin: 0; }
.credentials__list code { font-family: var(--font-mono); font-size: 15px; user-select: all; }