/* ==============================================================
   Osmose Design System — bundle autonome pour ProgiCup
   Généré depuis _import/DesignSystem (ne pas déployer _import).
   Tokens (couleurs/typo/espacements) + base + composants .osm-*
   ============================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ---- tokens/colors.css ---- */
/* ==========================================================================
   Osmose — Color tokens
   ERP Proginov. Industrial, sober, functional. Neutrals carry the UI;
   blue-500 is the single action color; semantics are signals, not decor.
   ========================================================================== */

:root {
  /* === Brand — bleu institutionnel Proginov (chrome / autorité) === */
  --brand-050: #e7edf4;
  --brand-100: #cedae9;
  --brand-200: #9eb5d3;
  --brand-300: #6d91bc;
  --brand-400: #3d6ca6;
  --brand-500: #0c4790;
  --brand-600: #103a6d;
  --brand-700: #133155;
  --brand-800: #16283d;
  --brand-900: #191f26;

  /* === Blue — bleu d'action / liens / primary === */
  --blue-050: #e6f2fd;
  --blue-100: #cce5fb;
  --blue-200: #99cbf7;
  --blue-300: #66b1f3;
  --blue-400: #3397ef;
  --blue-500: #007deb;
  --blue-600: #085fac;
  --blue-700: #0d4b83;
  --blue-800: #123859;
  --blue-900: #17242f;

  /* === Neutral — structure, bordures, textes === */
  --neutral-025: #f7f7f7;
  --neutral-050: #f2f2f2;
  --neutral-100: #e6e6e6;
  --neutral-200: #cccccc;
  --neutral-300: #b3b3b3;
  --neutral-400: #999999;
  --neutral-500: #808080;
  --neutral-600: #616161;
  --neutral-700: #4d4d4d;
  --neutral-800: #393939;
  --neutral-900: #242424;
  --neutral-1000: #101010;

  /* === Plain === */
  --white: #ffffff;
  --black: #000000;

  /* === Green — succès, validation === */
  --green-050: #ecf7e8;
  --green-100: #d9efd1;
  --green-200: #a0d78d;
  --green-300: #8dcf76;
  --green-400: #67bf49;
  --green-500: #41af1b;
  --green-600: #35821b;
  --green-700: #2d651a;
  --green-800: #26471a;
  --green-900: #1e291a;

  /* === Red — erreurs, alertes critiques, dates dépassées === */
  --red-050: #f9e7e7;
  --red-100: #f3cecf;
  --red-200: #e89da0;
  --red-300: #dc6c70;
  --red-400: #d13b41;
  --red-500: #c50a11;
  --red-600: #920f14;
  --red-700: #701216;
  --red-800: #4d1517;
  --red-900: #2b1819;

  /* === Yellow — avertissements non bloquants === */
  --yellow-050: #fdf6e7;
  --yellow-100: #fbeed0;
  --yellow-200: #f7dca1;
  --yellow-300: #f4cb71;
  --yellow-400: #f0b942;
  --yellow-500: #eca813;
  --yellow-600: #ad7d15;
  --yellow-700: #836116;
  --yellow-800: #594518;
  --yellow-900: #2f2819;

  /* === Orange — warning sémantique (toasts, statuts en attente) === */
  --orange-050: #fdefe7;
  --orange-100: #fbdbc6;
  --orange-200: #f7b88d;
  --orange-300: #f49a5f;
  --orange-400: #f27d33;
  --orange-500: #f0690f;
  --orange-600: #c0530b;
  --orange-700: #8f3e0a;
  --orange-800: #5e2a0c;
  --orange-900: #2f1a10;

  /* === Décoratives — data-viz et catégorisation métier UNIQUEMENT === */
  --sky-500: #06c7ff;
  --sun-500: #ead513;
  --turquoise-500: #048eb6;
  --purple-500: #a00d59;
  --pink-500: #ff4f97;
  --winter-500: #86a2c6;

  /* ======================================================================
     Semantic aliases — PREFER these in product UI over raw palette names.
     ====================================================================== */

  /* Primary action */
  --primary: var(--blue-500);
  --primary-hover: var(--blue-600);
  --primary-pressed: var(--blue-700);
  --primary-disabled: var(--blue-300);
  --on-primary: var(--white);

  /* Surfaces */
  --surface: var(--white);
  --surface-subtle: var(--neutral-025);
  --surface-muted: var(--neutral-050);
  --surface-raised: var(--white);
  --surface-inverse: var(--brand-500);
  --surface-selected: var(--blue-050);

  /* On-surface text */
  --on-surface: var(--neutral-900);
  --on-surface-strong: var(--neutral-1000);
  --on-surface-muted: var(--neutral-600);
  --on-surface-disabled: var(--neutral-400);
  --on-inverse: var(--white);

  /* Borders & dividers */
  --border: var(--neutral-100);
  --border-strong: var(--neutral-200);
  --border-focus: var(--blue-500);
  --divider: var(--neutral-100);

  /* Focus ring */
  --focus-ring: var(--blue-200);

  /* Links */
  --link: var(--blue-500);
  --link-hover: var(--blue-600);

  /* Semantic — success */
  --success: var(--green-500);
  --success-bg: var(--green-050);
  --success-border: var(--green-500);
  --success-text: var(--green-700); /* @kind color */
  --on-success: var(--white);

  /* Semantic — warning */
  --warning: var(--yellow-500);
  --warning-bg: var(--yellow-050);
  --warning-border: var(--yellow-500);
  --warning-text: var(--yellow-700); /* @kind color */
  --on-warning: var(--white);

  /* Semantic — caution (low / attention) */
  --caution: var(--yellow-500);
  --caution-bg: var(--yellow-050);
  --caution-text: var(--yellow-700); /* @kind color */

  /* Semantic — error */
  --error: var(--red-500);
  --error-bg: var(--red-050);
  --error-border: var(--red-500);
  --error-text: var(--red-700); /* @kind color */
  --on-error: var(--white);

  /* Semantic — info */
  --info: var(--blue-500);
  --info-bg: var(--blue-050);
  --info-border: var(--blue-500);
  --info-text: var(--blue-700); /* @kind color */
  --on-info: var(--white);

  /* Overdue date (systemic pattern — text only, no fill) */
  --date-overdue: var(--red-500);
  --date-default: var(--neutral-900);
}

/* ---- tokens/typography.css (sans son @import de police) ---- */
/* ==========================================================================
   Osmose — Typography tokens
   Roboto, one family / four weights. Default body size is 14px (ERP density).
   Inter is the declared fallback. Scale follows a Fluent-like naming.
   ========================================================================== */


:root {
  /* Families */
  --font-sans: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-fallback: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* === Type scale (size / line-height / weight) === */
  --display-size: 68px;       --display-line: 92px;       --display-weight: 500;
  --large-title-size: 40px;   --large-title-line: 52px;   --large-title-weight: 500;
  --title-1-size: 32px;       --title-1-line: 40px;       --title-1-weight: 500;
  --title-2-size: 28px;       --title-2-line: 36px;       --title-2-weight: 500;
  --title-3-size: 24px;       --title-3-line: 32px;       --title-3-weight: 500;
  --subtitle-1-size: 20px;    --subtitle-1-line: 26px;    --subtitle-1-weight: 500;
  --subtitle-2-size: 16px;    --subtitle-2-line: 22px;    --subtitle-2-weight: 500;
  --body-1-size: 14px;        --body-1-line: 20px;        --body-1-weight: 400;
  --caption-1-size: 12px;     --caption-1-line: 16px;     --caption-1-weight: 400;
  --caption-2-size: 10px;     --caption-2-line: 14px;     --caption-2-weight: 400;
}

/* ======================================================================
   Specimen classes — apply directly for consistent text styling.
   ====================================================================== */

.osm-display       { font-family: var(--font-sans); font-size: var(--display-size);     line-height: var(--display-line);     font-weight: 500; letter-spacing: 0; }
.osm-large-title   { font-family: var(--font-sans); font-size: var(--large-title-size); line-height: var(--large-title-line); font-weight: 500; letter-spacing: 0; }
.osm-title-1       { font-family: var(--font-sans); font-size: var(--title-1-size);     line-height: var(--title-1-line);     font-weight: 500; letter-spacing: 0; }
.osm-title-2       { font-family: var(--font-sans); font-size: var(--title-2-size);     line-height: var(--title-2-line);     font-weight: 500; letter-spacing: 0; }
.osm-title-3       { font-family: var(--font-sans); font-size: var(--title-3-size);     line-height: var(--title-3-line);     font-weight: 500; letter-spacing: 0; }
.osm-subtitle-1    { font-family: var(--font-sans); font-size: var(--subtitle-1-size);  line-height: var(--subtitle-1-line);  font-weight: 500; letter-spacing: 0; }
.osm-subtitle-2    { font-family: var(--font-sans); font-size: var(--subtitle-2-size);  line-height: var(--subtitle-2-line);  font-weight: 500; letter-spacing: 0; }
.osm-subtitle-2-stronger { font-family: var(--font-sans); font-size: var(--subtitle-2-size); line-height: var(--subtitle-2-line); font-weight: 700; }
.osm-body-1        { font-family: var(--font-sans); font-size: var(--body-1-size);      line-height: var(--body-1-line);      font-weight: 400; }
.osm-body-1-strong { font-family: var(--font-sans); font-size: var(--body-1-size);      line-height: var(--body-1-line);      font-weight: 500; }
.osm-body-1-stronger { font-family: var(--font-sans); font-size: var(--body-1-size);    line-height: var(--body-1-line);      font-weight: 600; }
.osm-caption-1     { font-family: var(--font-sans); font-size: var(--caption-1-size);   line-height: var(--caption-1-line);   font-weight: 400; }
.osm-caption-1-strong { font-family: var(--font-sans); font-size: var(--caption-1-size); line-height: var(--caption-1-line);  font-weight: 500; }
.osm-caption-1-stronger { font-family: var(--font-sans); font-size: var(--caption-1-size); line-height: var(--caption-1-line); font-weight: 600; }
.osm-caption-2     { font-family: var(--font-sans); font-size: var(--caption-2-size);   line-height: var(--caption-2-line);   font-weight: 400; }
.osm-caption-2-strong { font-family: var(--font-sans); font-size: var(--caption-2-size); line-height: var(--caption-2-line);  font-weight: 500; }

/* ---- tokens/spacing.css ---- */
/* ==========================================================================
   Osmose — Spacing, radius, elevation & motion tokens
   4px base grid, 8px natural step. Flat system: depth via borders + surface
   tones; shadows reserved for floating elements only.
   ========================================================================== */

:root {
  /* === Spacing scale (4px base) === */
  --space-none: 0px;
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* === Corner radius === */
  --radius-none: 0px;
  --radius-sm: 2px;   /* checkboxes */
  --radius-md: 4px;   /* inputs, buttons, selects, tags, cards, cells */
  --radius-lg: 8px;   /* modals, popovers */
  --radius-xl: 12px;
  --radius-full: 9999px; /* counters, avatars, switch track */

  /* === Control sizing (ERP density) === */
  --control-height-compact: 40px;   /* compact control */
  --control-height-standard: 48px;  /* standard control */
  --control-height-dense: 32px;     /* dense inline (toolbar, table inputs) */
  --row-height: 40px;               /* default table row */
  --topbar-height: 48px;
  --siderail-width: 48px;
  --osm-icon-size: 32px;            /* glyph size; components override per size */

  /* === Borders === */
  --border-width: 1px;
  --border-width-accent: 3px;       /* active nav indicator */
  --focus-ring-width: 2px;

  /* === Elevation — floating elements only (no shadow on cards/panels) === */
  --shadow-sm: 0 2px 8px rgba(16, 16, 16, 0.08);   /* popover, dropdown */
  --shadow-md: 0 4px 12px rgba(16, 16, 16, 0.10);  /* context menus */
  --shadow-lg: 0 8px 24px rgba(16, 16, 16, 0.12);  /* modals */
  --overlay-scrim: rgba(16, 16, 16, 0.5);

  /* === Z-index === */
  --z-base: 0;          /* @kind other */
  --z-sticky: 100;      /* @kind other */
  --z-dropdown: 800;    /* @kind other */
  --z-overlay: 1000;    /* @kind other */
  --z-modal: 1100;      /* @kind other */
  --z-toast: 1200;      /* @kind other */
  --z-tooltip: 1300;    /* @kind other */

  /* === Motion — functional only, no decorative animation === */
  --motion-instant: 0ms;    /* @kind other */
  --motion-fast: 150ms;     /* @kind other */
  --motion-medium: 250ms;   /* @kind other */
  --motion-slow: 350ms;     /* @kind other */
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
}

/* ---- tokens/base.css ---- */
/* ==========================================================================
   Osmose — base layer
   Light reset + ERP defaults. Default text is body-1 (14px) on white.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--body-1-size);
  line-height: var(--body-1-line);
  font-weight: var(--weight-regular);
  color: var(--on-surface);
  background-color: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* Visible focus ring — never disable */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 1px;
}

/* Thin macOS-like scrollbar */
.osm-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-300) transparent;
}
.osm-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.osm-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.osm-scroll::-webkit-scrollbar-thumb {
  background-color: var(--neutral-300);
  border-radius: var(--radius-full);
}
.osm-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--neutral-400);
}

/* ---- components/buttons ---- */
/* ==========================================================================
   Osmose — Button & IconButton
   ========================================================================== */

.osm-btn {
  font-family: var(--font-sans);
  font-size: var(--body-1-size);
  font-weight: var(--weight-medium);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background-color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.osm-btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--blue-500);
  outline-offset: 1px;
}

/* Sizes */
.osm-btn--standard { height: 48px; padding: 0 24px; }
.osm-btn--compact  { height: 40px; padding: 0 20px; }
.osm-btn--dense    { height: 32px; padding: 0 12px; font-size: var(--body-1-size); }
.osm-btn--icon-only { padding: 0; aspect-ratio: 1 / 1; }
.osm-btn--standard.osm-btn--icon-only { width: 48px; }
.osm-btn--compact.osm-btn--icon-only  { width: 40px; }
.osm-btn--dense.osm-btn--icon-only     { width: 32px; }
.osm-btn--full { width: 100%; }

/* Per-size glyph sizing — driven by the component's size prop ([data-*] scope) */
[data-osm-size="standard"] { --osm-icon-size: 22px; }
[data-osm-size="compact"]  { --osm-icon-size: 20px; }
[data-osm-size="dense"]    { --osm-icon-size: 18px; }
[data-osm-size="md"]       { --osm-icon-size: 20px; }
[data-osm-size="sm"]       { --osm-icon-size: 18px; }

/* Icon slot — inherits the button's text color, sized by --osm-icon-size */
.osm-btn__icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; color: currentColor; }
.osm-btn__icon > * { width: var(--osm-icon-size); height: var(--osm-icon-size); }

/* Primary */
.osm-btn--primary { background: var(--blue-500); color: var(--white); }
.osm-btn--primary:hover { background: var(--blue-600); }
.osm-btn--primary:active { background: var(--blue-700); }
.osm-btn--primary:disabled { background: var(--blue-300); cursor: not-allowed; }

/* Secondary */
.osm-btn--secondary { background: var(--white); color: var(--blue-500); border-color: var(--neutral-200); }
.osm-btn--secondary:hover { background: var(--neutral-050); border-color: var(--neutral-300); }
.osm-btn--secondary:active { background: var(--neutral-100); }
.osm-btn--secondary:disabled { color: var(--neutral-400); border-color: var(--neutral-100); background: var(--white); cursor: not-allowed; }

/* Tertiary (ghost) — toolbars, repeated row actions */
.osm-btn--tertiary { background: transparent; color: var(--blue-500); }
.osm-btn--tertiary:hover { background: var(--blue-050); }
.osm-btn--tertiary:active { background: var(--blue-100); }
.osm-btn--tertiary:disabled { color: var(--neutral-400); background: transparent; cursor: not-allowed; }

/* Outline */
.osm-btn--outline { background: transparent; color: var(--blue-500); border-color: var(--blue-500); }
.osm-btn--outline:hover { background: var(--blue-050); }
.osm-btn--outline:active { background: var(--blue-100); }
.osm-btn--outline:disabled { color: var(--neutral-400); border-color: var(--neutral-200); background: transparent; cursor: not-allowed; }

/* Destructive */
.osm-btn--destructive { background: var(--red-500); color: var(--white); }
.osm-btn--destructive:hover { background: var(--red-600); }
.osm-btn--destructive:active { background: var(--red-700); }
.osm-btn--destructive:disabled { background: var(--red-200); cursor: not-allowed; }

/* IconButton — bare action affordance (row actions, toggles, handles) */
.osm-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--neutral-600);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 0;
  transition: background-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.osm-icon-btn--sm { width: 24px; height: 24px; }
.osm-icon-btn--md { width: 32px; height: 32px; }
.osm-icon-btn > * { width: var(--osm-icon-size); height: var(--osm-icon-size); flex-shrink: 0; }
.osm-icon-btn:hover { background: var(--neutral-050); color: var(--neutral-900); }
.osm-icon-btn:active { background: var(--neutral-100); }
.osm-icon-btn[aria-pressed="true"],
.osm-icon-btn.is-active { background: var(--blue-050); color: var(--blue-500); }
.osm-icon-btn:focus-visible { outline: var(--focus-ring-width) solid var(--blue-500); outline-offset: 1px; }
.osm-icon-btn:disabled { color: var(--neutral-300); background: transparent; cursor: not-allowed; }

/* ---- components/forms ---- */
/* ==========================================================================
   Osmose — Form controls: Field shell, TextField, TextArea, Select,
   SearchField, Checkbox, Radio, Switch, Label, HelperText
   ========================================================================== */

/* ---- Label ---- */
.osm-label {
  font-family: var(--font-sans);
  font-size: var(--body-1-size);
  line-height: var(--body-1-line);
  font-weight: var(--weight-regular);
  color: var(--neutral-800);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}
.osm-label__required { color: var(--red-500); }
.osm-label__optional { color: var(--on-surface-muted); font-size: var(--caption-1-size); }

/* ---- HelperText ---- */
.osm-helper {
  font-family: var(--font-sans);
  font-size: var(--caption-1-size);
  line-height: var(--caption-1-line);
  color: var(--on-surface-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.osm-helper--error { color: var(--red-500); }
.osm-helper--success { color: var(--green-600); }

/* ---- Field shell (label + control + helper) ---- */
.osm-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-family: var(--font-sans);
}

/* ---- Control (input / select trigger) ---- */
.osm-control {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: 0 var(--space-sm);
  color: var(--on-surface);
  transition: border-color var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
}
.osm-control--compact { height: 40px; }
.osm-control--standard { height: 48px; }
.osm-control:hover { border-color: var(--neutral-300); }
.osm-control:focus-within {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 2px var(--blue-200);
}
.osm-control--error { border-color: var(--red-500); }
.osm-control--error:focus-within { box-shadow: 0 0 0 2px var(--red-200); }
.osm-control--disabled {
  background: var(--neutral-050);
  border-color: var(--neutral-100);
  color: var(--neutral-400);
  cursor: not-allowed;
}

.osm-control__icon { display: inline-flex; flex-shrink: 0; color: var(--neutral-400); }
.osm-control__icon--trailing { color: var(--neutral-600); }

.osm-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--body-1-size);
  line-height: var(--body-1-line);
  color: inherit;
  padding: 0;
}
.osm-input::placeholder { color: var(--neutral-400); }
.osm-input:disabled { cursor: not-allowed; }

/* ---- TextArea ---- */
.osm-textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  font-family: var(--font-sans);
  font-size: var(--body-1-size);
  line-height: var(--body-1-line);
  color: var(--on-surface);
  transition: border-color var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
}
.osm-textarea::placeholder { color: var(--neutral-400); }
.osm-textarea:hover { border-color: var(--neutral-300); }
.osm-textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 2px var(--blue-200); }
.osm-textarea--error { border-color: var(--red-500); }
.osm-textarea:disabled { background: var(--neutral-050); border-color: var(--neutral-100); color: var(--neutral-400); cursor: not-allowed; }

/* ---- Select trigger chevron ---- */
.osm-select__chevron { color: var(--neutral-600); flex-shrink: 0; transition: transform var(--motion-fast) var(--ease-out); }
.osm-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.osm-select__value--placeholder { color: var(--neutral-400); }
.osm-select { position: relative; }
.osm-select__trigger { cursor: pointer; }
.osm-select.is-open .osm-select__chevron { transform: rotate(180deg); }
.osm-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2xs);
  max-height: 280px;
  overflow-y: auto;
}
.osm-select-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--body-1-size);
  color: var(--on-surface);
  cursor: pointer;
}
.osm-select-menu__item:hover { background: var(--neutral-050); }
.osm-select-menu__item.is-selected { background: var(--blue-050); color: var(--blue-600); font-weight: var(--weight-medium); }

/* ---- Checkbox ---- */
.osm-checkbox { display: inline-flex; align-items: center; gap: var(--space-xs); cursor: pointer; font-family: var(--font-sans); font-size: var(--body-1-size); color: var(--on-surface); }
.osm-checkbox__box {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.osm-checkbox__box svg { width: 12px; height: 12px; color: var(--white); opacity: 0; }
.osm-checkbox:hover .osm-checkbox__box { border-color: var(--neutral-400); }
.osm-checkbox.is-checked .osm-checkbox__box,
.osm-checkbox.is-indeterminate .osm-checkbox__box { background: var(--blue-500); border-color: var(--blue-500); }
.osm-checkbox.is-checked .osm-checkbox__box svg { opacity: 1; }
.osm-checkbox.is-indeterminate .osm-checkbox__box::after { content: ""; width: 8px; height: 2px; background: var(--white); border-radius: 1px; }
.osm-checkbox.is-disabled { color: var(--neutral-400); cursor: not-allowed; }
.osm-checkbox.is-disabled .osm-checkbox__box { background: var(--neutral-050); border-color: var(--neutral-200); }

/* ---- Radio ---- */
.osm-radio { display: inline-flex; align-items: center; gap: var(--space-xs); cursor: pointer; font-family: var(--font-sans); font-size: var(--body-1-size); color: var(--on-surface); }
.osm-radio__dot {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-full);
  background: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--motion-fast) var(--ease-out);
}
.osm-radio__dot::after { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--blue-500); transform: scale(0); transition: transform var(--motion-fast) var(--ease-out); }
.osm-radio:hover .osm-radio__dot { border-color: var(--neutral-400); }
.osm-radio.is-checked .osm-radio__dot { border-color: var(--blue-500); }
.osm-radio.is-checked .osm-radio__dot::after { transform: scale(1); }
.osm-radio.is-disabled { color: var(--neutral-400); cursor: not-allowed; }

/* ---- Switch ---- */
.osm-switch { display: inline-flex; align-items: center; gap: var(--space-xs); cursor: pointer; font-family: var(--font-sans); font-size: var(--body-1-size); color: var(--on-surface); }
.osm-switch__track {
  width: 36px; height: 20px; flex-shrink: 0;
  background: var(--neutral-300);
  border-radius: var(--radius-full);
  position: relative;
  transition: background-color var(--motion-fast) var(--ease-out);
}
.osm-switch__thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--white);
  border-radius: var(--radius-full);
  box-shadow: 0 1px 2px rgba(16,16,16,0.2);
  transition: transform var(--motion-fast) var(--ease-out);
}
.osm-switch.is-on .osm-switch__track { background: var(--blue-500); }
.osm-switch.is-on .osm-switch__thumb { transform: translateX(16px); }
.osm-switch.is-disabled { cursor: not-allowed; color: var(--neutral-400); }
.osm-switch.is-disabled .osm-switch__track { background: var(--neutral-200); }

/* ---- components/data-display ---- */
/* ==========================================================================
   Osmose — Tag, Badge, Counter, Avatar
   ========================================================================== */

/* ---- Tag / status badge ---- */
.osm-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  height: 20px;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--caption-1-size);
  line-height: 1;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.osm-tag__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex-shrink: 0; }

/* Solid (status) — the default in lists / tables */
.osm-tag--solid.osm-tag--blue    { background: var(--blue-500);   color: var(--white); }
.osm-tag--solid.osm-tag--brand   { background: var(--brand-500);  color: var(--white); }
.osm-tag--solid.osm-tag--neutral { background: var(--neutral-500); color: var(--white); }
.osm-tag--solid.osm-tag--green   { background: var(--green-500);  color: var(--white); }
.osm-tag--solid.osm-tag--red     { background: var(--red-500);    color: var(--white); }
.osm-tag--solid.osm-tag--orange  { background: var(--orange-500); color: var(--white); }
.osm-tag--solid.osm-tag--yellow  { background: var(--yellow-500); color: var(--neutral-900); }

/* Tonal (moderate) — subtle background, dark text */
.osm-tag--tonal.osm-tag--blue    { background: var(--blue-100);   color: var(--blue-700); }
.osm-tag--tonal.osm-tag--brand   { background: var(--brand-100);  color: var(--brand-700); }
.osm-tag--tonal.osm-tag--neutral { background: var(--neutral-100); color: var(--neutral-700); }
.osm-tag--tonal.osm-tag--green   { background: var(--green-100);  color: var(--green-700); }
.osm-tag--tonal.osm-tag--red     { background: var(--red-100);    color: var(--red-700); }
.osm-tag--tonal.osm-tag--orange  { background: var(--orange-100); color: var(--orange-700); }
.osm-tag--tonal.osm-tag--yellow  { background: var(--yellow-100); color: var(--yellow-700); }

/* Outline */
.osm-tag--outline { background: transparent; border: 1px solid var(--neutral-200); color: var(--neutral-700); }

/* ---- Counter — round count pill ---- */
.osm-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-full);
  background: var(--blue-500);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--caption-1-size);
  font-weight: var(--weight-medium);
  line-height: 1;
}
.osm-counter--neutral { background: var(--neutral-200); color: var(--neutral-800); }
.osm-counter--red { background: var(--red-500); }

/* ---- Badge — dot / count overlay on an icon ---- */
.osm-badge-wrap { position: relative; display: inline-flex; }
.osm-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--red-500);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--weight-medium);
  line-height: 16px;
  text-align: center;
  border: 1.5px solid var(--white);
}
.osm-badge--dot { min-width: 8px; width: 8px; height: 8px; padding: 0; top: 0; right: 0; }

/* ---- Avatar ---- */
.osm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--brand-500);
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;
}
.osm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.osm-avatar--sm { width: 24px; height: 24px; font-size: 11px; }
.osm-avatar--md { width: 32px; height: 32px; font-size: 13px; }
.osm-avatar--lg { width: 40px; height: 40px; font-size: 15px; }
.osm-avatar--square { border-radius: var(--radius-md); }

/* ---- components/feedback ---- */
/* ==========================================================================
   Osmose — Feedback: InlineMessage, Banner, Tooltip, Modal, EmptyState
   ========================================================================== */

/* ---- InlineMessage / Banner ---- */
.osm-message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--body-1-size);
  line-height: var(--body-1-line);
  color: var(--on-surface);
}
.osm-message__icon { flex-shrink: 0; display: inline-flex; margin-top: 1px; }
.osm-message__body { flex: 1; min-width: 0; }
.osm-message__title { font-weight: var(--weight-medium); }
.osm-message__text { color: var(--on-surface-muted); }
.osm-message__close { flex-shrink: 0; }

.osm-message--info    { background: var(--info-bg);    border-color: var(--blue-200); }
.osm-message--info    .osm-message__icon { color: var(--blue-500); }
.osm-message--success { background: var(--success-bg); border-color: var(--green-200); }
.osm-message--success .osm-message__icon { color: var(--green-500); }
.osm-message--warning { background: var(--warning-bg); border-color: var(--orange-200); }
.osm-message--warning .osm-message__icon { color: var(--orange-500); }
.osm-message--error   { background: var(--error-bg);   border-color: var(--red-200); }
.osm-message--error   .osm-message__icon { color: var(--red-500); }

/* Banner — full width, left accent bar, square */
.osm-banner { border-radius: 0; border: none; border-left: 4px solid; padding: var(--space-md) var(--space-lg); }
.osm-banner.osm-message--info    { border-left-color: var(--blue-500); }
.osm-banner.osm-message--success { border-left-color: var(--green-500); }
.osm-banner.osm-message--warning { border-left-color: var(--orange-500); }
.osm-banner.osm-message--error   { border-left-color: var(--red-500); }

/* ---- Tooltip ---- */
.osm-tooltip-wrap { position: relative; display: inline-flex; }
.osm-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-tooltip);
  background: var(--neutral-900);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--caption-1-size);
  line-height: var(--caption-1-line);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-out);
}
.osm-tooltip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--neutral-900);
}
.osm-tooltip-wrap:hover .osm-tooltip,
.osm-tooltip-wrap:focus-within .osm-tooltip { opacity: 1; }

/* ---- Modal / DialogBox ---- */
.osm-overlay {
  position: fixed; inset: 0;
  background: var(--overlay-scrim);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-lg);
}
.osm-modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.osm-modal--lg { max-width: 720px; }
.osm-modal__header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-lg) var(--space-lg) var(--space-sm);
}
.osm-modal__title { font-family: var(--font-sans); font-size: var(--subtitle-1-size); line-height: var(--subtitle-1-line); font-weight: var(--weight-medium); color: var(--on-surface); margin: 0; }
.osm-modal__body { padding: 0 var(--space-lg); overflow-y: auto; font-family: var(--font-sans); font-size: var(--body-1-size); line-height: var(--body-1-line); color: var(--on-surface); }
.osm-modal__footer { display: flex; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-lg); }

/* ---- EmptyState ---- */
.osm-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-md); padding: var(--space-2xl) var(--space-lg);
  font-family: var(--font-sans);
}
.osm-empty__icon { color: var(--neutral-300); }
.osm-empty__title { font-size: var(--subtitle-1-size); font-weight: var(--weight-medium); color: var(--on-surface); }
.osm-empty__text { font-size: var(--body-1-size); color: var(--on-surface-muted); max-width: 360px; }

/* ---- components/navigation ---- */
/* ==========================================================================
   Osmose — Navigation: Tabs, Breadcrumb, TopBar, SideRail
   ========================================================================== */

/* ---- Tabs ---- */
.osm-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); font-family: var(--font-sans); }
.osm-tab {
  appearance: none; border: none; background: transparent; cursor: pointer;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--subtitle-2-size);
  font-weight: var(--weight-medium);
  color: var(--on-surface-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: var(--space-xs);
  transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.osm-tab:hover { color: var(--on-surface); }
.osm-tab.is-active { color: var(--blue-600); border-bottom-color: var(--blue-500); }
.osm-tab:disabled { color: var(--neutral-300); cursor: not-allowed; }

/* ---- Breadcrumb ---- */
.osm-breadcrumb { display: flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-sans); font-size: var(--body-1-size); flex-wrap: wrap; }
.osm-breadcrumb__item { color: var(--blue-500); text-decoration: none; }
.osm-breadcrumb__item:hover { text-decoration: underline; color: var(--blue-600); }
.osm-breadcrumb__item--current { color: var(--neutral-900); pointer-events: none; }
.osm-breadcrumb__sep { color: var(--neutral-400); display: inline-flex; }

/* ---- TopBar ---- */
.osm-topbar {
  height: 48px;
  background: var(--brand-500);
  color: var(--white);
  display: flex; align-items: center; gap: var(--space-md);
  padding: 0 var(--space-md);
  font-family: var(--font-sans);
}
.osm-topbar__brand { display: flex; align-items: center; gap: var(--space-xs); color: var(--white); }
.osm-topbar__title { font-size: var(--subtitle-2-size); font-weight: var(--weight-medium); }
.osm-topbar__spacer { flex: 1; }
.osm-topbar__actions { display: flex; align-items: center; gap: var(--space-xs); }
.osm-topbar__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-md);
  border: none; background: transparent; color: var(--white); cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out);
}
.osm-topbar__btn:hover { background: rgba(255,255,255,0.12); }

/* ---- SideRail ---- */
.osm-siderail {
  width: 48px;
  background: var(--white);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center;
  padding: var(--space-2xs) 0;
}
.osm-siderail__item {
  position: relative;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer;
  color: var(--neutral-600);
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.osm-siderail__item:hover { background: var(--neutral-050); color: var(--neutral-900); }
.osm-siderail__item.is-active { background: var(--blue-050); color: var(--blue-500); }
.osm-siderail__item.is-active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  background: var(--blue-500); border-radius: 0 2px 2px 0;
}

/* ---- components/layout ---- */
/* ==========================================================================
   Osmose — Layout: Card, BlockContainer, KeyValueView, Separator
   Flat: borders + surface tones, never shadows on cards/panels.
   ========================================================================== */

/* ---- Card ---- */
.osm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.osm-card--subtle { background: var(--surface-subtle); }
.osm-card--padded { padding: var(--space-md); }
.osm-card--interactive { cursor: pointer; transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out); }
.osm-card--interactive:hover { border-color: var(--neutral-300); background: var(--neutral-025); }

/* ---- BlockContainer — titled section ---- */
.osm-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.osm-block__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.osm-block__title { font-family: var(--font-sans); font-size: var(--subtitle-2-size); line-height: var(--subtitle-2-line); font-weight: var(--weight-medium); color: var(--on-surface); }
.osm-block__actions { display: flex; align-items: center; gap: var(--space-xs); }
.osm-block__body { padding: var(--space-md); }
.osm-block__body--flush { padding: 0; }

/* ---- KeyValueView ---- */
.osm-kv { font-family: var(--font-sans); display: grid; gap: var(--space-sm); }
.osm-kv__row { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: var(--space-md); align-items: baseline; }
.osm-kv__key { font-size: var(--body-1-size); color: var(--on-surface-muted); }
.osm-kv__value { font-size: var(--body-1-size); color: var(--on-surface); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.osm-kv--rows .osm-kv__row { padding-bottom: var(--space-sm); border-bottom: 1px solid var(--divider); }
.osm-kv--rows .osm-kv__row:last-child { border-bottom: none; padding-bottom: 0; }

/* ---- Separator ---- */
.osm-separator { border: none; border-top: 1px solid var(--divider); margin: 0; }
.osm-separator--vertical { border-top: none; border-left: 1px solid var(--divider); align-self: stretch; }