/* Contrôles Maze Event, sur le modèle du dashboard MFA, en violet Maze.
   Champs soulignés à trait d’accent, menus déroulants à flèche dessinée, interrupteurs à la place des
   cases à cocher. Boutons et badges « contour + halo » dans l’espace de gestion uniquement. */
:root {
  --ctl-line: var(--accent, #989bfb);
  --ctl-border: #3a4256;
  --ctl-success: var(--green, #76d9ae);
  --ctl-warning: var(--yellow, #e2bf77);
  --ctl-danger: var(--red, #f48b9a);
}

/* Champs texte : fond transparent, souligné, trait violet qui s’étend depuis la gauche au focus. */
:root
  body
  :is(
    input:not([type]),
    input[type="text"],
    input[type="number"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea
  ) {
  --field-line: var(--ctl-line);
  border: 0;
  border-bottom: 1px solid var(--ctl-border);
  border-radius: 0;
  background: linear-gradient(var(--field-line), var(--field-line)) left bottom /
    0 2px no-repeat transparent;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: var(--text);
  transition:
    background-size 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045),
    border-color 0.15s;
}
:root
  body
  :is(
    input:not([type]),
    input[type="text"],
    input[type="number"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea
  ):is(:focus, :focus-visible) {
  outline: none;
  background-size: 100% 2px;
  border-bottom-color: transparent;
}
:root body :is(input, textarea, select):hover:not(:disabled, :focus) {
  border-bottom-color: #566079;
}
:root body :is(input, textarea, select):user-invalid {
  --field-line: var(--ctl-danger);
  border-bottom-color: var(--ctl-danger);
}
:root body :is(input, textarea)::placeholder {
  color: #737a8c;
  opacity: 1;
}
:root body :is(input, textarea, select):disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
:root body .search-box input {
  background-color: transparent;
}

/* Menus déroulants : même champ souligné, flèche dessinée à droite (flèche native masquée). */
:root body select {
  --field-line: var(--ctl-line);
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-bottom: 1px solid var(--ctl-border);
  border-radius: 0;
  padding-right: 34px;
  background:
    linear-gradient(var(--field-line), var(--field-line)) left bottom / 0 2px
      no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23989bfb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E")
      right 12px center / 11px 8px no-repeat,
    transparent;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: var(--text);
  cursor: pointer;
  transition:
    background-size 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045),
    border-color 0.15s;
}
:root body select:is(:focus, :focus-visible) {
  outline: none;
  background-size:
    100% 2px,
    11px 8px;
  border-bottom-color: transparent;
}
:root body select option {
  background: #101520;
  color: var(--text);
}

/* Interrupteur unique (modèle Uiverse) : contour, rond blanc, halo violet une fois coché. */
:root body input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: 3.5em;
  min-width: 3.5em;
  height: 2em;
  min-height: 2em;
  margin: 0;
  padding: 0;
  font-size: 12px;
  vertical-align: middle;
  border: 1px solid #4a4f5e;
  border-radius: 50px;
  background: transparent;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
:root body input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 0.2em;
  bottom: 0.2em;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50px;
  background: #fff;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
:root body input[type="checkbox"]:checked {
  border-color: var(--ctl-line);
  box-shadow: 0 0 1.2em color-mix(in srgb, var(--ctl-line) 80%, transparent);
}
:root body input[type="checkbox"]:checked::after {
  transform: translateX(1.5em);
}
:root body input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ctl-line);
  outline-offset: 3px;
}
.check-field {
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
}

/* Boutons « contour + halo » : fond transparent, contour fin, halo de la couleur d’intention au survol. */
body.dashboard .btn,
dialog.modal .btn {
  --btn-tone: var(--ctl-line);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #dfe1ea;
  box-shadow: none;
  transition:
    border-color 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
body.dashboard .btn.primary,
dialog.modal .btn.primary {
  border-color: var(--ctl-line);
  color: #fff;
}
body.dashboard .btn.danger,
dialog.modal .btn.danger {
  --btn-tone: var(--ctl-danger);
  border-color: color-mix(in srgb, var(--ctl-danger) 60%, transparent);
  color: var(--ctl-danger);
}
body.dashboard .btn:hover:not(:disabled),
dialog.modal .btn:hover:not(:disabled) {
  background: transparent;
  border-color: var(--btn-tone);
  box-shadow: 0 0 12px color-mix(in srgb, var(--btn-tone) 50%, transparent);
  color: #fff;
}
body.dashboard .btn.danger:hover:not(:disabled),
dialog.modal .btn.danger:hover:not(:disabled) {
  color: var(--ctl-danger);
}
body.dashboard .btn:active:not(:disabled),
dialog.modal .btn:active:not(:disabled) {
  background: color-mix(in srgb, var(--btn-tone) 8%, transparent);
}

/* Badges : rectangle fin, contour et texte de la couleur d’état. */
body.dashboard .badge,
dialog.modal .badge {
  --badge-tone: #c3c6ff;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--badge-tone) 60%, transparent);
  border-radius: 3px;
  color: var(--badge-tone);
  letter-spacing: 0.03em;
}
:is(body.dashboard, dialog.modal)
  .badge:is(
    .active,
    .live,
    .confirmed,
    .accepted,
    .received,
    .approved,
    .paid,
    .paid_cash
  ) {
  --badge-tone: var(--ctl-success);
}
:is(body.dashboard, dialog.modal) .badge:is(.pending, .sent, .leave) {
  --badge-tone: var(--ctl-warning);
}
:is(body.dashboard, dialog.modal)
  .badge:is(.cancelled, .declined, .departed, .rejected, .refused) {
  --badge-tone: var(--ctl-danger);
}
:is(body.dashboard, dialog.modal) .badge:is(.draft, .finished, .completed) {
  --badge-tone: #9aa0b3;
}
:is(body.dashboard, dialog.modal) .badge.live {
  box-shadow: 0 0 10px color-mix(in srgb, var(--badge-tone) 45%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  :root body :is(input, textarea, select, .btn),
  :root body input[type="checkbox"]::after {
    transition: none;
  }
}

/* ——— Contacts, services et banque ——— */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.toolbar {
  flex-wrap: wrap;
}
.inline-select select {
  min-width: 190px;
}
.section-title {
  font-size: 17px;
  margin: 0 0 12px;
}
.group-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.duty-pill {
  --pill: #9aa0b3;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--pill) 55%, transparent);
  border-radius: 3px;
  color: var(--pill);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.duty-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.duty-pill.on {
  --pill: var(--ctl-success);
  box-shadow: 0 0 10px color-mix(in srgb, var(--pill) 35%, transparent);
}
.duty-pill.on i {
  animation: duty-pulse 1.8s ease-in-out infinite;
}
.duty-pill small {
  color: var(--muted);
  font-weight: 400;
}
@keyframes duty-pulse {
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .duty-pill.on i {
    animation: none;
  }
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.contact-card {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.contact-card.is-on {
  border-color: color-mix(in srgb, var(--ctl-success) 40%, var(--line));
}
.contact-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.contact-top strong {
  display: block;
  font-size: 15px;
}
.grade-chip {
  display: inline-block;
  margin-top: 4px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contact-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}
.contact-card dl div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.contact-card dt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.contact-card dd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 600;
}
.contact-card dd a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
  text-underline-offset: 3px;
}
.contact-card button.icon-btn.copy {
  width: 30px;
  height: 30px;
}
.amount.in {
  color: var(--ctl-success);
}
.amount.out {
  color: var(--ctl-danger);
}
.tabs {
  display: flex;
  gap: 4px;
  margin: 28px 0 16px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.tabs .tab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 12px 16px;
  font-weight: 600;
  white-space: nowrap;
}
.tabs .tab[aria-selected="true"] {
  border-bottom-color: var(--accent);
  color: var(--text);
}
.tabs .tab:hover {
  color: var(--text);
}
.pager {
  margin-top: 14px;
}
@media (min-width: 1001px) {
  .stats:has(> .stat:nth-child(5)) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .stats:has(> .stat:nth-child(3)):not(:has(> .stat:nth-child(4))) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.contact-card > .duty-pill {
  justify-self: start;
}
.stats:has(> .stat:nth-child(5)) .stat strong {
  font-size: clamp(20px, 1.9vw, 27px);
}
@media (max-width: 600px) {
  .toolbar > select,
  .toolbar > .inline-select,
  .toolbar > .inline-select select {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* Barres de défilement fines partout. */
* {
  scrollbar-width: thin;
  scrollbar-color: #3a4256 transparent;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #3a4256;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}
::-webkit-scrollbar-button {
  display: none;
}

/* Fermeture : une simple croix, sans contour. */
.modal-head [data-close] {
  border: 0;
  background: transparent;
  color: #c6cbdc;
}
.modal-head [data-close]:hover {
  color: #fff;
  background: transparent;
}

/* Photo de profil : rond cliquable, icône d’envoi tant qu’il n’y a pas de photo. */
.avatar-upload {
  display: flex;
  align-items: center;
  gap: 18px;
  cursor: pointer;
}
.avatar-ring {
  flex: none;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border: 1px dashed #5a6380;
  border-radius: 50%;
  color: var(--accent);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.avatar-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-upload:hover .avatar-ring,
.avatar-upload:focus-within .avatar-ring {
  border-color: var(--accent);
  border-style: solid;
  box-shadow: 0 0 16px #989bfb55;
}
.avatar-upload-text {
  display: grid;
  gap: 4px;
}
.avatar-upload-text strong {
  font-size: 17px;
}
.avatar-upload-text small {
  color: var(--muted);
  font-size: 12px;
}
:root body input:disabled {
  opacity: 0.55;
  border-bottom-style: dashed;
}

/* Affiches d’événement dans le dashboard. */
.poster-thumb {
  display: block;
  width: 54px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.poster-field {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.poster-field > img {
  flex: none;
  width: 110px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.poster-field > div {
  flex: 1;
  display: grid;
  gap: 12px;
}
dialog.modal:focus {
  outline: none;
}

/* ——— Dashboard : logo, fond « halo violet » et bandeau photo des pages ——— */
/* Le PNG du logo est carré avec le logo en bande centrale : recadrage sur la bande. */
body.dashboard .sidebar .brand img {
  width: 168px;
  height: 56px;
  margin-left: 8px;
  object-fit: cover;
}
body.dashboard .sidebar {
  background: linear-gradient(180deg, #989bfb12, transparent 45%), #0b0e15;
}
body.dashboard .main-shell {
  min-height: 100dvh;
  background:
    radial-gradient(900px 420px at 88% -8%, #989bfb26, transparent 65%),
    radial-gradient(600px 320px at 10% 105%, #989bfb12, transparent 70%),
    linear-gradient(#ffffff05 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, #ffffff05 1px, transparent 1px) 0 0 / 56px 56px,
    #0d1018;
  background-attachment: fixed;
}
body.dashboard .topbar {
  background: #0d1018b3;
  backdrop-filter: blur(12px);
}
body.dashboard
  :is(.panel, .stat, .activity-card, .moderation-card, .contact-card) {
  background-color: #161b27e0;
  backdrop-filter: blur(6px);
}
.page-band {
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  min-height: 230px;
  margin: -36px calc(-1 * var(--page-gutter)) 28px;
  padding: 40px var(--page-gutter) 30px;
  border-bottom: 1px solid var(--line);
}
.page-band > .arena-backdrop {
  z-index: -2;
  object-position: 60% 45%;
}
.page-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #0a0e1bf2 0%, #0a0e1b99 50%, #0a0e1b40),
    linear-gradient(0deg, #0d1018 0%, transparent 65%);
}
.page-band h1 {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding-right: 0.1em;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: clamp(32px, 3.4vw, 52px);
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.045em;
  line-height: 1.05;
  text-transform: uppercase;
  color: #f7f7ff;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .page-band h1 {
    background: linear-gradient(105deg, #fff 4%, var(--accent) 48%, #fff 96%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.page-band .band-subtitle {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 0;
  max-width: none;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c6cbdc;
}
.page-band .band-subtitle::before {
  content: "";
  flex: none;
  width: 32px;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px #989bfb;
}
/* Action du bandeau : libellé en capitales, icône dans un rond violet. */
.page-band .page-heading-action .btn {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  flex-direction: row-reverse;
  gap: 12px;
}
.page-band .page-heading-action .btn svg {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: 8px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px #989bfb66;
  transition: transform 0.2s;
}
.page-band .page-heading-action .btn:hover {
  color: var(--accent);
  background: none;
  box-shadow: none;
}
.page-band .page-heading-action .btn:hover svg {
  transform: rotate(90deg);
}
@media (max-width: 1000px) {
  .page-band {
    margin-top: -26px;
    min-height: 190px;
  }
}
@media (max-width: 600px) {
  .page-band {
    flex-direction: column;
    align-items: flex-start;
    min-height: 200px;
    padding-bottom: 22px;
  }
  .page-band .band-subtitle {
    font-size: 10px;
    gap: 10px;
  }
  .page-band .page-heading-action,
  .page-band .page-heading-action .btn {
    width: auto;
  }
}
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.duty-pill.busy {
  --pill: #f0a35e;
}

/* Réservations : qui gère quoi et historique des actions. */
.row-actions {
  white-space: nowrap;
  text-align: right;
}
.reservation-state {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.timeline {
  list-style: none;
  margin: 18px 0;
  padding: 0 0 0 18px;
  border-left: 1px solid var(--line);
  display: grid;
  gap: 14px;
}
.timeline li {
  position: relative;
  display: grid;
  gap: 2px;
  font-size: 13px;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: -23px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #0d1018;
  border: 1px solid var(--accent);
}
.timeline li.taken::before {
  background: var(--accent);
  box-shadow: 0 0 8px #989bfb;
}
.timeline li.completed::before {
  border-color: var(--green);
  background: var(--green);
}
.timeline li.cancelled::before {
  border-color: var(--red);
  background: var(--red);
}
.timeline span {
  color: var(--muted);
  font-size: 12px;
}
.timeline em {
  color: #c6cbdc;
  font-size: 12px;
}
.reservation-items {
  margin: 12px 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 13px;
}
.weapon-thumb {
  width: 72px;
  height: 28px;
  object-fit: cover;
  border-radius: 3px;
}
tr.is-muted td {
  opacity: 0.5;
}

/* L’attribut hidden l’emporte toujours sur un display défini par une classe. */
[hidden] {
  display: none !important;
}

/* Mes infos et payes */
.me-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 18px;
  align-items: start;
}
.me-card .range-facts {
  padding: 0 22px 18px;
}
.pay-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  margin: 6px 0 26px;
}
.pay-totals > div {
  display: grid;
  gap: 4px;
}
.pay-totals strong {
  font-size: 22px;
}
.pay-totals small {
  color: var(--muted);
}
@media (max-width: 1000px) {
  .me-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.reservation-flight {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-weight: 600;
}
.reservation-flight svg {
  color: var(--accent, #989bfb);
}
.item-balance {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}
.item-balance div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b0e17;
}
.item-balance strong {
  font-size: 20px;
}
.item-balance small {
  color: var(--muted);
}
.vehicle-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  color: #c6cbdc;
  font-size: 12px;
}
tr.is-selected td {
  background: #989bfb12;
}