/*
 * Thème du back-office (page de connexion et EasyAdmin) aux couleurs du design
 * system : tokens.css est une copie de docs/design/tokens.css, comme celle du
 * front (frontend/src/styles/tokens.css). Le thème suit data-theme sur <html>,
 * posé par templates/backoffice/_theme_init.html.twig.
 */

/* ------------------------------------------------------------------ Polices */

@font-face { font-family: 'Chakra Petch'; font-weight: 500; font-display: swap; src: url("fonts/chakra-petch-latin-500-normal-nmHGaJK.woff2") format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 600; font-display: swap; src: url("fonts/chakra-petch-latin-600-normal-wMdAHqB.woff2") format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 700; font-display: swap; src: url("fonts/chakra-petch-latin-700-normal-bQR2myt.woff2") format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal-dCzU-sz.woff2") format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal-mSIWrNY.woff2") format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal-pA5FLX3.woff2") format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-latin-500-normal-l4pIovd.woff2") format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-display: swap; src: url("fonts/jetbrains-mono-latin-700-normal-dbwVwue.woff2") format('woff2'); }

/*
 * Alias des tokens, calculés sur <html> : EasyAdmin redéfinit certains noms
 * (--text-muted…) sur <body>, les alias gardent nos valeurs.
 */
:root,
[data-theme] {
  --ctt-bg: var(--bg);
  --ctt-surface: var(--surface);
  --ctt-surface-2: var(--surface-2);
  --ctt-border: var(--border);
  --ctt-border-strong: var(--border-strong);
  --ctt-text: var(--text);
  --ctt-text-muted: var(--text-muted);
  --ctt-primary: var(--primary);
  --ctt-on-primary: var(--on-primary);
  --ctt-secondary: var(--secondary);
  --ctt-secondary-ink: var(--secondary-ink);
  --ctt-secondary-soft: var(--secondary-soft);
  --ctt-accent: var(--accent);
  --ctt-accent-ink: var(--accent-ink);
  --ctt-on-accent: var(--on-accent);
  --ctt-accent-soft: var(--accent-soft);
  --ctt-success: var(--success);
  --ctt-success-ink: var(--success-ink);
  --ctt-success-soft: var(--success-soft);
  --ctt-muted-soft: var(--muted-soft);
  --ctt-shadow-float: var(--shadow-float);
}

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

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

.bo-page {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  box-sizing: border-box;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/24px var(--font-body);
}

.bo-panel {
  width: 100%;
  max-width: 384px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ctt-mark {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: var(--ctt-secondary);
}

.bo-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 20px/24px var(--font-display);
  letter-spacing: 0.1em;
  color: var(--text);
}

.bo-title {
  margin: 0;
  font: 700 28px/36px var(--font-display);
}

.bo-subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}

/* Carte biseautée : contour 1 px par double calque (le clip-path coupe les bordures). */
.bo-card {
  padding: 1px;
  background: var(--border);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.bo-card > form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: var(--surface);
  clip-path: inherit;
}

.bo-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bo-label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.bo-input {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  background: var(--surface);
  color: var(--text);
  font: 400 16px/24px var(--font-body);
}

.bo-input:hover { border-color: var(--text-muted); }

.bo-input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--secondary), inset 0 0 0 4px var(--bg);
}

.bo-button {
  height: 56px;
  border: 0;
  background: var(--primary);
  color: var(--on-primary);
  font: 600 18px/24px var(--font-display);
  cursor: pointer;
  box-shadow: inset 0 -2px 0 var(--primary-edge);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.bo-button:hover { filter: brightness(0.95); }

.bo-button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--secondary), inset 0 0 0 4px var(--bg);
}

.bo-alert {
  margin: 0;
  padding: 12px 14px;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.bo-hint {
  margin: 0;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}

/* -------------------------------------------------------------- EasyAdmin */

body.ea.ea-light-scheme,
body.ea.ea-dark-scheme {
  --font-family-sans-serif: var(--font-body);
  --font-family-base: var(--font-body);
  --font-family-monospace: var(--font-mono);

  --text-color: var(--ctt-text);
  --text-muted: var(--ctt-text-muted);
  --text-primary-color: var(--ctt-text);
  --text-secondary-color: var(--ctt-text-muted);
  --text-tertiary-color: var(--ctt-text-muted);
  --border-color: var(--ctt-border);
  --border-primary-color: var(--ctt-border-strong);
  --border-secondary-color: var(--ctt-border);
  --border-tertiary-color: var(--ctt-border);
  --primary-bg: var(--ctt-surface-2);
  --secondary-bg: var(--ctt-surface);
  --tertiary-bg: var(--ctt-bg);
  --border-radius: 2px;
  --border-radius-sm: 2px;
  --border-radius-lg: 4px;

  --color-primary: var(--ctt-secondary);
  --color-success: var(--ctt-success-ink);
  --color-info: var(--ctt-secondary-ink);
  --color-danger: var(--ctt-accent-ink);
  --link-color: var(--ctt-secondary-ink);
  --link-hover-color: var(--ctt-secondary-ink);
  --link-danger-color: var(--ctt-accent-ink);
  --link-danger-hover-color: var(--ctt-accent-ink);
  --highlight-bg: var(--ctt-secondary-soft);
  --highlight-color: var(--ctt-text);
  --button-focus-outline-color: var(--ctt-secondary);

  --body-bg: var(--ctt-bg);
  --content-bg: var(--ctt-bg);
  --content-panel-bg: var(--ctt-surface);
  --fieldset-bg: var(--ctt-surface);
  --content-top-border-color: var(--ctt-border);
  --content-section-border-color: var(--ctt-border);
  --content-search-input-bg: var(--ctt-surface);
  --content-search-icon-color: var(--ctt-text-muted);

  --sidebar-bg: var(--ctt-surface);
  --sidebar-border-color: var(--ctt-border);
  --sidebar-logo-color: var(--ctt-text);
  --sidebar-menu-color: var(--ctt-text);
  --sidebar-menu-icon-color: var(--ctt-text-muted);
  --sidebar-menu-header-color: var(--ctt-text-muted);
  --sidebar-menu-submenu-color: var(--ctt-text-muted);
  --sidebar-menu-active-item-bg: var(--ctt-secondary-soft);
  --sidebar-menu-active-item-color: var(--ctt-secondary-ink);
  --sidebar-menu-badge-bg: var(--ctt-muted-soft);
  --sidebar-menu-badge-color: var(--ctt-text);
  --sidebar-menu-badge-active-bg: var(--ctt-secondary);
  --sidebar-menu-badge-active-color: var(--ctt-bg);
  --responsive-header-bg: var(--ctt-surface);
  --responsive-header-border-color: var(--ctt-border);
  --responsive-header-logo-color: var(--ctt-text);

  --user-name-color: var(--ctt-text-muted);
  --user-avatar-icon-bg: var(--ctt-surface-2);
  --user-avatar-icon-color: var(--ctt-text-muted);

  --dropdown-bg: var(--ctt-surface);
  --dropdown-color: var(--ctt-text);
  --dropdown-border-color: var(--ctt-border);
  --dropdown-link-color: var(--ctt-text);
  --dropdown-link-hover-bg: var(--ctt-surface-2);
  --dropdown-icon-color: var(--ctt-text-muted);
  --dropdown-toggle-bg: var(--ctt-surface);
  --dropdown-toggle-color: var(--ctt-text);
  --dropdown-toggle-border-color: var(--ctt-border-strong);
  --dropdown-settings-active-item-bg: var(--ctt-secondary-soft);
  --dropdown-settings-active-item-color: var(--ctt-secondary-ink);
  --popover-bg: var(--ctt-surface);
  --popover-border-color: var(--ctt-border);
  --popover-color: var(--ctt-text);
  --modal-bg: var(--ctt-surface);
  --modal-border-color: var(--ctt-border);
  --modal-header-bg: var(--ctt-surface);
  --modal-footer-bg: var(--ctt-surface-2);
  --modal-title-color: var(--ctt-text);

  --table-thead-color: var(--ctt-text-muted);
  --table-cell-color: var(--ctt-text);
  --table-cell-border-color: var(--ctt-border);
  --table-hover-cell-bg: var(--ctt-surface-2);
  --table-selected-cell-bg: var(--ctt-secondary-soft);
  --table-thead-sorted-color: var(--ctt-secondary-ink);
  --table-thead-sorted-marker-color: var(--ctt-secondary-ink);
  --table-thead-marker-color: var(--ctt-text-muted);
  --datalist-border-color: var(--ctt-border);
  --datalist-label-color: var(--ctt-text-muted);
  --datalist-value-color: var(--ctt-text);
  --pagination-color: var(--ctt-text);
  --pagination-active-bg: var(--ctt-secondary-soft);
  --pagination-active-color: var(--ctt-secondary-ink);

  --form-label-color: var(--ctt-text);
  --form-help-color: var(--ctt-text-muted);
  --form-control-bg: var(--ctt-surface);
  --form-control-disabled-bg: var(--ctt-surface-2);
  --form-control-disabled-color: var(--ctt-text-muted);
  --form-input-text-color: var(--ctt-text);
  --form-input-border-color: var(--ctt-border-strong);
  --form-input-hover-border-color: var(--ctt-text-muted);
  --form-input-shadow: none;
  --form-input-hover-shadow: none;
  --form-input-error-border-color: var(--ctt-accent);
  --form-input-error-legend-color: var(--ctt-accent-ink);
  --form-help-error-color: var(--ctt-accent-ink);
  --form-switch-checked-bg: var(--ctt-secondary);
  --form-type-check-input-checked-bg: var(--ctt-secondary);
  --form-global-error-bg: var(--ctt-accent-soft);
  --form-global-error-color: var(--ctt-accent-ink);
  --form-fieldset-border-color: var(--ctt-border);

  /* Un seul bouton jaune par écran : l'action principale (EasyAdmin : « primary »). */
  --button-primary-bg: var(--ctt-primary);
  --button-primary-color: var(--ctt-on-primary);
  --button-primary-icon-color: var(--ctt-on-primary);
  --button-primary-border-color: var(--ctt-primary);
  --button-primary-hover-bg: var(--ctt-primary);
  --button-primary-hover-color: var(--ctt-on-primary);
  --button-primary-hover-border-color: var(--ctt-primary);
  --button-primary-active-bg: var(--ctt-primary);
  --button-primary-active-color: var(--ctt-on-primary);
  --button-primary-active-border-color: var(--ctt-primary);
  --button-primary-box-shadow: none;
  --button-secondary-bg: var(--ctt-surface);
  --button-secondary-color: var(--ctt-text);
  --button-secondary-icon-color: var(--ctt-text-muted);
  --button-secondary-border-color: var(--ctt-border-strong);
  --button-secondary-hover-bg: var(--ctt-surface-2);
  --button-secondary-hover-color: var(--ctt-text);
  --button-secondary-hover-border-color: var(--ctt-border-strong);
  --button-secondary-active-bg: var(--ctt-surface-2);
  --button-secondary-box-shadow: none;
  --button-danger-bg: var(--ctt-accent);
  --button-danger-color: var(--ctt-on-accent);
  --button-danger-icon-color: var(--ctt-on-accent);
  --button-danger-border-color: var(--ctt-accent);
  --button-danger-hover-bg: var(--ctt-accent);
  --button-danger-hover-color: var(--ctt-on-accent);
  --button-danger-active-bg: var(--ctt-accent);
  --button-invisible-color: var(--ctt-text);
  --button-invisible-hover-bg: var(--ctt-surface-2);
  --button-invisible-danger-color: var(--ctt-accent-ink);

  --badge-success-bg: var(--ctt-success-soft);
  --badge-success-color: var(--ctt-success-ink);
  --badge-danger-bg: var(--ctt-accent-soft);
  --badge-danger-color: var(--ctt-accent-ink);
  --badge-info-bg: var(--ctt-secondary-soft);
  --badge-info-color: var(--ctt-secondary-ink);
  --badge-warning-bg: var(--ctt-accent-soft);
  --badge-warning-color: var(--ctt-accent-ink);
  --badge-secondary-bg: var(--ctt-muted-soft);
  --badge-secondary-color: var(--ctt-text-muted);
  --badge-boolean-true-bg: var(--ctt-success-soft);
  --badge-boolean-true-color: var(--ctt-success-ink);
  --badge-boolean-false-bg: var(--ctt-muted-soft);
  --badge-boolean-false-color: var(--ctt-text-muted);

  --alert-success-bg: var(--ctt-success-soft);
  --alert-success-color: var(--ctt-success-ink);
  --alert-success-border-color: transparent;
  --alert-danger-bg: var(--ctt-accent-soft);
  --alert-danger-color: var(--ctt-accent-ink);
  --alert-danger-border-color: transparent;
  --alert-warning-bg: var(--ctt-accent-soft);
  --alert-warning-color: var(--ctt-accent-ink);
  --alert-warning-border-color: transparent;
  --alert-info-bg: var(--ctt-secondary-soft);
  --alert-info-color: var(--ctt-secondary-ink);
  --alert-info-border-color: transparent;

  /* Bootstrap, utilisé par certains gabarits d'EasyAdmin et par les nôtres (tableau de bord). */
  --bs-body-bg: var(--ctt-bg);
  --bs-body-color: var(--ctt-text);
  --bs-border-color: var(--ctt-border);
  --bs-secondary-color: var(--ctt-text-muted);
  --bs-heading-color: var(--ctt-text);
  --bs-card-bg: var(--ctt-surface);
}

body.ea h1,
body.ea .content-header-title .title,
body.ea .main-header .logo {
  font-family: var(--font-display);
}

body.ea .main-header .logo {
  letter-spacing: 0.08em;
}

body.ea .main-header .logo-custom,
body.ea .main-header .logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Tableau de bord : compteurs en cartes, chiffres en mono. */
body.ea .card {
  background: var(--ctt-surface);
  border: 1px solid var(--ctt-border);
  color: var(--ctt-text);
}

body.ea [data-counter] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 32px;
  line-height: 40px;
}

body.ea .text-primary {
  color: var(--ctt-text-muted) !important;
}