/* Page title and its optional actions (#322). */
._pageHeader_wchdb_2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

._title_wchdb_11 {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

._actions_wchdb_17 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
/* A labelled field with its hints and error (#323). The control itself is styled by base.css. */
._field_gs394_2 {
  margin-bottom: var(--space-lg);
}

._field_gs394_2 > input,
._field_gs394_2 > textarea,
._field_gs394_2 > select {
  margin-bottom: var(--space-xs);
}

._hint_gs394_12 {
  margin: 0 0 var(--space-xs);
  color: var(--color-muted-foreground);
  font-size: var(--font-size-secondary);
}

/* Text, not colour alone: the message says what is wrong, and the field gets a thicker
   border (base.css, aria-invalid). */
._error_gs394_20 {
  margin: 0 0 var(--space-xs);
  color: var(--color-destructive);
  font-weight: var(--font-weight-medium);
}
/*
 * Button variants (#323), on top of the base `button` styles (size, radius, focus ring).
 * Every label/surface pair is in tokens.contrast.test.ts. While busy
 * ([aria-disabled="true"], base.css) the button keeps its colours and full contrast.
 */
._button_1mjie_6 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

._primary_1mjie_13 {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}

._primary_1mjie_13:hover {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
}

._secondary_1mjie_24 {
  border-color: var(--color-input-border);
  background: var(--color-card);
  color: var(--color-foreground);
}

._secondary_1mjie_24:hover {
  background: var(--color-muted);
}

._danger_1mjie_34 {
  border-color: var(--color-destructive);
  background: var(--color-destructive);
  color: var(--color-destructive-foreground);
}

._danger_1mjie_34:hover {
  border-color: var(--color-destructive-hover);
  background: var(--color-destructive-hover);
}

/* No hover feedback while busy: the click is ignored. */
._primary_1mjie_13[aria-disabled='true']:hover {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

._secondary_1mjie_24[aria-disabled='true']:hover {
  background: var(--color-card);
}

._danger_1mjie_34[aria-disabled='true']:hover {
  border-color: var(--color-destructive);
  background: var(--color-destructive);
}
/*
 * Alert (#323): text in --color-foreground on the tone's subtle background, a 4px left
 * border in the tone's colour (>= 3:1, tokens.contrast.test.ts). The text prefix, not the
 * colour, carries the meaning.
 */
._alert_1bih3_6 {
  margin: 0 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-left: var(--border-width-accent) solid;
  border-radius: var(--radius-sm);
  color: var(--color-foreground);
}

._danger_1bih3_14 {
  border-left-color: var(--color-destructive);
  background: var(--color-alert-danger-bg);
}

._warning_1bih3_19 {
  border-left-color: var(--color-warning);
  background: var(--color-alert-warning-bg);
}

._info_1bih3_24 {
  border-left-color: var(--color-info);
  background: var(--color-alert-info-bg);
}

._success_1bih3_29 {
  border-left-color: var(--color-success);
  background: var(--color-alert-success-bg);
}
/* A switch and its label on one line (#323); the control itself is styled by base.css. */
._row_evyey_2 {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-sm);
}
/*
 * DataList (#324): one card per item, stacked, readable at 320px (no columns). The
 * actions wrap onto several lines rather than overflow.
 */
._list_1g7mc_5 {
  display: grid;
  gap: var(--space-md);
  margin: 0 0 var(--space-xl);
  padding: 0;
  list-style: none;
}

._item_1g7mc_13 {
  padding: var(--space-lg);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
}

._title_1g7mc_20 {
  margin: 0 0 var(--space-sm);
}

._meta_1g7mc_24 > :last-child {
  margin-bottom: 0;
}

._actions_1g7mc_28 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
}

._actions_1g7mc_28 > * {
  margin: 0;
}
/* ErrorState (#324): « Réessayer » right under its alert. */
._errorState_1xo3z_2 {
  margin: 0 0 var(--space-lg);
}

._errorState_1xo3z_2 > [role='alert'] {
  margin-bottom: var(--space-sm);
}
/*
 * ConfirmDialog (#324): a card in the top layer, capped at the form width and never wider
 * than the viewport minus a gutter (320px reflow). The backdrop dims the inert page.
 */
._dialog_1ebqr_5 {
  width: min(var(--form-max), calc(100vw - 2 * var(--space-lg)));
  max-width: none;
  padding: var(--space-xl);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--shadow-card);
  color: var(--color-foreground);
}

._dialog_1ebqr_5::backdrop {
  background: rgb(0 0 0 / 50%);
}

._title_1ebqr_20 {
  margin-top: 0;
}

._actions_1ebqr_24 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-lg);
}
/*
 * Authenticated shell (#322). Narrow first: banner, then the navigation folded behind
 * "Menu", then the content. From 48rem: the navigation becomes a sidebar and "Menu"
 * disappears. The media query repeats 48rem (custom properties do not work there).
 */
._shell_13tjh_6 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'header'
    'nav'
    'main';
  grid-template-rows: auto auto 1fr;
  min-height: 100vh;
}

/* Skip link: off-screen until focused, then shown top left. */
._skipLink_13tjh_18 {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 10;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-card);
  color: var(--color-link);
  transform: translateY(-200%);
}

._skipLink_13tjh_18:focus {
  transform: none;
}

._header_13tjh_34 {
  grid-area: header;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  padding: var(--space-md) var(--space-xl);
  border-bottom: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-card);
}

._brand_13tjh_46 {
  min-width: 0;
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}

._account_13tjh_52 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  min-width: 0;
}

._accountEmail_13tjh_60 {
  min-width: 0;
  font-size: var(--font-size-secondary);
  overflow-wrap: anywhere;
}

/* Platform banner: dark background, white text, white focus ring. */
._platform_13tjh_67 ._header_13tjh_34 {
  --color-ring: var(--color-primary-foreground);
  border-bottom-color: var(--color-platform-header-bg);
  background: var(--color-platform-header-bg);
  color: var(--color-primary-foreground);
}

/* Buttons inherit their colour (base.css): keep the dark label on their white surface. */
._platform_13tjh_67 ._header_13tjh_34 button {
  color: var(--color-foreground);
}

._nav_13tjh_79 {
  grid-area: nav;
  padding: var(--space-sm) var(--space-xl);
  border-bottom: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-card);
}

._menuButton_13tjh_86 {
  display: inline-flex;
  align-items: center;
}

._navList_13tjh_91 {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

._navListOpen_13tjh_98 {
  display: block;
  margin-top: var(--space-sm);
}

/* Active item: aria-current, background, bar and weight — never colour alone. */
._navLink_13tjh_104 {
  display: flex;
  align-items: center;
  min-height: var(--control-min-height);
  padding: var(--space-sm) var(--space-md);
  border-inline-start: var(--border-width-accent) solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-foreground);
  text-decoration: none;
}

._navLink_13tjh_104:hover {
  background: var(--color-muted);
  text-decoration: underline;
}

._navLink_13tjh_104[aria-current='page'] {
  border-inline-start-color: var(--color-nav-active-fg);
  background: var(--color-nav-active-bg);
  color: var(--color-nav-active-fg);
  font-weight: var(--font-weight-bold);
}

._main_13tjh_127 {
  grid-area: main;
  width: 100%;
  max-width: var(--content-max);
  min-width: 0;
  padding: var(--space-xl);
}

@media (min-width: 48rem) {
  ._shell_13tjh_6 {
    grid-template-columns: 15rem minmax(0, 1fr);
    grid-template-areas:
      'header header'
      'nav main';
    grid-template-rows: auto 1fr;
  }

  ._nav_13tjh_79 {
    padding: var(--space-lg) var(--space-sm);
    border-bottom: none;
    border-inline-end: var(--border-width-hairline) solid var(--color-border);
  }

  ._menuButton_13tjh_86 {
    display: none;
  }

  ._navList_13tjh_91,
  ._navListOpen_13tjh_98 {
    display: block;
    margin-top: 0;
  }
}
/* Unauthenticated screens (#322): one centred card, at most --form-max wide. */
._page_1e0wx_2 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 2rem var(--space-lg);
}

._card_1e0wx_10 {
  width: 100%;
  max-width: var(--form-max);
  padding: var(--space-xl);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--shadow-card);
}
/* A password field and its show/hide toggle (#395): the toggle sits right under the field
   (its hints and error included), then the usual gap before the next field. */
._passwordField_1ngoq_3 {
  margin-bottom: var(--space-lg);
}

._passwordField_1ngoq_3 > :first-child {
  margin-bottom: var(--space-xs);
}
/*
 * ScrollRegion (#342): a long list's own scroll area, only when the viewport can afford it.
 *
 * Bounded from 48em wide (the shell's sidebar breakpoint) AND 40em tall: 768 x 640 CSS
 * px (width x height) at the default font size. A 1280 x 800 desktop at 100% or 125% zoom
 * gets the bounded area; a phone (narrow), a laptop at 200% zoom (400px tall) or anything
 * at 400% zoom (320 x 256) does not, and the page scrolls as usual, so nothing is
 * squeezed into a tiny box (WCAG 1.4.10 reflow). The query is in em: zoom shrinks the
 * CSS viewport, and em also follows the browser's default font size. 60vh leaves the
 * banner, the page title and the controls below the list in view.
 *
 * Its focus ring is the global :focus-visible one (base.css). The padding keeps the
 * focus ring of the controls inside from being clipped at the edges by the overflow.
 */
._region_fgrtl_15 {
  margin-bottom: var(--space-xl);
}

._region_fgrtl_15 > :last-child {
  margin-bottom: 0;
}

@media (min-width: 48em) and (min-height: 40em) {
  ._region_fgrtl_15 {
    /* Containing block of the .visually-hidden (absolute) text inside the items: without
       it, that text escapes the bounded area and stretches the page by the whole list. */
    position: relative;
    max-height: 60vh;
    padding: calc(var(--focus-ring-width) + var(--focus-ring-offset));
    border: var(--border-width-hairline) solid var(--color-border);
    border-radius: var(--radius-md);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
/*
 * Design tokens of the console (#321), light theme only (dark and high contrast: #320).
 * Raw values on :root, named like apps/frontend/src/theme/tokens.ts in kebab-case, so a
 * later tenant branding can override them without touching any component.
 *
 * Every colour pair actually used is checked against WCAG 2.1 AA by
 * tokens.contrast.test.ts: add a pair there for any new combination.
 * - --color-primary (4.40:1 on the canvas) is never used as text: links use --color-link.
 * - --color-destructive is never text on --color-alert-danger-bg (4.39:1): border only.
 * - --color-border is decorative (1.23:1): it never delimits a control on its own, controls
 *   use --color-input-border.
 */
:root {
  /* Brand and text */
  --color-primary: #1976d2;
  --color-primary-hover: #1565c0;
  --color-primary-foreground: #ffffff;
  --color-link: #1565c0;
  --color-foreground: #020817;
  --color-muted-foreground: #475569;

  /* Surfaces */
  --color-background: #f8fafc;
  --color-card: #ffffff;
  --color-muted: #f1f5f9;

  /* Lines and focus */
  --color-border: #e2e8f0;
  --color-input-border: #64748b;
  --color-ring: #1976d2;

  /* Semantic */
  --color-destructive: #d32f2f;
  --color-destructive-hover: #b71c1c;
  --color-destructive-foreground: #ffffff;
  --color-success: #2e7d32;
  --color-warning: #b45309;
  --color-info: #0e7490;
  --color-alert-danger-bg: #fdeded;
  --color-alert-warning-bg: #fff4e5;
  --color-alert-info-bg: #e5f6fd;
  --color-alert-success-bg: #edf7ed;

  /* Navigation and platform header */
  --color-nav-active-bg: #e3f2fd;
  --color-nav-active-fg: #0d47a1;
  --color-platform-header-bg: #0f172a;

  /* Typography */
  --font-family-base: system-ui, sans-serif;
  --font-family-mono: ui-monospace, monospace;
  --font-size-body: 1rem;
  --font-size-secondary: 0.875rem;
  --font-size-h1: 1.5rem;
  --font-size-h2: 1.25rem;
  --font-size-h3: 1.0625rem;
  --line-height-body: 1.5;
  --line-height-heading: 1.25;
  --font-weight-medium: 500;
  --font-weight-bold: 600;

  /* Spacing: the app's 4/8/12/16/24 px ladder */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;

  /* Radius, borders, shadow */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 999rem;
  --border-width-hairline: 1px;
  --border-width-medium: 2px;
  --border-width-accent: 4px;
  --shadow-card: 0 0.0625rem 0.125rem rgb(15 23 42 / 0.08), 0 0.0625rem 0.1875rem rgb(15 23 42 / 0.06);

  /* Controls, focus and layout */
  --control-min-height: 2.75rem;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --content-max: 72rem;
  --form-max: 40rem;
}
/*
 * Base styles of the native elements (#321), on top of tokens.css. Global CSS stops here:
 * components get their own CSS module. Sizes are in rem, except borders and the focus
 * ring. Native elements need no class; the few utility classes screens may use are
 * listed at the end.
 */

/* Light reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  /* Reflow at 320px (WCAG 1.4.10, #322): a long e-mail or token wraps instead of
     scrolling the page sideways. */
  overflow-wrap: break-word;
}

/* The layouts own the page width (#322: content --content-max, public card --form-max);
   a form stays at a readable --form-max inside the wider content. */
form {
  max-width: var(--form-max);
}

/* Headings */
h1,
h2,
h3 {
  margin: var(--space-xl) 0 var(--space-md);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-bold);
}

h1 {
  margin-top: 0;
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

p {
  margin: 0 0 var(--space-md);
}

code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-secondary);
}

/* Links: underlined, so they never rely on colour alone. */
a {
  color: var(--color-link);
  text-decoration: underline;
}

/* Form controls */
label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: var(--font-weight-medium);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

input:not([type='checkbox'], [type='radio']),
select,
textarea {
  display: block;
  width: 100%;
  min-height: var(--control-min-height);
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: var(--border-width-hairline) solid var(--color-input-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
}

input[readonly] {
  background: var(--color-muted);
}

input[aria-invalid='true'],
textarea[aria-invalid='true'] {
  border-color: var(--color-destructive);
  border-width: var(--border-width-medium);
}

button {
  min-height: var(--control-min-height);
  padding: var(--space-sm) var(--space-lg);
  border: var(--border-width-hairline) solid var(--color-input-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

button:hover {
  background: var(--color-muted);
}

/*
 * Switch (native <input type="checkbox" role="switch">), compact on purpose: the visible
 * control is 2.5rem x 1.5rem (at least 24 x 24 px, WCAG 2.5.8), and the pointer target of
 * at least 2.75rem comes from its associated <label>, which is clickable and follows it in
 * every screen. The checked state moves the knob (not colour alone); the unchecked border
 * is --color-input-border, the checked track --color-primary, both at least 3:1.
 */
input[role='switch'] {
  appearance: none;
  flex: none;
  width: 2.5rem;
  height: 1.5rem;
  margin: 0;
  vertical-align: middle;
  border: var(--border-width-medium) solid var(--color-input-border);
  border-radius: var(--radius-full);
  background: radial-gradient(circle closest-side, var(--color-input-border) 70%, transparent 75%) left
      center / 1.25rem 1.25rem no-repeat,
    var(--color-card);
  cursor: pointer;
}

input[role='switch']:checked {
  border-color: var(--color-primary);
  background: radial-gradient(circle closest-side, var(--color-primary-foreground) 70%, transparent 75%) right
      center / 1.25rem 1.25rem no-repeat,
    var(--color-primary);
}

input[role='switch'] + label {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min-height);
  margin: 0;
  padding-inline-start: var(--space-sm);
  vertical-align: middle;
  cursor: pointer;
}

/* Focus: one visible ring on every interactive element. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-ring);
  outline-offset: var(--focus-ring-offset);
}

/* A heading or region focused by script (tabindex="-1") shows no ring on a mouse click. */
[tabindex='-1']:focus:not(:focus-visible) {
  outline: none;
}

/* Saving: aria-disabled (never disabled), full contrast, no opacity. */
[aria-disabled='true'] {
  cursor: not-allowed;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Utility classes (#323): with the components, the only styling a screen may use
 * (components/noScreenCss.test.ts parses this file's top-level classes as the list).
 * - .visually-hidden (above): text for assistive tech only.
 * - .link-standalone: a link standing on its own line (sign-in <-> register), with a
 *   pointer target of at least --control-min-height (2.75rem, ~44px).
 * - .text-secondary: secondary text, smaller and in --color-muted-foreground (AA on the
 *   card, the canvas and a muted surface).
 */
.link-standalone {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min-height);
}

.text-secondary {
  font-size: var(--font-size-secondary);
  color: var(--color-muted-foreground);
}