/* GENERATED by scripts/gen-m3-tokens.js -- do not edit by hand; edit the script and re-run.
 * Material 3 design tokens shared by every Fleet page. Seed #1E2761 (tonal spot scheme), light
 * and dark. Dark follows the device setting; data-theme="light"|"dark" on <html> overrides it.
 * Roles: https://m3.material.io/styles/color/roles  Type: https://m3.material.io/styles/typography/type-scale-tokens
 * Shape: https://m3.material.io/styles/shape/corner-radius-scale  States: https://m3.material.io/foundations/interaction/states
 */
:root {
  color-scheme: light;
  --md-sys-color-primary: #4C5B9A;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #D9E2FF;
  --md-sys-color-on-primary-container: #10144D;
  --md-sys-color-secondary: #565D79;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #D9E2FF;
  --md-sys-color-on-secondary-container: #151A31;
  --md-sys-color-tertiary: #785272;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFD6F8;
  --md-sys-color-on-tertiary-container: #2F0F2C;
  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #F9DEDC;
  --md-sys-color-on-error-container: #410E0B;
  --md-sys-color-surface: #F7F9FF;
  --md-sys-color-on-surface: #1A1B21;
  --md-sys-color-surface-variant: #DDE2F2;
  --md-sys-color-on-surface-variant: #424654;
  --md-sys-color-surface-dim: #D7DAE2;
  --md-sys-color-surface-bright: #F7F9FF;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F1F3FC;
  --md-sys-color-surface-container: #EBEEF6;
  --md-sys-color-surface-container-high: #E5E8F0;
  --md-sys-color-surface-container-highest: #E0E2EA;
  --md-sys-color-outline: #727785;
  --md-sys-color-outline-variant: #C1C6D6;
  --md-sys-color-inverse-surface: #2E3036;
  --md-sys-color-inverse-on-surface: #EEF1F9;
  --md-sys-color-inverse-primary: #B4C5FF;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
  --md-sys-color-success: #006D40;
  --md-sys-color-on-success: #FFFFFF;
  --md-sys-color-success-container: #95F7BD;
  --md-sys-color-on-success-container: #002110;
  --md-sys-color-warning: #835500;
  --md-sys-color-on-warning: #FFFFFF;
  --md-sys-color-warning-container: #FFDDB2;
  --md-sys-color-on-warning-container: #2A1800;

  --fleet-page: var(--md-sys-color-surface-container-low);
  --fleet-card: var(--md-sys-color-surface-container-lowest);
  --fleet-inset: var(--md-sys-color-surface-container);
  --fleet-brand-bar: #1E2761;
  --fleet-on-brand-bar: #FFFFFF;
  --fleet-on-brand-bar-variant: #D9E2FF;

  /* Type scale (sp == px on the web). Font: the platform UI face -- Roboto on Android. */
  --md-ref-typeface: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --md-sys-typescale-display-small-size: 36px;   --md-sys-typescale-display-small-line-height: 44px;
  --md-sys-typescale-headline-large-size: 32px;  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-medium-size: 28px; --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-small-size: 24px;  --md-sys-typescale-headline-small-line-height: 32px;
  --md-sys-typescale-title-large-size: 22px;     --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-medium-size: 16px;    --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-small-size: 14px;     --md-sys-typescale-title-small-line-height: 20px;
  --md-sys-typescale-body-large-size: 16px;      --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-medium-size: 14px;     --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-small-size: 12px;      --md-sys-typescale-body-small-line-height: 16px;
  --md-sys-typescale-label-large-size: 14px;     --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-medium-size: 12px;    --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-small-size: 11px;     --md-sys-typescale-label-small-line-height: 16px;
  --md-sys-typescale-weight-regular: 400;
  --md-sys-typescale-weight-medium: 500;
  --md-sys-typescale-weight-bold: 700;

  /* Shape (corner radius) scale */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-large-increased: 20px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* State layers: an overlay of the content colour at these opacities */
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.10;
  --md-sys-state-pressed-opacity: 0.10;
  --md-sys-state-dragged-opacity: 0.16;

  /* Elevation (M3 prefers tonal surfaces; these are for the few floating elements) */
  --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);

  /* Minimum touch target (Material: 48 x 48dp) */
  --md-sys-touch-target: 48px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --md-sys-color-primary: #B4C5FF;
    --md-sys-color-on-primary: #212B65;
    --md-sys-color-primary-container: #36427F;
    --md-sys-color-on-primary-container: #D9E2FF;
    --md-sys-color-secondary: #BCC6E5;
    --md-sys-color-on-secondary: #292F48;
    --md-sys-color-secondary-container: #3E4660;
    --md-sys-color-on-secondary-container: #D9E2FF;
    --md-sys-color-tertiary: #E5B9DD;
    --md-sys-color-on-tertiary: #462442;
    --md-sys-color-tertiary-container: #5F3B59;
    --md-sys-color-on-tertiary-container: #FFD6F8;
    --md-sys-color-error: #F2B8B5;
    --md-sys-color-on-error: #601410;
    --md-sys-color-error-container: #8C1D18;
    --md-sys-color-on-error-container: #F9DEDC;
    --md-sys-color-surface: #121319;
    --md-sys-color-on-surface: #E0E2EA;
    --md-sys-color-surface-variant: #424654;
    --md-sys-color-on-surface-variant: #C1C6D6;
    --md-sys-color-surface-dim: #121319;
    --md-sys-color-surface-bright: #37393F;
    --md-sys-color-surface-container-lowest: #0C0E13;
    --md-sys-color-surface-container-low: #1A1B21;
    --md-sys-color-surface-container: #1E1F25;
    --md-sys-color-surface-container-high: #282A30;
    --md-sys-color-surface-container-highest: #33353B;
    --md-sys-color-outline: #8C909F;
    --md-sys-color-outline-variant: #424654;
    --md-sys-color-inverse-surface: #E0E2EA;
    --md-sys-color-inverse-on-surface: #2E3036;
    --md-sys-color-inverse-primary: #4C5B9A;
    --md-sys-color-scrim: #000000;
    --md-sys-color-shadow: #000000;
    --md-sys-color-success: #78DAA2;
    --md-sys-color-on-success: #00391F;
    --md-sys-color-success-container: #00522F;
    --md-sys-color-on-success-container: #95F7BD;
    --md-sys-color-warning: #FFB956;
    --md-sys-color-on-warning: #452B00;
    --md-sys-color-warning-container: #633F00;
    --md-sys-color-on-warning-container: #FFDDB2;

    --fleet-page: var(--md-sys-color-surface);
    --fleet-card: var(--md-sys-color-surface-container-low);
    --fleet-inset: var(--md-sys-color-surface-container-high);
    --fleet-brand-bar: var(--md-sys-color-surface-container-high);
    --fleet-on-brand-bar: var(--md-sys-color-on-surface);
    --fleet-on-brand-bar-variant: var(--md-sys-color-on-surface-variant);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --md-sys-color-primary: #B4C5FF;
  --md-sys-color-on-primary: #212B65;
  --md-sys-color-primary-container: #36427F;
  --md-sys-color-on-primary-container: #D9E2FF;
  --md-sys-color-secondary: #BCC6E5;
  --md-sys-color-on-secondary: #292F48;
  --md-sys-color-secondary-container: #3E4660;
  --md-sys-color-on-secondary-container: #D9E2FF;
  --md-sys-color-tertiary: #E5B9DD;
  --md-sys-color-on-tertiary: #462442;
  --md-sys-color-tertiary-container: #5F3B59;
  --md-sys-color-on-tertiary-container: #FFD6F8;
  --md-sys-color-error: #F2B8B5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8C1D18;
  --md-sys-color-on-error-container: #F9DEDC;
  --md-sys-color-surface: #121319;
  --md-sys-color-on-surface: #E0E2EA;
  --md-sys-color-surface-variant: #424654;
  --md-sys-color-on-surface-variant: #C1C6D6;
  --md-sys-color-surface-dim: #121319;
  --md-sys-color-surface-bright: #37393F;
  --md-sys-color-surface-container-lowest: #0C0E13;
  --md-sys-color-surface-container-low: #1A1B21;
  --md-sys-color-surface-container: #1E1F25;
  --md-sys-color-surface-container-high: #282A30;
  --md-sys-color-surface-container-highest: #33353B;
  --md-sys-color-outline: #8C909F;
  --md-sys-color-outline-variant: #424654;
  --md-sys-color-inverse-surface: #E0E2EA;
  --md-sys-color-inverse-on-surface: #2E3036;
  --md-sys-color-inverse-primary: #4C5B9A;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
  --md-sys-color-success: #78DAA2;
  --md-sys-color-on-success: #00391F;
  --md-sys-color-success-container: #00522F;
  --md-sys-color-on-success-container: #95F7BD;
  --md-sys-color-warning: #FFB956;
  --md-sys-color-on-warning: #452B00;
  --md-sys-color-warning-container: #633F00;
  --md-sys-color-on-warning-container: #FFDDB2;

  --fleet-page: var(--md-sys-color-surface);
  --fleet-card: var(--md-sys-color-surface-container-low);
  --fleet-inset: var(--md-sys-color-surface-container-high);
  --fleet-brand-bar: var(--md-sys-color-surface-container-high);
  --fleet-on-brand-bar: var(--md-sys-color-on-surface);
  --fleet-on-brand-bar-variant: var(--md-sys-color-on-surface-variant);
}

/* ---- Shared base ---------------------------------------------------------------------- */
body {
  font-family: var(--md-ref-typeface);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  background: var(--fleet-page);
  color: var(--md-sys-color-on-surface);
}
:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }

/* ---- Snackbar (M3): inverse surface, bottom, 4-10 seconds ------------------------------- */
.md-snackbar {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(16px);
  min-width: min(344px, calc(100% - 32px)); max-width: min(560px, calc(100% - 32px));
  box-sizing: border-box; padding: 14px 16px;
  background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface);
  border-radius: var(--md-sys-shape-corner-extra-small); box-shadow: var(--md-sys-elevation-3);
  font-size: var(--md-sys-typescale-body-medium-size); line-height: var(--md-sys-typescale-body-medium-line-height);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 100000;
}
.md-snackbar.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* ---- Dialogs (M3): 32% scrim, a surface-container-high sheet, extra-large corners ------- */
.md-dialog-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.32); display: flex; align-items: center; justify-content: center; padding: 24px; }
.md-dialog { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); border-radius: var(--md-sys-shape-corner-extra-large); padding: 24px; width: 100%; box-shadow: var(--md-sys-elevation-3); }
.md-dialog h2, .md-dialog h3 { font-size: var(--md-sys-typescale-headline-small-size); line-height: var(--md-sys-typescale-headline-small-line-height); font-weight: var(--md-sys-typescale-weight-regular); color: var(--md-sys-color-on-surface); }
/* The prompt / confirm dialog that replaces window.prompt / window.confirm. */
.md-prompt-scrim { z-index: 500; }
.md-prompt { max-width: 440px; text-align: left; }
.md-prompt-message { white-space: pre-line; font-size: var(--md-sys-typescale-body-large-size); line-height: var(--md-sys-typescale-body-large-line-height); color: var(--md-sys-color-on-surface); }
.md-prompt-input { display: block; width: 100%; min-height: 48px; margin: 16px 0 0 0; padding: 0 16px; box-sizing: border-box;
  border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-extra-small); background: transparent; color: var(--md-sys-color-on-surface);
  font-family: inherit; font-size: var(--md-sys-typescale-body-large-size); }
.md-prompt-input:focus { outline: none; border-color: var(--md-sys-color-primary); box-shadow: inset 0 0 0 1px var(--md-sys-color-primary); }
.md-prompt-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

/* ---- Icons: inline SVG drawn in currentColor, 24dp ------------------------------------- */
.md-icon { width: 24px; height: 24px; flex: 0 0 auto; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.md-icon.small { width: 20px; height: 20px; }