/*
 * Тема Aura — та же версия (25.1.10), что и в Jmix-версии: серый фон
 * приложения, белая скруглённая «карточка» контента, меню в панели слева.
 * Правила главного вида и входа перенесены из темы Jmix дословно
 * (main-view.css, login-view.css, jmix-aura/src/components/*.css)
 * с сохранением имён классов jmix-*.
 */

:where(:root),
:where(:host) {
  --aura-contrast-level: 1;

  --aura-accent-color-light: var(--aura-blue);
  --aura-accent-color-dark: var(--aura-blue);

  --aura-accent-color-light-initial: var(--aura-accent-color-light);
  --aura-accent-color-dark-initial: var(--aura-accent-color-dark);

  --aura-background-color-light: oklch(0.95 0.005 248);
  --aura-background-color-dark: oklch(0.2 0.01 260);

  --aura-app-background: var(--aura-background-color);

  --vaadin-focus-ring-color: light-dark(
    oklch(from var(--aura-accent-color-light) min(l, 0.62) c h),
    oklch(from var(--aura-accent-color-dark) max(l, 0.62) c h)
  );
  --vaadin-user-color: var(--aura-blue);
  color: var(--vaadin-text-color);
  background: var(--aura-app-background);
  background-size: 100vw 100vh;
  background-attachment: fixed;
}

@supports (color: hsl(0 0 0)) {
  @scope (:root) {
    :where(:scope) {
      --_bg-alt: light-dark(
        oklch(
          from var(--aura-background-color-light) calc(l + c) min(c, c * 2 - l / 20)
            calc(h + 180 * var(--_vaadin-safari-17-deg, 1) * l * c * 4)
        ),
        oklch(
          from var(--aura-background-color-dark) calc(l + c) min(c, c * 2 - l / 20)
            calc(h + 180 * var(--_vaadin-safari-17-deg, 1) * l * c * 4)
        )
      );

      --_bg-accent: radial-gradient(
        circle at 0% 0%,
        light-dark(
          oklch(from var(--aura-background-color-light) min(1, l + c * 3) min(c, c * 3) h),
          oklch(from var(--aura-background-color-dark) min(1, l + c) clamp(0, c * 1.5, 0.4) h)
        ),
        transparent 30%
      );
      --aura-app-background:
        var(--_bg-accent),
        radial-gradient(circle at 25% 0% in xyz, var(--aura-background-color) 33%, var(--_bg-alt))
          var(--aura-background-color);
    }
  }
}

:where(:root),
:where(:host),
vaadin-app-layout > :not([slot]),
vaadin-avatar,
vaadin-badge,
vaadin-button,
vaadin-upload-button,
vaadin-context-menu-item,
vaadin-confirm-dialog,
vaadin-crud-edit,
vaadin-drawer-toggle,
vaadin-dialog,
vaadin-menu-bar-button,
vaadin-menu-bar-item,
vaadin-message::part(attachment),
vaadin-notification-container,
vaadin-notification-card,
vaadin-notification-card::part(overlay),
vaadin-checkbox::part(checkbox),
vaadin-radio-button::part(radio),
vaadin-side-nav-item::part(content),
vaadin-tab,
vaadin-upload-file,
:where(
  .aura-accent-color,
  .aura-accent-neutral,
  .aura-accent-red,
  .aura-accent-orange,
  .aura-accent-yellow,
  .aura-accent-green,
  .aura-accent-blue,
  .aura-accent-purple,
  .v-info,
  .v-success,
  .v-warning,
  .v-error
) {
  --aura-neutral-light: oklch(
    from var(--aura-background-color-light) calc(0.2 - 0.05 * var(--aura-contrast-level)) calc(c * l * 0.8) h
  );
  --aura-neutral-dark: oklch(
    from var(--aura-background-color-dark) calc(0.9 + 0.1 * var(--aura-contrast-level)) calc(c * l) h
  );
  --aura-neutral: light-dark(var(--aura-neutral-light), var(--aura-neutral-dark));
  --vaadin-text-color: light-dark(var(--aura-neutral-light), var(--aura-neutral-dark));
  --vaadin-text-color-secondary: color-mix(
    in oklch,
    var(--vaadin-text-color) min(95%, 60% + 5% * var(--aura-contrast-level)),
    transparent
  );
  --vaadin-text-color-disabled: color-mix(
    in oklch,
    var(--vaadin-text-color) min(95%, 30% + 3% * var(--aura-contrast-level)),
    transparent
  );
  --_border-color-base: light-dark(
    oklch(from var(--aura-background-color-light) 0.1 c h),
    oklch(from var(--aura-background-color-dark) calc(0.8 + max(0, 0.2 - l) + c / 2) calc(c - l / 4) h)
  );
  --vaadin-border-color: color-mix(
    in srgb,
    var(--_border-color-base) calc(14% + 6% * var(--aura-contrast-level)),
    transparent
  );
  --vaadin-border-color-secondary: light-dark(
    color-mix(in srgb, var(--_border-color-base) max(6%, 5% + 3% * var(--aura-contrast-level)), transparent),
    color-mix(in srgb, var(--_border-color-base) max(8%, 7% + 3% * var(--aura-contrast-level)), transparent)
  );
  --aura-accent-contrast-color-light: oklch(
    from var(--aura-accent-color-light) clamp(0, (0.62 - l) * 1000, 1) 0 0 / clamp(0.8, (0.62 - l) * 1000, 1)
  );
  --aura-accent-contrast-color-dark: oklch(
    from var(--aura-accent-color-dark) clamp(0, (0.62 - l) * 1000, 1) 0 0 / clamp(0.8, (0.62 - l) * 1000, 1)
  );
  --aura-accent-text-color-light: oklch(
    from var(--aura-accent-color-light) min(0.55, 0.35 - 0.05 * var(--aura-contrast-level) + c) calc(c * 0.9) h
  );
  --aura-accent-text-color-dark: oklch(
    from var(--aura-accent-color-dark) max(0.8, 0.9 + 0.1 * var(--aura-contrast-level) - c * 2) calc(c * 0.9) h
  );
  --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
  --aura-accent-contrast-color: light-dark(
    var(--aura-accent-contrast-color-light),
    var(--aura-accent-contrast-color-dark)
  );
  --aura-accent-text-color: light-dark(var(--aura-accent-text-color-light), var(--aura-accent-text-color-dark));
  --_accent-surface-light: color-mix(
    in srgb,
    color-mix(
        in srgb,
        oklch(from var(--aura-accent-color-light) l c h / min(max(c / 0.4, 0), 1))
          calc(23% - 4% * var(--aura-surface-level)),
        var(--aura-surface-color-solid)
      )
      calc(100% * var(--aura-surface-opacity)),
    transparent
  );
  --_accent-surface-dark: color-mix(
    in srgb,
    color-mix(
        in srgb,
        oklch(from var(--aura-accent-color-dark) l c h / min(max(c / 0.4, 0), 1))
          calc(23% - 3% * var(--aura-surface-level)),
        var(--aura-surface-color-solid)
      )
      calc(100% * var(--aura-surface-opacity)),
    transparent
  );
  /* This color is very slightly semi-transparent, depending on the saturation/chroma of the accent color (only an issue in Safari 17). */
  --aura-accent-surface: light-dark(var(--_accent-surface-light), var(--_accent-surface-dark));
  @supports (color: hsl(0 0 0)) {
    /* This removes the semi-transparency */
    --aura-accent-surface: oklch(
      from light-dark(var(--_accent-surface-light), var(--_accent-surface-dark)) l c h / var(--aura-surface-opacity)
    );
  }
  --_accent-border: light-dark(
    oklch(from var(--aura-accent-color-light) 0.8 calc(c * 1.1) h / min(1, c + (1 - l) / 10)),
    oklch(from var(--aura-accent-color-dark) 0.8 calc(c * 1.1) h / min(1, c + (1 - l) / 10))
  );
  --aura-accent-border-color: color-mix(
    in srgb,
    var(--_accent-border) calc(30% - 1% * var(--aura-surface-level) + 1% * var(--aura-contrast-level)),
    var(--vaadin-border-color) 60%
  );
  --_color-base: light-dark(
    oklch(from var(--aura-background-color-light) 0.1 calc(c / 2 + c * (1 - c)) h),
    oklch(from var(--aura-background-color-dark) 1 c h)
  );
  --aura-background-color: light-dark(var(--aura-background-color-light), var(--aura-background-color-dark));
  --vaadin-background-container: color-mix(
    in srgb,
    var(--_color-base) calc(3% + min(3%, 1% * var(--aura-contrast-level))),
    transparent
  );
  --vaadin-background-container-strong: color-mix(
    in srgb,
    var(--_color-base) calc(7% + min(8%, 1.5% * var(--aura-contrast-level))),
    transparent
  );
  accent-color: var(--aura-accent-color);
}

:where(h1, h2, h3, h4, h5, h6) {
  color: var(--vaadin-text-color);
}

:where(a:any-link) {
  color: var(--aura-accent-text-color);
}

:is(#id, .aura-accent-color) {
  --aura-accent-color-light: var(--aura-accent-color-light-initial);
  --aura-accent-color-dark: var(--aura-accent-color-dark-initial);
  --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
}

:is(#id, .aura-accent-neutral, .v-neutral) {
  --aura-accent-color-light: var(--aura-neutral-light);
  --aura-accent-color-dark: var(--aura-neutral-dark);
  --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
}

:is(#id, [theme~='danger'], [theme~='error'], .aura-accent-red, .v-error) {
  --aura-accent-color-light: var(--aura-red);
  --aura-accent-color-dark: var(--aura-red);
  --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
}

:is(#id, [theme~='success'], .aura-accent-green, .v-success) {
  --aura-accent-color-light: var(--aura-green);
  --aura-accent-color-dark: var(--aura-green);
  --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
}

:is(#id, [theme~='warning'], .aura-accent-yellow, .v-warning) {
  --aura-accent-color-light: var(--aura-yellow);
  --aura-accent-color-dark: var(--aura-yellow);
  --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
}

:is(#id, .aura-accent-orange) {
  --aura-accent-color-light: var(--aura-orange);
  --aura-accent-color-dark: var(--aura-orange);
  --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
}

:is(#id, .aura-accent-purple) {
  --aura-accent-color-light: var(--aura-purple);
  --aura-accent-color-dark: var(--aura-purple);
  --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
}

:is(#id, [theme~='info'], .aura-accent-blue, .v-info) {
  --aura-accent-color-light: var(--aura-blue);
  --aura-accent-color-dark: var(--aura-blue);
  --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
}

:where(:root),
:where(:host) {
  --aura-content-color-scheme: inherit;
  --aura-notification-color-scheme: inherit;
}

:where(:root),
:where(:host) {
  --aura-red: oklch(0.59 0.2 25);
  --aura-orange: oklch(0.61 0.35 87);
  --aura-yellow: oklch(0.89 0.3 98);
  --aura-green: oklch(0.6 0.2 155);
  --aura-blue: oklch(0.55 0.2 264);
  --aura-purple: oklch(0.58 0.22 290);

  --aura-red-text: light-dark(
    oklch(from var(--aura-red) min(0.55, 0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h),
    oklch(from var(--aura-red) max(0.8, 0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h)
  );
  --aura-orange-text: light-dark(
    oklch(from var(--aura-orange) min(0.55, 0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h),
    oklch(from var(--aura-orange) max(0.8, 0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h)
  );
  --aura-yellow-text: light-dark(
    oklch(from var(--aura-yellow) min(0.55, 0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h),
    oklch(from var(--aura-yellow) max(0.8, 0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h)
  );
  --aura-green-text: light-dark(
    oklch(from var(--aura-green) min(0.55, 0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h),
    oklch(from var(--aura-green) max(0.8, 0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h)
  );
  --aura-blue-text: light-dark(
    oklch(from var(--aura-blue) min(0.55, 0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h),
    oklch(from var(--aura-blue) max(0.8, 0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h)
  );
  --aura-purple-text: light-dark(
    oklch(from var(--aura-purple) min(0.55, 0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h),
    oklch(from var(--aura-purple) max(0.8, 0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h)
  );
}

:where(:root),
:where(:host) {
  --aura-shadow-color: light-dark(
    oklch(from var(--aura-background-color-light) calc(l - l * 0.8) calc(c / 10) h / 0.2),
    oklch(from var(--aura-background-color-dark) calc(l - l * 0.8) calc(c / 10) h / 0.2)
  );
  --aura-shadow-xs: 0 1px 4px -2px var(--aura-shadow-color);
  --aura-shadow-s: 0 2px 5px -1px var(--aura-shadow-color);
  --aura-shadow-m: 0 8px 16px -3px var(--aura-shadow-color);
}

:where(:root),
:where(:host) {
  --aura-base-size: 16;
  --_base-size-m: var(--aura-base-size);
  --aura-base-radius: 3;
  --vaadin-radius-s: min(0.25lh, round(var(--aura-base-radius) * 1px + 2px, 1px));
  --vaadin-radius-m: round(var(--aura-base-radius) * 2px + 3px, 1px);
  --vaadin-radius-l: round(var(--aura-base-radius) * 1.5px + 10px, 1px);
  --vaadin-icon-stroke-width: 1.75;
}

:where(:root),
:where(:host),
:where([theme]) {
  --vaadin-gap-xs: round(var(--aura-base-size) * 0.25 * 1px, 1px);
  --vaadin-gap-s: round(var(--aura-base-size) * 0.5 * 1px, 1px);
  --vaadin-gap-m: round(var(--aura-base-size) * 0.75 * 1px, 1px);
  --vaadin-gap-l: round(var(--aura-base-size) * 1px, 1px);
  --vaadin-gap-xl: round(var(--aura-base-size) * 1.5 * 1px, 1px);

  --vaadin-padding-block-container: round(var(--vaadin-padding-s) / 1.4, 1px);
  --vaadin-padding-inline-container: var(--vaadin-padding-s);

  --vaadin-padding-xs: round(var(--aura-base-size) * 0.25 * 1px, 1px);
  --vaadin-padding-s: round(var(--aura-base-size) * 0.5 * 1px, 1px);
  --vaadin-padding-m: round(var(--aura-base-size) * 0.75 * 1px, 1px);
  --vaadin-padding-l: round(var(--aura-base-size) * 1px, 1px);
  --vaadin-padding-xl: round(var(--aura-base-size) * 1.5 * 1px, 1px);

  --_base-size-xs: round(var(--_base-size-m) * 0.75, 1);
  --_base-size-s: round(var(--_base-size-m) * 0.875, 1);
  --_base-size-l: round(var(--_base-size-m) * 1.125, 1);
  --_base-size-xl: round(var(--_base-size-m) * 1.25, 1);
}

@media (pointer: coarse) {
  :where(:root),
  :where(:host) {
    --aura-base-size: 18;
  }
}

[theme~='xsmall'] {
  --aura-base-size: var(--_base-size-xs);
}

[theme~='small'] {
  --aura-base-size: var(--_base-size-s);
}

[theme~='medium'] {
  --aura-base-size: var(--_base-size-m);
}

[theme~='large'] {
  --aura-base-size: var(--_base-size-l);
}

[theme~='xlarge'] {
  --aura-base-size: var(--_base-size-xl);
}

:where(:root),
:where(:host) {
  --aura-surface-level: 1;
}

/* List all elements that are surfaces */
:root,
:host,
.aura-surface,
.aura-surface-solid,
vaadin-accordion-panel[theme~='filled'],
vaadin-app-layout,
vaadin-app-layout::part(navbar),
vaadin-app-layout::part(drawer),
vaadin-button,
vaadin-upload-button,
vaadin-card,
vaadin-checkbox::part(checkbox),
vaadin-details[theme~='filled'],
vaadin-dashboard-widget,
vaadin-grid,
vaadin-grid-pro,
vaadin-master-detail-layout::part(detail),
vaadin-menu-bar-button,
vaadin-message::part(attachment),
vaadin-message-input,
vaadin-radio-button::part(radio),
vaadin-range-slider,
vaadin-rich-text-editor,
vaadin-side-nav-item::part(content),
vaadin-slider,
vaadin-tab,
vaadin-tabs,
vaadin-upload,
vaadin-upload-file,
::part(input-field),
::part(overlay),
vaadin-confirm-dialog::part(overlay),
vaadin-dialog::part(overlay),
vaadin-login-overlay::part(overlay),
vaadin-crud-dialog::part(overlay) {
  --aura-surface-opacity: 0.5;

  --aura-surface-color-solid: light-dark(
    oklch(
      from var(--aura-background-color-light) min(1, l + ((1 - l) / 2 + 0.04) * var(--aura-surface-level))
        clamp(0, c - (c / 3 + (l / 1000)) * var(--aura-surface-level), c) h
    ),
    oklch(
      from var(--aura-background-color-dark)
        calc(
          max(0.03, l) + 0.03 * var(--aura-surface-level) + max(0, 0.2 - max(0.03, l)) *
            (1.1 - 0.06 * var(--aura-surface-level))
        )
        clamp(0, c * (1 + l), 0.2) h
    )
  );

  --aura-surface-color: color-mix(
    in oklab,
    var(--aura-surface-color-solid) calc(100% * var(--aura-surface-opacity)),
    transparent
  );
  --vaadin-background-color: var(--aura-surface-color-solid);
}

.aura-surface {
  background: var(--aura-surface-color) padding-box;
}

.aura-surface-solid {
  --aura-surface-opacity: 1;
  background: var(--aura-surface-color-solid) padding-box;
}

/*
Copyright 2022 The Instrument Sans Project Authors (https://github.com/Instrument/instrument-sans)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is included in the LICENSE.txt file, and is also available with a FAQ at: https://openfontlicense.org
*/
@font-face {
  font-family: 'Instrument Sans';
  src: url(/static/build/assets/InstrumentSans-C02vnGmI.woff2) format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 400 700;
}
:where(:root),
:where(:host) {
  --aura-font-family-system: system-ui, ui-sans-serif, sans-serif;
  --aura-font-family-instrument-sans: 'Instrument Sans', var(--aura-font-family-system);

  --aura-font-family: var(--aura-font-family-instrument-sans);
  --vaadin-icon-baseline-font-family: var(--aura-font-family);

  --aura-base-font-size: 14;
  --_base-font-size-m: var(--aura-base-font-size);
  --aura-base-line-height: 1.4;

  --aura-font-weight-regular: 400;
  --aura-font-weight-medium: 500;
  --aura-font-weight-semibold: 600;
}

@media (pointer: coarse) {
  :where(:root),
  :where(:host) {
    --vaadin-input-field-value-font-size: max(16px, var(--aura-font-size-m));
  }
}

@supports not (-webkit-touch-callout: none) {
  @media (pointer: coarse) {
    /* Android optimizations */
  }
}

@supports (-webkit-touch-callout: none) {
  @media (pointer: coarse) {
    :where(:root),
    :where(:host) {
      /* iOS/iPadOS optimizations */

      /* Support iOS dynamic text size */
      font: -apple-system-body;
    }
  }
}

:where(:root),
:where(:host),
:where([theme]) {
  --aura-font-size-xs: clamp(0.625rem, round(var(--aura-font-size-m) * 0.75, 0.0625rem), 0.8125rem);
  --aura-font-size-s: round((var(--aura-font-size-m) + var(--aura-font-size-xs)) / 2, 0.0625rem);
  --aura-font-size-m: round(var(--aura-base-font-size) / 16 * 1rem, 0.0625rem);
  --aura-font-size-l: round(var(--aura-font-size-m) * 1.125, 0.0625rem);
  --aura-font-size-xl: round(var(--aura-font-size-l) * 1.125, 0.0625rem);

  --_base-font-size-xs: clamp(10, round(var(--_base-font-size-m) * 0.75, 1), 13);
  --_base-font-size-s: round((var(--_base-font-size-m) + var(--_base-font-size-xs)) / 2, 1);
  --_base-font-size-l: round(var(--_base-font-size-m) * 1.125, 1);
  --_base-font-size-xl: round(var(--_base-font-size-l) * 1.125, 1);

  --aura-line-height-xs: round(var(--aura-font-size-xs) * var(--aura-base-line-height), 0.125rem);
  --aura-line-height-s: round(var(--aura-font-size-s) * var(--aura-base-line-height), 0.125rem);
  --aura-line-height-m: round(var(--aura-font-size-m) * var(--aura-base-line-height), 0.125rem);
  --aura-line-height-l: round(var(--aura-font-size-l) * var(--aura-base-line-height), 0.125rem);
  --aura-line-height-xl: round(var(--aura-font-size-xl) * var(--aura-base-line-height), 0.125rem);
}

:where(body),
:where(:host) {
  font-family: var(--aura-font-family);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--aura-font-weight-regular);

  /* Set to auto to disable grayscale/anti-aliased font smoothing (and use default sub-pixel anti-aliasing) */
  -webkit-font-smoothing: var(--aura-font-smoothing, antialiased);
  -moz-osx-font-smoothing: var(--aura-font-smoothing, grayscale);

  /* We assume apps are built with responsive layouting in mind */
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

:where(body),
:where(:host),
:where([theme]:not(html)) {
  font-size: var(--aura-font-size-m);
  line-height: var(--aura-line-height-m);
}

[theme~='xsmall'] {
  --aura-base-font-size: var(--_base-font-size-xs);
}

[theme~='small'] {
  --aura-base-font-size: var(--_base-font-size-s);
}

[theme~='medium'] {
  --aura-base-font-size: var(--_base-font-size-m);
}

[theme~='large'] {
  --aura-base-font-size: var(--_base-font-size-l);
}

[theme~='xlarge'] {
  --aura-base-font-size: var(--_base-font-size-xl);
}

:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
  margin: 0;
  font-weight: var(--aura-font-weight-semibold);
}

:where(h1) {
  font-size: round(var(--aura-font-size-xl) * 1.75, 0.0625rem);
  line-height: round(var(--aura-line-height-xl) * 1.25, 0.125rem);
}

:where(h2) {
  font-size: round(var(--aura-font-size-xl) * 1.25, 0.0625rem);
  line-height: round(var(--aura-line-height-xl) * 1.125, 0.125rem);
}

:where(h3) {
  font-size: var(--aura-font-size-xl);
  line-height: var(--aura-line-height-xl);
}

:where(h4) {
  font-size: var(--aura-font-size-l);
  line-height: var(--aura-line-height-l);
}

:where(h5) {
  font-size: var(--aura-font-size-m);
  line-height: var(--aura-line-height-m);
}

:where(h6) {
  font-size: var(--aura-font-size-s);
  line-height: var(--aura-line-height-s);
}

:where(:root),
:where(:host) {
  --vaadin-accordion-heading-gap: var(--vaadin-gap-xs);
  --vaadin-details-summary-gap: var(--vaadin-gap-xs);
}

:is(vaadin-details, vaadin-accordion-panel):not([theme~='no-padding'])::part(content) {
  padding: var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container);
  padding-top: 0;
}

vaadin-details:not([theme~='no-padding'], [theme~='reverse'])::part(content) {
  margin-inline-start: calc(var(--vaadin-icon-size, 1lh) + var(--vaadin-details-summary-gap));
}

vaadin-accordion-panel:not([theme~='no-padding'], [theme~='reverse'])::part(content) {
  margin-inline-start: calc(var(--vaadin-icon-size, 1lh) + var(--vaadin-accordion-heading-gap));
}

:is(vaadin-details, vaadin-accordion-panel)[theme~='reverse'] {
  > [slot='summary']::part(content) {
    width: 100%;
  }

  > [slot='summary']::part(toggle) {
    order: 1;
    margin-inline-start: auto;
  }
}

:is(vaadin-details, vaadin-accordion-panel)[theme~='filled'] {
  background: var(--aura-surface-color) padding-box;
  border-radius: var(--vaadin-radius-m);
  border: 1px solid var(--vaadin-border-color-secondary);

  &:has(+ :is(vaadin-details, vaadin-accordion-panel)[theme~='filled']) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  & + :is(vaadin-details, vaadin-accordion-panel)[theme~='filled'] {
    margin-top: -1px;
    border-top-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

:where(:root),
:where(:host) {
  --aura-app-layout-inset: 1.5vmin;
  --aura-app-layout-radius: var(--vaadin-radius-l);
  --aura-app-layout-border-width: 1px;
  --vaadin-app-layout-navbar-padding-top: max(var(--aura-app-layout-inset), var(--vaadin-padding-s));
  --vaadin-app-layout-navbar-padding-inline-start: max(var(--aura-app-layout-inset), var(--vaadin-padding-s));
  --vaadin-app-layout-navbar-padding-inline-end: max(var(--aura-app-layout-inset), var(--vaadin-padding-s));
}

/* Aligned with App Layout overlay breakpoint */
@media (width <= 800px), (height <= 600px) {
  :where(:root),
  :where(:host) {
    --aura-app-layout-inset: 0px !important;
    --aura-app-layout-border-width: 0px;
  }
}

vaadin-app-layout {
  --_app-layout-radius: clamp(0px, var(--aura-app-layout-radius), var(--aura-app-layout-inset) * 100);
  padding-bottom: var(--aura-app-layout-inset);
  padding-inline-end: var(--aura-app-layout-inset);
  padding-top: max(var(--aura-app-layout-inset), var(--_vaadin-app-layout-navbar-offset-size));
}

vaadin-app-layout[overlay]::part(drawer) {
  background: var(--vaadin-app-layout-drawer-background, var(--aura-surface-color));
  --aura-surface-opacity: var(--aura-overlay-surface-opacity);
  -webkit-backdrop-filter: var(--aura-overlay-backdrop-filter);
  backdrop-filter: var(--aura-overlay-backdrop-filter);
}

vaadin-app-layout:is([overlay], :not([drawer-opened])),
vaadin-app-layout:not([has-drawer]) {
  padding-inline-start: var(--aura-app-layout-inset);
}

vaadin-app-layout::part(navbar) {
  background: var(--vaadin-app-layout-navbar-background, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

vaadin-app-layout:not([overlay])::part(drawer) {
  padding-block: var(--aura-app-layout-inset);
  padding-inline: max(0px, var(--aura-app-layout-inset) - var(--vaadin-padding-s));
}

vaadin-app-layout[has-navbar]::part(drawer) {
  padding-top: var(--safe-area-inset-top);
}

vaadin-app-layout > vaadin-scroller[slot='drawer'] {
  --vaadin-scroller-padding-inline: var(--vaadin-padding-m);
  --vaadin-scroller-padding-block: var(--vaadin-padding-s);
  scrollbar-width: thin;
}

vaadin-app-layout > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
  color-scheme: var(--aura-content-color-scheme);
  color: var(--vaadin-text-color);
  background: linear-gradient(var(--aura-surface-color), var(--aura-surface-color)), var(--aura-app-background);
  background-clip: padding-box;
  background-origin: border-box;
  min-height: 100%;
  box-sizing: border-box;
  border-radius: var(--_app-layout-radius);
  border: var(--aura-app-layout-border-width) solid var(--vaadin-border-color-secondary);
  border-block-width: min(var(--aura-app-layout-inset), var(--aura-app-layout-border-width));
  border-inline-width: min(var(--aura-app-layout-inset), var(--aura-app-layout-border-width));
}

vaadin-app-layout > vaadin-master-detail-layout:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
  margin-inline: calc(var(--safe-area-inset-left) * -1) calc(var(--safe-area-inset-right) * -1);
  padding-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);
  max-width: calc(100% + var(--safe-area-inset-left) + var(--safe-area-inset-right));
  margin-block: calc(var(--safe-area-inset-top) * -1) calc(var(--safe-area-inset-bottom) * -1);
  padding-block: var(--safe-area-inset-top) var(--safe-area-inset-bottom);
  height: calc(100% + var(--safe-area-inset-top) + var(--safe-area-inset-bottom));
  max-height: calc(100% + var(--safe-area-inset-top) + var(--safe-area-inset-bottom));

  &::part(detail) {
    padding-top: var(--safe-area-inset-top);
    padding-bottom: var(--safe-area-inset-bottom);
  }

  &:dir(ltr)::part(detail) {
    padding-right: var(--safe-area-inset-right);
  }

  &:dir(rtl)::part(detail) {
    padding-left: var(--safe-area-inset-left);
  }

  &[stack]::part(detail) {
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
  }

  & > vaadin-master-detail-layout,
  &:not([drawer])::part(detail) {
    border-start-end-radius: var(--_app-layout-radius);
    border-end-end-radius: var(--_app-layout-radius);
  }

  &::part(backdrop) {
    border-radius: calc(var(--_app-layout-radius) - var(--aura-app-layout-border-width));
  }

  &:is([drawer][has-detail]) {
    border-color: light-dark(var(--vaadin-border-color), var(--vaadin-border-color-secondary));
  }
}

vaadin-app-layout[has-drawer][drawer-opened]:not([overlay])
  > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
  border-inline-start-width: var(--aura-app-layout-border-width);
}

vaadin-app-layout[has-navbar][has-drawer][drawer-opened]:not([overlay])
  > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
  border-start-start-radius: var(--aura-app-layout-radius);
}

vaadin-app-layout[has-navbar] > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
  border-top-width: var(--aura-app-layout-border-width);
}

vaadin-drawer-toggle {
  --aura-accent-color-light: var(--aura-neutral);
  --aura-accent-color-dark: var(--aura-neutral);
}

:where(:root),
:where(:host) {
  --vaadin-avatar-border-color: var(--aura-accent-border-color);
  --vaadin-avatar-font-weight: var(--aura-font-weight-medium);
  --vaadin-avatar-group-gap: 0px;
  --vaadin-avatar-group-overlap: 6px;
}

vaadin-avatar {
  font-size: var(--vaadin-avatar-font-size, 16px);
  color: var(--vaadin-avatar-text-color, var(--aura-accent-text-color));
  --_shade: color-mix(in srgb, var(--vaadin-border-color) 20%, transparent);
  background: var(
    --vaadin-avatar-background,
    linear-gradient(light-dark(transparent, var(--_shade)), transparent 50%, light-dark(var(--_shade), transparent)),
    var(--aura-accent-surface)
  );
  background-clip: content-box;
}

vaadin-avatar:where([has-color-index]) {
  --aura-accent-color-light: var(--vaadin-avatar-user-color);
  --aura-accent-color-dark: var(--vaadin-avatar-user-color);
  --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
  --vaadin-avatar-border-color: var(--aura-accent-border-color);
  --vaadin-avatar-border-width: 1px;
}

vaadin-avatar[img][has-color-index] {
  --vaadin-avatar-border-color: var(--aura-accent-color);
  --vaadin-avatar-border-width: 2px;
}

vaadin-avatar[theme~='filled'] {
  background: var(--aura-accent-color) content-box;
  color: var(--aura-accent-contrast-color);
}

vaadin-avatar-group[theme~='filled'] {
  --vaadin-avatar-group-gap: 2px;
  --vaadin-avatar-group-overlap: 8px;
}

vaadin-badge {
  color: var(--vaadin-badge-text-color, var(--aura-accent-text-color));
  background: var(--vaadin-badge-background, var(--aura-accent-surface) padding-box);
  border-color: var(--vaadin-badge-border-color, var(--aura-accent-border-color));
  font-size: var(--vaadin-badge-font-size, var(--aura-font-size-s));
  --aura-surface-level: 1;
}

vaadin-badge:is([theme~='filled'], [theme~='dot']) {
  background: var(--aura-accent-color);
  color: var(--aura-accent-contrast-color);
}

/* Inside filled component variants, increase the opacity of default badge variants so that they retain their color */
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'] > *,
vaadin-tabs[theme~='filled'] > vaadin-tab[selected] > :not([slot='tooltip']),
vaadin-side-nav[theme~='filled'] > vaadin-side-nav-item[current] > :not([slot='children']):not([slot='tooltip']),
:is(
    vaadin-combo-box-item,
    vaadin-context-menu-item,
    vaadin-item,
    vaadin-menu-bar-item,
    vaadin-multi-select-combo-box-item,
    vaadin-select-item[role]
  )[theme~='filled']:not([disabled], [aria-disabled='true']):hover
  > vaadin-badge {
  --vaadin-icon-color: currentColor;
  --aura-surface-opacity: 1;
  --aura-surface-level: 3;

  /* Badges that are not explicitly colored (i.e. default/inherited accent color and neutral accent color) inherit their color from the parent container */
  &:not(
    .aura-accent-color,
    .aura-accent-red,
    .aura-accent-orange,
    .aura-accent-yellow,
    .aura-accent-green,
    .aura-accent-blue,
    .aura-accent-purple,
    [theme~='info'],
    [theme~='success'],
    [theme~='warning'],
    [theme~='error']
  ) {
    --aura-surface-opacity: 0.5;
    --aura-surface-level: 1;
    --aura-accent-text-color: currentColor;
    --aura-accent-border-color: color-mix(in srgb, currentColor 30%, transparent);
    --aura-accent-surface: color-mix(in srgb, currentColor 10%, transparent);

    /* Invert the colors of filled, non-explicitly colored badges */
    &[theme~='filled'] {
      background: var(--aura-accent-contrast-color);
      color: var(--aura-accent-color);
      border-color: transparent;
    }
  }
}
:where(:root),
:where(:host) {
  --vaadin-button-shadow: var(--aura-shadow-xs);
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit) {
  transition: scale 180ms;
  position: relative;
  --_background: var(--aura-accent-surface) padding-box;
  color: var(--vaadin-button-text-color, var(--aura-accent-text-color));
}

vaadin-drawer-toggle[theme~='tertiary']::part(icon) {
  opacity: 0.6;
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(
  :not([theme~='tertiary'])
) {
  --aura-surface-level: 4;
  --aura-surface-opacity: 0.5;
  box-shadow: var(--vaadin-button-shadow);
}

/* prettier-ignore */
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not([theme~='primary'], [theme~='tertiary']) {
  background: var(--vaadin-button-background, var(--_background));
  border-color: var(--vaadin-button-border-color, var(--aura-accent-border-color));
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(
  :not([theme~='primary'])
) {
  outline-offset: calc(var(--vaadin-button-border-width, 1px) * -1);
}

/*
Increase padding, but only for buttons that don't have an icon in the default slot.
Buttons that place an icon in the default slot are assumed to be icon-only buttons.
*/
/* prettier-ignore */
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-crud-edit):not(:has(> :is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar):not([slot]))) {
  --vaadin-button-padding: var(--vaadin-padding-block-container)
    var(--vaadin-padding-m);
}

/* Decrease padding when an icon is placed in the prefix or suffix slot */
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button):has(
  > [slot='prefix']:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar)
) {
  padding-inline-start: var(--vaadin-padding-s);
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button):has(
  > [slot='suffix']:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar)
),
vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
  padding-inline-end: var(--vaadin-padding-s);
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(
  [theme~='primary']
) {
  outline-offset: 2px;
  --vaadin-button-font-weight: var(--aura-font-weight-semibold);
  --vaadin-button-text-color: var(--aura-accent-contrast-color);
  --vaadin-button-background: var(--aura-accent-color);
  --vaadin-button-border-color: var(--vaadin-border-color-secondary);
  --vaadin-button-shadow: var(--aura-shadow-s);
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button)[disabled][theme~='primary']::part(label) {
  color: color-mix(in srgb, currentColor 50%, transparent);
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not(
    [disabled]
  )::before {
  content: '';
  position: absolute;
  inset: calc(var(--vaadin-button-border-width, 1px) * -1);
  pointer-events: none;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0;
  transition:
    opacity 100ms,
    background-color 100ms;
}

@supports (color: hsl(0 0 0)) {
  :is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not(
      [disabled]
    )::before {
    background-color: oklch(from currentColor calc(l + 0.4 - c) c h / calc(1 - l / 2));
  }
}

@media (any-hover: hover) {
  /* prettier-ignore */
  :is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):hover:not([disabled], [active])::before {
    opacity: 0.03;
  }

  /* prettier-ignore */
  :is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[theme~='primary']:hover:not([disabled], [active])::before {
    opacity: 0.12;
  }
}

@media (min-resolution: 2x) {
  /* prettier-ignore */
  :is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button[first-visible][last-visible], vaadin-drawer-toggle)[active]:not([disabled], [aria-disabled='true']) {
    scale: 0.98;
    transition-duration: 50ms;
  }
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[active]:not(
    [disabled]
  ) {
  box-shadow: none;
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[active]:not(
    [disabled]
  )::before {
  transition-duration: 0s;
  opacity: 0.08;
  background: oklch(from currentColor min(c, 1 - l + c) calc(c * 0.9) h);
}

/* prettier-ignore */
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[theme~='primary'][active]:not([disabled])::before {
  opacity: 0.16;
}
:where(:root),
:where(:host) {
  --vaadin-card-title-font-weight: var(--aura-font-weight-medium);
  --vaadin-card-padding: var(--vaadin-padding-l);
  --vaadin-card-gap: var(--vaadin-gap-m) var(--vaadin-gap-l);
  --vaadin-card-border-color: var(--vaadin-border-color-secondary);
  --vaadin-card-border-width: 1px;
}

vaadin-card {
  background: var(--vaadin-card-background, var(--aura-surface-color) padding-box);
  background-clip: padding-box;
  --aura-surface-level: 2;
  --aura-surface-opacity: 0.5;
  border: var(--vaadin-card-border-width) solid transparent;
  --_padding: calc(var(--vaadin-card-padding) - var(--vaadin-card-border-width, 1px));
}

vaadin-card[theme~='outlined'] {
  --vaadin-card-border-color: var(--vaadin-border-color);
}

vaadin-card::before {
  inset: calc(var(--vaadin-card-border-width) * -1);
}

vaadin-card[theme~='cover-media'] [slot='media']:is(img, video, svg, vaadin-icon) {
  /* TODO relies on internal API - should refactor base styles to support this (background-clip: padding-box) */
  margin-inline: calc((var(--_padding) + var(--vaadin-card-border-width)) * -1);
  margin-top: calc((var(--_padding) + var(--vaadin-card-border-width)) * -1);
  width: calc(var(--_media-width) + var(--vaadin-card-border-width) * 2);
}

vaadin-card[theme~='cover-media'][theme~='horizontal'] [slot='media']:is(img, video, svg, vaadin-icon) {
  height: calc(100% + (var(--_padding) + var(--vaadin-card-border-width)) * 2);
}

vaadin-card[theme~='elevated'] {
  --aura-surface-opacity: 0.7;
  --aura-surface-level: 3;
  background: var(--aura-surface-color) padding-box;
  box-shadow: var(--vaadin-card-shadow, var(--aura-shadow-s));
}

vaadin-card[theme~='stretch-media']:not([theme~='cover-media']) [slot='media']:is(img, video, svg, vaadin-icon) {
  border-radius: var(--vaadin-radius-s);
}

:where(:root),
:where(:host) {
  --vaadin-charts-background: transparent;
}

:where(:root),
:where(:host) {
  --vaadin-radio-button-marker-size: 6px;
  --vaadin-checkbox-size: round(1lh - 2px, 2px);
  --vaadin-radio-button-size: round(1lh - 2px, 2px);
}

vaadin-checkbox::part(checkbox),
vaadin-radio-button::part(radio) {
  transition: background-color 100ms;
}

vaadin-checkbox:not([disabled], [readonly])::part(checkbox) {
  background: var(--vaadin-checkbox-background, var(--aura-surface-color));
}

vaadin-radio-button:not([disabled], [readonly])::part(radio) {
  background: var(--vaadin-radio-button-background, var(--aura-surface-color));
}

vaadin-checkbox:not([readonly], [disabled])::part(checkbox),
vaadin-radio-button:not([disabled])::part(radio) {
  --aura-surface-level: 4;
  box-shadow: var(--aura-shadow-xs);
  --_shade: color-mix(in srgb, var(--vaadin-border-color-secondary) 50%, transparent);
  background-image: linear-gradient(
    light-dark(transparent, var(--_shade)),
    transparent 33%,
    transparent 66%,
    light-dark(var(--_shade), transparent)
  );
}

vaadin-checkbox:not([checked], [indeterminate])::part(checkbox),
vaadin-radio-button:not([checked])::part(radio) {
  background-clip: padding-box;
}

vaadin-checkbox:is([checked], [indeterminate]):not([readonly], [disabled])::part(checkbox) {
  --vaadin-checkbox-background: var(--aura-accent-color);
  --vaadin-checkbox-marker-color: var(--aura-accent-contrast-color);
  --vaadin-checkbox-border-color: var(--vaadin-border-color-secondary);
  box-shadow: var(--aura-shadow-s);
}

vaadin-radio-button[checked]:not([readonly], [disabled])::part(radio) {
  --vaadin-radio-button-background: var(--aura-accent-color);
  --vaadin-radio-button-marker-color: var(--aura-accent-contrast-color);
  --vaadin-radio-button-border-color: var(--vaadin-border-color-secondary);
  box-shadow: var(--aura-shadow-s);
}

vaadin-checkbox:not([readonly], [disabled])::part(checkbox)::before,
vaadin-radio-button:not([disabled])::part(radio)::before {
  content: '';
  position: absolute;
  inset: calc(var(--vaadin-input-field-border-width, 1px) * -1);
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0;
  transition:
    opacity 100ms,
    background-color 100ms;
}

@media (any-hover: hover) {
  vaadin-checkbox:hover:not([readonly], [disabled], [active])::part(checkbox)::before,
  vaadin-radio-button:hover:not([disabled], [active])::part(radio)::before {
    opacity: 0.04;
  }
}

vaadin-checkbox[active]:not([readonly], [disabled])::part(checkbox)::before,
vaadin-radio-button[active]:not([disabled])::part(radio)::before {
  opacity: 0.1;
  background: #000;
}

vaadin-confirm-dialog::part(footer) {
  width: fit-content;
  margin-inline-start: auto;
}

vaadin-confirm-dialog::part(cancel-button),
vaadin-confirm-dialog::part(reject-button),
vaadin-confirm-dialog::part(confirm-button) {
  flex: 1;
}

vaadin-confirm-dialog > :is([slot='cancel-button'], [slot='reject-button'], [slot='confirm-button']) {
  display: flex;
}

:where(:root),
:where(:host) {
  --vaadin-crud-background: var(--aura-surface-color) padding-box;
}

vaadin-crud-edit {
  padding: var(--vaadin-padding-xs);
  --vaadin-icon-visual-size: 0.75lh;
}

vaadin-crud::part(editor) {
  background: var(--aura-surface-color);
}

vaadin-crud vaadin-confirm-dialog {
  color-scheme: inherit;
}

:where(:root),
:where(:host) {
  --vaadin-date-picker-year-scroller-background: light-dark(var(--vaadin-background-container), transparent);
  --vaadin-date-picker-month-header-font-weight: var(--aura-font-weight-semibold);
  --vaadin-date-picker-date-selected-background: var(--aura-accent-color);
  --vaadin-date-picker-date-selected-color: var(--aura-accent-contrast-color);
}

:where(:root),
:where(:host),
:where([theme]) {
  --vaadin-date-picker-date-width: calc(var(--aura-font-size-m) * 2.5);
  --vaadin-date-picker-year-scroller-width: calc(var(--aura-font-size-m) * 3.5);
}

vaadin-date-picker-month-scroller,
vaadin-date-picker-overlay-content::part(toolbar) {
  background: var(--aura-surface-color);
}

vaadin-date-picker-year-scroller::before {
  width: 12px;
  height: 12px;
  background: var(--aura-surface-color-solid) padding-box;
}

vaadin-date-picker-year::part(year-number) {
  font-size: var(--aura-font-size-s);
  font-weight: var(--aura-font-weight-medium);
}

vaadin-date-picker-year[current]::part(year-number) {
  font-weight: var(--aura-font-weight-semibold);
}

vaadin-date-picker-year[selected] {
  position: relative;
}

vaadin-date-picker-year[selected]::part(year-number) {
  color: var(--aura-accent-text-color);
}

vaadin-date-picker-year[selected]::after {
  content: '';
  position: absolute;
  z-index: -1;
  height: 100%;
  background: var(--aura-accent-color);
  border-radius: var(--vaadin-radius-s);
  top: -0.5lh;
  inset-inline: 3px;
  opacity: 0.1;
}

vaadin-date-picker-year::part(year-separator) {
  text-align: center;
  translate: 0 -50%;
  height: 8px;
  line-height: 0;
}

vaadin-date-picker-year::part(year-separator)::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--vaadin-text-color-disabled);
}

:where(:root),
:where(:host) {
  --vaadin-dashboard-widget-title-font-weight: var(--aura-font-weight-medium);
  --vaadin-dashboard-widget-header-padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
  --vaadin-dashboard-widget-header-gap: var(--vaadin-gap-xs);
  --vaadin-dashboard-widget-border-radius: var(--vaadin-radius-m);
}

vaadin-dashboard-widget {
  --aura-surface-level: 2;
  --aura-surface-opacity: 0.5;
  background: var(--vaadin-dashboard-widget-background, var(--aura-surface-color) padding-box);
  border-radius: calc(var(--vaadin-dashboard-widget-border-radius) - var(--vaadin-dashboard-widget-border-width, 1px));

  &::before {
    inset: calc(var(--vaadin-dashboard-widget-border-width, 1px) * -1);
    border-radius: var(--vaadin-dashboard-widget-border-radius);
  }

  &::part(content) {
    transition: 200ms;
    transition-property: filter, opacity;
  }

  &:is([resize-mode], [move-mode])::part(content) {
    opacity: 0.75;
    filter: blur(10px);
    clip-path: inset(0);
    transition-duration: 50ms;
  }

  &[theme~='outlined'] {
    --vaadin-dashboard-widget-border-color: var(--vaadin-border-color);
  }

  &[theme~='elevated'] {
    --aura-surface-opacity: 0.7;
    --aura-surface-level: 3;
    box-shadow: var(--vaadin-dashboard-widget-shadow, var(--aura-shadow-s));
  }

  &[editable] {
    box-shadow: var(--vaadin-dashboard-widget-shadow, var(--aura-shadow-s));
  }
}

vaadin-dashboard-section {
  vaadin-dashboard-widget {
    transition: 200ms;
    transition-property: filter, opacity;
  }

  &[move-mode] vaadin-dashboard-widget {
    opacity: 0.75;
    filter: blur(10px);
    clip-path: inset(0);
    transition-duration: 50ms;
  }
}

:is(vaadin-dashboard-widget, vaadin-dashboard-section) {
  &::part(move-forward-button),
  &::part(move-backward-button),
  &::part(resize-shrink-height-button),
  &::part(resize-grow-height-button),
  &::part(resize-shrink-width-button),
  &::part(resize-grow-width-button) {
    background: var(--aura-surface-color) padding-box;
    color: var(--vaadin-text-color-secondary);
    border: 1px solid var(--vaadin-border-color);
    transition: 120ms color;
    outline-offset: -1px;
  }

  &::part(resize-shrink-height-button),
  &::part(resize-grow-height-button) {
    margin-top: 0;
    border-bottom: 0;
  }

  &::part(move-forward-button),
  &::part(resize-shrink-width-button),
  &::part(resize-grow-width-button) {
    margin-inline-start: 0;
    border-inline-end: 0;
  }

  &::part(move-backward-button) {
    margin-inline-end: 0;
    border-inline-start: 0;
  }

  &::part(move-apply-button),
  &::part(resize-apply-button) {
    background: var(--aura-accent-color);
    color: var(--aura-accent-contrast-color);
    box-shadow: 0 0 0 3px var(--aura-surface-color);
    outline-offset: 2px;
  }

  &::part(move-button),
  &::part(remove-button),
  &::part(resize-button) {
    color: var(--vaadin-text-color-disabled);
    transition: 120ms color;
    outline-offset: -2px;
  }

  &[editable] {
    --vaadin-dashboard-widget-header-padding: var(--vaadin-padding-xs);
  }
}

@media (any-hover: hover) {
  :is(vaadin-dashboard-widget, vaadin-dashboard-section)::part(button):hover {
    color: var(--vaadin-text-color);
  }
}

:where(:root),
:where(:host) {
  --vaadin-dialog-title-font-size: var(--aura-font-size-l);
  --vaadin-dialog-border-width: 0px;
}

vaadin-dialog,
vaadin-confirm-dialog {
  color-scheme: var(--aura-content-color-scheme, var(--aura-color-scheme));
}

vaadin-dialog::part(overlay),
vaadin-confirm-dialog::part(overlay) {
  background: var(--vaadin-dialog-background, var(--vaadin-overlay-background, var(--aura-surface-color)));
  box-shadow:
    var(--aura-overlay-outline-shadow),
    var(--vaadin-dialog-shadow, var(--vaadin-overlay-shadow, var(--aura-overlay-shadow)));
  --aura-surface-level: 2;
  --aura-surface-opacity: var(--aura-overlay-surface-opacity);

  /* TODO probably should be in base styles */
  /* Keeps dialogs on top of MDL view transitions */
  view-transition-name: vaadin-dialog;
}

vaadin-confirm-dialog::part(message) {
  color: var(--vaadin-text-color-secondary);
}

/* TODO probably should be in base styles */
::view-transition-group(vaadin-dialog) {
  border-radius: var(--vaadin-dialog-border-radius, var(--vaadin-radius-l));
  z-index: 1;
}
:where(:root),
:where(:host) {
  --vaadin-grid-row-selected-background-color: color-mix(in srgb, var(--aura-accent-color) 10%, transparent);
  --vaadin-grid-background: linear-gradient(var(--aura-surface-color), var(--aura-surface-color))
    var(--aura-background-color) padding-box;
}

:is(vaadin-grid, vaadin-crud-grid, vaadin-grid-pro)::part(empty-state) {
  display: flex;
  align-items: center;
  justify-content: center;
}

vaadin-grid-sorter::part(indicators) {
  transition: color 120ms;
}

:is(vaadin-grid, vaadin-crud, vaadin-grid-pro)[theme~='column-borders'] {
  --vaadin-grid-column-border-width: 1px;
}

:is(vaadin-grid, vaadin-crud, vaadin-grid-pro)[theme~='no-row-borders'] {
  --vaadin-grid-row-border-width: 0px;
}

:where(:root),
:where(:host),
:where([theme]) {
  --vaadin-input-field-error-color: var(--aura-red-text);
}

::part(input-field),
vaadin-message-input,
vaadin-input-container {
  background: var(--vaadin-input-field-background, var(--aura-surface-color));
  --aura-surface-level: 4;
  --aura-surface-opacity: 0.7;
  background-clip: padding-box;
}

:not([readonly], [disabled])::part(input-field),
vaadin-message-input:not([readonly], [disabled]) {
  box-shadow: var(--aura-shadow-xs);
}

[readonly]::part(input-field) {
  --aura-surface-opacity: 0;
}

[disabled]::part(input-field) {
  background-color: var(--vaadin-input-field-disabled-background, var(--vaadin-background-container));
}

::part(field-button) {
  transition: color 100ms;
  --vaadin-icon-visual-size: 90%;
}

::part(clear-button) {
  --vaadin-icon-visual-size: 75%;
}

:not([readonly], [disabled])::part(field-button):active {
  color: var(--vaadin-text-color);
}

@media (any-hover: hover) {
  :not([readonly], [disabled])::part(field-button):hover {
    color: var(--vaadin-text-color);
  }
}

:where(:root),
:where(:host) {
  --aura-item-overlay-padding-inline: var(--vaadin-padding-xs);
  --aura-item-overlay-padding-block: var(--vaadin-padding-xs);
  --vaadin-item-overlay-padding: var(--aura-item-overlay-padding-block) var(--aura-item-overlay-padding-inline);
  --vaadin-item-border-radius: clamp(
    0px,
    var(--aura-item-overlay-padding-inline) * 100,
    var(--vaadin-radius-m) - min(var(--aura-item-overlay-padding-inline), var(--aura-item-overlay-padding-block))
  );
  --vaadin-item-gap: var(--vaadin-gap-s);
}

vaadin-avatar-group-menu-item,
vaadin-combo-box-item,
vaadin-context-menu-item,
vaadin-time-picker-item,
vaadin-item,
vaadin-menu-bar-item,
vaadin-multi-select-combo-box-item,
vaadin-select-item:where([role]) {
  font-weight: var(--aura-font-weight-medium);
  -webkit-user-select: none;
  user-select: none;
  --_highlight-color: light-dark(
    oklch(from var(--aura-accent-color-light) min(0.9, l) c h / max(0.05, l / 4)),
    oklch(from var(--aura-accent-color-dark) max(0.6, l) c h / max(0.2, l / 4))
  );
  padding-inline-start: max(0px, var(--vaadin-padding-inline-container) - var(--aura-item-overlay-padding-inline));
  gap: 0;

  &::part(checkmark) {
    color: var(--vaadin-item-checkmark-color, var(--aura-accent-text-color));
    --vaadin-icon-visual-size: 75%;
  }

  &[aria-haspopup='true'] {
    padding-inline-end: max(0px, var(--vaadin-padding-inline-container) - var(--aura-item-overlay-padding-inline));

    &::after {
      --vaadin-icon-visual-size: 90%;
    }
  }

  &::part(content) {
    padding-inline: var(--vaadin-gap-xs);
    gap: var(--vaadin-item-gap);
  }

  @media (any-hover: hover) {
    &:not([disabled], [aria-disabled='true']):hover {
      background: var(--_highlight-color);

      &[theme~='filled'] {
        background: var(--aura-accent-color);
        color: var(--aura-accent-contrast-color);
        --vaadin-text-color: var(--aura-accent-contrast-color);
        --vaadin-text-color-secondary: color-mix(in srgb, var(--aura-accent-contrast-color) 70%, transparent);
        --vaadin-text-color-disabled: color-mix(in srgb, var(--aura-accent-contrast-color) 50%, transparent);
        --vaadin-icon-color: var(--aura-accent-contrast-color);
        --vaadin-item-checkmark-color: var(--aura-accent-contrast-color);
      }
    }
  }

  &:active {
    background: var(--_highlight-color);
  }

  &[aria-expanded='true']:not(:hover) {
    background: var(--vaadin-background-container-strong);
  }

  &:where(
    [theme~='danger'],
    .aura-accent-color,
    .aura-accent-red,
    .aura-accent-orange,
    .aura-accent-yellow,
    .aura-accent-green,
    .aura-accent-blue,
    .aura-accent-purple,
    .v-info,
    .v-success,
    .v-warning,
    .v-error
  ) {
    color: var(--aura-accent-text-color);

    > * {
      --aura-accent-color-light: var(--aura-accent-color-light-initial);
      --aura-accent-color-dark: var(--aura-accent-color-dark-initial);
      --aura-accent-color: light-dark(var(--aura-accent-color-light-initial), var(--aura-accent-color-dark-initial));
    }
  }
}

/* TODO is there a better selector? */
[role='menu'] [role='separator'] {
  margin-block: var(--vaadin-gap-xs);
  margin-inline: calc(var(--vaadin-gap-xs) + var(--vaadin-padding-inline-container));
  border-color: var(--vaadin-border-color);
}
:where(:root),
:where(:host) {
  --vaadin-login-form-error-color: var(--aura-red-text);
  --vaadin-login-form-padding: var(--vaadin-padding-xl);
  --vaadin-login-overlay-brand-padding: var(--vaadin-padding-xl);
  --vaadin-login-overlay-brand-background: transparent;
  --vaadin-login-overlay-title-font-size: 1.5em;
  --vaadin-login-overlay-title-line-height: 1.2;
  --vaadin-login-overlay-title-font-weight: var(--aura-font-weight-semibold);
  --vaadin-login-overlay-title-color: var(--vaadin-text-color);
  --vaadin-login-overlay-description-color: var(--vaadin-text-color-secondary);
}

vaadin-login-form::part(error-message) {
  border-radius: var(--vaadin-radius-m);
  padding: var(--vaadin-padding-m);
  background: color-mix(in srgb, var(--aura-red) 10%, transparent);
}

vaadin-login-form::part(error-message-title) {
  font-weight: var(--aura-font-weight-semibold);
}

vaadin-login-overlay {
  --vaadin-overlay-backdrop-background: var(--aura-app-background);

  &::part(overlay) {
    --aura-surface-level: 2;
    background: var(--vaadin-login-overlay-background, var(--vaadin-overlay-background, var(--aura-surface-color)));
    box-shadow:
      var(--aura-overlay-outline-shadow),
      var(--vaadin-login-overlay-shadow, var(--vaadin-overlay-shadow, var(--aura-overlay-shadow)));
  }

  &::part(brand) {
    text-align: center;
    padding-bottom: 0;
  }

  &::part(form-title) {
    display: none;
  }

  [slot='title'] {
    letter-spacing: -0.03em;
  }
}

:where(vaadin-markdown) {
  /* Use the margins defined by vaadin-markdown base styles */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr {
    margin-block: revert-layer;
  }

  code {
    font-size: var(--aura-font-size-s);
    line-height: var(--aura-line-height-s);
    font-weight: var(--aura-font-weight-semibold);
  }

  pre code {
    font-weight: var(--aura-font-weight-medium);
  }

  b,
  strong {
    font-weight: var(--aura-font-weight-medium);
  }

  blockquote {
    font-weight: var(--aura-font-weight-medium);
    border-left-color: var(--aura-accent-border-color);
  }

  ol li::marker {
    font-weight: var(--aura-font-weight-regular);
  }

  figcaption {
    font-size: var(--aura-font-size-s);
    line-height: var(--aura-line-height-s);
  }

  th {
    font-weight: var(--aura-font-weight-medium);
  }
}

vaadin-master-detail-layout::part(detail) {
  --aura-surface-level: 2;
  background: var(--aura-surface-color) padding-box;
}

vaadin-master-detail-layout[drawer]::part(detail) {
  --aura-surface-opacity: var(--aura-overlay-surface-opacity);
  background: var(--aura-surface-color) padding-box;
  -webkit-backdrop-filter: var(--aura-overlay-backdrop-filter);
  backdrop-filter: var(--aura-overlay-backdrop-filter);
  box-shadow:
    inset 1px 0 0 0 var(--aura-overlay-inner-outline-color),
    -1px 0 0 0 var(--aura-overlay-outline-color),
    var(--aura-shadow-m);
}

vaadin-master-detail-layout[containment='viewport'][drawer]::part(detail) {
  box-shadow: var(--aura-overlay-shadow);
}

/* TODO could be a built-in variant */
vaadin-master-detail-layout[theme~='inset-drawer'][drawer]::part(detail),
vaadin-master-detail-layout[containment='viewport'][drawer]::part(detail) {
  margin: calc(var(--aura-app-layout-inset) / 2);
  border-radius: var(--_app-layout-radius);
}

vaadin-master-detail-layout > vaadin-master-detail-layout,
vaadin-master-detail-layout:not([drawer])::part(detail) {
  border-start-end-radius: var(--_app-layout-radius);
  border-end-end-radius: var(--_app-layout-radius);
}

/* TODO these end up affecting all MDLs, not just the one directly inside the App Layout */
::view-transition-group(vaadin-mdl-backdrop),
::view-transition-group(vaadin-mdl-master),
::view-transition-group(vaadin-mdl-detail) {
  border-radius: var(--_app-layout-radius);
  overflow: hidden;
}
vaadin-menu-bar:not([has-single-button]) vaadin-menu-bar-button:not([first-visible], [focus-ring]) {
  clip-path: inset(-10px -10px -10px max(-10px, var(--vaadin-menu-bar-gap, 0px) * -1 + 0.8px));
}

@media (any-hover: hover) {
  /* Increase specificity to reset hover styles */
  vaadin-menu-bar-button > vaadin-menu-bar-item:not([disabled]):not([tabindex]):hover {
    background: transparent;
  }
}

vaadin-menu-bar-button[slot='overflow'] {
  font-family: system-ui, sans-serif;
  font-weight: 600;
}

vaadin-menu-bar-button[aria-haspopup='true']::part(suffix)::after {
  --vaadin-icon-visual-size: 90%;
}

vaadin-menu-bar-button > vaadin-menu-bar-item {
  padding-inline: 0;
}

vaadin-menu-bar-button > vaadin-menu-bar-item::part(content) {
  padding-inline: 0;
  gap: var(--vaadin-button-gap, var(--vaadin-gap-s));
}

vaadin-message-input > vaadin-text-area::part(input-field) {
  background: var(--vaadin-input-field-background, transparent);
}

vaadin-message-input:not([readonly], [disabled]) > vaadin-text-area::part(input-field) {
  box-shadow: none;
}

vaadin-message-input[theme~='icon-button'] > vaadin-message-input-button {
  width: var(--vaadin-icon-size, 1lh);
  height: var(--vaadin-icon-size, 1lh);
  color: transparent;
  position: relative;
  contain: strict;
}

vaadin-message-input[theme~='icon-button'] > vaadin-message-input-button::before {
  content: '';
  position: absolute;
  inset: 0;
  mask-image: var(--_vaadin-icon-paper-airplane);
  background: var(--vaadin-button-text-color);
}

vaadin-message-input[theme~='icon-button'][dir='rtl'] > vaadin-message-input-button::before {
  scale: -1;
}

@media (forced-colors: active) {
  vaadin-message-input[theme~='icon-button'] > vaadin-message-input-button {
    forced-color-adjust: none;
    --vaadin-button-text-color: CanvasText;
  }
}

:where(:root),
:where(:host) {
  --vaadin-message-attachment-font-weight: var(--aura-font-weight-medium);
  --vaadin-message-attachment-border-width: 1px;
}

vaadin-message::part(attachment) {
  --aura-surface-level: 4;
  background: var(--vaadin-message-attachment-background, var(--aura-surface-color) padding-box);
}

vaadin-message::part(attachment):hover {
  --aura-surface-opacity: 0.7;
}

vaadin-message::part(attachment):active {
  --aura-surface-opacity: 0.4;
}

vaadin-message::part(attachment-icon) {
  background: color-mix(in srgb, var(--aura-accent-color) 10%, transparent);
  color: var(--aura-accent-color);
}

:where(:root),
:where(:host) {
  --vaadin-chip-padding: 0.4em;
  --vaadin-chip-background: var(--vaadin-background-container-strong);
  --vaadin-chip-height: 1lh;
  --vaadin-chip-border-radius: var(--vaadin-radius-s);
  --vaadin-chip-border-width: 0px;
}

vaadin-multi-select-combo-box-chip {
  --vaadin-icon-size: 1.25em;
}

:where(:root),
:where(:host) {
  --vaadin-notification-border-width: 0px;
  --vaadin-ease-fluid: cubic-bezier(0.78, 0, 0.22, 1);
  --vaadin-notification-padding: var(--vaadin-padding-m);
}

vaadin-notification-container {
  color-scheme: var(--aura-notification-color-scheme);
}

vaadin-notification-card::part(overlay) {
  --aura-surface-level: 3.5;
  background: var(--vaadin-notification-background, var(--aura-surface-color));
  box-shadow: var(--aura-overlay-outline-shadow), var(--vaadin-notification-shadow, var(--aura-overlay-shadow));

  /* TODO probably should be in base styles */
  /* Keeps notifications on top of MDL view transitions */
  view-transition-name: vaadin-notification;
}

vaadin-notification-card:is(
    .aura-accent-color,
    .aura-accent-red,
    .aura-accent-orange,
    .aura-accent-yellow,
    .aura-accent-green,
    .aura-accent-blue,
    .aura-accent-purple,
    .v-info,
    .v-success,
    .v-warning,
    .v-error,
    [theme~='info'],
    [theme~='success'],
    [theme~='warning'],
    [theme~='error']
  )::part(overlay) {
  --vaadin-notification-background: var(--aura-accent-surface);
  --vaadin-icon-color: var(--aura-accent-text-color);
  box-shadow:
    inset 0 0 0 1px light-dark(transparent, var(--aura-accent-border-color)),
    0 0 0 1px light-dark(var(--aura-accent-border-color), transparent),
    var(--vaadin-notification-shadow, var(--aura-shadow-m));
}

::view-transition-group(vaadin-notification) {
  /* Keep on top of MDL view-transition elements */
  z-index: 1;
  /* The backdrop-filter from vaadin-notification-card::part(overlay) is copied here, so we need to clip it with the same border radius */
  border-radius: var(--vaadin-notification-border-radius, var(--vaadin-radius-l));
}

/* In Safari, the backdrop-filter is copied to transition-group pseudo element but also retained in the new/old pseudo elements */
/* Removing it from the transition-group makes it look better */
@supports (background: -webkit-named-image(i)) {
  ::view-transition-group(vaadin-notification) {
    backdrop-filter: none;
  }
}

vaadin-notification-card vaadin-card {
  --vaadin-card-border-width: 0px;
  --vaadin-card-gap: var(--vaadin-gap-xs) var(--vaadin-gap-s);
  color: var(--vaadin-text-color-secondary);
}

vaadin-notification-card vaadin-button {
  --aura-surface-level: 6;
}

:where(:root),
:where(:host) {
  --vaadin-overlay-border-width: 0px;
  --vaadin-overlay-backdrop-background: light-dark(
    oklch(from var(--aura-background-color-light) calc(l * 0.5) min(0.05, c * 4) h / 0.3),
    oklch(from var(--aura-background-color-dark) calc(l * 0.5) min(0.05, c * 4) h / 0.3)
  );
  --aura-overlay-outline-color: light-dark(
    oklch(from var(--aura-background-color-light) 0.1 c h / max(0.04, 0.03 + 0.04 * var(--aura-contrast-level))),
    oklch(from var(--aura-background-color-dark) 0.1 c h / max(0.04, 0.03 + 0.04 * var(--aura-contrast-level)))
  );
  --aura-overlay-inner-outline-color: hsla(0deg, 0%, 100%, max(3%, 2% + 4% * var(--aura-contrast-level)));
  --aura-overlay-outline-shadow:
    inset 0 0 0 1px var(--aura-overlay-inner-outline-color), 0 0 0 1px var(--aura-overlay-outline-color);
  --aura-overlay-shadow: var(--aura-shadow-m);
  --aura-overlay-backdrop-filter: blur(20px) brightness(1.1) saturate(1.2);
  --aura-overlay-surface-opacity: 0.85;

  @media (prefers-reduced-transparency: reduce) {
    --aura-overlay-surface-opacity: 1 !important;
  }
  --vaadin-popover-arrow-size: 8px;
  --vaadin-popover-arrow-inset: var(--vaadin-gap-l);
  --vaadin-popover-border-radius: var(--vaadin-radius-l);
  --vaadin-slider-bubble-arrow-size: 6px;
}

::part(overlay) {
  background: var(--vaadin-overlay-background, var(--aura-surface-color));
  --aura-surface-level: 4;
  --aura-surface-opacity: var(--aura-overlay-surface-opacity);
  box-shadow: var(--aura-overlay-outline-shadow), var(--vaadin-overlay-shadow, var(--aura-overlay-shadow));
  -webkit-backdrop-filter: var(--aura-overlay-backdrop-filter);
  backdrop-filter: var(--aura-overlay-backdrop-filter);
}

:not(vaadin-tooltip, vaadin-slider-bubble)::part(overlay) {
  font-family: var(--aura-font-family);
  font-size: var(--aura-font-size-m);
  font-weight: var(--aura-font-weight-regular);
  line-height: var(--aura-line-height-m);
  color: var(--vaadin-text-color);
}

vaadin-popover,
vaadin-slider-bubble {
  &::part(arrow) {
    background: var(--aura-surface-color-solid);
    margin: 1px;
  }
}

vaadin-popover::part(overlay) {
  background: var(--vaadin-popover-background, var(--vaadin-overlay-background, var(--aura-surface-color)));
  box-shadow:
    var(--aura-overlay-outline-shadow),
    var(--vaadin-popover-shadow, var(--vaadin-overlay-shadow, var(--aura-overlay-shadow)));
}

vaadin-popover::part(arrow) {
  background: var(--vaadin-popover-background, var(--vaadin-overlay-background, var(--aura-surface-color)));
}

:where(:root),
:where(:host) {
  --vaadin-progress-bar-border-width: 0px;
  --vaadin-progress-bar-height: var(--vaadin-gap-s);
}

vaadin-progress-bar::part(value) {
  background: var(
      --vaadin-progress-bar-value-background,
      linear-gradient(
        90deg in oklab,
        var(--aura-accent-color),
        light-dark(
          oklch(
            from var(--aura-accent-color-light) clamp(0.5, l * 1.2, 1) c calc(h - 30 * var(--_vaadin-safari-17-deg, 1))
          ),
          oklch(
            from var(--aura-accent-color-dark) clamp(0.5, l * 1.2, 1) c calc(h - 30 * var(--_vaadin-safari-17-deg, 1))
          )
        )
      )
    )
    border-box;
  box-shadow: inset 0 0 0 1px var(--vaadin-border-color-secondary);
}

vaadin-progress-bar[dir='rtl']::part(value) {
  scale: -1;
}

:where(:root),
:where(:host) {
  --vaadin-rich-text-editor-toolbar-background: transparent;
  --vaadin-rich-text-editor-toolbar-padding: var(--vaadin-padding-xs);
  --vaadin-rich-text-editor-toolbar-gap: var(--vaadin-gap-xs) var(--vaadin-gap-m);
  --vaadin-rich-text-editor-toolbar-button-background: transparent;
  --vaadin-rich-text-editor-toolbar-button-border-radius: calc(var(--vaadin-radius-m) - 2px);
  --vaadin-rich-text-editor-toolbar-button-padding: var(--vaadin-padding-xs);
}

vaadin-rich-text-editor {
  --vaadin-icon-visual-size: 90%;
  background: var(--vaadin-rich-text-editor-background, var(--aura-surface-color) padding-box);
  --aura-surface-level: 4;
  --aura-surface-opacity: 0.7 !important;
  box-shadow: var(--aura-shadow-xs);

  &:not(:focus-within) {
    --vaadin-rich-text-editor-toolbar-button-text-color: var(--vaadin-text-color-disabled);
  }
}

vaadin-rich-text-editor::part(toolbar) {
  contain: paint;
  border-bottom: 1px solid var(--vaadin-border-color-secondary);
}

vaadin-rich-text-editor::part(toolbar-group) {
  gap: 1px;
  align-items: center;
}

vaadin-rich-text-editor::part(toolbar-group)::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 1lh;
  background: var(--vaadin-border-color-secondary);
  translate: calc(var(--vaadin-gap-m) / -2);
}

vaadin-rich-text-editor::part(toolbar-button) {
  transition:
    color 80ms,
    background-color 80ms,
    scale 180ms;
  outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
  position: relative;
  color: var(--vaadin-rich-text-editor-toolbar-button-text-color, var(--vaadin-text-color-secondary));
}

vaadin-rich-text-editor::part(toolbar-button-pressed) {
  --vaadin-rich-text-editor-toolbar-button-background: transparent;
}

vaadin-rich-text-editor:focus-within::part(toolbar-button-pressed) {
  --vaadin-rich-text-editor-toolbar-button-background: var(--vaadin-background-container-strong) padding-box;
  --vaadin-rich-text-editor-toolbar-button-text-color: var(--vaadin-text-color);
  border-color: var(--vaadin-text-color-disabled);
}

vaadin-rich-text-editor::part(toolbar-button):active {
  scale: 0.95;
  transition-duration: 80ms, 80ms, 50ms;
}

@media (any-hover: hover) {
  vaadin-rich-text-editor::part(toolbar-button):hover {
    --vaadin-rich-text-editor-toolbar-button-background: var(--vaadin-background-container);
    --vaadin-rich-text-editor-toolbar-button-text-color: var(--vaadin-text-color);
  }
}

vaadin-select-value-button {
  font-weight: var(--aura-font-weight-medium);
}

:where(:root),
:where(:host) {
  --vaadin-side-nav-label-line-height: var(--aura-line-height-xs);
  --vaadin-side-nav-label-font-weight: var(--aura-font-weight-medium);
  --vaadin-side-nav-item-font-weight: var(--aura-font-weight-medium);
  --vaadin-side-nav-item-border-width: 1px;
  --vaadin-side-nav-items-gap: var(--vaadin-gap-xs);
}

vaadin-side-nav + vaadin-side-nav {
  margin-top: var(--vaadin-gap-l);
}

vaadin-side-nav::part(label) {
  gap: var(--vaadin-gap-xs);
  transition: color 80ms;
}

vaadin-side-nav-item::part(content) {
  --aura-surface-level: 4;
  --aura-surface-opacity: 0.5;
  transition: color 80ms;
}

vaadin-side-nav-item:not([disabled], [current])::part(content):active {
  --vaadin-side-nav-item-background: var(--vaadin-background-container);
}

@media (any-hover: hover) {
  vaadin-side-nav::part(label):hover {
    --vaadin-side-nav-label-color: var(--vaadin-text-color);
  }

  vaadin-side-nav-item:not([disabled], [current])::part(content):hover {
    --vaadin-side-nav-item-text-color: var(--vaadin-text-color);
  }
}

vaadin-side-nav-item[current]::part(content) {
  transition: none;
  --vaadin-side-nav-item-background: var(--aura-surface-color) padding-box;
  --vaadin-side-nav-item-text-color: var(--aura-accent-text-color);
  --vaadin-side-nav-item-border-color: var(--vaadin-border-color-secondary);
}

vaadin-side-nav::part(toggle-button),
vaadin-side-nav-item::part(toggle-button) {
  --vaadin-icon-visual-size: 0.9lh;
}

/* Filled variant */

vaadin-side-nav[theme~='filled'] > vaadin-side-nav-item[current]::part(content) {
  --vaadin-side-nav-item-background: var(--aura-accent-color) border-box;
  --vaadin-side-nav-item-text-color: var(--aura-accent-contrast-color);
  --vaadin-text-color: var(--vaadin-side-nav-item-text-color);
  --vaadin-text-color-secondary: color-mix(in srgb, var(--aura-accent-contrast-color) 70%, transparent);
  --vaadin-text-color-disabled: color-mix(in srgb, var(--aura-accent-contrast-color) 50%, transparent);
  --vaadin-icon-color: var(--aura-accent-contrast-color);
  outline-offset: 2px;
}

vaadin-side-nav-item:not([current]) > vaadin-icon[slot='prefix'] {
  opacity: 0.8;
}

:where(:root),
:where(:host) {
  --vaadin-slider-track-background: var(--vaadin-background-container-strong);
  --vaadin-slider-track-height: var(--vaadin-gap-xs);
  --vaadin-slider-fill-border-color: var(--vaadin-border-color-secondary);
  --vaadin-slider-thumb-width: round(1lh - 4px, 2px);
  --vaadin-slider-thumb-height: round(1lh - 4px, 2px);
  --vaadin-slider-marks-font-size: var(--aura-font-size-xs);
}

:is(vaadin-slider, vaadin-range-slider) {
  --aura-surface-level: 6;
  --vaadin-slider-fill-background: linear-gradient(
      var(--_bg-dir, 90deg) in oklab,
      var(--aura-accent-color),
      light-dark(
        oklch(
          from var(--aura-accent-color-light) clamp(0.5, l * 1.2, 1) c calc(h - 30 * var(--_vaadin-safari-17-deg, 1))
        ),
        oklch(
          from var(--aura-accent-color-dark) clamp(0.5, l * 1.2, 1) c calc(h - 30 * var(--_vaadin-safari-17-deg, 1))
        )
      )
    )
    border-box;

  &:dir(rtl) {
    --_bg-dir: -90deg;
  }

  &::part(track-fill) {
    margin-inline-end: -1px;
  }

  &::part(thumb) {
    position: relative;
    background: var(
        --vaadin-slider-thumb-background,
        linear-gradient(
            light-dark(transparent, var(--vaadin-border-color-secondary)),
            transparent 33%,
            transparent 66%,
            light-dark(var(--vaadin-border-color-secondary), transparent)
          )
          var(--aura-surface-color-solid)
      )
      border-box;
    border-color: var(--vaadin-slider-thumb-border-color, oklch(1 0 0 / 0.1));
    outline-offset: -1px;
    box-shadow:
      0 0 0 1px light-dark(var(--vaadin-border-color), oklch(0 0 0 / 0.1)),
      var(--_thumb-shadow, var(--aura-shadow-s));
  }

  &[readonly] {
    --aura-surface-level: 4;
    --vaadin-slider-fill-background: var(--vaadin-text-color-secondary);
    --vaadin-slider-thumb-background: var(--aura-surface-color-solid);
    --vaadin-slider-thumb-border-color: oklch(1 0 0 / 0.1);
    --_thumb-shadow: 0 0 0 0 transparent;
  }

  &[disabled] {
    --aura-surface-level: 0;
    --vaadin-slider-track-background: var(--vaadin-background-container);
    --vaadin-slider-fill-background: var(--vaadin-border-color-secondary);
    --vaadin-slider-fill-border-color: transparent;
    --vaadin-slider-thumb-background: linear-gradient(
        var(--vaadin-background-container),
        var(--vaadin-background-container)
      )
      var(--vaadin-background-color);
    --vaadin-slider-thumb-border-color: var(--vaadin-border-color-secondary);

    &::part(thumb) {
      box-shadow: none;
    }
  }

  &::part(thumb)::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background-color: #000;
    opacity: 0;
    transition:
      opacity 100ms,
      background-color 100ms;
  }
}

vaadin-range-slider::part(track-fill) {
  margin-inline-start: calc(var(--vaadin-slider-thumb-width) - 1px);
}

vaadin-slider[active]:not([readonly], [disabled])::part(thumb)::before,
vaadin-range-slider[start-active]:not([readonly], [disabled])::part(thumb-start)::before,
vaadin-range-slider[end-active]:not([readonly], [disabled])::part(thumb-end)::before {
  opacity: 0.1;
}

:where(:root),
:where(:host) {
  --vaadin-tab-border-radius: var(--vaadin-radius-m);
  --vaadin-tab-font-weight: var(--aura-font-weight-medium);
  --vaadin-tabs-gap: 2px;
  --vaadin-tabs-border-radius: calc(var(--vaadin-tab-border-radius) + var(--vaadin-tabs-padding));
  --vaadin-tabs-padding: 3px;
}

vaadin-tabs {
  contain: paint;
  --aura-surface-level: -0.5;
  --aura-surface-opacity: 0.3;
  background: var(--vaadin-tabs-background, var(--vaadin-background-container));
}

vaadin-tabs::part(tabs) {
  padding: 3px;
  margin: -3px;
  --_mask-fade-start: 0.5lh;
  --_mask-fade-size: 2lh;
  mask-image: linear-gradient(
    var(--_mask-dir, to right),
    var(--_mask-start, black) var(--_mask-fade-start),
    black var(--_mask-fade-size),
    black calc(100% - var(--_mask-fade-size)),
    var(--_mask-end, black) calc(100% - var(--_mask-fade-start))
  );
}

vaadin-tabs[dir='rtl']::part(tabs) {
  --_mask-dir: to left;
}

vaadin-tabs[orientation='vertical']::part(tabs) {
  --_mask-dir: to bottom;
  --_mask-fade-start: 0px;
  --_mask-fade-size: 0.5lh;
}

vaadin-tabs[overflow~='start'] {
  --_mask-start: transparent;
}

vaadin-tabs[overflow~='end'] {
  --_mask-end: transparent;
}

vaadin-tabs::part(back-button),
vaadin-tabs::part(forward-button) {
  background: var(--aura-background-color) padding-box;
  border: 1px solid var(--vaadin-border-color-secondary);
  border-radius: var(--vaadin-radius-m);
  padding: var(--vaadin-padding-xs);
  height: auto;
  align-self: center;
  box-shadow: var(--aura-shadow-s);
  transition: opacity 120ms;
}

vaadin-tabs::part(back-button) {
  inset-inline-start: 5px;
}

vaadin-tabs::part(forward-button) {
  inset-inline-end: 5px;
}

vaadin-tab {
  transition:
    color 120ms,
    border-color 120ms,
    background-color 120ms;
  border: var(--vaadin-tab-border-width, 1px) solid var(--vaadin-tab-border-color, transparent);
}

vaadin-tab:not([disabled], [selected]):hover {
  --vaadin-tab-text-color: var(--vaadin-text-color);
}

vaadin-tab[selected] {
  --aura-surface-level: 5;
  --aura-surface-opacity: 0.8;
  --vaadin-tab-background: var(--aura-surface-color);
  --vaadin-tab-text-color: var(--aura-accent-text-color);
  box-shadow:
    0 0 0 1px light-dark(hsl(0deg, 100%, 0%, 0.02), transparent),
    var(--aura-shadow-s);
  border-color: light-dark(transparent, hsl(0deg, 100%, 100%, 0.03));
}

/* Filled variant */

vaadin-tabs[theme~='filled'] > vaadin-tab[selected] {
  --vaadin-tab-background: var(--aura-accent-color) border-box;
  --vaadin-tab-text-color: var(--aura-accent-contrast-color);
  --vaadin-text-color: var(--aura-accent-contrast-color);
  --vaadin-text-color-secondary: color-mix(in srgb, var(--aura-accent-contrast-color) 70%, transparent);
  --vaadin-text-color-disabled: color-mix(in srgb, var(--aura-accent-contrast-color) 50%, transparent);
  --vaadin-icon-color: var(--aura-accent-contrast-color);
  outline-offset: 1px;
}

:where(:root),
:where(:host) {
  --vaadin-tooltip-padding: var(--vaadin-padding-xs) calc(var(--vaadin-padding-xs) * 1.4);
  --vaadin-tooltip-font-size: var(--aura-font-size-s);
  --vaadin-tooltip-font-weight: var(--aura-font-weight-medium);
  --vaadin-tooltip-line-height: var(--aura-line-height-s);
  --vaadin-tooltip-border-radius: var(--vaadin-radius-s);
}

:is(vaadin-tooltip, vaadin-slider-bubble)::part(overlay) {
  background: var(--vaadin-tooltip-background, var(--vaadin-overlay-background, var(--aura-surface-color)));
  box-shadow: var(--aura-overlay-outline-shadow), var(--vaadin-tooltip-shadow, var(--aura-shadow-s));
}

:where(:root),
:where(:host) {
  --vaadin-upload-background: var(--aura-surface-color) padding-box;
  --vaadin-upload-border: 1px solid var(--vaadin-border-color-secondary);
  --vaadin-upload-padding: var(--vaadin-padding-s);
  --vaadin-upload-file-list-divider-color: var(--vaadin-border-color-secondary);
  --vaadin-upload-file-list-divider-width: 1px;
  --vaadin-upload-file-error-color: var(--vaadin-text-color-secondary);
  --vaadin-upload-file-warning-color: var(--aura-red);
  --vaadin-upload-file-done-color: var(--aura-green);
  --vaadin-upload-file-name-font-weight: var(--aura-font-weight-medium);
  --vaadin-upload-file-padding: var(--vaadin-padding-m) var(--vaadin-padding-s);
  --vaadin-upload-file-gap: 0 var(--vaadin-gap-s);
  --vaadin-upload-file-button-border-width: 0;
  --vaadin-upload-file-status-font-size: var(--aura-font-size-s);
  --vaadin-upload-file-status-line-height: var(--aura-line-height-s);
  --vaadin-upload-file-error-font-size: var(--aura-font-size-s);
  --vaadin-upload-file-error-line-height: var(--aura-line-height-s);
  --vaadin-upload-drop-label-color: var(--vaadin-text-color-secondary);
  --vaadin-upload-drop-label-font-weight: var(--aura-font-weight-medium);
}

vaadin-upload {
  --_divider-offset-start: calc(var(--vaadin-padding-s) + var(--vaadin-icon-size, 1lh) + var(--vaadin-gap-s));
  --_divider-offset-end: var(--vaadin-padding-s);
}

vaadin-upload::part(primary-buttons) {
  flex-wrap: wrap;
  gap: var(--vaadin-gap-s) var(--vaadin-gap-m);
}

vaadin-upload:not([nodrop]) vaadin-button[slot='add-button'] {
  flex: 1;
}

vaadin-upload::part(drop-label) {
  flex: 100;
  padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
  min-width: fit-content;
  margin-inline-start: calc(var(--vaadin-upload-padding) * -1);
}

vaadin-upload[dragover-valid] {
  outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
  outline-offset: -1px;
}

vaadin-upload-file-list li {
  margin-inline: var(--_divider-offset-start) var(--_divider-offset-end);

  &:first-child {
    margin-top: var(--vaadin-upload-gap, 0);
  }
}

vaadin-upload:not([theme~='no-border']) > vaadin-upload-file-list:has(> ul > li) {
  border-top: 1px solid var(--vaadin-border-color-secondary);
  margin: calc(var(--vaadin-upload-padding) * -1);
  margin-top: var(--vaadin-upload-padding);
}

vaadin-upload-file {
  --vaadin-icon-visual-size: 0.75lh;
  border-radius: var(--vaadin-upload-file-border-radius, var(--vaadin-radius-m));
  margin-inline: calc(var(--_divider-offset-start, 0) * -1) calc(var(--_divider-offset-end, 0) * -1);

  &:not([complete], [error])::part(done-icon)::before {
    background: var(--vaadin-border-color-secondary);
  }

  &::part(start-button),
  &::part(remove-button),
  &::part(retry-button) {
    color: var(--vaadin-upload-file-button-text-color, var(--vaadin-text-color-secondary));
    outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
  }

  vaadin-progress-bar {
    --vaadin-progress-bar-height: var(--vaadin-gap-xs);
    margin-top: var(--vaadin-gap-xs);
  }

  &:not([error])::part(status) {
    max-height: 2lh;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  &[complete]::part(status) {
    height: 1lh; /* ensure some height to transition from */
    visibility: hidden;
    transition: 200ms max-height;
    max-height: 0;
  }

  &[complete] vaadin-progress-bar {
    visibility: hidden;
    transition: 200ms height;
    --vaadin-progress-bar-height: 0;
    margin-top: 0;
  }
}

vaadin-upload-file[theme~='thumbnails'] {
  --aura-surface-level: 3;
  --vaadin-upload-file-padding: var(--vaadin-padding-s);
  --vaadin-upload-file-done-color: var(--aura-accent-color);
  --vaadin-spinner-size: 1em;
  background: var(--aura-surface-color) padding-box;
  border: 1px solid light-dark(var(--vaadin-border-color-secondary), transparent);

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid light-dark(transparent, var(--vaadin-border-color-secondary));
    pointer-events: none;
  }

  &::part(done-icon),
  &::part(warning-icon) {
    --vaadin-icon-visual-size: 1lh;
    background: color-mix(in srgb, var(--aura-accent-color) 10%, transparent);
  }

  &::part(commands) {
    gap: 0;
  }

  &::part(start-button),
  &::part(retry-button),
  &::part(remove-button) {
    --vaadin-icon-visual-size: 0.8lh;
  }

  &[error] {
    --aura-accent-color-light: var(--aura-red);
    --aura-accent-color-dark: var(--aura-red);
  }

  & vaadin-progress-bar {
    margin-top: 0;
    align-self: end;
    --vaadin-progress-bar-height: 2px;
    --vaadin-border-color-secondary: transparent;

    &:not([indeterminate]) {
      opacity: 1;
    }
  }
}

vaadin-upload[theme~='no-border'] {
  --vaadin-upload-padding: 0;
  --vaadin-upload-background: transparent;
  --vaadin-upload-border-width: 0;
  --vaadin-upload-file-list-divider-width: 0;
  --vaadin-upload-file-padding: var(--vaadin-padding-m);
  --_divider-offset-start: 0px;
  --_divider-offset-end: 0px;
  outline-offset: 2px;

  > vaadin-upload-file-list::part(list) {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
  }

  > vaadin-upload-file-list li:first-child {
    margin-top: var(--vaadin-gap-s);
  }

  vaadin-upload-file {
    background: var(--aura-surface-color) padding-box;
    border: 1px solid var(--vaadin-border-color-secondary);
  }
}

@media (any-hover: hover) {
  vaadin-upload-file::part(start-button):hover,
  vaadin-upload-file::part(remove-button):hover,
  vaadin-upload-file::part(retry-button):hover {
    --vaadin-upload-file-button-text-color: var(--vaadin-text-color);
  }
}

:where(:root),
:where(:host) {
  cursor: default;
  --vaadin-aura-theme: 1;
  --_vaadin-icon-checkmark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
  --_vaadin-icon-menu: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 19h16"/></svg>');
  --vaadin-spinner-color: var(--aura-accent-color);
}

vaadin-icon[icon^='vaadin:'] {
  --vaadin-icon-visual-size: 80%;
}

/* настройки темы: цвет, скругления, плотность, шрифт — правят только этот файл */

/*
 * ТЕМА ПРИЛОЖЕНИЯ — аналог themes/preventionbase-aura в Jmix-версии.
 * Единственный файл, который правят, чтобы поменять внешний вид всего
 * приложения: фирменный цвет, фон, скругления, плотность, шрифт, контраст.
 *
 * Как пользоваться: раскомментируйте нужную строку в блоке ниже и поменяйте
 * значение. В комментарии у каждой строки — значение темы Aura по умолчанию:
 * пока строка закомментирована, действует оно.
 *
 * ВАЖНО:
 * - размеры (--aura-base-size, --aura-base-font-size, --aura-base-radius) —
 *   числа БЕЗ единиц: 16, а не 16px;
 * - селектор :where(:root) не трогайте — так настройки не ломают встроенные
 *   варианты Aura (theme="small" у компонентов, мобильную раскладку);
 * - здесь же, в конце файла, — общие классы оформления для любого раздела
 *   (как preventionbase.css в Jmix); правила конкретных экранов сюда не
 *   пишут: общие правила вёрстки — в vaadin.css, раздела — в
 *   css/sections/<раздел>.css.
 *
 * После правки: npm run build (при npm run dev изменения видны сразу).
 */

/* Шрифт Montserrat хранится в проекте (npm @fontsource-variable/montserrat),
   а не грузится из интернета: терминалы и киоски могут работать офлайн.
   Все начертания 100–900 одним файлом, кириллица с казахскими буквами. */

/* montserrat-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Montserrat Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/build/assets/montserrat-cyrillic-ext-wght-normal-CO5hGrJv.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* montserrat-cyrillic-wght-normal */
@font-face {
  font-family: 'Montserrat Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/build/assets/montserrat-cyrillic-wght-normal-EAA9jha_.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* montserrat-vietnamese-wght-normal */
@font-face {
  font-family: 'Montserrat Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/build/assets/montserrat-vietnamese-wght-normal-k7S-YeeD.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* montserrat-latin-ext-wght-normal */
@font-face {
  font-family: 'Montserrat Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/build/assets/montserrat-latin-ext-wght-normal-BsZE-iaG.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* montserrat-latin-wght-normal */
@font-face {
  font-family: 'Montserrat Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/build/assets/montserrat-latin-wght-normal-l_AIctKy.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:where(:root),
:where(:host) {
    /* ------------------------------------------------------------------
     * 1. ФИРМЕННЫЙ ЦВЕТ — основные кнопки, ссылки, выделение, активный пункт
     *    меню. Отдельно для светлой и тёмной схемы. Можно цвет палитры Aura
     *    (var(--aura-blue | green | red | orange | yellow | purple)) или любой
     *    hex / oklch.
     * ------------------------------------------------------------------ */
    /* --aura-accent-color-light: var(--aura-blue); */
    /* --aura-accent-color-dark: var(--aura-blue); */

    /* ------------------------------------------------------------------
     * 2. ФОН — от него Aura сама считает фон приложения, «карточки» контента,
     *    полей и диалогов (светлее/темнее на нужную долю).
     * ------------------------------------------------------------------ */
    /* --aura-background-color-light: oklch(0.95 0.005 248); */
    /* --aura-background-color-dark: oklch(0.2 0.01 260); */

    /* Насколько «приподняты» поверхности над фоном: 0 — плоско, 2–3 — заметно */
    /* --aura-surface-level: 1; */

    /* ------------------------------------------------------------------
     * 3. СКРУГЛЕНИЯ — одно число на всё: поля, кнопки, карточки, диалоги.
     *    0 — прямые углы, 3 — по умолчанию, 6 — мягко.
     * ------------------------------------------------------------------ */
    /* --aura-base-radius: 3; */

    /* ------------------------------------------------------------------
     * 4. ПЛОТНОСТЬ — от этого числа считаются все отступы и высота полей,
     *    кнопок, строк таблицы. 16 — по умолчанию, 14 — компактнее,
     *    18 — просторнее. (На сенсорных экранах Aura сама берёт 18; если
     *    зададите значение здесь, оно будет действовать везде.)
     * ------------------------------------------------------------------ */
    /* --aura-base-size: 16; */

    /* ------------------------------------------------------------------
     * 5. ШРИФТ — гарнитура, базовый размер (от него считаются xs, s, m, l,
     *    xl) и межстрочный интервал.
     *    Шрифт Aura по умолчанию: var(--aura-font-family-instrument-sans);
     *    системный: var(--aura-font-family-system). Другой шрифт — подключить
     *    @import в начале файла и указать его имя здесь.
     * ------------------------------------------------------------------ */
    --aura-font-family: 'Montserrat Variable', var(--aura-font-family-system);
    /* --aura-base-font-size: 14; */
    /* --aura-base-line-height: 1.4; */

    /* ------------------------------------------------------------------
     * 6. КОНТРАСТ — 0 мягче (подписи светлее), 1 по умолчанию, 2 жёстче.
     *    Повышайте, если экран в кабинете бликует.
     * ------------------------------------------------------------------ */
    /* --aura-contrast-level: 1; */

    /* ------------------------------------------------------------------
     * 7. РАСКЛАДКА
     * ------------------------------------------------------------------ */
    /* ширина бокового меню */
    --vaadin-app-layout-drawer-width: 256px;
    /* отступ от края окна до «карточки» контента (на узких экранах Aura
       всегда ставит 0) */
    /* --aura-app-layout-inset: 1.5vmin; */

    /* ------------------------------------------------------------------
     * 8. ЦВЕТА СОСТОЯНИЙ
     * ------------------------------------------------------------------ */
    /* цвета состояний для .card-background-success | warning | error (ниже) и подсветки
       строк отчётов; палитра Aura: --aura-green | yellow | red */
    --crm-success-color: var(--aura-green);
    --crm-warning-color: var(--aura-yellow);
    --crm-error-color: var(--aura-red);
    /* те же состояния для столбиков графиков на светлом фоне: жёлтый темнее, чтобы был виден;
       тройка проверена на различимость, в том числе при дальтонизме (ΔE ≥ 13) */
    --crm-chart-good-color: oklch(0.55 0.17 155);
    --crm-chart-warning-color: oklch(0.75 0.16 80);
    --crm-chart-bad-color: var(--aura-red);
}

/* ======================================================================
 * СВЕТЛАЯ / ТЁМНАЯ СХЕМА — выбор в меню пользователя (Тема ▸ …).
 * Aura считает цвета через light-dark(), поэтому схема переключается одним
 * свойством color-scheme на <html>. Атрибут data-theme ставит сервер
 * (layouts/app.blade.php, страница входа) и header.js при смене темы.
 * Публичные экраны (layouts/public.blade.php) всегда светлые.
 * ====================================================================== */
:root,
html[data-theme='system'] {
    color-scheme: light dark;
}

html[data-theme='light'] {
    color-scheme: light;
}

html[data-theme='dark'] {
    color-scheme: dark;
}

/*
 * ГОТОВЫЕ НАБОРЫ — скопируйте нужный в конец файла и раскомментируйте.
 *
 * Строгий, компактный (прямые углы, больше строк на экране):
 * :where(:root) { --aura-base-radius: 0; --aura-base-size: 14; }
 *
 * Для сенсорной панели (крупно и мягко):
 * :where(:root) { --aura-base-radius: 6; --aura-base-size: 18; --aura-base-font-size: 16; }
 *
 * Зелёный фирменный цвет:
 * :where(:root) { --aura-accent-color-light: var(--aura-green); --aura-accent-color-dark: var(--aura-green); }
 */

/* ======================================================================
 * ОБЩИЕ КЛАССЫ ОФОРМЛЕНИЯ — как preventionbase.css в теме Jmix: классы,
 * которые можно повесить на любой элемент любого раздела.
 * ====================================================================== */

/* Фон карточки: лёгкая диагональная заливка в правом нижнем углу.
   Пример: <div class="stat-card card-background-success">…</div>
   accent — фирменный цвет, success — зелёный, warning — жёлтый, error — красный, default — серый. */
.card-background-accent {
    background-image: linear-gradient(45deg, transparent 40%, color-mix(in srgb, var(--aura-accent-color) 14%, transparent)) !important;
}

.card-background-success {
    background-image: linear-gradient(45deg, transparent 40%, color-mix(in srgb, var(--crm-success-color) 14%, transparent)) !important;
}

.card-background-warning {
    background-image: linear-gradient(45deg, transparent 40%, color-mix(in srgb, var(--crm-warning-color) 24%, transparent)) !important;
}

.card-background-error {
    background-image: linear-gradient(45deg, transparent 40%, color-mix(in srgb, var(--crm-error-color) 14%, transparent)) !important;
}

.card-background-default {
    background-image: linear-gradient(45deg, transparent 40%, var(--vaadin-background-container-strong)) !important;
}

/* стили разделов — по файлу на раздел, чтобы разделы не правили общий файл */

/* стили главной (dashboard); подключён из vaadin.css.
   Селекторы с двумя классами (.stat-cards.dashboard-tiles, .panel …) — общие правила
   из vaadin.css идут ниже по файлу и иначе перебили бы эти. */

/* школа · учебный год · сегодняшняя дата */
.dashboard-subtitle {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
}

/* ------------------------------------------------------------------ плитки */

/* пять плиток в ряд на обычном экране, на узком — переносятся */
.stat-cards.dashboard-tiles {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.stat-card.dashboard-tile {
    gap: var(--vaadin-gap-xs);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.stat-card.dashboard-tile:hover {
    border-color: color-mix(in srgb, var(--aura-accent-color) 45%, var(--vaadin-border-color));
    box-shadow: var(--aura-shadow-s);
}

.stat-card.dashboard-tile:focus-visible {
    outline: 2px solid var(--aura-accent-color);
    outline-offset: 2px;
}

.dashboard-tile-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--vaadin-gap-s);
}

.dashboard-tile-icon {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--vaadin-text-color-secondary);
}

/* число — главное на плитке: крупнее обычного .stat-value */
.dashboard-tile .stat-value {
    font-size: calc(var(--aura-font-size-xl) * 1.4);
    line-height: 1.15;
}

/* ------------------------------------------------------- панели 2 × 2 */

/* не больше двух колонок: панели стоят парами одинаковой ширины */
.panels.dashboard-panels {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(22rem, calc(50% - var(--vaadin-gap-m)))), 1fr));
}

/* ---------------------------------------------------- контроль на сегодня */

/* цвет состояния — для значков и меток; жёлтый темнее, чтобы был виден на светлом фоне */
.dashboard-state-success {
    --dashboard-state-color: var(--crm-chart-good-color);
}

.dashboard-state-warning {
    --dashboard-state-color: var(--crm-chart-warning-color);
}

.dashboard-state-error {
    --dashboard-state-color: var(--crm-chart-bad-color);
}

.dashboard-state-neutral {
    --dashboard-state-color: var(--vaadin-text-color-secondary);
}

/* подсветка пункта при наведении выходит за текст на ширину отступа */
.dashboard-checks {
    display: flex;
    flex-direction: column;
    margin-inline: calc(-1 * var(--vaadin-padding-s));
}

.dashboard-check {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--vaadin-gap-m);
    padding: var(--vaadin-padding-s);
    border-radius: var(--vaadin-radius-m);
    color: inherit;
    text-decoration: none;
}

.dashboard-check + .dashboard-check {
    margin-top: 1px;
    box-shadow: 0 -1px 0 var(--vaadin-border-color-secondary);
}

.dashboard-check:hover {
    background: var(--vaadin-background-container-strong);
}

.dashboard-check:focus-visible {
    outline: 2px solid var(--aura-accent-color);
    outline-offset: -2px;
}

/* значок в круге цвета состояния */
.dashboard-check-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    color: var(--dashboard-state-color);
    background: color-mix(in srgb, var(--dashboard-state-color) 14%, transparent);
}

.dashboard-check-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.dashboard-check-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dashboard-check-title {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
}

.dashboard-check-text {
    font-weight: var(--aura-font-weight-medium);
}

.dashboard-check-arrow {
    width: 1rem;
    height: 1rem;
    color: var(--vaadin-text-color-secondary);
}

/* ------------------------------------------------------------------ полосы */

.dashboard-bars {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
}

/* подпись · полоса · число (· доля от учеников — у категорий семей) */
.dashboard-bar {
    display: grid;
    grid-template-columns: minmax(7rem, 15rem) 1fr 3rem;
    align-items: center;
    gap: var(--vaadin-gap-s);
    font-size: var(--aura-font-size-s);
    line-height: 1.25;
}

.dashboard-bars-with-percent .dashboard-bar {
    grid-template-columns: minmax(7rem, 15rem) 1fr 3rem 3.5rem;
}

.dashboard-bar-track {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--vaadin-border-color-secondary);
    overflow: hidden;
}

.dashboard-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--aura-accent-color);
}

.dashboard-bar-value,
.dashboard-bar-percent {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dashboard-bar-value {
    font-weight: var(--aura-font-weight-medium);
}

.dashboard-bar-percent {
    color: var(--vaadin-text-color-secondary);
}

.dashboard-bar-zero,
.dashboard-bar-zero .dashboard-bar-value {
    color: var(--vaadin-text-color-secondary);
    font-weight: var(--aura-font-weight-regular);
}

.dashboard-bar-percent:empty {
    display: none;
}

/* ------------------------------------------------------------------ обходы */

.dashboard-raids {
    width: 100%;
}

.dashboard-raids[hidden] {
    display: none;
}

/* метка статуса: точка цвета состояния на лёгкой заливке, текст обычного цвета */
.dashboard-state-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: var(--aura-font-size-s);
    background: color-mix(in srgb, var(--dashboard-state-color) 12%, transparent);
}

.dashboard-state-label::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--dashboard-state-color);
}

/* стили разделов «Случаи» и «Пропуски» (incidents); подключён из vaadin.css.
   Страницы одинаковые: форма записи, фильтры, итоги карточками, сводки «чаще всего»
   и журнал. Размеры и цвета — токены темы. */

.incidents-view {
    gap: var(--vaadin-gap-s);
}

/* форма записи отделена от фильтров: поля в один ряд, кнопка по нижней кромке */
.incidents-form {
    align-items: end;
    flex-wrap: wrap;
    padding: var(--vaadin-padding-s);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-m);
    background: var(--vaadin-background-container);
}

.incidents-totals {
    margin-inline-start: auto;
    align-self: center;
}

.stat-cards.incidents-cards {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.panels.incidents-panels {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(22rem, calc(50% - var(--vaadin-gap-m)))), 1fr));
}

/* рейтинг: место, подпись, пояснение, полоса по сумме баллов и счёт */
.incidents-top {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
    width: 100%;
}

.incidents-top-row {
    display: grid;
    grid-template-columns: 1.6rem minmax(5rem, 9rem) minmax(0, 1fr) 5.5rem;
    align-items: center;
    gap: var(--vaadin-gap-s);
    font-size: var(--aura-font-size-s);
}

/* место: первые три выделены — сразу видно, где хуже всего */
.incidents-top-rank {
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--vaadin-background-container);
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xs);
    font-variant-numeric: tabular-nums;
}

.incidents-top-row[data-rank='1'] .incidents-top-rank {
    background: var(--crm-error-color);
    color: var(--vaadin-background-color);
}

.incidents-top-row[data-rank='2'] .incidents-top-rank {
    background: var(--crm-warning-color);
    color: var(--vaadin-background-color);
}

.incidents-top-row[data-rank='3'] .incidents-top-rank {
    background: var(--vaadin-border-color);
    color: var(--vaadin-text-color);
}

.incidents-top-title {
    font-weight: 500;
}

.incidents-top-note {
    grid-column: 2 / -1;
    grid-row: 2;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xs);
}

.incidents-top-track {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--vaadin-border-color-secondary);
    overflow: hidden;
}

.incidents-top-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--crm-error-color);
}

.incidents-top-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.incidents-grid {
    width: 100%;
    min-height: 18em;
    flex: 1;
}

/* стили раздела «Движение контингента» (enrollment): вкладки и диалоги на странице
   «Контингент» (pages/students.blade.php); подключён из vaadin.css */

/* строка вкладок: вкладки занимают всё место, пагинация — справа (правило .buttons-panel в vaadin.css) */
.students-tabs-row {
    align-items: center;
    flex-wrap: nowrap;
}

.students-tabs-row #studentsTabs {
    flex: 1 1 auto;
    min-width: 0;
}

/* обёртка кнопки с подсказкой: отключённая кнопка не ловит наведение, ловит обёртка */
.enrollment-tooltip-target {
    display: inline-flex;
}

/* display перебивает [hidden] — на других вкладках обёртка прячется вместе с кнопкой */
.enrollment-tooltip-target[hidden] {
    display: none;
}

/* кто оформляется — строкой над формой диалога, как helper-текст */
.enrollment-student {
    margin: 0 0 var(--vaadin-gap-s);
    color: var(--vaadin-text-color-secondary);
}

/* форма диалога: шире 40em — две колонки (шаги vaadin-form-layout по умолчанию), на узком экране одна */
.enrollment-form {
    width: min(44em, 88vw);
}
/* стили раздела «Импорт и экспорт Excel» (excel): диалог загрузки на странице
   «Контингент» (pages/students.blade.php); подключён из vaadin.css */

/* содержимое диалога: пояснение, поле загрузки и сводка в столбик */
.excel-import {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
    width: min(38em, 88vw);
}

/* сводка появляется после ответа сервера */
.excel-summary[hidden] {
    display: none;
}

.excel-summary-total {
    margin: 0;
    font-weight: 600;
}

/* строки, которые не загрузились: список под итогом, длинный — со своей прокруткой */
.excel-summary-errors {
    margin: var(--vaadin-gap-s) 0 0;
    padding-inline-start: 1.25em;
    max-height: 12em;
    overflow-y: auto;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
}
/* стили раздела «Заң мен тәртіп» (filling); подключён из vaadin.css */

/* ------------------------------------ сводка и итоги по модулям: список слева, форма справа */

.view-layout.filling-split {
    flex-direction: row;
    align-items: stretch;
    gap: var(--vaadin-gap-m);
}

.filling-side {
    display: flex;
    flex-direction: column;
    flex: 0 0 21rem;
    min-height: 0;
    overflow: auto;
}

#fillingModules .filling-side {
    flex-basis: 27rem;
}

.filling-side-grid {
    width: 100%;
}

/* модуль: номер и короткое название, под ними мелко — итоговое мероприятие */
.filling-side-title,
.filling-side-hint {
    display: block;
    white-space: normal;
    line-height: 1.3;
}

.filling-side-hint {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xs);
}

/* статусы: сдано — зелёный, не сдано — красный, срок — жирным, будущий месяц и пустой модуль — серым */
.filling-side-grid::part(state-filled) {
    color: var(--aura-green-text);
}

.filling-side-grid::part(state-missed) {
    color: var(--aura-red-text);
}

.filling-side-grid::part(state-due) {
    font-weight: var(--aura-font-weight-semibold);
    color: var(--aura-yellow-text);
}

.filling-side-grid::part(state-future),
.filling-side-grid::part(state-empty) {
    color: var(--vaadin-text-color-secondary);
}

/* форма прокручивается сама, кнопки «Сохранить / Удалить» всегда под рукой */
.filling-editor {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    gap: var(--vaadin-gap-s);
    min-width: 0;
    min-height: 0;
}

.filling-editor > .filling-editor-form {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    padding-inline-end: var(--vaadin-padding-xs);
}

.filling-saved {
    align-self: center;
}

/* узкий экран: список месяцев (модулей) над формой, прокручивается вся страница */
@media (max-width: 56em) {
    .view-layout.filling-split {
        flex-direction: column;
        flex: 0 0 auto;
    }

    .filling-side,
    #fillingModules .filling-side {
        flex: 0 0 auto;
    }

    .filling-editor,
    .filling-editor > .filling-editor-form {
        flex: 0 0 auto;
        overflow: visible;
    }
}

/* -------------------------- строки показателей сводки и таблица действий (vaadin-form-row) */

.filling-table {
    width: 100%;
}

/* подпись строки — первая колонка, по центру полей строки */
.filling-row-label {
    align-self: center;
    font-weight: var(--aura-font-weight-semibold);
    line-height: 1.3;
}

/* шапка таблицы действий — одна строка над шестью строками бланка */
.filling-table-head > span {
    align-self: end;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
    font-weight: var(--aura-font-weight-semibold);
}
/* стили раздела «Отчёты» (reports); подключён из vaadin.css */

/* панель отчёта внутри страницы: те же отступы, что у корня экрана */
.report-panel {
    padding: 0;
}

.report-grid {
    width: 100%;
}

/* две таблицы в один ряд, только когда каждой хватает места с обычными полями ячеек (~640px);
   на экране 1440px с открытым меню они встают друг под другом во всю ширину */
.report-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
    gap: var(--vaadin-gap-l);
    width: 100%;
    align-items: start;
}

.report-column {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
    min-width: 0;
}

/* узкие колонки: подписи шапки переносятся в две строки, а не обрезаются */
.report-columns .report-grid::part(header-cell) {
    white-space: normal;
}

/* длинные таблицы прокручиваются внутри себя — иначе страница становится бесконечной */
.report-grid-tall {
    height: 26em;
}

/* строка «Итого» в сводках */
.report-grid::part(total-row) {
    font-weight: var(--aura-font-weight-semibold);
    background: var(--vaadin-background-container-strong);
}

/* заполняемость форм проекта: не сдано — как ошибка, срок — текущий месяц */
.report-grid::part(missed) {
    color: var(--aura-red-text);
}

.report-grid::part(due) {
    font-weight: var(--aura-font-weight-semibold);
}

.report-grid::part(filled) {
    color: var(--aura-green-text);
}

/* кнопка выгрузки стоит в ряду фильтра — выравниваем по нижней кромке полей */
.report-export {
    align-self: flex-end;
}

/* ------------------------------------------------ график (resources/js/stacked-chart.js) */

.stacked-chart {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
    width: 100%;
    transition: opacity 150ms;
}

/* перезапрос: прежняя картинка остаётся, но приглушена — без мигания и скачка раскладки */
.stacked-chart-loading {
    opacity: 0.5;
}

.stacked-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vaadin-gap-m);
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
}

.stacked-chart-legend[hidden] {
    display: none;
}

.stacked-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--vaadin-gap-xs);
}

.stacked-chart-swatch {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 3px;
}

.stacked-chart-plot {
    position: relative;
    width: 100%;
    min-height: 3rem;
}

.stacked-chart-plot svg {
    display: block;
    overflow: visible;
}

.stacked-chart-grid,
.stacked-chart-baseline {
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.stacked-chart-grid {
    stroke: var(--vaadin-border-color-secondary);
}

.stacked-chart-baseline {
    stroke: var(--vaadin-border-color);
}

.stacked-chart-axis {
    fill: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xs);
    font-variant-numeric: tabular-nums;
}

.stacked-chart-axis-y {
    text-anchor: end;
    dominant-baseline: middle;
}

.stacked-chart-axis-x {
    text-anchor: middle;
}

.stacked-chart-hit {
    fill: transparent;
}

.stacked-chart-column {
    outline: none;
    transition: opacity 120ms;
}

/* наведённая колонка остаётся яркой, остальные отступают */
.stacked-chart-hovering .stacked-chart-column:not(.stacked-chart-column-active) {
    opacity: 0.45;
}

.stacked-chart-column:focus-visible .stacked-chart-hit {
    stroke: var(--vaadin-focus-ring-color);
    stroke-width: 2;
}

.stacked-chart-tooltip {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-m);
    background: var(--aura-surface-color-solid);
    box-shadow: var(--aura-shadow-m);
    font-size: var(--aura-font-size-s);
    white-space: nowrap;
    pointer-events: none;
}

.stacked-chart-tooltip[hidden] {
    display: none;
}

.stacked-chart-tooltip-title {
    color: var(--vaadin-text-color-secondary);
}

.stacked-chart-tooltip-row {
    display: flex;
    align-items: center;
    gap: var(--vaadin-gap-s);
    color: var(--vaadin-text-color-secondary);
}

.stacked-chart-tooltip-row strong {
    min-width: 2ch;
    color: var(--vaadin-text-color);
    font-variant-numeric: tabular-nums;
    text-align: end;
}

/* ключ серии в подсказке — короткий штрих цвета серии, а не квадрат */
.stacked-chart-tooltip-key {
    width: 0.75rem;
    height: 3px;
    border-radius: 2px;
}
/* стили терминала «Оценка питания» (food); подключён из vaadin.css. Отчёт по оценкам
   (/reports/food) — в reports.css. Селекторы с .public-layout — двойные: общие правила
   vaadin.css идут ниже этого импорта и при равной силе перебивают его. */

/* ------------------------------------------------------------- терминал */

/*
 * Планшет или монитор в столовой (docs/food-terminal.md): ученик нажимает на ходу,
 * стоя, одной рукой. Оформление строгое, как у всей системы: фон и цвета темы Aura,
 * плитки классов одного фирменного цвета, крупные стикеры оценок. Экран во всю
 * ширину и не прокручивается.
 */
body.public-page:has(.food-terminal) {
    min-height: 100dvh;
    overflow: hidden;
}

.public-layout:has(.food-terminal) {
    max-width: none;
    height: 100dvh;
    padding: var(--vaadin-padding-m) var(--vaadin-padding-xl);
}

/* шапка стоит на месте, шаги меняются в центре оставшейся высоты */
.public-layout > .food-terminal {
    flex: 1 1 auto;
    min-height: 0;
}

.food-terminal {
    /* плитка класса: шесть во втором ряду по ширине и два ряда с заголовком по высоте */
    --food-gap: clamp(0.75rem, 2vw, 1.5rem);
    /* на большом мониторе плитки растут до 18rem — «на весь экран», а не 11rem посередине */
    --food-grade-size: min(calc((100vw - 4rem - 5 * var(--food-gap)) / 6), calc((100dvh - 15rem) / 2), 18rem);
    /* высота плитки: в альбомной ориентации — квадрат; в портретной (ниже) плитки вытягиваются
       по высоте, иначе узкие квадраты занимали пятую часть экрана и половина его пустовала */
    --food-grade-height: var(--food-grade-size);
    /* стикер оценки: три в ряд по ширине, на планшете в портрете — по высоте */
    --food-sticker-size: min(26vw, 40dvh);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vaadin-gap-m);
    width: 100%;
    color: var(--vaadin-text-color);
    text-align: center;
    /* киоск: без выделения текста и масштабирования двойным касанием */
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* шапка: «назад» слева, школа по центру, язык справа; между колонками — зазор */
.food-terminal-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: var(--vaadin-gap-m);
    width: 100%;
}

vaadin-button.food-terminal-back {
    justify-self: start;
    grid-column: 1;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    --vaadin-icon-size: 2rem;
}

vaadin-button.food-terminal-back[hidden] {
    display: inline-flex;
    visibility: hidden;
}

.food-terminal-school {
    grid-column: 2;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xl);
    font-weight: var(--aura-font-weight-medium);
}

/* переключатель языка — сегменты на общей подложке */
.food-terminal-langs {
    grid-column: 3;
    justify-self: end;
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--vaadin-radius-l);
    background: var(--vaadin-background-container-strong);
}

vaadin-button.food-terminal-lang {
    min-width: 8.5rem;
    min-height: 3rem;
    font-size: 1.15rem;
    color: var(--vaadin-text-color-secondary);
}

vaadin-button.food-terminal-lang-active {
    color: var(--vaadin-text-color);
    background: var(--aura-surface-color-solid);
    box-shadow: var(--aura-shadow-xs);
    font-weight: var(--aura-font-weight-semibold);
}

.food-terminal-step {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 2.5dvh, 1.75rem);
    width: 100%;
    min-height: 0;
    /* шапка сверху, шаг по центру: отступ снизу уравновешивает её высоту */
    padding-bottom: 3rem;
    box-sizing: border-box;
}

.food-terminal-step[hidden] {
    display: none;
}

.food-terminal-title {
    margin: 0;
    color: var(--vaadin-text-color);
    font-size: clamp(1.75rem, 4.5dvh, 2.75rem);
    font-weight: var(--aura-font-weight-semibold);
    /* длинный вопрос на узком экране переносится — строки не должны наезжать */
    line-height: 1.2;
}

/* выбранный класс на шаге оценки: видно, за какой класс голосуешь */
.food-terminal-chosen {
    margin-top: -0.5rem;
    color: var(--vaadin-text-color-secondary);
    font-size: 1.5rem;
    font-weight: var(--aura-font-weight-semibold);
}

/* ----- шаг 1: классы в два ряда — 1–5 и 6–11 */
.food-terminal-grades {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--food-gap);
}

.food-terminal-grade-row {
    display: flex;
    justify-content: center;
    gap: var(--food-gap);
}

/* плитка: основная кнопка темы (фирменный цвет), без градиентов */
vaadin-button.food-terminal-grade {
    width: var(--food-grade-size);
    height: var(--food-grade-height);
    padding: 0;
    border-radius: var(--vaadin-radius-l);
    box-shadow: var(--aura-shadow-s);
    transition: scale 120ms;
}

vaadin-button.food-terminal-grade:active {
    scale: 0.94;
}

.food-terminal-grade-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.food-terminal-grade-number {
    font-size: calc(var(--food-grade-size) * 0.42);
    font-weight: var(--aura-font-weight-semibold);
}

.food-terminal-grade-word {
    margin-top: 0.3rem;
    /* на телефоне плитка узкая — подпись не мельче читаемых 0.75rem */
    font-size: max(0.75rem, calc(var(--food-grade-size) * 0.13));
    font-weight: var(--aura-font-weight-medium);
    opacity: 0.85;
}

/* ----- шаг 2: три стикера без подписей */
.food-terminal-stickers {
    display: flex;
    justify-content: center;
    gap: min(4vw, 3rem);
}

vaadin-button.food-terminal-sticker {
    width: var(--food-sticker-size);
    height: var(--food-sticker-size);
    padding: 0;
    border-radius: 50%;
    background: none;
    transition: scale 160ms;
}

vaadin-button.food-terminal-sticker::part(label) {
    display: contents;
}

.food-terminal-sticker img,
.food-terminal-done-sticker {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 8px var(--aura-shadow-color));
    pointer-events: none;
}

vaadin-button.food-terminal-sticker:active,
vaadin-button.food-terminal-sticker.food-terminal-sticker-pressed {
    scale: 1.06;
}

/* ----- шаг 3: спасибо */
.food-terminal-done-sticker {
    width: min(30vw, 34dvh);
    height: min(30vw, 34dvh);
    animation: food-terminal-appear 200ms ease-out;
}

.food-terminal-thanks {
    font-size: clamp(2.25rem, 6dvh, 3.5rem);
}

.food-terminal-done {
    color: var(--vaadin-text-color-secondary);
    font-size: clamp(1.5rem, 3.5dvh, 2.25rem);
    font-weight: var(--aura-font-weight-semibold);
}

@keyframes food-terminal-appear {
    from {
        opacity: 0;
    }
}

/* голос не дошёл до сервера — надпись под шагом, место не прыгает */
.food-terminal-message {
    min-height: 1.75rem;
    font-size: 1.35rem;
    font-weight: var(--aura-font-weight-semibold);
    color: var(--aura-red-text);
}

.food-terminal-message[hidden] {
    display: block;
    visibility: hidden;
}

/* портретная ориентация (планшет, телефон): плитки выше, чем шире, — два ряда занимают экран */
@media (orientation: portrait) {
    .food-terminal {
        --food-grade-height: min(calc(var(--food-grade-size) * 2.4), calc((100dvh - 18rem) / 2));
    }
}

/* планшет в портрете: школа не помещается между «назад» и языком — шапка в две строки */
@media (max-width: 56rem) {
    .food-terminal-top {
        grid-template-columns: auto 1fr;
        row-gap: var(--vaadin-gap-s);
    }

    .food-terminal-school {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .food-terminal-langs {
        grid-column: 2;
    }
}

/* узкий экран (телефон): поля меньше, подписи мельче */
@media (max-width: 40rem) {
    .public-layout:has(.food-terminal) {
        padding: var(--vaadin-padding-s);
    }

    .food-terminal {
        --food-grade-size: min(calc((100vw - 1.5rem - 5 * var(--food-gap)) / 6), calc((100dvh - 14rem) / 2));
        --food-sticker-size: 28vw;
    }

    .food-terminal-school {
        font-size: var(--aura-font-size-l);
    }

    vaadin-button.food-terminal-lang {
        min-width: 7rem;
    }
}

/* ------------------------------------------- ссылка на терминал (/reports/food) */

/* диалог «Терминал в столовой»: ссылка во всю ширину и подсказка под ней */
.food-terminal-link {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
    width: min(40em, 80vw);
}

.food-terminal-link vaadin-text-field {
    width: 100%;
}

/* неизвестная ссылка на терминал: объяснение по центру */
.food-terminal-missing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vaadin-gap-s);
    margin-top: 20dvh;
    text-align: center;
}

.food-terminal-missing vaadin-icon {
    --vaadin-icon-size: 3rem;
    color: var(--vaadin-text-color-secondary);
}

.food-terminal-missing h2 {
    margin: 0;
}

/* стили раздела «Посещаемость» (attendance); подключён из vaadin.css */

/* форма ввода: своя колонка блоков, как у корня экрана */
.attendance-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vaadin-gap-s);
    width: 100%;
    box-sizing: border-box;
}

/* поля в ряду формы: дата по содержимому, числа одинаковые и чуть шире — чтобы казахские
   подписи («Дәлелді себеппен») не переносились */
.attendance-date {
    width: 9.5em;
}

.attendance-number {
    width: 10em;
}

/* «По уважительной причине» — самая длинная подпись: поле шире, подпись не обрезается */
.attendance-number[data-field="excused"] {
    width: 15em;
}

/* переключатель языка и «внесено …» — по нижней кромке кнопки «Сохранить» */
.attendance-lang,
.attendance-state {
    align-self: center;
}

.attendance-state {
    margin-inline-start: auto;
}

.attendance-grid {
    width: 100%;
}

/* длинные подписи колонок переносятся в две строки — тогда таблица помещается по ширине */
.attendance-grid::part(header-cell) {
    white-space: normal;
}

/* история за 10 дней короче отчётов — таблица не должна тянуть страницу */
.attendance-history {
    max-height: 22em;
}

.attendance-history[hidden],
.attendance-form .section-title[hidden] {
    display: none;
}

/* строка «Итого по школе» */
.attendance-grid::part(total-row) {
    font-weight: var(--aura-font-weight-semibold);
    background: var(--vaadin-background-container-strong);
}

/* кнопки рядом с датой (выгрузка, «Спецформат») — по нижней кромке поля */
.attendance-filter-button {
    align-self: flex-end;
}

/* пять карточек сводки в ряд (базовое правило .stat-cards шире) */
.stat-cards.attendance-cards {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

/*
 * Сдал класс данные за день или нет: строка таблицы и пометки легенды — лёгкая заливка
 * цветом состояния, как у карточек card-background-* в theme.css.
 */
.attendance-grid::part(status-success),
.attendance-status-filled {
    background: color-mix(in srgb, var(--crm-success-color) 14%, transparent);
}

.attendance-grid::part(status-error),
.attendance-status-missed {
    background: color-mix(in srgb, var(--crm-error-color) 14%, transparent);
}

/* легенда цветов над таблицей: пометки в ряд */
.attendance-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vaadin-gap-s);
}

.attendance-legend-item {
    padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
    border-radius: var(--vaadin-radius-m);
    font-size: var(--aura-font-size-s);
}

/* диалог «Спецформат»: формат и текст во всю ширину */
.attendance-formats-dialog {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
    width: min(40rem, 80vw);
}

/* тексты спецформата: заголовок с кнопками и сам текст во всю ширину */
.attendance-formats {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
    width: 100%;
}

.attendance-formats[hidden] {
    display: none;
}

.attendance-format {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.attendance-format-head {
    display: flex;
    align-items: center;
    gap: var(--vaadin-gap-s);
}

.attendance-format-title {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
}

/* спецформат — длинная строка: моноширинный шрифт и перенос по словам */
.attendance-format-text {
    width: 100%;
}

.attendance-format-text::part(input-field) {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: var(--aura-font-size-s);
}

/* стили раздела «Социальный кошелёк» (wallet); подключён из vaadin.css */

/* плашка терминала: текст слева, кнопка «Скопировать» справа.
   Селектор с .panel — иначе общий .panel из vaadin.css (он ниже по файлу)
   перебивает направление ряда своим flex-direction: column. */
.panel.wallet-terminal-panel {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--vaadin-gap-s);
    width: 100%;
}

/* текст растягивается на строку, но основа у него 20em — кнопка остаётся в том же ряду
   справа и уходит вниз только на узком экране */
.wallet-terminal-text {
    display: flex;
    flex: 1 1 20em;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.wallet-terminal-panel > vaadin-button {
    flex: none;
}

.wallet-terminal-link {
    word-break: break-all;
}

/* ряд вкладок: вкладки слева, кнопка выгрузки рядом, сводка справа */
.wallet-tabs-row {
    align-items: center;
}

.wallet-summary {
    margin-inline-start: auto;
}

/* шапка дня: номер и день недели в две строки */
.wallet-day-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
}

.wallet-day-head .wallet-weekday {
    font-size: var(--aura-font-size-xs);
    font-weight: var(--aura-font-weight-regular);
    color: var(--vaadin-text-color-secondary);
}

.wallet-day-head.wallet-weekend .wallet-weekday {
    color: var(--aura-red-text);
}

/* колонки дней узкие (2.5em): поля ячейки по бокам меньше общих, иначе «31» не влезает */
.wallet-grid > vaadin-grid-cell-content.wallet-day-content {
    --vaadin-grid-cell-padding: var(--vaadin-padding-block-container) 2px;
}

/* длинные заголовки колонок отчётов «По классам» и «По заполнению» переносятся */
.wallet-grid > vaadin-grid-cell-content.wallet-wrap-header {
    white-space: normal;
    line-height: 1.2;
}

/* ячейки дней: 1 — получил (зелёным), 0 — приглушённо; клик ставит или снимает отметку */
.wallet-grid::part(meal-cell) {
    cursor: pointer;
    user-select: none;
}

.wallet-grid::part(meal-yes) {
    color: var(--aura-green-text);
    font-weight: var(--aura-font-weight-semibold);
}

.wallet-grid::part(meal-no) {
    color: var(--vaadin-text-color-secondary);
}

.wallet-grid::part(meal-weekend) {
    background: var(--vaadin-background-container-strong);
}

.wallet-grid::part(meal-future) {
    cursor: default;
    color: var(--vaadin-text-color-disabled);
}

/* строка «Итого» в отчётах по классам и по заполнению */
.wallet-grid::part(total-row) {
    font-weight: var(--aura-font-weight-semibold);
    background: var(--vaadin-background-container-strong);
}

/* ---------------------------------------------------------------- терминал */

/* селекторы с .view-layout / .panel — общие правила из vaadin.css идут ниже
   импорта этого файла и при равной силе перебивают его */
.view-layout.meals-terminal {
    align-items: stretch;
    gap: var(--vaadin-gap-m);
}

.meals-title {
    margin: 0;
    text-align: center;
}

.meals-school {
    color: var(--vaadin-text-color-secondary);
    text-align: center;
}

.meals-terminal .hint {
    text-align: center;
}

/* поле ввода крупнее: за ним смотрят с расстояния */
#mealsCode {
    --vaadin-input-field-value-font-size: var(--aura-font-size-xl);
}

.panel.meals-result {
    align-items: center;
    gap: var(--vaadin-gap-s);
    width: 100%;
    text-align: center;
}

.meals-name {
    font-size: var(--aura-font-size-xl);
    font-weight: var(--aura-font-weight-semibold);
    line-height: 1.2;
}

.meals-meta {
    color: var(--vaadin-text-color-secondary);
}

.meals-status {
    font-size: var(--aura-font-size-l);
    min-height: 1.5em;
}

.meals-status[data-kind='error'] {
    color: var(--aura-red-text);
}

.meals-status[data-kind='ok'] {
    color: var(--aura-green-text);
}

#mealsConfirm {
    width: 100%;
    height: 3.5rem;
    font-size: var(--aura-font-size-l);
}

#mealsConfirm[hidden] {
    display: none;
}

.meals-today {
    margin-top: var(--vaadin-gap-m);
}

/* неизвестная ссылка на терминал (pages/wallet-terminal-missing.blade.php) */
.meals-terminal-missing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vaadin-gap-s);
    margin-top: 20dvh;
    text-align: center;
}

.meals-terminal-missing vaadin-icon {
    --vaadin-icon-size: 3rem;
    color: var(--vaadin-text-color-secondary);
}

.meals-terminal-missing h2 {
    margin: 0;
}

/* стили раздела «Соцпаспорт школы» (passport); подключён из vaadin.css */

/* «школа · учебный год» над фильтром: название документа печатается только в выгрузке */
.passport-subtitle {
    font-weight: var(--aura-font-weight-semibold);
}

/* три плашки шапки — уже, чем на главной: чисел мало */
.stat-cards.passport-stats {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

/* строка-раздел таблицы («По типу семьи» и другие) — серой полосой во всю ширину */
.passport-grid::part(section-row) {
    background: var(--vaadin-background-container-strong);
    font-weight: var(--aura-font-weight-semibold);
}

/*
 * Подзаголовок внутри секции карточки ученика («Рассмотрение семьи комиссиями»
 * в разделе «Социальная помощь») — строка на всю ширину vaadin-form-layout.
 * Поля этой строки появились ради сводки, поэтому правило живёт здесь.
 */
.form-subtitle {
    margin: var(--vaadin-gap-s) 0 0;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
    font-weight: var(--aura-font-weight-semibold);
}
/* стили раздела «ЕНТ» (ent); подключён из vaadin.css */

/* блоки страницы тестирования и вкладки кабинета — та же сетка отступов, что у экрана */
.ent-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vaadin-gap-s);
    width: 100%;
}

.ent-panel[hidden] {
    display: none;
}

.ent-panel > vaadin-grid,
.ent-panel > vaadin-form-layout {
    width: 100%;
}

#entTestTabs {
    width: 100%;
}

/* «сохранено HH:MM» рядом с кнопкой — по центру строки кнопок */
.ent-saved {
    align-self: center;
}

/* итоги по классу одной строкой над таблицей */
.ent-totals {
    margin: 0;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
}

.ent-totals b {
    color: var(--vaadin-text-color);
    font-weight: var(--aura-font-weight-semibold);
}

/* поля прямо в ячейках таблицы результатов: без подписи, во всю ширину ячейки */
.ent-results-grid .ent-cell-field {
    width: 100%;
    min-width: 0;
    /* компактнее обычного поля: в узкой ячейке остаётся место под значение («Творческий», «Математика») */
    --vaadin-input-field-padding: var(--vaadin-padding-block-container) 6px;
    --vaadin-input-field-gap: 2px;
}

/* двенадцать колонок должны поместиться уже при окне 1280px: поля ячеек по бокам уже общих */
.ent-results-grid > vaadin-grid-cell-content {
    --vaadin-grid-cell-padding: var(--vaadin-padding-block-container) 5px;
}

/* заголовки колонок узкие — переносятся, а не обрезаются многоточием */
.ent-results-grid > vaadin-grid-cell-content.ent-wrap-header {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
    font-size: var(--aura-font-size-s);
}

/* длинное ФИО — в две строки */
.ent-results-grid > vaadin-grid-cell-content.ent-name-cell {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

/* общий балл: прошедшие порог выделены, не прошедшие — приглушены */
.ent-results-grid::part(ent-passed) {
    font-weight: var(--aura-font-weight-semibold);
    color: var(--aura-accent-green, var(--vaadin-text-color));
}

.ent-results-grid::part(ent-failed) {
    color: var(--vaadin-text-color-secondary);
}

/* сводка: подписи не обрезаются многоточием, а переносятся */
#entSummaryGrid > vaadin-grid-cell-content {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

/* строка «Итого по школе» в сводке */
#entSummaryGrid::part(ent-total) {
    font-weight: var(--aura-font-weight-semibold);
}
/* стили раздела «Типы объектов карты» (map-types); подключён из vaadin.css.
   Здесь всё, что добавилось к карте вместе с настраиваемыми типами: кнопки типов
   с фигурами, маркеры-divIcon и диалог «Типы меток».
   Общие правила карты живут в vaadin.css — они не менялись. */

/* ------------------------------------------------- колонка типов на карте */

.map-type-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
}

/* казахские названия длиннее русских: колонка чуть шире, подпись переносится */
.map-view .map-types {
    flex: 0 0 16em;
}

.map-types vaadin-button::part(label) {
    white-space: normal;
    line-height: 1.25;
}

/* фигура типа со значком в кнопке: место под неё занято и до отрисовки SVG */
.map-type-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}

.map-type-name {
    flex-grow: 1;
    text-align: start;
}

.map-types-settings {
    margin-top: auto;
}

/* «Очистить карту» — сразу под «Типами меток», без своего отступа сверху */
.map-types-clear {
    justify-content: flex-start;
}

/* диалог очистки: выбор и предупреждение одной колонкой */
.map-clear-dialog {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
    width: min(26rem, 80vw);
}

/* ------------------------------------------------- маркеры на карте */

/* divIcon без рамки и фона по умолчанию: виден только SVG нужной формы */
.map-canvas .map-marker {
    background: none;
    border: 0;
    line-height: 0;
}

.map-canvas .map-marker .map-shape {
    display: block;
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.35));
}

.map-popup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vaadin-gap-xs);
    margin-top: var(--vaadin-gap-xs);
}

/* ------------------------------------------------- диалог «Типы меток» */

.mt-editor {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
    width: min(68rem, 88vw);
}

.mt-head,
.mt-row {
    display: grid;
    /* ширины фиксированы (кроме названий): шапка и строки — разные гриды,
       и колонка auto разъезжалась бы по содержимому */
    grid-template-columns:
        1.75rem minmax(7rem, 1.2fr) minmax(7rem, 1.2fr) 10rem 3.25rem 7.5rem 5rem 5rem 4.75rem 2.5rem;
    align-items: center;
    gap: var(--vaadin-gap-xs);
}

.mt-head {
    padding-bottom: var(--vaadin-gap-xs);
    border-bottom: 1px solid var(--vaadin-border-color);
    font-size: var(--aura-font-size-xs);
    color: var(--vaadin-text-color-secondary);
}

.mt-head span:nth-child(5),
.mt-head span:nth-child(n + 7) {
    text-align: center;
}

.mt-head span:nth-child(4),
.mt-head span:nth-child(6) {
    padding-inline-start: 0.2rem;
}

.mt-rows {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
}

.mt-row {
    padding: 2px 0;
}

.mt-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.75rem;
}

.mt-row > vaadin-checkbox,
.mt-check {
    justify-self: center;
}

/* ячейка «только одна»: у школы флажок выключен, подсказка висит на ячейке */
.mt-check {
    display: inline-flex;
}

/* выбор формы: шесть миниатюр, выбранная — в рамке */
.mt-shapes {
    display: flex;
    gap: 2px;
}

.mt-shape,
.mt-icon,
.mt-icon-choice,
.mt-color,
.mt-palette-color {
    border: 1px solid transparent;
    border-radius: var(--vaadin-radius-s, 4px);
    background: none;
    cursor: pointer;
    padding: 0;
}

.mt-shape {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
}

.mt-shape:hover,
.mt-icon:hover,
.mt-icon-choice:hover,
.mt-color:hover {
    border-color: var(--vaadin-border-color);
}

.mt-shape-svg {
    display: inline-flex;
}

.mt-shape.selected {
    border-color: var(--aura-accent-color, var(--vaadin-border-color-strong));
    background: var(--vaadin-background-container, rgb(0 0 0 / 0.04));
}

/* значок: рисунок в рамке (как у цвета) — клик раскрывает выбор строкой ниже */
.mt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 2.5rem;
    height: 1.9rem;
    border-color: var(--vaadin-border-color);
    color: var(--vaadin-text-color);
    font-family: var(--aura-font-family);
}

.mt-icon-glyph {
    display: inline-flex;
}

/* выбор значка раскрывается под строкой типа, как палитра */
.mt-icons {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
    margin: 0 0 var(--vaadin-gap-xs) 1.75rem;
    padding: var(--vaadin-gap-s);
    border: 1px solid var(--vaadin-border-color);
    border-radius: var(--vaadin-radius-m);
    background: var(--vaadin-background-container, rgb(0 0 0 / 0.03));
}

.mt-icons-caption {
    font-size: var(--aura-font-size-s);
    color: var(--vaadin-text-color-secondary);
}

.mt-icons-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, 2.5rem);
    gap: 0.25rem;
}

.mt-icon-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
}

.mt-icon-choice.selected {
    border-color: var(--aura-accent-color, var(--vaadin-border-color-strong));
    background: var(--vaadin-background-container-strong, rgb(0 0 0 / 0.06));
}

/* цвет: образец и его hex — клик раскрывает палитру строкой ниже */
.mt-color {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.35rem;
    border-color: var(--vaadin-border-color);
    font-family: var(--aura-font-family);
    font-size: var(--aura-font-size-xs);
    color: var(--vaadin-text-color);
}

.mt-color-dot {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.15) inset;
}

/* две кнопки-стрелки (по 34px) помещаются в колонку «Порядок» (4.75rem) с зазором до корзины */
.mt-order {
    display: flex;
    justify-content: center;
}

.mt-remove {
    display: inline-flex;
    justify-content: center;
}

/* палитра раскрывается под строкой типа: 12 готовых цветов и своё значение */
.mt-palette {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--vaadin-gap-s);
    margin: 0 0 var(--vaadin-gap-xs) 1.75rem;
    padding: var(--vaadin-gap-s);
    border: 1px solid var(--vaadin-border-color);
    border-radius: var(--vaadin-radius-m);
    background: var(--vaadin-background-container, rgb(0 0 0 / 0.03));
}

.mt-palette-colors {
    display: grid;
    grid-template-columns: repeat(6, 1.6rem);
    gap: 0.35rem;
}

.mt-palette-color {
    width: 1.6rem;
    height: 1.6rem;
    border-color: rgb(0 0 0 / 0.15);
}

.mt-palette-color:hover {
    border-color: var(--vaadin-text-color);
}

.mt-hex {
    width: 9rem;
}

.map-types-link {
    text-decoration: none;
}

/* узкое окно: таблица типов прокручивается вбок, кнопки типов — строкой */
@media (max-width: 900px) {
    .mt-editor {
        width: min(68rem, 88vw);
        overflow-x: auto;
    }

    .mt-head,
    .mt-row {
        min-width: 55.5rem;
    }
}

@media (max-width: 700px) {
    .map-type-buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .map-types-settings {
        margin-top: 0;
    }
}

/* стили раздела «Мой класс» (my-class) и блока «Личный кабинет» в форме сотрудника; подключён из vaadin.css */

.my-class-summary {
    margin: 0;
    color: var(--vaadin-text-color-secondary);
}

#myClassTabs {
    width: 100%;
}

/* блок «Личный кабинет» в форме сотрудника (тип поля account, employee-account.js) */
.account-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vaadin-gap-s);
    padding-bottom: var(--vaadin-gap-s);
    box-sizing: border-box;
}

/* логин и статус выровнены по подписи: текст ошибки под логином не сдвигает «Статус» вниз */
.account-block .field-row {
    align-items: flex-start;
}

.account-block .hint {
    margin: 0;
    color: var(--vaadin-text-color-secondary);
}

/* пароль в диалоге — моноширинный, чтобы не путать похожие символы */
.account-password::part(input-field) {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: 0.08em;
}

.account-dialog-text {
    margin: 0 0 var(--vaadin-gap-s);
    max-width: 28em;
}

/* стили блока «Карта друзей» карточки ученика (friends); подключён из vaadin.css.
   Маркеры, подписи и рамка карты — общие правила .map-canvas (vaadin.css, map-types.css). */

/* слева список, справа карта; на узком экране — друг под другом */
.friends-layout {
    display: grid;
    grid-template-columns: minmax(22rem, 2fr) 3fr;
    gap: var(--vaadin-gap-m);
    width: 100%;
    align-items: stretch;
}

.friends-layout[hidden] {
    display: none;
}

.friends-side {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
    min-width: 0;
}

.friends-side vaadin-grid {
    width: 100%;
}

/* строка самого ученика — первой, выделена как заголовок списка */
.friends-side vaadin-grid::part(friends-student-row) {
    font-weight: var(--aura-font-weight-semibold);
    background: var(--vaadin-background-container);
}

.friends-map.map-canvas {
    min-height: 24rem;
}

/* линия от дома ученика к дому друга: тонкая и полупрозрачная, под маркерами */
.friends-map .friends-link {
    stroke: var(--aura-accent-color);
    stroke-width: 2;
    stroke-opacity: 0.45;
}

@media (max-width: 60rem) {
    .friends-layout {
        grid-template-columns: 1fr;
    }
}

/* стили раздела «Кружки» (clubs): отчёт «Отчёты → Кружки», блок в карточке ученика,
   вкладка «Кружки» в «Моём классе»; подключён из vaadin.css */

/* заголовок таблицы отчёта и кнопка выгрузки в одну строку */
.clubs-report-head {
    display: flex;
    align-items: center;
    gap: var(--vaadin-gap-s);
}

.clubs-report-head .section-title {
    margin: 0;
}

/* сводка по школе — не шире формы: три числа и короткая таблица направлений */
.report-columns.clubs-summary-layout {
    grid-template-columns: minmax(0, 52rem);
}

.stat-cards.clubs-cards {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

/* занятость по классам: много узких колонок кружков — шапка переносится, таблица прокручивается внутри */
.clubs-monitoring-grid {
    height: 34em;
}

.clubs-monitoring-grid::part(header-cell) {
    white-space: normal;
    line-height: var(--aura-line-height-xs);
    font-size: var(--aura-font-size-s);
}

.clubs-monitoring-grid::part(total-row) {
    font-weight: var(--aura-font-weight-semibold);
    background: var(--vaadin-background-container-strong);
}

/* два поля выбора кружков: рядом на широком экране, друг под другом на узком */
.clubs-form {
    width: 100%;
}

.clubs-form vaadin-multi-select-combo-box {
    width: 100%;
}

/* диалог «Кружки ученика» в «Моём классе» */
.clubs-dialog-form {
    width: min(36rem, 80vw);
}

.clubs-dialog-student {
    margin: 0 0 var(--vaadin-gap-s);
    font-weight: var(--aura-font-weight-semibold);
}

#clubsEntry .hint {
    margin: 0;
    color: var(--vaadin-text-color-secondary);
}

/* страница «Кружки»: слева школа и организации, справа кружки выбранной строки */
.clubs-catalog-columns {
    display: grid;
    grid-template-columns: minmax(20rem, 2fr) minmax(0, 3fr);
    gap: var(--vaadin-gap-l);
    width: 100%;
    align-items: start;
}

@media (max-width: 1100px) {
    .clubs-catalog-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

.clubs-catalog-column {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
    min-width: 0;
}

.clubs-catalog-column .section-title {
    margin: 0;
}

.clubs-catalog .hint {
    color: var(--vaadin-text-color-secondary);
}

.clubs-directions-link {
    margin-inline-start: auto;
}

.clubs-places-grid,
.clubs-list-grid {
    width: 100%;
    height: 30em;
}

/* организация: название и под ним адрес с телефоном */
.clubs-place-name {
    display: block;
}

.clubs-place-details {
    display: block;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xs);
    line-height: var(--aura-line-height-xs);
    overflow: hidden;
    text-overflow: ellipsis;
}

.clubs-places-grid::part(school-row) {
    font-weight: var(--aura-font-weight-semibold);
}

.clubs-list-grid::part(archived-row) {
    color: var(--vaadin-text-color-secondary);
}

/*
 * Уровни над школой (docs/city-region.md): «Обзор», «Соцпаспорта школ», «Школы»,
 * «Пользователи», «Регионы и города». Токены темы только используются — задаются в theme.css.
 */

/* шапка экрана: организация · учебный год (как подзаголовок главной школы) */
.overview-subtitle {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
}

/* ------------------------------------------------------------------ списки */

/* таблица тянется до низа карточки */
.accounts-grid,
.overview-schools-grid {
    flex: 1 1 auto;
    min-height: 20em;
}

.accounts-hint {
    align-self: center;
}

/* школа без аккаунта завуча — «Нет» цветом ошибки */
.overview-schools-grid::part(missing-account) {
    color: var(--crm-error-color);
}

/* ------------------------------------------------------------------ диалоги */

.accounts-form,
.overview-school-form,
.structure-form {
    width: min(36em, 80vw);
}

.accounts-card-note {
    margin: 0 0 var(--vaadin-gap-s);
    max-width: 36em;
}

.accounts-card-actions {
    flex-wrap: wrap;
}

/* ------------------------------------------------------------------ регионы и города */

/* области сверху, их города и районы — под ними; обе таблицы на всю ширину карточки */
.view-layout.structure-view {
    gap: var(--vaadin-gap-l);
}

.structure-column {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
    width: 100%;
    min-width: 0;
}

.structure-grid {
    width: 100%;
}

/* областей немного — таблица невысокая; городов больше */
#regionsGrid {
    height: 14em;
}

#citiesGrid {
    height: 24em;
}

/* ------------------------------------------------------------------ обзор (дашборд) */

/* содержимое дашборда — те же отступы, что у экрана */
.view-layout.overview-content {
    padding: 0;
}

/* до загрузки содержимое скрыто атрибутом hidden — display: flex его иначе перебивает */
.view-layout.overview-content[hidden],
#overviewFilters[hidden] {
    display: none;
}

.overview-content > vaadin-grid {
    width: 100%;
}

/* семь карточек в ряд на обычном экране, на узком — переносятся */
.stat-cards.dashboard-tiles.overview-tiles {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
}

/* карточки «Обзора» — не ссылки: без подсветки при наведении */
.stat-card.dashboard-tile.overview-tile:hover {
    border-color: var(--vaadin-border-color);
    box-shadow: var(--aura-shadow-xs);
}

/* заголовок таблицы, подсказка и иконка выгрузки в одну строку */
.overview-table-head {
    display: flex;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--vaadin-gap-s);
}

.overview-table-head .section-title {
    margin: 0;
}

.overview-table-head vaadin-button {
    margin-inline-start: auto;
}

.overview-name {
    display: inline-flex;
    align-items: center;
    gap: var(--vaadin-gap-xs);
}

/* двойной клик по городу раскрывает школы — без выделения текста */
.overview-name-city {
    user-select: none;
}

.overview-name vaadin-icon {
    width: 1em;
    height: 1em;
    color: var(--vaadin-text-color-secondary);
}

/* школы раскрытого города — со сдвигом под стрелку города */
.overview-name-nested {
    padding-inline-start: calc(1em + var(--vaadin-gap-xs));
}

.overview-grid::part(nested-row) {
    background: var(--vaadin-background-container);
}

.overview-grid::part(total-row) {
    font-weight: var(--aura-font-weight-semibold);
    background: var(--vaadin-background-container-strong);
}

/* шапка таблицы «Обзора» узкая (всё помещается при 1400px): длинные заголовки переносятся по слогам
   и мельче основного текста, вместо обрезки многоточием */
.overview-grid vaadin-grid-cell-content:has(> vaadin-grid-sorter),
.overview-grid vaadin-grid-sorter {
    font-size: var(--aura-font-size-s);
    line-height: var(--aura-line-height-s);
    hyphens: auto;
}
/*
 * «Соцпаспорта школ» уровней над школой (docs/city-region.md, «2»): pages/overview-passports.blade.php.
 * Плашки шапки и таблица показателей — классы школьного соцпаспорта (passport.css); здесь только
 * раскладка страницы. Токены темы только используются.
 */

/* плашки, таблица и примечание — столбиком с отступами как у view-layout */
.overview-passports-content {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-m);
}

.overview-passports-content[hidden] {
    display: none;
}

.overview-passports .passport-grid {
    width: 100%;
    min-height: 20em;
}

/* Админка инфо-киоска (/kiosk-admin): вкладки и вкладка «Киоски». Подключён из vaadin.css.
   Стили остальных вкладок — css/sections/kiosk/tabs/<ключ>.css (свой файл у каждой дорожки).
   Экран киоска и мобильная версия — css/sections/kiosk-screen.css. */

/* Вкладка «Расписание» админки инфо-киоска (дорожка A): корень section#kioskTabTimetable.kiosk-tab.
   Подключён из css/sections/kiosk.css. Только токены темы: var(--aura-*), var(--vaadin-*).
   Сетка «урок × день» — как лист таблицы: поля в ячейках без рамок, пока их не трогают,
   рамка и подсказки появляются при наведении и фокусе. */

/* «Есть несохранённые изменения» — в ряду кнопок, по середине их высоты
   (34px — высота поля без подписи, как у чекбокса в .filter-row в vaadin.css) */
#kioskTabTimetable .timetable-tab-dirty {
    display: flex;
    align-items: center;
    align-self: flex-end;
    min-height: 34px;
    color: var(--aura-orange-text);
    font-weight: var(--aura-font-weight-medium);
}

#kioskTabTimetable .timetable-tab-dirty[hidden] {
    display: none;
}

#kioskTabTimetable p.hint {
    margin: 0;
}

/* узкий экран — сетка прокручивается внутри себя, страница — нет */
#kioskTabTimetable .timetable-tab-scroll {
    width: 100%;
    overflow-x: auto;
}

#kioskTabTimetable .timetable-tab-scroll[hidden],
#kioskTabTimetable .buttons-panel[hidden] {
    display: none;
}

/* плотность — вариант Aura theme="small" на самой сетке (разметка) */
#kioskTabTimetable .timetable-tab-grid {
    display: grid;
    grid-template-columns: 6.5em repeat(6, minmax(15em, 1fr));
    min-width: calc(6.5em + 6 * 15em);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-m);
    background: var(--aura-surface-color);
    overflow: hidden;
    font-size: var(--aura-font-size-m);
}

#kioskTabTimetable :is(.timetable-tab-corner, .timetable-tab-day) {
    display: flex;
    align-items: baseline;
    padding: var(--vaadin-padding-s);
    background: var(--vaadin-background-container);
    font-weight: var(--aura-font-weight-semibold);
}

#kioskTabTimetable .timetable-tab-day {
    border-inline-start: 1px solid var(--vaadin-border-color-secondary);
}

#kioskTabTimetable .timetable-tab-day-short {
    display: none;
}

#kioskTabTimetable .timetable-tab-row-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--vaadin-padding-s);
    border-top: 1px solid var(--vaadin-border-color-secondary);
    background: var(--vaadin-background-container);
}

#kioskTabTimetable .timetable-tab-row-no {
    font-size: var(--aura-font-size-l);
    font-weight: var(--aura-font-weight-semibold);
    line-height: 1;
}

#kioskTabTimetable .timetable-tab-row-time {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ячейка: уроки (подгруппы) столбиком, «+» подгруппы — в правом нижнем углу */
#kioskTabTimetable .timetable-tab-cell {
    --vaadin-input-field-background: transparent;
    --vaadin-input-field-border-color: transparent;

    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
    min-width: 0;
    padding: var(--vaadin-padding-xs);
    border-top: 1px solid var(--vaadin-border-color-secondary);
    border-inline-start: 1px solid var(--vaadin-border-color-secondary);
}

#kioskTabTimetable .timetable-tab-cell[data-filled] {
    background: color-mix(in srgb, var(--aura-accent-color) 7%, transparent);
}

#kioskTabTimetable .timetable-tab-cell:is(:hover, :focus-within) {
    --vaadin-input-field-background: var(--aura-surface-color);
    --vaadin-input-field-border-color: var(--vaadin-border-color-secondary);
}

/* пустые ячейки без подсказок «Предмет / Учитель / Каб.» — пока их не трогают */
#kioskTabTimetable .timetable-tab-cell:not(:hover, :focus-within) {
    --vaadin-input-field-placeholder-color: transparent;
}

#kioskTabTimetable .timetable-tab-cell :is(vaadin-combo-box, vaadin-text-field)::part(input-field) {
    box-shadow: none;
}

#kioskTabTimetable .timetable-tab-cell:not(:hover, :focus-within) vaadin-combo-box::part(toggle-button) {
    visibility: hidden;
}

/* урок: предмет на всю ширину; ниже — учитель, кабинет и «+» подгруппы (у последнего урока ячейки) */
#kioskTabTimetable .timetable-tab-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4em 1.5em;
    gap: 2px;
    align-items: center;
}

#kioskTabTimetable .timetable-tab-entry[data-subgroup] {
    padding-top: var(--vaadin-padding-xs);
    border-top: 1px dashed var(--vaadin-border-color-secondary);
}

#kioskTabTimetable .timetable-tab-entry > :is(vaadin-combo-box, vaadin-text-field) {
    min-width: 0;
    width: 100%;
    padding: 0;
}

#kioskTabTimetable .timetable-tab-subject {
    grid-column: 1 / -1;
    grid-row: 1;
    --vaadin-input-field-value-font-weight: var(--aura-font-weight-semibold);
}

#kioskTabTimetable .timetable-tab-entry[data-subgroup] .timetable-tab-subject {
    grid-column: 1 / 3;
}

#kioskTabTimetable .timetable-tab-teacher {
    grid-column: 1;
    grid-row: 2;
}

#kioskTabTimetable .timetable-tab-room {
    grid-column: 2;
    grid-row: 2;
}

#kioskTabTimetable :is(.timetable-tab-teacher, .timetable-tab-room) {
    --vaadin-input-field-value-color: var(--vaadin-text-color-secondary);
    --vaadin-input-field-value-font-size: var(--aura-font-size-s);
}

#kioskTabTimetable :is(.timetable-tab-add, .timetable-tab-remove) {
    justify-self: center;
    min-width: 0;
    width: 1.5em;
    padding: 0;
}

#kioskTabTimetable .timetable-tab-add {
    grid-column: 3;
    grid-row: 2;
}

#kioskTabTimetable .timetable-tab-remove {
    grid-column: 3;
    grid-row: 1;
}

#kioskTabTimetable .timetable-tab-add[hidden] {
    display: none;
}

/* «+» — только у ячейки под мышью или в фокусе: пустая сетка не рябит кнопками */
#kioskTabTimetable .timetable-tab-cell:not(:hover, :focus-within) :is(.timetable-tab-add, .timetable-tab-remove) {
    visibility: hidden;
}

/* выпадающие списки шире узких полей ячейки: полное ФИО учителя и название предмета видны целиком */
#kioskTabTimetable .timetable-tab-teacher {
    --vaadin-combo-box-overlay-width: 22em;
}

#kioskTabTimetable .timetable-tab-subject {
    --vaadin-combo-box-overlay-width: 16em;
}

/* выпадающий список учителей: ФИО и предмет с должностью */
.timetable-tab-option-details {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
}

/* диалоги копирования и импорта */
.timetable-tab-dialog {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
    width: min(36em, 86vw);
}

.timetable-tab-dialog p.hint {
    margin: 0;
}

.timetable-tab-dialog .excel-summary[hidden] {
    display: none;
}

/* Вкладка «Звонки» админки инфо-киоска (дорожка A): корень section#kioskTabBells.kiosk-tab.
   Подключён из css/sections/kiosk.css. Только токены темы: var(--aura-*), var(--vaadin-*). */

#kioskTabBells .bells-tab-now {
    color: var(--vaadin-text-color);
    font-weight: var(--aura-font-weight-medium);
}

/* «Есть несохранённые изменения» — в ряду кнопок, по середине их высоты
   (34px — высота поля без подписи, как у чекбокса в .filter-row в vaadin.css) */
#kioskTabBells .bells-tab-dirty {
    display: flex;
    align-items: center;
    align-self: flex-end;
    min-height: 34px;
    color: var(--aura-orange-text);
    font-weight: var(--aura-font-weight-medium);
}

#kioskTabBells .bells-tab-dirty[hidden] {
    display: none;
}

/* смены рядом, на узком экране — одна под другой */
#kioskTabBells .bells-tab-shifts {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--vaadin-gap-l);
    width: 100%;
}

#kioskTabBells .bells-tab-shift {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
    flex: 0 1 26em;
    min-width: min(100%, 22em);
    padding: var(--vaadin-padding-m);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
    background: var(--aura-surface-color);
    box-sizing: border-box;
}

#kioskTabBells .bells-tab-rows {
    display: flex;
    flex-direction: column;
}

/* строка: номер, начало – конец, длина урока, удалить; над ней — перемена */
#kioskTabBells .bells-tab-row {
    display: grid;
    grid-template-columns: 1.75em 7.5em auto 7.5em minmax(3.5em, 1fr) auto;
    grid-template-areas:
        'pause pause pause pause pause pause'
        'no start dash end duration remove'
        '. error error error error error';
    align-items: center;
    column-gap: var(--vaadin-gap-xs);
    padding: 2px var(--vaadin-padding-xs);
    border-radius: var(--vaadin-radius-m);
}

#kioskTabBells .bells-tab-row[data-current] {
    background: color-mix(in srgb, var(--aura-accent-color) 12%, transparent);
}

#kioskTabBells .bells-tab-pause {
    grid-area: pause;
    padding: 2px 0 2px calc(1.75em + var(--vaadin-gap-xs));
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xs);
}

#kioskTabBells .bells-tab-pause[hidden] {
    display: none;
}

#kioskTabBells .bells-tab-no {
    grid-area: no;
    font-weight: var(--aura-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    text-align: end;
}

#kioskTabBells .bells-tab-row vaadin-time-picker {
    width: 100%;
    padding: 0;
}

#kioskTabBells .bells-tab-row [data-start] {
    grid-area: start;
}

#kioskTabBells .bells-tab-row [data-end] {
    grid-area: end;
}

#kioskTabBells .bells-tab-dash {
    grid-area: dash;
    color: var(--vaadin-text-color-secondary);
}

#kioskTabBells .bells-tab-duration {
    grid-area: duration;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
    white-space: nowrap;
}

#kioskTabBells .bells-tab-row vaadin-button {
    grid-area: remove;
}

/* ошибка времени урока — под полями, во всю ширину строки */
#kioskTabBells .bells-tab-error {
    grid-area: error;
    color: var(--aura-red-text);
    font-size: var(--aura-font-size-xs);
}

#kioskTabBells .bells-tab-error[hidden] {
    display: none;
}

#kioskTabBells .bells-tab-empty {
    margin: 0;
    padding: var(--vaadin-padding-s) 0;
}

#kioskTabBells .bells-tab-shift vaadin-button[hidden] {
    display: none;
}

/* Вкладка «Изменения» админки инфо-киоска (дорожка A): корень section#kioskTabChanges.kiosk-tab.
   Подключён из css/sections/kiosk.css. Только токены темы: var(--aura-*), var(--vaadin-*). */

/* «Четверг, сегодня» — по середине кнопок ряда, а не по подписи поля «Дата»
   (34px — высота поля без подписи, как у чекбокса в .filter-row в vaadin.css) */
#kioskTabChanges .changes-tab-weekday {
    display: flex;
    align-items: center;
    align-self: flex-end;
    min-height: 34px;
}

/* отменённый урок — красным, как на экране */
#kioskTabChanges vaadin-grid::part(changes-tab-cancelled) {
    color: var(--aura-red-text);
}

#kioskTabChanges .changes-tab-card vaadin-form-layout {
    width: 100%;
    max-width: 56em;
}

/* «По расписанию: …» — плашка под полями даты, класса и урока */
#kioskTabChanges .changes-tab-original {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--vaadin-gap-xs) var(--vaadin-gap-s);
    box-sizing: border-box;
    width: 100%;
    max-width: 56em;
    padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
    border-radius: var(--vaadin-radius-m);
    background: var(--vaadin-background-container);
}

#kioskTabChanges .changes-tab-original[hidden] {
    display: none;
}

#kioskTabChanges .changes-tab-original-label {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
}

/* Вкладка «Столовая» админки инфо-киоска (дорожка C): корень section#kioskTabCanteen.kiosk-tab.
   Подключён из css/sections/kiosk.css. Только токены темы: var(--aura-*), var(--vaadin-*). */

/* день недели — по центру высоты полей ряда, а не всего ряда с подписями */
#kioskTabCanteen .canteen-weekday {
    display: flex;
    align-items: center;
    align-self: flex-end;
    min-height: var(--vaadin-input-field-height, 2.25rem);
}

/* блюда — строками: номер, название, цена, «Бесплатно», стрелки порядка, удалить */
#kioskTabCanteen .canteen-items {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
    width: 100%;
    max-width: 56em;
}

#kioskTabCanteen .canteen-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vaadin-gap-xs) var(--vaadin-gap-s);
    padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-m);
    background: var(--vaadin-background-container);
}

#kioskTabCanteen .canteen-item-position {
    min-width: 1.5em;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
    font-variant-numeric: tabular-nums;
    text-align: end;
}

#kioskTabCanteen .canteen-item-name {
    flex: 1 1 16em;
    min-width: 12em;
}

#kioskTabCanteen .canteen-item-price {
    width: 9em;
}

#kioskTabCanteen .canteen-items-empty {
    padding: var(--vaadin-padding-xs) 0;
}

/* Общее для вкладок дорожки B админки инфо-киоска — «Объявления», «Доска почёта», «Медиа»
   (корни section.kiosk-content-tab): таблица с миниатюрами, метка состояния, период показа
   датой и временем. Поле картинки — tabs/image-field.css (общее). Подключён из tabs/announcements.css.
   Только токены темы: var(--aura-*), var(--vaadin-*). */

.kiosk-content-grid {
    width: 100%;
    flex: 1 1 auto;
    min-height: 16em;
}

/* ---------------------------------------------------------------- ячейки */

.kiosk-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5em;
    height: 2.75em;
    overflow: hidden;
    border-radius: var(--vaadin-radius-s);
    background: var(--vaadin-background-container);
    color: var(--vaadin-text-color-secondary);
    vertical-align: middle;
}

.kiosk-thumb img,
.kiosk-thumb video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kiosk-cell-two-lines {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: var(--aura-line-height-s);
}

.kiosk-cell-main,
.kiosk-cell-secondary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kiosk-cell-main {
    font-weight: var(--aura-font-weight-medium);
}

.kiosk-cell-muted,
.kiosk-cell-secondary {
    color: var(--vaadin-text-color-secondary);
}

.kiosk-cell-secondary {
    font-size: var(--aura-font-size-s);
}

/* состояние записи: точка и подпись цветом состояния на лёгкой подложке того же цвета */
.kiosk-status {
    display: inline-flex;
    align-items: center;
    gap: var(--vaadin-gap-xs);
    padding: 0 var(--vaadin-padding-s);
    border-radius: var(--vaadin-radius-l);
    background: color-mix(in srgb, currentColor 12%, transparent);
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
    font-weight: var(--aura-font-weight-medium);
    line-height: var(--aura-line-height-m);
    white-space: nowrap;
}

.kiosk-status::before {
    content: '';
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: currentColor;
}

.kiosk-status[data-status='SHOWING'] {
    color: var(--aura-green-text);
}

.kiosk-status[data-status='SCHEDULED'] {
    color: var(--aura-blue-text);
}

.kiosk-priority[data-priority='0'] {
    color: var(--vaadin-text-color-secondary);
}

.kiosk-priority[data-priority='1'] {
    color: var(--aura-orange-text);
    font-weight: var(--aura-font-weight-medium);
}

.kiosk-priority[data-priority='2'] {
    color: var(--aura-red-text);
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-flag {
    color: var(--aura-accent-text-color);
    font-weight: var(--aura-font-weight-medium);
}

/* место 1–3: кружок цвета медали */
.kiosk-place {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75em;
    height: 1.75em;
    border-radius: 50%;
    background: var(--vaadin-background-container-strong);
    color: var(--vaadin-text-color);
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-place[data-place='1'] {
    background: color-mix(in srgb, var(--aura-yellow) 55%, transparent);
}

.kiosk-place[data-place='3'] {
    background: color-mix(in srgb, var(--aura-orange) 40%, transparent);
}

/* --------------------------------------------------------------- карточка */

/* период: дата и время в одной клетке формы */
.kiosk-period {
    display: flex;
    align-items: flex-start;
    gap: var(--vaadin-gap-s);
    min-width: 0;
}

.kiosk-period vaadin-date-picker {
    flex: 1 1 auto;
    min-width: 0;
}

.kiosk-period vaadin-time-picker {
    flex: 0 0 9em;
    width: 9em;
}

/* галочки карточки — по нижней кромке соседнего поля */
.kiosk-card-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: end;
    gap: var(--vaadin-gap-m);
    min-height: var(--vaadin-input-field-height, 2.25rem);
}

/* кнопки карточки отделены от поля картинки над ними */
.kiosk-content-card > .card-actions {
    margin-top: var(--vaadin-gap-m);
}
/* Вкладка «Объявления» админки инфо-киоска (дорожка B): корень section#kioskTabAnnouncements.kiosk-tab.
   Подключён из css/sections/kiosk.css. Общие классы вкладок дорожки B — tabs/content.css.
   Только токены темы: var(--aura-*), var(--vaadin-*). */

#kioskTabAnnouncements vaadin-text-area {
    min-height: 8em;
    max-height: 20em;
}

/* Вкладка «Доска почёта» админки инфо-киоска (дорожка B): корень section#kioskTabHonor.kiosk-tab.
   Подключён из css/sections/kiosk.css. Общие классы вкладок дорожки B (миниатюра, место, период,
   поле фото) — tabs/content.css. Только токены темы: var(--aura-*), var(--vaadin-*). */

/* поле ученика скрыто у рейтинга классов — не занимает клетку формы */
#kioskTabHonor vaadin-combo-box[hidden] {
    display: none;
}
/* Вкладка «Преподаватели» админки инфо-киоска (дорожка C): корень section#kioskTabTeachers.kiosk-tab.
   Подключён из css/sections/kiosk.css. Только токены темы: var(--aura-*), var(--vaadin-*). */

/* галочка «На киоске» и аватар — по центру ячейки */
#kioskTabTeachers .teachers-grid vaadin-checkbox,
#kioskTabTeachers .teachers-grid vaadin-avatar {
    vertical-align: middle;
}
/* Вкладка «Карта школы» админки инфо-киоска (дорожка C): корень section#kioskTabMap.kiosk-tab.
   Подключён из css/sections/kiosk.css. Только токены темы: var(--aura-*), var(--vaadin-*). */

/* миниатюра схемы в таблице — вписана целиком */
#kioskTabMap .map-floor-thumb {
    display: block;
    width: 7em;
    height: 3.5em;
    object-fit: contain;
    border-radius: var(--vaadin-radius-s);
    background: var(--vaadin-background-container);
}

/* большой предпросмотр плана в карточке */
#kioskTabMap .kiosk-image-preview {
    width: 20em;
    height: 14em;
}
/* Вкладка «О школе» админки инфо-киоска (дорожка C): корень section#kioskTabAbout.kiosk-tab.
   Подключён из css/sections/kiosk.css. Только токены темы: var(--aura-*), var(--vaadin-*). */

#kioskTabAbout .about-form,
#kioskTabAbout .about-text {
    width: 100%;
    max-width: 56em;
}

#kioskTabAbout .about-text {
    min-height: 14em;
}

/* заголовки блоков отделены от полей над ними */
#kioskTabAbout > .section-title {
    margin-top: var(--vaadin-gap-m);
}

/* подпись над полем-картинкой — как подпись поля Aura */
#kioskTabAbout .about-field-label {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
    font-weight: var(--aura-font-weight-medium);
}

/* фотографии — плитками с номером, стрелками порядка и «Убрать» */
#kioskTabAbout .about-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
    gap: var(--vaadin-gap-s);
    width: 100%;
    max-width: 56em;
}

#kioskTabAbout .about-photo {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-m);
    background: var(--vaadin-background-container);
}

#kioskTabAbout .about-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

#kioskTabAbout .about-photo-actions {
    display: flex;
    align-items: center;
    gap: var(--vaadin-gap-xs);
    padding: 0 var(--vaadin-padding-xs);
}

#kioskTabAbout .about-photo-position {
    flex: 1 1 auto;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
    font-variant-numeric: tabular-nums;
}

#kioskTabAbout .about-photos-upload {
    width: 100%;
    max-width: 56em;
    box-sizing: border-box;
}

/* Поле-картинка вкладок админки инфо-киоска (views/kiosk/image-field.js, дорожка C):
   предпросмотр слева, загрузка и «Убрать» справа. Подключён из css/sections/kiosk.css.
   Только токены темы: var(--aura-*), var(--vaadin-*). */

.kiosk-image-field {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--vaadin-gap-m);
    width: 100%;
    max-width: 56em;
}

.kiosk-image-preview {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 12em;
    height: 9em;
    overflow: hidden;
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-m);
    background: var(--vaadin-background-container);
}

.kiosk-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.kiosk-image-preview img[hidden],
.kiosk-image-empty[hidden] {
    display: none;
}

.kiosk-image-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vaadin-gap-xs);
    padding: var(--vaadin-padding-s);
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
    text-align: center;
}

.kiosk-image-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vaadin-gap-xs);
    flex: 1 1 20em;
    min-width: 0;
}

.kiosk-image-side vaadin-upload {
    width: 100%;
    box-sizing: border-box;
}

.kiosk-image-side vaadin-button[hidden] {
    display: none;
}

/* Вкладка «Медиа» админки инфо-киоска (дорожка B): корень section#kioskTabMedia.kiosk-tab.
   Подключён из css/sections/kiosk.css. Общие классы вкладок дорожки B — tabs/content.css.
   Только токены темы: var(--aura-*), var(--vaadin-*). */

/* быстрая загрузка над таблицей: во всю ширину, список файлов не раздувает страницу */
.kiosk-media-upload {
    width: 100%;
    box-sizing: border-box;
    max-height: 14em;
    overflow: auto;
}

/* файл слайда: предпросмотр (картинка, видео с кнопками или превью ролика) и загрузка */
.kiosk-media-file {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--vaadin-gap-m);
    width: 100%;
    max-width: 56em;
}

.kiosk-media-preview {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 24em;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-m);
    background: var(--vaadin-background-container);
    color: var(--vaadin-text-color-secondary);
}

.kiosk-media-preview img,
.kiosk-media-preview video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.kiosk-media-preview vaadin-icon {
    width: 2.5em;
    height: 2.5em;
}

.kiosk-media-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 20em;
    gap: var(--vaadin-gap-s);
    min-width: 0;
}

.kiosk-media-actions[hidden] {
    display: none;
}

.kiosk-media-actions vaadin-upload {
    width: 100%;
    box-sizing: border-box;
}

#kioskTabMedia vaadin-text-field[hidden] {
    display: none;
}

@media (max-width: 700px) {
    .kiosk-media-preview {
        width: 100%;
    }
}

.kiosk-tabs {
    width: 100%;
    flex: 0 0 auto;
}

/* таблица тянется до низа карточки только на вкладке со списком; карточка и заглушки — по содержимому */
.view-layout.kiosk-admin:has(> .kiosk-tab:not([hidden]):not(.view-layout-grid)) {
    flex: 0 0 auto;
}

.view-layout.kiosk-tab[hidden] {
    display: none;
}

.kiosk-tab-stub {
    padding: var(--vaadin-padding-m) 0;
}

/* ------------------------------------------------------------ карточка киоска */

.kiosk-card vaadin-form-layout {
    width: 100%;
    max-width: 56em;
}

/* чекбокс в сетке формы — по нижней кромке соседнего поля */
.kiosk-card-checkbox {
    align-self: end;
    min-height: var(--vaadin-input-field-height, 2.25rem);
    align-content: center;
}

/* заголовки блоков карточки отделены от полей над ними */
.kiosk-card > .section-title,
.kiosk-card > section > .section-title {
    margin-top: var(--vaadin-gap-m);
}

/* блоки — одним столбцом: порядок сверху вниз совпадает с порядком слайдов */
.kiosk-blocks {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
    width: 100%;
    max-width: 30em;
}

.kiosk-block-row {
    display: flex;
    align-items: center;
    gap: var(--vaadin-gap-xs);
    padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-m);
    background: var(--vaadin-background-container);
}

.kiosk-block-row[data-disabled] {
    color: var(--vaadin-text-color-secondary);
    background: transparent;
}

.kiosk-block-row vaadin-checkbox {
    flex: 1 1 auto;
}

.kiosk-block-position {
    min-width: 1.5em;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
    font-variant-numeric: tabular-nums;
    text-align: end;
}

/* ссылки экрана и мобильной версии: QR слева, адрес и кнопки справа */
.kiosk-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(34em, 1fr));
    gap: var(--vaadin-gap-m);
    width: 100%;
}

.kiosk-links[hidden] {
    display: none;
}

.kiosk-link {
    display: flex;
    gap: var(--vaadin-gap-m);
    align-items: flex-start;
    padding: var(--vaadin-padding-m);
    border: 1px solid var(--vaadin-border-color);
    border-radius: var(--vaadin-radius-m);
    background: var(--vaadin-background-container);
}

.kiosk-link-qr {
    flex: 0 0 auto;
    width: 9em;
    height: 9em;
    border-radius: var(--vaadin-radius-s);
    overflow: hidden;
}

.kiosk-link-qr svg {
    display: block;
    width: 100%;
    height: 100%;
}

.kiosk-link-body {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
    flex: 1 1 auto;
    min-width: 0;
}

.kiosk-link-body vaadin-text-field {
    width: 100%;
}

.kiosk-log-grid {
    width: 100%;
    height: 6em;
}

@media (max-width: 900px) {
    .kiosk-links {
        grid-template-columns: 1fr;
    }

    .kiosk-link {
        flex-direction: column;
    }
}

/* Экран инфо-киоска (/kiosk/{token}) и мобильная версия (/info/{token}). Подключён из vaadin.css.
   Слайды блоков — css/sections/kiosk/blocks/<ключ>.css (свой файл у каждой дорожки).
   Здесь — движок экрана (дорожка D): раскладка, шапка, колонка, общий вид слайда и его
   страниц, смена слайдов, сенсорное меню и разделы, PIN, сервисная панель, недельное
   расписание, мобильная версия.
   Селекторы с .public-layout — двойные: общие правила vaadin.css идут ниже импорта. */

/* Слайд «Расписание на сегодня» (blocks/timetable.js): корень .kiosk-slide-timetable
   (в мобильной версии — .kiosk-info .kiosk-slide-timetable). Подключён из css/sections/kiosk-screen.css.
   Сетка «класс × уроки»: изменение — оранжевым, отмена — красным и зачёркнуто, идущий урок — рамкой.
   Размеры — шкала экрана var(--kiosk-font-*), var(--kiosk-gap), var(--kiosk-pad); цвета — токены темы. */

.kiosk-slide-timetable .kiosk-tt-legend {
    align-self: center;
}

.kiosk-tt-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: calc(var(--kiosk-gap) / 3);
    font-size: var(--kiosk-font-s);
    line-height: 1.15;
}

.kiosk-tt-col-class {
    width: 4.6em;
}

.kiosk-tt-table th {
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-tt-corner {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-xs);
    text-align: start;
}

.kiosk-tt-number {
    padding: calc(var(--kiosk-gap) * 0.35);
    border-radius: calc(var(--kiosk-radius) * 0.6);
    background: var(--vaadin-background-container-strong);
}

.kiosk-tt-number[data-current] {
    background: var(--aura-accent-color);
    color: var(--aura-accent-contrast-color);
}

.kiosk-tt-number-no {
    display: block;
    font-size: var(--kiosk-font-m);
}

.kiosk-tt-number-time {
    display: block;
    font-size: var(--kiosk-font-xs);
    font-weight: var(--aura-font-weight-regular);
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

.kiosk-tt-class {
    padding: calc(var(--kiosk-gap) * 0.35) calc(var(--kiosk-gap) * 0.6);
    border-radius: calc(var(--kiosk-radius) * 0.6);
    background: var(--aura-accent-surface, var(--vaadin-background-container-strong));
    color: var(--aura-accent-text-color);
    font-size: var(--kiosk-font-l);
    text-align: start;
    white-space: nowrap;
}

.kiosk-tt-shift {
    display: block;
    font-size: var(--kiosk-font-xs);
    font-weight: var(--aura-font-weight-regular);
}

.kiosk-tt-cell {
    padding: calc(var(--kiosk-gap) * 0.35) calc(var(--kiosk-gap) * 0.5);
    border-radius: calc(var(--kiosk-radius) * 0.6);
    background: var(--vaadin-background-container);
    vertical-align: top;
}

.kiosk-tt-cell[data-changed] {
    background: color-mix(in srgb, var(--aura-orange) 22%, var(--aura-surface-color));
    box-shadow: inset calc(var(--kiosk-gap) * 0.3) 0 0 var(--aura-orange);
}

.kiosk-tt-cell[data-cancelled] {
    background: color-mix(in srgb, var(--aura-red) 15%, var(--aura-surface-color));
    box-shadow: inset calc(var(--kiosk-gap) * 0.3) 0 0 var(--aura-red);
}

.kiosk-tt-cell[data-current] {
    outline: calc(var(--kiosk-gap) * 0.25) solid var(--aura-accent-color);
    outline-offset: calc(var(--kiosk-gap) * -0.1);
}

.kiosk-tt-lesson {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kiosk-tt-lesson + .kiosk-tt-lesson {
    margin-top: calc(var(--kiosk-gap) / 4);
    padding-top: calc(var(--kiosk-gap) / 4);
    border-top: 1px dashed var(--vaadin-border-color);
}

.kiosk-tt-subject {
    display: -webkit-box;
    overflow: hidden;
    font-weight: var(--aura-font-weight-semibold);
    hyphens: auto;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kiosk-tt-lesson[data-cancelled] .kiosk-tt-subject {
    text-decoration: line-through;
}

.kiosk-tt-meta {
    overflow: hidden;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kiosk-tt-lesson[data-cancelled] .kiosk-tt-meta {
    color: var(--aura-red-text);
    font-weight: var(--aura-font-weight-medium);
}

/* мобильная версия: сегодняшние уроки списком по классам */
.kiosk-tt-card + .kiosk-tt-card {
    margin-top: var(--vaadin-gap-m);
}

.kiosk-tt-card-title {
    margin: 0 0 var(--vaadin-gap-xs);
    font-size: var(--aura-font-size-l);
}

.kiosk-tt-list {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kiosk-tt-list-row {
    display: grid;
    grid-template-columns: 1.5em 6.5em minmax(0, 1fr);
    gap: var(--vaadin-gap-s);
    padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
    border-radius: var(--vaadin-radius-m);
    background: var(--vaadin-background-container);
}

.kiosk-tt-list-row[data-changed] {
    background: color-mix(in srgb, var(--aura-orange) 20%, var(--aura-surface-color));
}

.kiosk-tt-list-row[data-cancelled] {
    background: color-mix(in srgb, var(--aura-red) 14%, var(--aura-surface-color));
}

.kiosk-tt-list-no {
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-tt-list-time {
    color: var(--vaadin-text-color-secondary);
    font-variant-numeric: tabular-nums;
}

/* Слайд «Изменения на сегодня» (blocks/changes.js): корень .kiosk-slide-changes
   (в мобильной версии — .kiosk-info .kiosk-slide-changes). Подключён из css/sections/kiosk-screen.css.
   Строка: класс и урок слева, что изменилось — справа; отмена — красным.
   Размеры — шкала экрана var(--kiosk-font-*), var(--kiosk-gap), var(--kiosk-pad); цвета — токены темы. */

.kiosk-changes-page {
    display: flex;
    flex-direction: column;
    align-content: start;
    gap: calc(var(--kiosk-gap) * 0.6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kiosk-change {
    display: grid;
    grid-template-columns: minmax(7em, 22%) minmax(0, 1fr);
    align-items: center;
    gap: calc(var(--kiosk-gap) / 3) calc(var(--kiosk-gap) * 1.5);
    padding: calc(var(--kiosk-pad) * 0.5) var(--kiosk-pad);
    border-radius: var(--kiosk-radius);
    background: color-mix(in srgb, var(--aura-orange) 14%, var(--aura-surface-color));
    box-shadow: inset calc(var(--kiosk-gap) * 0.45) 0 0 var(--aura-orange);
}

.kiosk-change[data-cancelled] {
    background: color-mix(in srgb, var(--aura-red) 12%, var(--aura-surface-color));
    box-shadow: inset calc(var(--kiosk-gap) * 0.45) 0 0 var(--aura-red);
}

.kiosk-change-who {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 calc(var(--kiosk-gap) * 0.75);
}

.kiosk-change-class {
    font-size: var(--kiosk-font-xl);
    font-weight: var(--aura-font-weight-semibold);
    line-height: 1.1;
}

.kiosk-change-lesson {
    font-size: var(--kiosk-font-m);
    font-weight: var(--aura-font-weight-medium);
}

.kiosk-change-time {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-s);
    font-variant-numeric: tabular-nums;
}

.kiosk-change-what {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: calc(var(--kiosk-gap) / 3) calc(var(--kiosk-gap) * 1.5);
    font-size: var(--kiosk-font-l);
}

.kiosk-change-subject {
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-change-piece {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: calc(var(--kiosk-gap) / 2);
}

.kiosk-change-old {
    color: var(--vaadin-text-color-secondary);
    text-decoration: line-through;
}

.kiosk-change-arrow {
    color: var(--aura-orange-text);
}

.kiosk-change-new {
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-change-badge {
    padding: 0.1em 0.5em;
    border-radius: calc(var(--kiosk-radius) * 0.6);
    background: var(--aura-orange);
    color: var(--aura-accent-contrast-color);
    font-size: var(--kiosk-font-m);
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-change[data-cancelled] .kiosk-change-badge {
    background: var(--aura-red);
}

.kiosk-change-note {
    grid-column: 2;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-s);
}

/* мобильная версия: класс над изменением */
.kiosk-info .kiosk-change {
    grid-template-columns: minmax(0, 1fr);
}

.kiosk-info .kiosk-change-note {
    grid-column: 1;
}

.kiosk-info .kiosk-change-what {
    font-size: var(--aura-font-size-m);
}

/* Слайд «Звонки» (blocks/bells.js): корень .kiosk-slide-bells
   (в мобильной версии — .kiosk-info .kiosk-slide-bells). Подключён из css/sections/kiosk-screen.css.
   Смены — колонками; идущий урок и перемена подсвечены.
   Размеры — шкала экрана var(--kiosk-font-*), var(--kiosk-gap), var(--kiosk-pad); цвета — токены темы. */

.kiosk-bells-page {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14em), 1fr));
    align-content: start;
    gap: calc(var(--kiosk-gap) * 2);
}

/* узкая колонка смены (две смены на вертикальном экране): подпись «1 урок» убирается — номер уже в круге */
.kiosk-bells-shift {
    min-width: 0;
    container: kiosk-bells-shift / inline-size;
}

@container kiosk-bells-shift (width < 21em) {
    .kiosk-bells-label {
        display: none;
    }
}

.kiosk-bells-shift-title {
    margin: 0 0 calc(var(--kiosk-gap) / 2);
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-l);
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-bells-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--kiosk-gap) / 4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kiosk-bells-row {
    display: grid;
    grid-template-columns: 1.8em minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--kiosk-gap);
    padding: calc(var(--kiosk-gap) * 0.35) var(--kiosk-pad);
    border-radius: var(--kiosk-radius);
    background: var(--vaadin-background-container);
    font-size: var(--kiosk-font-l);
}

.kiosk-bells-row[data-current] {
    background: var(--aura-accent-color);
    color: var(--aura-accent-contrast-color);
}

.kiosk-bells-no {
    display: grid;
    place-items: center;
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    background: var(--aura-surface-color);
    font-size: var(--kiosk-font-m);
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-bells-row[data-current] .kiosk-bells-no {
    background: var(--aura-accent-contrast-color);
    color: var(--aura-accent-color);
}

.kiosk-bells-label {
    overflow: hidden;
    font-size: var(--kiosk-font-m);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* время — всегда в последней колонке: без подписи строка не перестраивается */
.kiosk-bells-time {
    grid-column: 3;
}

.kiosk-bells-time {
    font-weight: var(--aura-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kiosk-bells-break {
    padding-inline-start: calc(var(--kiosk-pad) + 2.6em);
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-xs);
    line-height: 1.3;
}

.kiosk-bells-break[data-current] {
    color: var(--aura-accent-text-color);
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-info .kiosk-bells-row {
    font-size: var(--aura-font-size-m);
}

/* Слайд «Меню столовой» экрана киоска (дорожка C): корень .kiosk-screen .kiosk-slide-canteen
   (в мобильной версии — .kiosk-info .kiosk-slide-canteen). Подключён из css/sections/kiosk-screen.css.
   Размеры — шкала экрана var(--kiosk-font-*), var(--kiosk-gap), var(--kiosk-pad); цвета — токены темы. */

.kiosk-slide-canteen .kiosk-canteen-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kiosk-gap);
}

.kiosk-slide-canteen .kiosk-canteen-date {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-l);
}

/* разделы меню — колонками рядом; в вертикали и в телефоне — друг под другом */
.kiosk-slide-canteen .kiosk-canteen-menus {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: calc(var(--kiosk-gap) * 1.5);
    flex: 1 1 auto;
    min-height: 0;
}

.kiosk-slide-canteen .kiosk-canteen-menus[data-layout='portrait'],
.kiosk-slide-canteen .kiosk-canteen-menus[data-mode='info'] {
    grid-auto-flow: row;
    grid-auto-rows: auto;
    align-content: start;
}

.kiosk-slide-canteen .kiosk-canteen-menu {
    display: flex;
    flex-direction: column;
    gap: var(--kiosk-gap);
    min-height: 0;
    padding: var(--kiosk-pad);
    overflow: hidden;
    border-radius: var(--kiosk-radius);
    background: var(--vaadin-background-container);
}

.kiosk-slide-canteen .kiosk-canteen-photo {
    flex: 0 1 auto;
    width: 100%;
    min-height: 0;
    max-height: 38%;
    object-fit: cover;
    border-radius: calc(var(--kiosk-radius) * 0.75);
}

.kiosk-slide-canteen .kiosk-canteen-menus[data-layout='portrait'] .kiosk-canteen-photo {
    max-height: 22vh;
}

.kiosk-slide-canteen .kiosk-canteen-menus[data-mode='info'] .kiosk-canteen-photo {
    max-height: 14em;
}

.kiosk-slide-canteen .kiosk-canteen-menu-title {
    margin: 0;
    color: var(--aura-accent-text-color);
    font-size: var(--kiosk-font-l);
    font-weight: var(--aura-font-weight-semibold);
    line-height: 1.1;
}

.kiosk-slide-canteen .kiosk-canteen-items {
    display: flex;
    flex-direction: column;
    gap: calc(var(--kiosk-gap) * 0.6);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--kiosk-font-l);
}

/* много блюд — шрифт мельче, чтобы всё поместилось без прокрутки */
.kiosk-slide-canteen .kiosk-canteen-menus[data-density='compact'] .kiosk-canteen-items {
    gap: calc(var(--kiosk-gap) * 0.4);
    font-size: var(--kiosk-font-m);
}

.kiosk-slide-canteen .kiosk-canteen-menus[data-density='dense'] .kiosk-canteen-items {
    gap: calc(var(--kiosk-gap) * 0.25);
    font-size: var(--kiosk-font-s);
}

.kiosk-slide-canteen .kiosk-canteen-menus[data-mode='info'] .kiosk-canteen-items {
    font-size: var(--aura-font-size-m);
}

.kiosk-slide-canteen .kiosk-canteen-item {
    display: flex;
    align-items: baseline;
    gap: calc(var(--kiosk-gap) * 0.5);
    line-height: 1.2;
}

.kiosk-slide-canteen .kiosk-canteen-item-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* пунктир от названия до цены, как в меню */
.kiosk-slide-canteen .kiosk-canteen-item-leader {
    flex: 1 1 auto;
    min-width: 1em;
    border-bottom: 0.12em dotted var(--vaadin-border-color);
}

.kiosk-slide-canteen .kiosk-canteen-item-price {
    font-weight: var(--aura-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kiosk-slide-canteen .kiosk-canteen-item-free {
    padding: 0 0.5em;
    border: 0.1em solid currentColor;
    border-radius: 1em;
    color: var(--aura-green-text);
    font-size: 0.8em;
    font-weight: var(--aura-font-weight-semibold);
    white-space: nowrap;
}

/* Слайд «Объявления и новости» (blocks/announcements.js): корень .kiosk-slide-announcements
   (в мобильной версии — .kiosk-info .kiosk-slide-announcements). Подключён из css/sections/kiosk-screen.css.
   Карточка с картинкой — во всю страницу (картинка слева, в вертикали — сверху), без картинки —
   несколько на странице. Срочное — красная метка и полоса, важное — оранжевая.
   Размеры — шкала экрана var(--kiosk-font-*), var(--kiosk-gap), var(--kiosk-pad); цвета — токены темы. */

.kiosk-ann-page {
    display: flex;
    flex-direction: column;
    gap: var(--kiosk-gap);
}

.kiosk-ann {
    display: flex;
    flex: 0 0 auto;
    gap: calc(var(--kiosk-gap) * 1.5);
    padding: var(--kiosk-pad);
    box-sizing: border-box;
    overflow: hidden;
    border-radius: var(--kiosk-radius);
    background: var(--vaadin-background-container);
    box-shadow: inset calc(var(--kiosk-gap) * 0.45) 0 0 var(--aura-accent-color);
}

.kiosk-ann[data-priority='1'] {
    box-shadow: inset calc(var(--kiosk-gap) * 0.45) 0 0 var(--aura-orange);
}

.kiosk-ann[data-priority='2'] {
    background: color-mix(in srgb, var(--aura-red) 10%, var(--aura-surface-color));
    box-shadow: inset calc(var(--kiosk-gap) * 0.45) 0 0 var(--aura-red);
}

/* с картинкой — вся страница: следующая карточка уходит на новую страницу */
.kiosk-screen .kiosk-ann[data-image] {
    flex: 0 0 100%;
    height: 100%;
    align-items: stretch;
}

/* картинка целиком, без обрезки: на афише важен каждый край (дата, место) */
.kiosk-ann-image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.kiosk-ann-image img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: calc(var(--kiosk-radius) * 0.75);
}

.kiosk-ann-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: calc(var(--kiosk-gap) * 0.75);
    min-width: 0;
    min-height: 0;
    padding-inline-start: calc(var(--kiosk-gap) * 0.5);
}

.kiosk-ann-badges {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--kiosk-gap) / 2);
}

.kiosk-ann-badges span {
    padding: 0.1em 0.6em;
    border-radius: calc(var(--kiosk-radius) * 0.6);
    background: var(--vaadin-background-container-strong);
    font-size: var(--kiosk-font-s);
    font-weight: var(--aura-font-weight-medium);
}

.kiosk-ann-badges .kiosk-ann-priority {
    background: var(--aura-orange);
    color: var(--aura-accent-contrast-color);
}

.kiosk-ann[data-priority='2'] .kiosk-ann-priority {
    background: var(--aura-red);
}

.kiosk-ann-title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: var(--kiosk-font-xl);
    font-weight: var(--aura-font-weight-semibold);
    line-height: 1.12;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.kiosk-ann-body {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: var(--kiosk-font-l);
    line-height: 1.3;
    white-space: pre-line;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.kiosk-screen .kiosk-ann[data-image] .kiosk-ann-body {
    -webkit-line-clamp: 12;
}

.kiosk-screen[data-layout='portrait'] .kiosk-ann[data-image] {
    flex-direction: column;
}

.kiosk-screen[data-layout='portrait'] .kiosk-ann[data-image] .kiosk-ann-image {
    flex: 0 0 48%;
}

/* мобильная версия: картинка сверху, текст целиком */
.kiosk-info .kiosk-ann {
    flex-direction: column;
    padding: var(--vaadin-padding-m);
}

.kiosk-info .kiosk-ann-image {
    aspect-ratio: 16 / 9;
}

.kiosk-info .kiosk-ann-title {
    font-size: var(--aura-font-size-l);
    -webkit-line-clamp: unset;
}

.kiosk-info .kiosk-ann-body {
    font-size: var(--aura-font-size-m);
    -webkit-line-clamp: unset;
}

/* Слайд «Доска почёта» (blocks/honor.js): корень .kiosk-slide-honor
   (в мобильной версии — .kiosk-info .kiosk-slide-honor). Подключён из css/sections/kiosk-screen.css.
   Достижения — плитки с фото и медалью места; рейтинг классов — заголовок рейтинга
   и строки с местом и баллами.
   Размеры — шкала экрана var(--kiosk-font-*), var(--kiosk-gap), var(--kiosk-pad); цвета — токены темы. */

.kiosk-honor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--kiosk-font-m) * 12), 1fr));
    align-content: start;
    gap: var(--kiosk-gap);
}

.kiosk-honor-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--kiosk-gap) * 0.6);
    padding: var(--kiosk-pad);
    border-radius: var(--kiosk-radius);
    background: var(--vaadin-background-container);
    text-align: center;
}

.kiosk-honor-photo {
    position: relative;
    display: grid;
    place-items: center;
    width: calc(var(--kiosk-font-xl) * 3);
    aspect-ratio: 1;
    overflow: visible; /* медаль места выступает за круг */
    border-radius: 50%;
    font-size: var(--kiosk-font-xl);
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-honor-photo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.kiosk-honor-photo[data-empty] {
    background: var(--aura-accent-surface, var(--vaadin-background-container-strong));
    color: var(--aura-accent-text-color);
}

/* значок вида у плитки без фото, ученика и класса */
.kiosk-honor-kind-icon {
    width: 42%;
    height: 42%;
}

.kiosk-honor-place {
    display: grid;
    place-items: center;
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    background: var(--vaadin-background-container-strong);
    font-size: var(--kiosk-font-m);
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-honor-photo .kiosk-honor-place {
    position: absolute;
    inset-inline-end: -0.2em;
    bottom: -0.2em;
    box-shadow: 0 0 0 calc(var(--kiosk-gap) * 0.3) var(--aura-surface-color);
}

.kiosk-honor-place[data-place='1'] {
    /* жёлтый светлый в обеих темах — цифра всегда тёмная (нейтральный цвет текста светлой темы) */
    background: var(--aura-yellow);
    color: var(--aura-neutral-light);
}

.kiosk-honor-place[data-place='2'] {
    /* серебро: смесь цвета текста с поверхностью — светлое в светлой теме, тёмное в тёмной */
    background: color-mix(in oklab, var(--vaadin-text-color) 22%, var(--aura-surface-color-solid));
    color: var(--vaadin-text-color);
}

.kiosk-honor-place[data-place='3'] {
    background: var(--aura-orange);
    color: var(--aura-accent-contrast-color);
}

.kiosk-honor-text {
    display: flex;
    flex-direction: column;
    gap: calc(var(--kiosk-gap) * 0.2);
    min-width: 0;
}

.kiosk-honor-name {
    font-size: var(--kiosk-font-l);
    font-weight: var(--aura-font-weight-semibold);
    line-height: 1.15;
}

.kiosk-honor-class {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-s);
}

/* текст целиком, без многоточия (заголовок — до 255 знаков): высокие плитки уходят на следующую страницу (fitPages) */
.kiosk-honor-title {
    font-size: var(--kiosk-font-m);
    line-height: 1.2;
    hyphens: auto;
    overflow-wrap: anywhere;
}

.kiosk-honor-subtitle {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-s);
    hyphens: auto;
    overflow-wrap: anywhere;
}

/* рейтинг классов: страница — заголовок рейтинга и общее пояснение над таблицей строк */
.kiosk-honor-rating-page {
    display: flex;
    flex-direction: column;
    gap: var(--kiosk-gap);
}

.kiosk-honor-rating-head {
    display: flex;
    flex-direction: column;
    gap: calc(var(--kiosk-gap) * 0.25);
    min-width: 0;
}

.kiosk-honor-rating-heading {
    font-size: var(--kiosk-font-l);
    font-weight: var(--aura-font-weight-semibold);
    line-height: 1.25; /* при 1.15 буквы выступают за строку, и крупная шкала страницы (data-grow) отбрасывается */
    hyphens: auto;
    overflow-wrap: anywhere;
}

.kiosk-honor-rating-note {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-m);
    line-height: 1.2;
    hyphens: auto;
    overflow-wrap: anywhere;
}

.kiosk-honor-rating {
    display: flex;
    flex-direction: column;
    gap: calc(var(--kiosk-gap) * 0.6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kiosk-honor-rating-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: calc(var(--kiosk-gap) * 1.5);
    padding: calc(var(--kiosk-pad) * 0.5) var(--kiosk-pad);
    border-radius: var(--kiosk-radius);
    background: var(--vaadin-background-container);
}

.kiosk-honor-rating-row .kiosk-honor-place {
    font-size: var(--kiosk-font-l);
}

.kiosk-honor-rating-row[data-place='1'] {
    background: color-mix(in srgb, var(--aura-yellow) 22%, var(--aura-surface-color));
}

.kiosk-honor-rating-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kiosk-honor-rating-class {
    font-size: var(--kiosk-font-xl);
    font-weight: var(--aura-font-weight-semibold);
    line-height: 1.1;
}

/* своё пояснение строки — с переносами, без многоточия: высоту страницы меряет fitPages */
.kiosk-honor-rating-caption {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-s);
    line-height: 1.2;
    hyphens: auto;
    overflow-wrap: anywhere;
}

.kiosk-honor-points {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
}

.kiosk-honor-points-value {
    font-size: var(--kiosk-font-xl);
    font-weight: var(--aura-font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.kiosk-honor-points-label {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-xs);
}

/* мобильная версия: заголовки видов и плитки поуже */
.kiosk-honor-kind {
    margin: var(--vaadin-gap-m) 0 var(--vaadin-gap-xs);
    font-size: var(--aura-font-size-l);
}

.kiosk-info .kiosk-honor-grid {
    grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr));
}

.kiosk-info .kiosk-honor-photo {
    width: 4.5em;
}

/* Слайд «Поздравляем с днём рождения!» (blocks/birthdays.js): корень .kiosk-slide-birthdays
   (в мобильной версии — .kiosk-info .kiosk-slide-birthdays). Подключён из css/sections/kiosk-screen.css.
   Праздничная плитка: фото или инициалы, имя, класс или должность.
   Размеры — шкала экрана var(--kiosk-font-*), var(--kiosk-gap), var(--kiosk-pad); цвета — токены темы. */

.kiosk-slide-birthdays {
    background-image: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--aura-purple) 16%, transparent), transparent 45%),
        radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--aura-yellow) 18%, transparent), transparent 40%);
}

.kiosk-birthday-icon {
    width: 1em;
    height: 1em;
    color: var(--aura-purple-text);
}

.kiosk-birthday-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--kiosk-font-m) * 13), 1fr));
    align-content: center;
    gap: var(--kiosk-gap);
}

.kiosk-birthday {
    display: flex;
    align-items: center;
    gap: var(--kiosk-gap);
    padding: calc(var(--kiosk-pad) * 0.75);
    border-radius: var(--kiosk-radius);
    background: var(--aura-surface-color);
    box-shadow: var(--aura-shadow-s);
}

.kiosk-birthday-photo {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: calc(var(--kiosk-font-xl) * 2);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    font-weight: var(--aura-font-weight-semibold);
    background: color-mix(in srgb, var(--aura-purple) 22%, var(--aura-surface-color));
    color: var(--aura-purple-text);
    font-size: var(--kiosk-font-l);
}

.kiosk-birthday-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kiosk-birthday[data-type='EMPLOYEE'] .kiosk-birthday-photo[data-empty] {
    background: color-mix(in srgb, var(--aura-yellow) 30%, var(--aura-surface-color));
    color: var(--aura-yellow-text);
}

.kiosk-birthday-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kiosk-birthday-name {
    font-size: var(--kiosk-font-l);
    font-weight: var(--aura-font-weight-semibold);
    line-height: 1.15;
}

.kiosk-birthday-caption {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-s);
}

.kiosk-info .kiosk-birthday-grid {
    grid-template-columns: minmax(0, 1fr);
}

/* Слайд «Преподаватели» экрана киоска (дорожка C): корень .kiosk-screen .kiosk-slide-teachers
   (в мобильной версии — .kiosk-info .kiosk-slide-teachers). Подключён из css/sections/kiosk-screen.css.
   Размеры — шкала экрана var(--kiosk-font-*), var(--kiosk-gap), var(--kiosk-pad); цвета — токены темы. */

.kiosk-slide-teachers .kiosk-teachers-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kiosk-gap);
}

.kiosk-slide-teachers .kiosk-teachers-pager {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-m);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kiosk-slide-teachers .kiosk-teachers-pager[hidden] {
    display: none;
}

/* ротация: страница — сетка фиксированных рядов и колонок; ячейка — доля полной страницы
   (4 × 2 или 3 × 4, teachers.js), поэтому у двух-трёх преподавателей плитки не растягиваются
   на весь слайд, а стоят по центру того же размера */
.kiosk-slide-teachers .kiosk-teachers-grid[data-mode='rotation'] {
    display: grid;
    grid-template-columns: repeat(
        var(--kiosk-teachers-columns, 4),
        calc((100% - (var(--kiosk-teachers-max-columns, 4) - 1) * var(--kiosk-gap)) / var(--kiosk-teachers-max-columns, 4))
    );
    grid-template-rows: repeat(
        var(--kiosk-teachers-rows, 2),
        calc((100% - (var(--kiosk-teachers-max-rows, 2) - 1) * var(--kiosk-gap)) / var(--kiosk-teachers-max-rows, 2))
    );
    place-content: center;
    gap: var(--kiosk-gap);
    flex: 1 1 auto;
    min-height: 0;
}

/* сенсорный режим: все плитки, прокрутка пальцем */
.kiosk-slide-teachers .kiosk-teachers-grid[data-mode='touch'] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--kiosk-font-m) * 11), 1fr));
    align-content: start;
    gap: var(--kiosk-gap);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.kiosk-slide-teachers .kiosk-teachers-grid[data-mode='info'] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
    gap: var(--kiosk-gap);
}

.kiosk-slide-teachers .kiosk-teacher {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--kiosk-gap) * 0.6);
    min-width: 0;
    min-height: 0;
    padding: var(--kiosk-pad);
    overflow: hidden;
    border-radius: var(--kiosk-radius);
    background: var(--vaadin-background-container);
    text-align: center;
}

/* в ротации фото подстраивается под размер плитки */
.kiosk-slide-teachers [data-mode='rotation'] .kiosk-teacher {
    container-type: size;
}

.kiosk-slide-teachers .kiosk-teacher-photo {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: calc(var(--kiosk-font-xl) * 2.6);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    background: var(--aura-accent-color);
    color: var(--aura-accent-contrast-color);
}

.kiosk-slide-teachers [data-mode='rotation'] .kiosk-teacher-photo {
    width: min(58cqw, 40cqh);
}

.kiosk-slide-teachers .kiosk-teacher-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kiosk-slide-teachers .kiosk-teacher-initials {
    font-size: var(--kiosk-font-xl);
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-slide-teachers [data-mode='rotation'] .kiosk-teacher-initials {
    font-size: min(20cqw, 16cqh);
}

.kiosk-slide-teachers .kiosk-teacher-body {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    max-width: 100%;
    min-width: 0;
}

.kiosk-slide-teachers .kiosk-teacher-name {
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--kiosk-font-m);
    font-weight: var(--aura-font-weight-semibold);
    line-height: 1.15;
    overflow-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ротация: узкая плитка (горизонтальный планшет 1280 × 800 — ~200 px) — ФИО в три строки
   и шрифт не шире доли плитки, чтобы отчество не обрезалось; на широких плитках шкала прежняя */
.kiosk-slide-teachers [data-mode='rotation'] .kiosk-teacher-name {
    font-size: min(var(--kiosk-font-m), 9.8cqw);
    -webkit-line-clamp: 3;
}

.kiosk-slide-teachers [data-mode='rotation'] .kiosk-teacher-subject {
    font-size: min(var(--kiosk-font-s), 8.2cqw);
}

.kiosk-slide-teachers [data-mode='rotation'] .kiosk-teacher-meta {
    font-size: min(var(--kiosk-font-xs), 7cqw);
}

.kiosk-slide-teachers .kiosk-teacher-subject {
    color: var(--aura-accent-text-color);
    font-size: var(--kiosk-font-s);
    font-weight: var(--aura-font-weight-medium);
}

.kiosk-slide-teachers .kiosk-teacher-meta {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-xs);
}

/* телефон: плитка строкой — фото слева, текст справа */
.kiosk-slide-teachers [data-mode='info'] .kiosk-teacher {
    flex-direction: row;
    justify-content: flex-start;
    padding: var(--vaadin-padding-s);
    text-align: start;
}

.kiosk-slide-teachers [data-mode='info'] .kiosk-teacher-photo {
    width: 3.5em;
}

.kiosk-slide-teachers [data-mode='info'] .kiosk-teacher-initials {
    font-size: var(--aura-font-size-l);
}

/* плитка-кнопка (сенсорный режим: касание открывает расписание учителя) */
.kiosk-slide-teachers button.kiosk-teacher {
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.kiosk-slide-teachers button.kiosk-teacher:active {
    background: var(--vaadin-background-container-strong);
}

/* Слайд «Карта школы» экрана киоска (дорожка C): корень .kiosk-screen .kiosk-slide-school-map
   (в мобильной версии — .kiosk-info .kiosk-slide-school-map). Подключён из css/sections/kiosk-screen.css.
   Размеры — шкала экрана var(--kiosk-font-*), var(--kiosk-gap), var(--kiosk-pad); цвета — токены темы. */

.kiosk-slide-school-map .kiosk-map-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kiosk-gap);
}

/* строка этажей: в ротации — какой этаж на экране, в сенсорном режиме — кнопки */
.kiosk-slide-school-map .kiosk-map-floors {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--kiosk-gap) * 0.5);
}

.kiosk-slide-school-map .kiosk-map-floors[hidden] {
    display: none;
}

.kiosk-slide-school-map .kiosk-map-floor-button {
    padding: calc(var(--kiosk-pad) * 0.3) var(--kiosk-pad);
    border: 0.12em solid var(--vaadin-border-color);
    border-radius: 2em;
    background: transparent;
    color: var(--vaadin-text-color);
    font: inherit;
    font-size: var(--kiosk-font-m);
    white-space: nowrap;
}

.kiosk-slide-school-map .kiosk-map-floor-button[data-active] {
    border-color: var(--aura-accent-color);
    background: var(--aura-accent-color);
    color: var(--aura-accent-contrast-color);
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-slide-school-map .kiosk-map-floors[data-mode='touch'] .kiosk-map-floor-button {
    min-height: calc(var(--kiosk-font-l) * 2.4);
    padding-inline: calc(var(--kiosk-pad) * 1.5);
    font-size: var(--kiosk-font-l);
    cursor: pointer;
}

/* схема вписывается в слайд целиком, без обрезки */
.kiosk-slide-school-map .kiosk-map-stage {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    padding: calc(var(--kiosk-pad) * 0.5);
    border-radius: var(--kiosk-radius);
    background: var(--vaadin-background-container);
}

.kiosk-slide-school-map .kiosk-map-image {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}

/* мобильная версия: этажи подряд */
.kiosk-slide-school-map .kiosk-map-list {
    display: flex;
    flex-direction: column;
    gap: var(--kiosk-gap);
}

.kiosk-slide-school-map .kiosk-map-floor {
    display: flex;
    flex-direction: column;
    gap: calc(var(--kiosk-gap) * 0.5);
    margin: 0;
}

.kiosk-slide-school-map .kiosk-map-floor .kiosk-map-image {
    height: auto;
    border-radius: var(--kiosk-radius);
    background: var(--vaadin-background-container);
}

.kiosk-slide-school-map .kiosk-map-caption {
    order: -1;
    font-size: var(--kiosk-font-m);
    font-weight: var(--aura-font-weight-semibold);
}

/* Слайд «О школе» экрана киоска (дорожка C): корень .kiosk-screen .kiosk-slide-about
   (в мобильной версии — .kiosk-info .kiosk-slide-about). Подключён из css/sections/kiosk-screen.css.
   Размеры — шкала экрана var(--kiosk-font-*), var(--kiosk-gap), var(--kiosk-pad); цвета — токены темы. */

/* горизонталь: фото слева, текст и контакты справа */
.kiosk-slide-about .kiosk-about-body {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: calc(var(--kiosk-gap) * 2);
    flex: 1 1 auto;
    min-height: 0;
}

.kiosk-slide-about .kiosk-about-body[data-photos='none'] {
    grid-template-columns: minmax(0, 1fr);
}

/* вертикаль: фото сверху, текст снизу */
.kiosk-slide-about .kiosk-about-body[data-layout='portrait'] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 0.8fr) minmax(0, 1fr);
}

.kiosk-slide-about .kiosk-about-body[data-layout='portrait'][data-photos='none'] {
    grid-template-rows: minmax(0, 1fr);
}

.kiosk-slide-about .kiosk-about-body[data-mode='info'] {
    display: flex;
    flex-direction: column;
    gap: var(--kiosk-gap);
}

/* фото сменяют друг друга плавно */
.kiosk-slide-about .kiosk-about-photos {
    position: relative;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--kiosk-radius);
    background: var(--vaadin-background-container);
}

.kiosk-slide-about .kiosk-about-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.kiosk-slide-about .kiosk-about-photo[data-active] {
    opacity: 1;
}

.kiosk-slide-about [data-mode='info'] .kiosk-about-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
    gap: var(--kiosk-gap);
    background: none;
}

.kiosk-slide-about [data-mode='info'] .kiosk-about-photo {
    position: static;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--kiosk-radius);
    opacity: 1;
}

.kiosk-slide-about .kiosk-about-info {
    display: flex;
    flex-direction: column;
    gap: calc(var(--kiosk-gap) * 1.5);
    min-height: 0;
    overflow: hidden;
}

.kiosk-slide-about .kiosk-about-text {
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
    font-size: var(--kiosk-font-m);
    line-height: 1.4;
}

.kiosk-slide-about .kiosk-about-text p {
    margin: 0 0 0.6em;
}

.kiosk-slide-about .kiosk-about-text p:last-child {
    margin-bottom: 0;
}

/* длинный текст — на ступень мельче (about.js ставит data-fit, когда текст не влез) */
.kiosk-slide-about .kiosk-about-text[data-fit='s'] {
    font-size: var(--kiosk-font-s);
}

/* текст не поместился и мельче — низ плавно уходит, а не обрезается посреди строки */
.kiosk-slide-about .kiosk-about-text[data-overflow] {
    mask-image: linear-gradient(to bottom, currentColor 80%, transparent);
}

.kiosk-slide-about .kiosk-about-director {
    display: flex;
    align-items: center;
    gap: var(--kiosk-gap);
    flex: 0 0 auto;
}

.kiosk-slide-about .kiosk-about-director-photo {
    width: calc(var(--kiosk-font-xl) * 2.2);
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
}

.kiosk-slide-about .kiosk-about-director-caption {
    display: flex;
    flex-direction: column;
}

.kiosk-slide-about .kiosk-about-label {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-s);
}

.kiosk-slide-about .kiosk-about-director-name {
    font-size: var(--kiosk-font-l);
    font-weight: var(--aura-font-weight-semibold);
    line-height: 1.15;
}

.kiosk-slide-about .kiosk-about-contacts {
    display: grid;
    gap: calc(var(--kiosk-gap) * 0.5);
    flex: 0 0 auto;
    margin: 0;
    padding: var(--kiosk-pad);
    border-radius: var(--kiosk-radius);
    background: var(--vaadin-background-container);
}

.kiosk-slide-about .kiosk-about-contact {
    display: grid;
    grid-template-columns: minmax(5em, max-content) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--kiosk-gap);
}

.kiosk-slide-about .kiosk-about-contact dd {
    margin: 0;
    font-size: var(--kiosk-font-m);
    overflow-wrap: anywhere;
}

.kiosk-slide-about .kiosk-about-note {
    grid-template-columns: minmax(0, 1fr);
}

.kiosk-slide-about .kiosk-about-note dd {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-s);
    white-space: pre-line;
}

/* Слайд «Медиа» (blocks/media.js): корень .kiosk-slide-media (в мобильной версии —
   .kiosk-info .kiosk-slide-media). Подключён из css/sections/kiosk-screen.css.
   Ротация: картинка, видео или ролик YouTube во весь слайд, картинка вписана целиком поверх
   размытой копии, подпись снизу; смена элементов — плавная. Галерея — сенсорный режим и телефон.
   Размеры — шкала экрана var(--kiosk-font-*), var(--kiosk-gap), var(--kiosk-pad); цвета — токены темы. */

.kiosk-screen .kiosk-frame.kiosk-slide-media {
    padding: 0;
}

.kiosk-media-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: var(--vaadin-background-container-strong);
}

.kiosk-media-item {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    transition: opacity 700ms ease;
}

.kiosk-media-item[data-state='enter'],
.kiosk-media-item[data-state='leave'] {
    opacity: 0;
}

/* прежний кадр гаснет раньше, чем проявится новый: подписи не накладываются */
.kiosk-media-item[data-state='leave'] {
    transition-duration: 350ms;
}

.kiosk-media-item[data-state='active'] {
    transition-delay: 350ms;
}

.kiosk-media-backdrop {
    position: absolute;
    inset: -5%;
    width: 110%;
    height: 110%;
    object-fit: cover;
    filter: blur(40px) saturate(1.2);
    opacity: 0.55;
}

.kiosk-media-image,
.kiosk-media-video,
.kiosk-media-youtube {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.kiosk-media-image,
.kiosk-media-video {
    object-fit: contain;
}

/* Про имена токенов Aura: --aura-neutral-light — нейтральный цвет СВЕТЛОЙ схемы, то есть почти чёрный
   (и в тёмной теме тоже), --aura-neutral-dark — почти белый. Поля видео — чёрные, как у плеера. */
.kiosk-media-video {
    background: var(--aura-neutral-light);
}

.kiosk-media-caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: calc(var(--kiosk-pad) * 2) calc(var(--kiosk-pad) * 1.5) var(--kiosk-pad);
    background: linear-gradient(to top, color-mix(in srgb, var(--aura-neutral-light) 75%, transparent), transparent);
    color: var(--aura-neutral-dark);
    font-size: var(--kiosk-font-xl);
    font-weight: var(--aura-font-weight-semibold);
    line-height: 1.15;
}

/* галерея */
.kiosk-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--kiosk-font-m) * 14), 1fr));
    align-content: start;
    gap: var(--kiosk-gap);
}

.kiosk-media-tile {
    display: flex;
    flex-direction: column;
    gap: calc(var(--kiosk-gap) / 2);
    margin: 0;
}

.kiosk-media-tile img,
.kiosk-media-tile video,
.kiosk-media-tile iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--kiosk-radius);
    background: var(--vaadin-background-container-strong);
    object-fit: cover;
}

.kiosk-media-tile figcaption {
    font-size: var(--kiosk-font-s);
}

/* тёмная тема киоска — схема Aura для всей страницы (light-dark() во всех токенах) */
html:has(.kiosk-screen[data-theme='dark']) {
    color-scheme: dark;
}

body.public-page:has(.kiosk-screen) {
    min-height: 100dvh;
    overflow: hidden;
}

.public-layout.public-layout:has(> .kiosk-screen) {
    max-width: none;
    height: 100dvh;
    padding: 0;
    gap: 0;
}

/*
 * Шкала экрана: всё считается от меньшей стороны окна (vmin), поэтому одинаково
 * читается на 1080p и 4K, в горизонтали и вертикали; clamp() держит границы
 * для маленьких окон предпросмотра и огромных панелей. Рендереры блоков берут
 * размеры только отсюда.
 */
/* --kiosk-zoom: полупустая страница слайда рисуется крупнее, не влезающая — мельче (blocks/common.js → fitPages);
   шкала объявлена и на самой странице, чтобы множитель подставился там, а не у корня */
.kiosk-screen,
.kiosk-screen .kiosk-page[data-grow] {
    --kiosk-font-xs: calc(clamp(11px, 1.5vmin, 52px) * var(--kiosk-zoom, 1));
    --kiosk-font-s: calc(clamp(13px, 1.9vmin, 66px) * var(--kiosk-zoom, 1));
    --kiosk-font-m: calc(clamp(15px, 2.4vmin, 84px) * var(--kiosk-zoom, 1));
    --kiosk-font-l: calc(clamp(18px, 3.2vmin, 112px) * var(--kiosk-zoom, 1));
    --kiosk-font-xl: calc(clamp(22px, 4.4vmin, 156px) * var(--kiosk-zoom, 1));
    --kiosk-font-xxl: calc(clamp(28px, 7vmin, 250px) * var(--kiosk-zoom, 1));
    --kiosk-gap: calc(clamp(6px, 1.4vmin, 50px) * var(--kiosk-zoom, 1));
    --kiosk-pad: calc(clamp(8px, 2vmin, 72px) * var(--kiosk-zoom, 1));
}

.kiosk-screen .kiosk-page[data-grow='1'] {
    --kiosk-zoom: 1.25;
}

.kiosk-screen .kiosk-page[data-grow='2'] {
    --kiosk-zoom: 1.5;
}

.kiosk-screen .kiosk-page[data-grow='-1'] {
    --kiosk-zoom: 0.85;
}

.kiosk-screen .kiosk-page[data-grow='-2'] {
    --kiosk-zoom: 0.7;
}

.kiosk-screen {
    --kiosk-radius: clamp(6px, 1.2vmin, 40px);
    --kiosk-sidebar-width: clamp(220px, 26vw, 1000px);

    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--kiosk-sidebar-width);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
        'header header'
        'stage sidebar'
        'touch touch'
        'ticker ticker';
    gap: var(--kiosk-gap);
    width: 100%;
    height: 100dvh;
    padding: var(--kiosk-pad);
    box-sizing: border-box;
    overflow: hidden;
    color: var(--vaadin-text-color);
    background: var(--aura-app-background);
    font-family: var(--aura-font-family);
    font-size: var(--kiosk-font-m);
    line-height: 1.25;
    /* киоск: без выделения текста и масштабирования двойным касанием */
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Горизонтальная раскладка, принудительно включённая на вертикальном экране: шкала
   считается не от vmin (ширины), а от 0,7vw — сцене рядом с колонкой достаётся столько же
   «строк текста» в ширину, сколько на экране 5:4, и названия с ФИО не обрезаются. */
@media (orientation: portrait) {
    .kiosk-screen[data-layout='landscape'],
    .kiosk-screen[data-layout='landscape'] .kiosk-page[data-grow] {
        --kiosk-font-xs: calc(clamp(11px, 1.05vw, 52px) * var(--kiosk-zoom, 1));
        --kiosk-font-s: calc(clamp(13px, 1.33vw, 66px) * var(--kiosk-zoom, 1));
        --kiosk-font-m: calc(clamp(15px, 1.68vw, 84px) * var(--kiosk-zoom, 1));
        --kiosk-font-l: calc(clamp(18px, 2.24vw, 112px) * var(--kiosk-zoom, 1));
        --kiosk-font-xl: calc(clamp(22px, 3.08vw, 156px) * var(--kiosk-zoom, 1));
        --kiosk-font-xxl: calc(clamp(28px, 4.9vw, 250px) * var(--kiosk-zoom, 1));
        --kiosk-gap: calc(clamp(6px, 0.98vw, 50px) * var(--kiosk-zoom, 1));
        --kiosk-pad: calc(clamp(8px, 1.4vw, 72px) * var(--kiosk-zoom, 1));
    }
}

/* вертикальный экран: шапка, блок на весь экран, внизу бегущая строка */
.kiosk-screen[data-layout='portrait'] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        'header'
        'stage'
        'touch'
        'ticker';
}

.kiosk-screen[data-layout='portrait'] .kiosk-sidebar {
    display: none;
}

/* кнопки экрана (плитки, клавиатура PIN) — шрифт и цвет экрана; :where — без веса, классы задают своё */
:where(.kiosk-screen, .kiosk-info) :where(button) {
    font: inherit;
    color: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

/* ---------------------------------------------------------------- шапка */

.kiosk-header {
    grid-area: header;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: calc(var(--kiosk-gap) * 2);
    padding: calc(var(--kiosk-pad) * 0.75) calc(var(--kiosk-pad) * 1.25);
    border-radius: var(--kiosk-radius);
    background: var(--aura-surface-color);
    box-shadow: var(--aura-shadow-s);
}

.kiosk-brand {
    display: flex;
    align-items: center;
    gap: var(--kiosk-gap);
    min-width: 0;
}

.kiosk-logo {
    flex: 0 0 auto;
    width: calc(var(--kiosk-font-xl) * 1.5);
    height: calc(var(--kiosk-font-xl) * 1.5);
    object-fit: contain;
    pointer-events: none;
}

.kiosk-school {
    overflow: hidden;
    font-size: var(--kiosk-font-l);
    font-weight: var(--aura-font-weight-semibold);
    line-height: 1.15;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kiosk-lesson {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(var(--kiosk-gap) / 3);
    padding: calc(var(--kiosk-pad) / 2) var(--kiosk-pad);
    border-radius: var(--kiosk-radius);
    background: var(--aura-accent-surface, var(--vaadin-background-container));
    color: var(--aura-accent-text-color);
    white-space: nowrap;
}

.kiosk-lesson[hidden] {
    display: none;
}

.kiosk-lesson-name {
    font-size: var(--kiosk-font-m);
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-lesson-bell {
    font-size: var(--kiosk-font-s);
}

.kiosk-datetime {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    white-space: nowrap;
}

.kiosk-date {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-s);
}

.kiosk-clock {
    font-size: var(--kiosk-font-xxl);
    font-weight: var(--aura-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.02em;
}

.kiosk-clock-seconds {
    color: var(--vaadin-text-color-secondary);
    font-size: 0.55em;
}

/* горизонталь: крупные часы и текущий урок — в колонке справа, в шапке остаётся дата */
.kiosk-screen[data-layout='landscape'] .kiosk-header {
    grid-template-columns: minmax(0, 1fr) auto;
}

.kiosk-screen[data-layout='landscape'] .kiosk-header .kiosk-lesson,
.kiosk-screen[data-layout='landscape'] .kiosk-header .kiosk-clock {
    display: none;
}

.kiosk-screen[data-layout='landscape'] .kiosk-date {
    color: var(--vaadin-text-color);
    font-size: var(--kiosk-font-l);
    font-weight: var(--aura-font-weight-medium);
}

/* вертикаль: урок переносится под название школы, часы остаются справа */
.kiosk-screen[data-layout='portrait'] .kiosk-header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        'brand datetime'
        'lesson datetime';
    row-gap: calc(var(--kiosk-gap) / 2);
}

.kiosk-screen[data-layout='portrait'] .kiosk-brand {
    grid-area: brand;
}

.kiosk-screen[data-layout='portrait'] .kiosk-lesson {
    grid-area: lesson;
    flex-direction: row;
    justify-self: start;
    align-items: baseline;
    gap: var(--kiosk-gap);
    padding: calc(var(--kiosk-pad) / 3) calc(var(--kiosk-pad) * 0.75);
}

.kiosk-screen[data-layout='portrait'] .kiosk-datetime {
    grid-area: datetime;
}

/* ---------------------------------------------------------- сцена слайдов */

.kiosk-stage {
    grid-area: stage;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--kiosk-radius);
    background: var(--aura-surface-color);
    box-shadow: var(--aura-shadow-s);
}

/* кадр ротации: слайд во всю сцену; при смене два кадра лежат друг на друге */
/* смена слайдов без наложения текста: прежний гаснет за 300 мс, новый проявляется после него
   (итого 700 мс — rotation.js → TRANSITION_MS) */
.kiosk-frame {
    position: absolute;
    inset: 0;
    transition:
        opacity 300ms ease-in,
        transform 300ms ease-in;
}

.kiosk-frame[data-state='enter'] {
    opacity: 0;
    transform: translateY(2%) scale(0.985);
}

.kiosk-frame[data-state='active'] {
    opacity: 1;
    transform: none;
    transition:
        opacity 400ms ease-out 300ms,
        transform 400ms ease-out 300ms;
}

.kiosk-frame[data-state='leave'] {
    opacity: 0;
    transform: translateY(-2%) scale(0.985);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .kiosk-frame,
    .kiosk-frame[data-state] {
        transform: none;
        transition: opacity 300ms linear;
    }

    .kiosk-frame[data-state='active'] {
        transition: opacity 400ms linear 300ms;
    }
}

/* слайд занимает всю сцену */
.kiosk-slide {
    display: flex;
    flex-direction: column;
    gap: var(--kiosk-gap);
    flex: 1 1 auto;
    min-height: 0;
    padding: calc(var(--kiosk-pad) * 1.5);
    box-sizing: border-box;
    overflow: hidden;
}

.kiosk-slide-title {
    margin: 0;
    font-size: var(--kiosk-font-xl);
    font-weight: var(--aura-font-weight-semibold);
    line-height: 1.1;
}

.kiosk-slide-empty {
    margin: 0;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-l);
}

.kiosk-slide-idle {
    align-items: center;
    justify-content: center;
}

.kiosk-slide-idle-text {
    margin: 0;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-xxl);
    font-weight: var(--aura-font-weight-semibold);
    text-align: center;
}

/*
 * Режим «Только фото и видео» (settings.mode = MEDIA, data-mode на корне): сцена на весь
 * экран без полей, шапки, колонки, плиток и бегущей строки; фон — чёрный, как у плеера
 * (--aura-neutral-light — почти чёрный в обеих темах, см. blocks/media.css). Фото
 * перелистываются сдвигом влево. Шапка остаётся невидимой зоной в левом верхнем
 * углу: 10 касаний по ней — сервисный режим, как по логотипу.
 */
.kiosk-screen[data-mode='MEDIA'] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: 'stage';
    gap: 0;
    padding: 0;
    background: var(--aura-neutral-light);
}

.kiosk-screen[data-mode='MEDIA'] :is(.kiosk-sidebar, .kiosk-touch-menu, .kiosk-ticker) {
    display: none;
}

/* только сама картинка или ролик: подписи медиа на этом экране не показываются */
.kiosk-screen[data-mode='MEDIA'] .kiosk-media-caption {
    display: none;
}

.kiosk-screen[data-mode='MEDIA'] .kiosk-header {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 5;
    display: block;
    width: clamp(64px, 12vmin, 240px);
    height: clamp(64px, 12vmin, 240px);
    padding: 0;
    overflow: hidden;
    opacity: 0;
    box-shadow: none;
}

.kiosk-screen[data-mode='MEDIA'] .kiosk-header > :not(.kiosk-brand) {
    display: none;
}

.kiosk-screen[data-mode='MEDIA'] .kiosk-brand {
    width: 100%;
    height: 100%;
}

.kiosk-screen[data-mode='MEDIA'] .kiosk-stage {
    border-radius: 0;
    background: var(--aura-neutral-light);
    box-shadow: none;
}

/* фон — у сцены: новый круг показа наезжает на последний кадр прежнего, а не на чёрный слой */
.kiosk-screen[data-mode='MEDIA'] .kiosk-media-stage {
    background: transparent;
}

.kiosk-screen[data-mode='MEDIA'] .kiosk-slide-idle-text {
    color: color-mix(in srgb, var(--aura-neutral-dark) 70%, transparent);
}

/* круг показа закончился и начался заново: прежний кадр не гаснет, новый наезжает на него */
.kiosk-screen[data-mode='MEDIA'] .kiosk-frame,
.kiosk-screen[data-mode='MEDIA'] .kiosk-frame[data-state] {
    opacity: 1;
    transform: none;
    transition: none;
}

.kiosk-screen[data-mode='MEDIA'] .kiosk-media-item {
    transition: transform 700ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

.kiosk-screen[data-mode='MEDIA'] .kiosk-media-item[data-state='enter'] {
    opacity: 1;
    transform: translateX(100%);
}

.kiosk-screen[data-mode='MEDIA'] .kiosk-media-item[data-state='active'] {
    transform: none;
    transition-delay: 0ms;
}

.kiosk-screen[data-mode='MEDIA'] .kiosk-media-item[data-state='leave'] {
    opacity: 1;
    transform: translateX(-100%);
    transition-duration: 700ms;
}

/* без анимаций — фото сменяются плавным затуханием, как на табло */
@media (prefers-reduced-motion: reduce) {
    .kiosk-screen[data-mode='MEDIA'] .kiosk-media-item,
    .kiosk-screen[data-mode='MEDIA'] .kiosk-media-item[data-state] {
        transform: none;
        transition: opacity 500ms linear;
    }

    .kiosk-screen[data-mode='MEDIA'] .kiosk-media-item[data-state='enter'],
    .kiosk-screen[data-mode='MEDIA'] .kiosk-media-item[data-state='leave'] {
        opacity: 0;
    }
}

/* заголовок слайда (blocks/common.js): название, подзаголовок, листание справа */
.kiosk-slide-head {
    display: flex;
    flex: 0 0 auto;
    align-items: baseline;
    flex-wrap: wrap;
    gap: calc(var(--kiosk-gap) / 2) calc(var(--kiosk-gap) * 1.5);
    min-width: 0;
}

.kiosk-slide-head .kiosk-slide-title {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--kiosk-gap) * 0.75);
}

.kiosk-slide-subtitle {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-l);
    font-weight: var(--aura-font-weight-medium);
}

.kiosk-slide-subtitle[hidden],
.kiosk-slide-pager[hidden] {
    display: none;
}

.kiosk-slide-pager {
    display: flex;
    align-items: center;
    gap: var(--kiosk-gap);
    margin-inline-start: auto;
    align-self: center;
}

.kiosk-slide-dots {
    display: flex;
    gap: calc(var(--kiosk-gap) * 0.6);
}

.kiosk-slide-dot {
    width: calc(var(--kiosk-font-xs) * 0.7);
    height: calc(var(--kiosk-font-xs) * 0.7);
    border-radius: 50%;
    background: var(--vaadin-border-color);
    transition: background-color 300ms ease;
}

.kiosk-slide-dot[data-active] {
    background: var(--aura-accent-color);
}

.kiosk-slide-counter {
    min-width: 4em;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-m);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.kiosk-pager-button {
    display: grid;
    place-items: center;
    width: calc(var(--kiosk-font-xl) * 1.5);
    height: calc(var(--kiosk-font-xl) * 1.5);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--vaadin-background-container-strong);
    font-size: var(--kiosk-font-xl);
    line-height: 1;
}

.kiosk-pager-button:active {
    background: var(--aura-accent-color);
    color: var(--aura-accent-contrast-color);
}

/* тело слайда и страницы: каждая страница — во всё тело, видна одна */
.kiosk-slide-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.kiosk-page {
    position: absolute;
    inset: 0;
    overflow: hidden;
    animation: kiosk-page-in 500ms ease both;
}

.kiosk-page[hidden] {
    display: none;
}

@keyframes kiosk-page-in {
    from {
        opacity: 0;
        transform: translateX(1.5%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kiosk-page {
        animation-name: kiosk-fade-in;
    }
}

@keyframes kiosk-fade-in {
    from {
        opacity: 0;
    }
}

/* фото или инициалы (blocks/common.js → photo()); :where — без веса, размеры и форму задаёт блок */
:where(.kiosk-photo) {
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--vaadin-background-container-strong);
    color: var(--vaadin-text-color-secondary);
}

:where(.kiosk-photo) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kiosk-photo-initials {
    font-weight: var(--aura-font-weight-semibold);
}

vaadin-icon.kiosk-icon {
    width: 1em;
    height: 1em;
}

/* ------------------------------------------------------- боковая колонка */

.kiosk-sidebar {
    grid-area: sidebar;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--kiosk-gap);
    min-height: 0;
    overflow: hidden;
}

.kiosk-side-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: calc(var(--kiosk-gap) / 2);
    padding: var(--kiosk-pad);
    border-radius: var(--kiosk-radius);
    background: var(--aura-surface-color);
    box-shadow: var(--aura-shadow-s);
    min-height: 0;
}

.kiosk-side-card[hidden],
.kiosk-side-more[hidden],
.kiosk-side-progress[hidden] {
    display: none;
}

.kiosk-side-label {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-s);
    font-weight: var(--aura-font-weight-medium);
}

/* крупные часы */
.kiosk-side-clock {
    align-items: center;
    gap: 0;
    padding-block: calc(var(--kiosk-pad) * 0.75);
}

.kiosk-side-time {
    /* «12:34:56» шириной около 3,7em — не шире колонки за вычетом отступов карточки */
    font-size: min(calc(var(--kiosk-font-xxl) * 1.3), calc((100cqi - 2 * var(--kiosk-pad)) / 3.8));
    font-weight: var(--aura-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.kiosk-side-seconds {
    color: var(--vaadin-text-color-secondary);
    font-size: 0.45em;
    letter-spacing: 0;
}

.kiosk-side-date {
    display: none;
}

/* текущий урок: что идёт и сколько до звонка */
.kiosk-side-bell-card {
    background: var(--aura-accent-color);
    color: var(--aura-accent-contrast-color);
}

.kiosk-side-bell-card .kiosk-side-label {
    color: inherit;
    font-size: var(--kiosk-font-m);
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-side-bell-card[data-state='BREAK'],
.kiosk-side-bell-card[data-state='BEFORE'] {
    background: var(--aura-accent-surface, var(--vaadin-background-container));
    color: var(--aura-accent-text-color);
}

.kiosk-side-value {
    font-size: var(--kiosk-font-l);
    font-weight: var(--aura-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.kiosk-side-sub {
    font-size: var(--kiosk-font-s);
    opacity: 0.85;
}

.kiosk-side-progress {
    display: block;
    height: calc(var(--kiosk-gap) * 0.6);
    margin-top: calc(var(--kiosk-gap) / 3);
    overflow: hidden;
    border-radius: var(--kiosk-gap);
    background: color-mix(in srgb, currentColor 25%, transparent);
}

.kiosk-side-progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: currentColor;
    transition: inline-size 1s linear;
}

.kiosk-side-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--kiosk-gap) / 3);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

/* ближайшие изменения */
.kiosk-side-changes {
    border-inline-start: calc(var(--kiosk-gap) * 0.45) solid var(--aura-orange);
}

.kiosk-side-change {
    display: flex;
    flex-direction: column;
    padding-block: calc(var(--kiosk-gap) / 3);
}

.kiosk-side-change + .kiosk-side-change {
    border-top: 1px solid var(--vaadin-border-color-secondary);
}

.kiosk-side-change-who {
    font-size: var(--kiosk-font-s);
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-side-change-what {
    display: -webkit-box;
    overflow: hidden;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-xs);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kiosk-side-change[data-cancelled] .kiosk-side-change-what {
    color: var(--aura-red-text);
    font-weight: var(--aura-font-weight-medium);
}

.kiosk-side-more {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-xs);
}

.kiosk-side-bell {
    display: flex;
    gap: var(--kiosk-gap);
    padding: calc(var(--kiosk-gap) / 4) calc(var(--kiosk-gap) / 2);
    border-radius: calc(var(--kiosk-radius) / 2);
    font-size: var(--kiosk-font-s);
    font-variant-numeric: tabular-nums;
}

.kiosk-side-bell[data-current] {
    background: var(--aura-accent-color);
    color: var(--aura-accent-contrast-color);
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-side-bell-no {
    min-width: 1.5em;
    color: inherit;
    opacity: 0.7;
    text-align: end;
}

.kiosk-side-news {
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--kiosk-font-s);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kiosk-side-news + .kiosk-side-news {
    padding-top: calc(var(--kiosk-gap) / 2);
    border-top: 1px solid var(--vaadin-border-color-secondary);
}

/* QR-код мобильной версии — внизу колонки: код и подпись рядом */
.kiosk-side-qr {
    flex-direction: row;
    align-items: center;
    gap: var(--kiosk-gap);
    margin-top: auto;
}

.kiosk-side-qr .kiosk-side-label {
    font-size: var(--kiosk-font-s);
}

.kiosk-side-qr-code {
    flex: 0 0 auto;
    width: min(45%, 18vh);
    aspect-ratio: 1;
    border-radius: calc(var(--kiosk-radius) / 2);
    overflow: hidden;
}

.kiosk-side-qr-code svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ------------------------------------------------------ сенсорное меню */

.kiosk-touch-menu {
    grid-area: touch;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: calc(var(--kiosk-gap) * 0.75);
    animation: kiosk-rise 350ms ease both;
}

.kiosk-screen[data-layout='portrait'] .kiosk-touch-menu {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.kiosk-touch-menu[hidden] {
    display: none;
}

@keyframes kiosk-rise {
    from {
        opacity: 0;
        transform: translateY(30%);
    }
}

.kiosk-touch-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--kiosk-gap) / 2);
    min-width: 0;
    min-height: calc(var(--kiosk-font-xl) * 2.4);
    padding: calc(var(--kiosk-pad) / 2);
    border: 0;
    border-radius: var(--kiosk-radius);
    background: var(--aura-surface-color);
    box-shadow: var(--aura-shadow-s);
    font-size: var(--kiosk-font-s);
    font-weight: var(--aura-font-weight-medium);
    line-height: 1.1;
    text-align: center;
}

.kiosk-touch-tile vaadin-icon {
    width: var(--kiosk-font-xl);
    height: var(--kiosk-font-xl);
    color: var(--aura-accent-text-color);
}

.kiosk-touch-tile:active {
    background: var(--aura-accent-surface, var(--vaadin-background-container-strong));
}

.kiosk-touch-tile-exit {
    background: var(--aura-accent-color);
    color: var(--aura-accent-contrast-color);
}

.kiosk-touch-tile-exit vaadin-icon {
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .kiosk-touch-menu,
    .kiosk-overlay,
    .kiosk-service {
        animation: none !important;
    }
}

/* ------------------------------------------------------- бегущая строка */

.kiosk-ticker {
    grid-area: ticker;
    overflow: hidden;
    border-radius: var(--kiosk-radius);
    background: var(--aura-accent-color);
    color: var(--aura-accent-contrast-color);
    font-size: var(--kiosk-font-l);
    font-weight: var(--aura-font-weight-medium);
    white-space: nowrap;
}

.kiosk-ticker[hidden] {
    display: none;
}

.kiosk-ticker-track {
    display: inline-flex;
    padding: calc(var(--kiosk-pad) / 2) 0;
    animation: kiosk-ticker var(--kiosk-ticker-duration, 40s) linear infinite;
    will-change: transform;
}

.kiosk-ticker-item {
    padding-inline-end: calc(var(--kiosk-gap) * 6);
}

.kiosk-ticker-item::before {
    content: '•';
    padding-inline-end: calc(var(--kiosk-gap) * 2);
    opacity: 0.6;
}

.kiosk-ticker-item[data-urgent] {
    font-weight: var(--aura-font-weight-semibold);
}

@keyframes kiosk-ticker {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kiosk-ticker-track {
        animation-duration: calc(var(--kiosk-ticker-duration, 40s) * 2);
    }
}

/* ----------------------------------------------- нет связи, оверлеи */

/* «нет связи» — плашкой по нижнему краю шапки: бегущую строку и слайд не закрывает */
.kiosk-offline {
    position: fixed;
    inset-inline-start: 50%;
    top: calc(var(--kiosk-pad) * 0.4);
    translate: -50% 0;
    box-shadow: var(--aura-shadow-s);
    padding: calc(var(--kiosk-pad) / 3) var(--kiosk-pad);
    border-radius: var(--kiosk-radius);
    background: var(--aura-red);
    color: var(--aura-accent-contrast-color);
    font-size: var(--kiosk-font-xs);
    z-index: 5;
}

.kiosk-offline[hidden],
.kiosk-overlay[hidden],
.kiosk-service[hidden],
.kiosk-toast[hidden] {
    display: none;
}

/* полноэкранный слой поверх экрана: сенсорный раздел, PIN */
.kiosk-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kiosk-gap);
    padding: var(--kiosk-pad);
    box-sizing: border-box;
    background: var(--aura-app-background);
    z-index: 10;
    animation: kiosk-fade-in 250ms ease both;
}

/* ---------------------------------------------- сенсорный раздел (touch.js) */

.kiosk-touch-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--kiosk-gap);
    padding: calc(var(--kiosk-pad) / 2);
    border-radius: var(--kiosk-radius);
    background: var(--aura-surface-color);
    box-shadow: var(--aura-shadow-s);
}

.kiosk-touch-logo {
    width: calc(var(--kiosk-font-xl) * 1.3);
    height: calc(var(--kiosk-font-xl) * 1.3);
    object-fit: contain;
}

.kiosk-touch-nav {
    display: flex;
    gap: calc(var(--kiosk-gap) / 2);
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.kiosk-touch-nav-item {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--kiosk-gap) / 3);
    padding: calc(var(--kiosk-gap) * 0.6) calc(var(--kiosk-gap) * 0.5);
    border: 0;
    border-radius: calc(var(--kiosk-radius) * 0.75);
    background: var(--vaadin-background-container);
    font-size: var(--kiosk-font-xs);
    font-weight: var(--aura-font-weight-medium);
    line-height: 1.1;
    text-align: center;
    /* все разделы в одну строку: длинная подпись («Меню столовой») — в две строки */
    white-space: normal;
}

.kiosk-touch-nav-item vaadin-icon {
    width: var(--kiosk-font-l);
    height: var(--kiosk-font-l);
}

.kiosk-touch-nav-item[aria-current='true'] {
    background: var(--aura-accent-color);
    color: var(--aura-accent-contrast-color);
}

.kiosk-touch-tools {
    display: flex;
    align-items: center;
    gap: var(--kiosk-gap);
}

.kiosk-touch-lang {
    display: flex;
    padding: calc(var(--kiosk-gap) / 4);
    border-radius: calc(var(--kiosk-radius) * 0.75);
    background: var(--vaadin-background-container);
}

.kiosk-touch-lang-button {
    padding: calc(var(--kiosk-gap) * 0.5) var(--kiosk-gap);
    border: 0;
    border-radius: calc(var(--kiosk-radius) * 0.6);
    background: transparent;
    font-size: var(--kiosk-font-s);
}

.kiosk-touch-lang-button[aria-pressed='true'] {
    background: var(--aura-surface-color);
    box-shadow: var(--aura-shadow-xs);
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-touch-clock {
    font-size: var(--kiosk-font-l);
    font-weight: var(--aura-font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.kiosk-touch-exit {
    display: flex;
    align-items: center;
    gap: calc(var(--kiosk-gap) / 2);
    padding: calc(var(--kiosk-gap) * 0.75) calc(var(--kiosk-gap) * 1.25);
    border: 0;
    border-radius: calc(var(--kiosk-radius) * 0.75);
    background: var(--aura-accent-color);
    color: var(--aura-accent-contrast-color);
    font-size: var(--kiosk-font-m);
    font-weight: var(--aura-font-weight-semibold);
    white-space: nowrap;
}

.kiosk-touch-exit vaadin-icon {
    width: var(--kiosk-font-l);
    height: var(--kiosk-font-l);
}

/* вертикаль: разделы — отдельной строкой в несколько рядов */
.kiosk-screen[data-layout='portrait'] .kiosk-touch-bar {
    grid-template-columns: auto minmax(0, 1fr);
}

.kiosk-screen[data-layout='portrait'] .kiosk-touch-tools {
    justify-content: flex-end;
}

.kiosk-screen[data-layout='portrait'] .kiosk-touch-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-wrap: wrap;
}

.kiosk-screen[data-layout='portrait'] .kiosk-touch-nav-item {
    flex-basis: calc(20% - var(--kiosk-gap));
    min-width: 0;
    white-space: normal;
}

.kiosk-touch-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--kiosk-radius);
    background: var(--aura-surface-color);
    box-shadow: var(--aura-shadow-s);
}

.kiosk-touch-frame {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ------------------------------------------------ PIN-код (service.js) */

.kiosk-overlay[data-mode='pin'] {
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--aura-app-background) 80%, transparent);
    backdrop-filter: blur(12px);
}

.kiosk-pin {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kiosk-gap);
    width: min(92vw, calc(var(--kiosk-font-xl) * 9));
    padding: calc(var(--kiosk-pad) * 1.5);
    box-sizing: border-box;
    border-radius: calc(var(--kiosk-radius) * 1.5);
    background: var(--aura-surface-color-solid, var(--aura-surface-color));
    box-shadow: var(--aura-shadow-m);
}

.kiosk-pin-title {
    margin: 0;
    font-size: var(--kiosk-font-xl);
    line-height: 1.15;
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-pin-hint {
    margin: 0;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-m);
}

.kiosk-pin-dots {
    display: flex;
    gap: var(--kiosk-gap);
    padding-block: calc(var(--kiosk-gap) / 2);
}

.kiosk-pin-dot {
    width: calc(var(--kiosk-font-m) * 0.8);
    height: calc(var(--kiosk-font-m) * 0.8);
    box-sizing: border-box;
    border: calc(var(--kiosk-gap) * 0.2) solid var(--vaadin-text-color-secondary);
    border-radius: 50%;
}

.kiosk-pin-dot[data-filled] {
    border-color: var(--aura-accent-color);
    background: var(--aura-accent-color);
}

.kiosk-pin-error {
    min-height: 2.5em;
    margin: 0;
    color: var(--aura-red-text);
    font-size: var(--kiosk-font-s);
    font-weight: var(--aura-font-weight-medium);
    text-align: center;
}

.kiosk-pin-keys {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(var(--kiosk-gap) * 0.75);
    width: 100%;
}

.kiosk-pin-key {
    aspect-ratio: 1.5;
    border: 0;
    border-radius: var(--kiosk-radius);
    background: var(--vaadin-background-container);
    font-size: var(--kiosk-font-xl);
    font-weight: var(--aura-font-weight-medium);
    font-variant-numeric: tabular-nums;
}

.kiosk-pin-key:active {
    background: var(--vaadin-background-container-strong);
}

.kiosk-pin-key-submit {
    background: var(--aura-accent-color);
    color: var(--aura-accent-contrast-color);
}

.kiosk-pin-key:disabled {
    opacity: 0.4;
    cursor: default;
}

.kiosk-pin-cancel {
    padding: calc(var(--kiosk-gap) * 0.6) calc(var(--kiosk-gap) * 2);
    border: 0;
    border-radius: var(--kiosk-radius);
    background: transparent;
    color: var(--aura-accent-text-color);
    font-size: var(--kiosk-font-m);
}

/* ------------------------------------- сервисная панель (service.js) */

/* справа во всю высоту; экран слева продолжает работать и показывает изменения.
   Крупные элементы под палец (docs/kiosk.md, § 7): кнопки, вкладки, поля, галочки и кнопки ±
   крупнее обычных, а всю панель ещё масштабирует zoom из service.js (на 1080p ×1,74:
   кнопка ~75 px, галочка ~45 px, текст ~24 px) */
.kiosk-screen {
    --kiosk-service-width: clamp(340px, 48vw, 100vw);
}

.kiosk-service {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    width: var(--kiosk-service-width);
    z-index: 20;
    overflow: hidden;
    background: var(--aura-surface-color-solid, var(--aura-app-background));
    box-shadow: var(--aura-overlay-shadow, var(--aura-shadow-m));
    font-size: var(--aura-font-size-m);
    line-height: var(--aura-line-height-m);
    user-select: text;
    -webkit-user-select: text;
    animation: kiosk-slide-in 300ms ease both;
}

/* Экран сжимается рядом с панелью, а не прячется под ней: шапка, слайд и бегущая строка
   остаются видны, и оператор сразу видит результат своих правок. В горизонтали — слева
   от панели, колонка на это время скрыта (иначе слайду остаётся четверть экрана). */
.kiosk-screen[data-layout='landscape'][data-service] {
    padding-inline-end: calc(var(--kiosk-service-width) + var(--kiosk-pad));
}

.kiosk-screen[data-layout='landscape'][data-service]:not([data-mode='MEDIA']) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        'header'
        'stage'
        'touch'
        'ticker';
}

.kiosk-screen[data-layout='landscape'][data-service] .kiosk-sidebar {
    display: none;
}

/* в вертикали — над панелью */
.kiosk-screen[data-layout='portrait'] {
    --kiosk-service-height: 56dvh;
}

.kiosk-screen[data-layout='portrait'][data-service] {
    padding-block-end: calc(var(--kiosk-service-height) + var(--kiosk-pad));
}

.kiosk-screen[data-layout='portrait'] .kiosk-service {
    inset-block-start: auto;
    inset-inline-start: 0;
    width: auto;
    height: var(--kiosk-service-height);
    animation-name: kiosk-rise;
}

.kiosk-service :is(vaadin-button, vaadin-upload-button) {
    --vaadin-button-height: 2.75rem;
}

.kiosk-service vaadin-tab {
    --vaadin-tab-padding: 0.625rem 1rem;
}

.kiosk-service :is(vaadin-text-field, vaadin-integer-field, vaadin-text-area) {
    --vaadin-input-field-padding: 0.625rem 0.75rem;
}

/* кнопки ± и «очистить» — площадка касания больше значка, высоту поля не меняет */
.kiosk-service :is(vaadin-text-field, vaadin-integer-field)::part(field-button) {
    padding: 0.5rem;
    margin-block: -0.5rem;
}

.kiosk-service :is(vaadin-checkbox, vaadin-radio-button) {
    --vaadin-checkbox-size: 1.625rem;
    --vaadin-radio-button-size: 1.625rem;
}

@keyframes kiosk-slide-in {
    from {
        opacity: 0;
        transform: translateX(10%);
    }
}

.kiosk-service-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.kiosk-service-head {
    display: flex;
    align-items: center;
    gap: var(--vaadin-gap-m);
    padding: var(--vaadin-padding-m) var(--vaadin-padding-l);
    border-bottom: 1px solid var(--vaadin-border-color-secondary);
}

.kiosk-service-logo {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    object-fit: contain;
}

.kiosk-service-titles {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.kiosk-service-title {
    font-size: var(--aura-font-size-l);
    font-weight: var(--aura-font-weight-semibold);
    line-height: var(--aura-line-height-s);
}

.kiosk-service-kiosk {
    overflow: hidden;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kiosk-service-tabs {
    flex: 0 0 auto;
    padding-inline: var(--vaadin-padding-m);
}

.kiosk-service-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--vaadin-padding-m) var(--vaadin-padding-l) var(--vaadin-padding-l);
}

.kiosk-service-foot {
    padding: var(--vaadin-padding-s) var(--vaadin-padding-l);
    border-top: 1px solid var(--vaadin-border-color-secondary);
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xs);
}

.kiosk-service-section {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-m);
}

.kiosk-service-hint {
    margin: calc(var(--vaadin-gap-s) * -1) 0 0;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
}

.kiosk-service-subtitle {
    margin: var(--vaadin-gap-s) 0 0;
    font-size: var(--aura-font-size-m);
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-service-empty {
    color: var(--vaadin-text-color-secondary);
}

.kiosk-service-upload {
    width: 100%;
    box-sizing: border-box;
}

.kiosk-service-media,
.kiosk-service-blocks,
.kiosk-service-ticker-list {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kiosk-service-media-row {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    grid-template-areas:
        'thumb fields'
        'actions actions';
    gap: var(--vaadin-gap-s) var(--vaadin-gap-m);
    padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
}

.kiosk-service-thumb {
    position: relative;
    grid-area: thumb;
    align-self: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--vaadin-radius-m);
    background: var(--vaadin-background-container-strong);
}

.kiosk-service-thumb img,
.kiosk-service-thumb video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kiosk-service-thumb vaadin-icon {
    position: absolute;
    inset-inline-end: 0.3rem;
    bottom: 0.3rem;
    padding: 0.2rem;
    border-radius: var(--vaadin-radius-s);
    background: var(--aura-accent-color);
    color: var(--aura-accent-contrast-color);
}

.kiosk-service-media-row[data-inactive] .kiosk-service-thumb {
    opacity: 0.4;
}

/* подпись и секунды — друг под другом: подсказка в пустом поле секунд
   («как у слайда (15)», «до конца ролика») помещается целиком на обоих языках */
.kiosk-service-media-fields {
    grid-area: fields;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vaadin-gap-xs);
}

.kiosk-service-media-fields vaadin-text-field {
    width: 100%;
}

.kiosk-service-media-fields vaadin-integer-field {
    width: min(100%, 20rem);
}

.kiosk-service-media-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: var(--vaadin-gap-s);
}

.kiosk-service-media-actions vaadin-checkbox {
    margin-inline-end: auto;
}

.kiosk-service-media-actions vaadin-button {
    min-width: 3.5rem;
}

.kiosk-service-seconds {
    max-width: 16rem;
}

.kiosk-service-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

/* галочка блока — плитка на всю ячейку: касание в любом её месте переключает блок (service.js) */
.kiosk-service-block {
    display: flex;
    align-items: center;
    padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
    border-radius: var(--vaadin-radius-m);
    background: var(--vaadin-background-container);
    cursor: pointer;
}

.kiosk-service-block vaadin-checkbox {
    flex: 1 1 auto;
}

.kiosk-service-ticker-row {
    display: flex;
    align-items: end;
    gap: var(--vaadin-gap-m);
}

.kiosk-service-ticker-text {
    width: 100%;
    min-height: 7rem;
}

.kiosk-service-ticker-item {
    padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
    border-radius: var(--vaadin-radius-m);
    background: var(--vaadin-background-container);
}

/* сообщение сервисного режима поверх экрана */
.kiosk-toast {
    position: fixed;
    inset-block-start: calc(var(--kiosk-pad) * 1.5);
    inset-inline-start: 50%;
    translate: -50% 0;
    max-width: 80vw;
    padding: calc(var(--kiosk-pad) / 2) calc(var(--kiosk-pad) * 1.25);
    border-radius: var(--kiosk-radius);
    background: var(--aura-green);
    color: var(--aura-accent-contrast-color);
    box-shadow: var(--aura-shadow-m);
    font-size: var(--kiosk-font-m);
    font-weight: var(--aura-font-weight-medium);
    z-index: 40;
    /* только сообщение: касания проходят насквозь — к логотипу под ним (10 касаний) */
    pointer-events: none;
    animation: kiosk-fade-in 200ms ease both;
}

.kiosk-toast[data-theme='error'] {
    background: var(--aura-red);
}

/* -------------------------------------- недельное расписание (week.js) */

.kiosk-week {
    display: flex;
    flex-direction: column;
    gap: var(--kiosk-gap);
    height: 100%;
    min-height: 0;
    padding: calc(var(--kiosk-pad) * 1.25);
    box-sizing: border-box;
}

.kiosk-week-head {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kiosk-gap) calc(var(--kiosk-gap) * 1.5);
}

.kiosk-week-title {
    margin: 0;
    font-size: var(--kiosk-font-xl);
    font-weight: var(--aura-font-weight-semibold);
    line-height: 1.1;
}

.kiosk-week-hint {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-l);
}

.kiosk-week-tabs {
    display: flex;
    gap: calc(var(--kiosk-gap) / 3);
    margin-inline-start: auto;
    padding: calc(var(--kiosk-gap) / 3);
    border-radius: var(--kiosk-radius);
    background: var(--vaadin-background-container);
}

.kiosk-week-tab {
    padding: calc(var(--kiosk-gap) * 0.6) calc(var(--kiosk-gap) * 1.6);
    border: 0;
    border-radius: calc(var(--kiosk-radius) * 0.75);
    background: transparent;
    font-size: var(--kiosk-font-m);
}

.kiosk-week-tab[aria-selected='true'] {
    background: var(--aura-surface-color);
    box-shadow: var(--aura-shadow-xs);
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-week-back {
    padding: calc(var(--kiosk-gap) * 0.6) calc(var(--kiosk-gap) * 1.2);
    border: 0;
    border-radius: var(--kiosk-radius);
    background: var(--vaadin-background-container);
    font-size: var(--kiosk-font-m);
}

.kiosk-week-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.kiosk-week-status {
    margin: 0;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-l);
}

.kiosk-week-grade {
    display: grid;
    grid-template-columns: 2.2em minmax(0, 1fr);
    align-items: center;
    gap: var(--kiosk-gap);
    padding-block: calc(var(--kiosk-gap) * 0.6);
}

.kiosk-week-grade + .kiosk-week-grade {
    border-top: 1px solid var(--vaadin-border-color-secondary);
}

.kiosk-week-grade-label {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-xl);
    font-weight: var(--aura-font-weight-semibold);
    text-align: center;
}

.kiosk-week-choices {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--kiosk-gap) * 0.75);
}

.kiosk-week-teachers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--kiosk-font-m) * 11), 1fr));
}

.kiosk-week-choice {
    min-width: calc(var(--kiosk-font-l) * 3.2);
    min-height: calc(var(--kiosk-font-l) * 2.2);
    padding: calc(var(--kiosk-gap) * 0.5) var(--kiosk-gap);
    border: 0;
    border-radius: var(--kiosk-radius);
    background: var(--aura-accent-surface, var(--vaadin-background-container));
    color: var(--aura-accent-text-color);
    font-size: var(--kiosk-font-l);
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-week-teachers .kiosk-week-choice {
    font-size: var(--kiosk-font-m);
    text-align: start;
}

.kiosk-week-choice:active {
    background: var(--aura-accent-color);
    color: var(--aura-accent-contrast-color);
}

.kiosk-week-table-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--kiosk-gap);
    min-height: 100%;
}

.kiosk-week-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: calc(var(--kiosk-gap) / 3);
    font-size: var(--kiosk-font-s);
}

.kiosk-week-table th {
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-week-corner {
    width: 4.5em;
    color: var(--vaadin-text-color-secondary);
}

.kiosk-week-day {
    padding: calc(var(--kiosk-gap) / 2);
    border-radius: calc(var(--kiosk-radius) * 0.75);
    background: var(--vaadin-background-container-strong);
    font-size: var(--kiosk-font-m);
}

.kiosk-week-day-short {
    display: none;
}

.kiosk-screen[data-layout='portrait'] .kiosk-week-day-full {
    display: none;
}

.kiosk-screen[data-layout='portrait'] .kiosk-week-day-short {
    display: inline;
}

.kiosk-week-day[data-today] {
    background: var(--aura-accent-color);
    color: var(--aura-accent-contrast-color);
}

.kiosk-week-today {
    display: block;
    font-size: var(--kiosk-font-xs);
    font-weight: var(--aura-font-weight-regular);
    opacity: 0.85;
}

.kiosk-week-number {
    display: table-cell;
    color: var(--vaadin-text-color-secondary);
    text-align: center;
}

.kiosk-week-number-no {
    display: block;
    color: var(--vaadin-text-color);
    font-size: var(--kiosk-font-l);
}

.kiosk-week-number-time {
    display: block;
    font-size: var(--kiosk-font-xs);
    font-weight: var(--aura-font-weight-regular);
    font-variant-numeric: tabular-nums;
}

.kiosk-week-cell {
    padding: calc(var(--kiosk-gap) * 0.4) calc(var(--kiosk-gap) * 0.6);
    border-radius: calc(var(--kiosk-radius) * 0.6);
    background: var(--vaadin-background-container);
    vertical-align: top;
}

.kiosk-week-cell[data-today] {
    background: var(--aura-accent-surface, var(--vaadin-background-container-strong));
}

.kiosk-week-cell[data-changed],
.kiosk-week-row[data-changed] {
    background: color-mix(in srgb, var(--aura-orange) 20%, var(--aura-surface-color));
    box-shadow: inset calc(var(--kiosk-gap) * 0.35) 0 0 var(--aura-orange);
}

.kiosk-week-cell[data-cancelled],
.kiosk-week-row[data-cancelled] {
    background: color-mix(in srgb, var(--aura-red) 14%, var(--aura-surface-color));
    box-shadow: inset calc(var(--kiosk-gap) * 0.35) 0 0 var(--aura-red);
}

.kiosk-week-lesson {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kiosk-week-lesson + .kiosk-week-lesson {
    margin-top: calc(var(--kiosk-gap) / 3);
    padding-top: calc(var(--kiosk-gap) / 3);
    border-top: 1px dashed var(--vaadin-border-color);
}

.kiosk-week-subject {
    display: -webkit-box;
    overflow: hidden;
    font-weight: var(--aura-font-weight-semibold);
    line-height: 1.15;
    hyphens: auto;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kiosk-week-lesson[data-cancelled] .kiosk-week-subject {
    text-decoration: line-through;
}

.kiosk-week-meta,
.kiosk-week-was,
.kiosk-week-note {
    overflow: hidden;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-xs);
    text-overflow: ellipsis;
}

.kiosk-week-was,
.kiosk-week-note {
    color: var(--aura-orange-text);
}

.kiosk-week-legend,
.kiosk-tt-legend {
    display: flex;
    gap: calc(var(--kiosk-gap) * 1.5);
    margin: 0;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--kiosk-font-s);
}

.kiosk-week-legend span::before,
.kiosk-tt-legend span::before {
    content: '';
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-inline-end: 0.4em;
    vertical-align: -0.1em;
    border-radius: 0.2em;
}

.kiosk-week-legend-changed::before,
.kiosk-tt-legend-changed::before {
    background: var(--aura-orange);
}

.kiosk-week-legend-cancelled::before,
.kiosk-tt-legend-cancelled::before {
    background: var(--aura-red);
}

/* телефон: кнопки дней и список уроков */
.kiosk-week-days {
    display: flex;
    flex-direction: column;
    gap: var(--kiosk-gap);
}

.kiosk-week-day-switch {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: calc(var(--kiosk-gap) / 2);
}

.kiosk-week-day-chip {
    padding: 0.55em 0;
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-m);
    background: var(--aura-surface-color);
    color: var(--vaadin-text-color);
    font: inherit;
    font-weight: var(--aura-font-weight-medium);
}

.kiosk-week-day-chip[data-today] {
    border-color: var(--aura-accent-color);
}

.kiosk-week-day-chip[aria-selected='true'] {
    border-color: var(--aura-accent-color);
    background: var(--aura-accent-color);
    color: var(--aura-accent-contrast-color);
}

.kiosk-week-day-title {
    display: flex;
    align-items: baseline;
    gap: var(--vaadin-gap-s);
    margin: 0;
    font-size: var(--aura-font-size-l);
}

.kiosk-week-day-title .kiosk-week-today {
    display: inline;
    color: var(--aura-accent-text-color);
    font-size: var(--aura-font-size-s);
}

.kiosk-week-rows {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kiosk-week-row {
    display: grid;
    grid-template-columns: 5.2em minmax(0, 1fr);
    gap: var(--vaadin-gap-s);
    padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
    border-radius: var(--vaadin-radius-m);
    background: var(--vaadin-background-container);
}

.kiosk-week-row-no {
    display: flex;
    flex-direction: column;
    font-size: var(--aura-font-size-l);
    font-weight: var(--aura-font-weight-semibold);
    line-height: 1.1;
}

.kiosk-week-row-time {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xs);
    font-weight: var(--aura-font-weight-regular);
    font-variant-numeric: tabular-nums;
}

.kiosk-week[data-mode='info'] {
    height: auto;
    padding: 0;
}

.kiosk-week[data-mode='info'] .kiosk-week-body {
    overflow: visible;
}

.kiosk-week[data-mode='info'] .kiosk-week-title {
    font-size: var(--aura-font-size-xl);
}

.kiosk-week[data-mode='info'] .kiosk-week-hint {
    font-size: var(--aura-font-size-m);
}

.kiosk-week[data-mode='info'] .kiosk-week-tabs {
    margin-inline-start: 0;
}

.kiosk-week[data-mode='info'] .kiosk-week-choice {
    min-width: 3.6em;
    min-height: 2.6em;
    font-size: var(--aura-font-size-m);
}

.kiosk-week[data-mode='info'] .kiosk-week-teachers {
    grid-template-columns: minmax(0, 1fr);
}

.kiosk-week[data-mode='info'] .kiosk-week-subject {
    -webkit-line-clamp: 3;
}

/* ================================================= мобильная версия /info */

.public-layout.public-layout:has(> .kiosk-info) {
    max-width: 48em;
    padding: var(--vaadin-padding-m);
}

.kiosk-info {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-m);
    width: 100%;
    min-width: 0;
}

.kiosk-info-header {
    display: flex;
    align-items: center;
    gap: var(--vaadin-gap-s);
}

.kiosk-info-logo {
    width: 2.5em;
    height: 2.5em;
    object-fit: contain;
}

.kiosk-info-school {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: var(--aura-font-size-l);
    font-weight: var(--aura-font-weight-semibold);
    line-height: var(--aura-line-height-s);
}

.kiosk-info-lang {
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
    padding: 2px;
    border-radius: var(--vaadin-radius-m);
    background: var(--vaadin-background-container);
}

.kiosk-info-lang[hidden] {
    display: none;
}

.kiosk-info-lang-link {
    padding: 0.3em 0.7em;
    border-radius: var(--vaadin-radius-s);
    color: var(--vaadin-text-color);
    font-size: var(--aura-font-size-s);
    text-decoration: none;
}

.kiosk-info-lang-link[aria-current='true'] {
    background: var(--aura-surface-color);
    box-shadow: var(--aura-shadow-xs);
    font-weight: var(--aura-font-weight-semibold);
}

.kiosk-info-nav {
    position: sticky;
    top: 0;
    z-index: 2;
    margin-inline: calc(var(--vaadin-padding-m) * -1);
    padding-inline: var(--vaadin-padding-xs);
    background: var(--aura-app-background);
}

.kiosk-info-tabs {
    width: 100%;
}

.kiosk-info-footer {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xs);
    text-align: center;
}

.kiosk-info-footer[data-offline] {
    color: var(--aura-red-text);
}

/* в мобильной версии слайд — обычный блок страницы, шкала — от шрифта Aura */
.kiosk-info {
    --kiosk-font-xs: var(--aura-font-size-xs);
    --kiosk-font-s: var(--aura-font-size-s);
    --kiosk-font-m: var(--aura-font-size-m);
    --kiosk-font-l: var(--aura-font-size-l);
    --kiosk-font-xl: var(--aura-font-size-xl);
    --kiosk-font-xxl: var(--aura-font-size-xl);
    --kiosk-gap: var(--vaadin-gap-s);
    --kiosk-pad: var(--vaadin-padding-m);
    --kiosk-radius: var(--vaadin-radius-m);
}

.kiosk-info .kiosk-slide {
    padding: var(--vaadin-padding-m);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-m);
    background: var(--aura-surface-color);
    overflow: visible;
}

.kiosk-info .kiosk-slide-body {
    position: static;
}

.kiosk-info .kiosk-page {
    position: static;
    overflow: visible;
    animation: none;
}

.kiosk-info .kiosk-slide-subtitle {
    font-size: var(--aura-font-size-m);
}

body {
    margin: 0;
    font-family: var(--aura-font-family);
    background: var(--aura-app-background);
    color: var(--vaadin-text-color);
}

/*
 * Без «мигания»: пока компоненты не определились (:not(:defined)), а экраны не
 * получили первые данные (класс app-ready ставит app.js), страница невидима —
 * виден только серый фон. Страховка: через 5 с показать в любом случае.
 * opacity, а не display или visibility — таблице и app-layout нужна раскладка,
 * пока они скрыты, а vaadin-form-layout при visibility: hidden считает себя
 * невидимым (checkVisibility) и не раскладывает поля даже после показа.
 * Прозрачность не переопределяется детьми, поэтому панель и шапка отдельно не нужны.
 */
body > vaadin-app-layout:not(:defined),
body:not(.app-ready) > vaadin-app-layout,
body:not(.app-ready) > .jmix-login-main-layout,
body:not(.app-ready) > .public-layout {
    opacity: 0;
    animation: app-reveal 0s linear 5s forwards;
}

body:not(.app-ready) > vaadin-app-layout {
    --vaadin-app-layout-transition-duration: 0s; /* панель не «выезжает» при первом показе */
}

@keyframes app-reveal {
    to {
        opacity: 1;
    }
}

/*
 * Переходы без перезагрузки (resources/js/navigation.js). Карточка контента Aura рисуется
 * на .view-host — единственном неслотовом ребёнке app-layout. При переходе в нём две
 * main.view-content в одной ячейке сетки: новая (.view-staged) прозрачна, пока экран
 * получает первые данные, старая видна поверх. Прозрачность, а не visibility: форме
 * и таблице нужна раскладка (см. app-ready выше).
 */
.view-host {
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    height: 100%;
}

.view-host > .view-content {
    grid-area: 1 / 1;
}

.view-host > .view-content.view-staged {
    opacity: 0;
    pointer-events: none;
}

/* смена карточки через View Transitions API: анимируется только она, шапка и меню живые */
html.view-swap {
    view-transition-name: none;
}

html.view-swap .view-host {
    view-transition-name: view-content;
}

::view-transition-old(view-content),
::view-transition-new(view-content) {
    animation-duration: 180ms;
}

/* полоска загрузки вверху окна (resources/js/progress.js); своя полоса Turbo не нужна */
.page-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483647;
    width: 0;
    height: 3px;
    background: var(--aura-accent-color);
    opacity: 0;
    pointer-events: none;
    transition: width 300ms ease-out, opacity 150ms ease-in;
}

.page-progress.page-progress-visible {
    opacity: 1;
}

.page-progress.page-progress-done {
    opacity: 0;
    transition: width 300ms ease-out, opacity 150ms 300ms ease-in;
}

.turbo-progress-bar {
    display: none;
}

/* карточка контента тянется до низа экрана, как в Jmix */
vaadin-app-layout.jmix-main-view-app-layout {
    height: 100vh;
    box-sizing: border-box;
}

/* ================================================= main-view.css (Jmix) */

vaadin-app-layout.jmix-main-view-app-layout:not([primary-section='navbar']) {
    --vaadin-app-layout-navbar-padding-top: var(--aura-app-layout-inset);
    --vaadin-app-layout-navbar-padding-inline-start: var(--aura-app-layout-inset);
    --vaadin-app-layout-navbar-padding-inline-end: var(--aura-app-layout-inset);
    --vaadin-app-layout-navbar-padding-bottom: 0px;

    transition: padding-bottom var(--vaadin-app-layout-transition-duration),
    padding-inline-start var(--vaadin-app-layout-transition-duration),
    padding-inline-end var(--vaadin-app-layout-transition-duration);
}

vaadin-app-layout.jmix-main-view-app-layout[drawer-opened]:not([primary-section='navbar']) {
    --vaadin-app-layout-navbar-padding-inline-start: 0px;
}

vaadin-app-layout.jmix-main-view-app-layout:not([primary-section='navbar'])::part(navbar) {
    transition: inset-inline-start var(--vaadin-app-layout-transition-duration),
    padding var(--vaadin-app-layout-transition-duration);
}

/* карточка контента под шапкой — без верхней рамки и верхних скруглений */
vaadin-app-layout.jmix-main-view-app-layout[has-navbar]:not([primary-section='navbar']) > :nth-child(1 of :not([slot]):not(jmix-timer)):nth-last-child(1 of :not([slot]):not(jmix-timer)) {
    border-top-width: 0;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}

vaadin-app-layout.jmix-main-view-app-layout[has-navbar][has-drawer][drawer-opened]:not([overlay]):not([primary-section='navbar']) > :nth-child(1 of :not([slot]):not(jmix-timer)):nth-last-child(1 of :not([slot]):not(jmix-timer)) {
    border-start-start-radius: 0;
}

/* шапка — верхняя часть карточки контента */
vaadin-app-layout.jmix-main-view-app-layout:not([primary-section='navbar']) .jmix-main-view-header {
    background: linear-gradient(var(--aura-surface-color), var(--aura-surface-color)), var(--aura-app-background);
    background-clip: padding-box;
    background-origin: border-box;

    border: var(--aura-app-layout-border-width) solid var(--vaadin-border-color-secondary);
    border-top-width: min(var(--aura-app-layout-inset), var(--aura-app-layout-border-width));
    border-inline-width: min(var(--aura-app-layout-inset), var(--aura-app-layout-border-width));
    border-bottom-width: 1px;
    border-start-start-radius: var(--_app-layout-radius);
    border-start-end-radius: var(--_app-layout-radius);

    padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
}

vaadin-app-layout.jmix-main-view-app-layout:not([primary-section='navbar'])::part(navbar-bottom) {
    border-top: 1px solid var(--vaadin-border-color-secondary);
}

vaadin-app-layout.jmix-main-view-app-layout[has-drawer][drawer-opened]:not([overlay]):not([primary-section='navbar']) > .jmix-main-view-header {
    border-inline-start-width: var(--aura-app-layout-border-width);
}

.jmix-main-view-header {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: var(--vaadin-gap-m);
}

.jmix-main-view-title {
    font-size: var(--aura-font-size-xl);
}

.jmix-main-view-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-height: 100%;
    min-height: 100%;
}

/* ---- jmix-main-view-drawer-header: логотип слева, название в две строки справа */
.jmix-main-view-drawer-header {
    display: flex;
    align-items: center;
    gap: var(--vaadin-gap-s);
    padding: var(--vaadin-padding-m);
    min-width: 0;
}

/* SVG вписывается в квадрат 3em без растяжения */
.jmix-main-view-drawer-logo {
    flex: 0 0 auto;
    width: 3em;
    height: 3em;
    object-fit: contain;
}

.jmix-main-view-application-title {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    min-width: 0;
    font-size: var(--aura-font-size-l);
    line-height: var(--aura-line-height-s);
}

/* две строки: «Единая социальная» / «база», без переноса внутри строки */
.jmix-main-view-application-title-base-link {
    display: flex;
    flex-direction: column;
    color: var(--vaadin-text-color);
    text-decoration: none;
    white-space: nowrap;
}

.jmix-main-view-navigation {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: auto;
}

/* User Menu */

.jmix-main-view-user-menu {
    margin-inline-start: auto;
}

.user-menu-button-content {
    display: grid;
    grid-template: "avatar text"
                   "avatar subtext";
    grid-template-columns: auto 1fr;
    column-gap: var(--vaadin-gap-s);

    width: max-content;
    box-sizing: border-box;

    color: var(--vaadin-text-color);
    padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
}

.user-menu-button-content > .user-menu-avatar {
    grid-area: avatar;
    align-self: center;
}

.user-menu-button-content > .user-menu-text {
    grid-row: text / subtext;
    align-self: center;
    text-align: start;

    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================ jmix-user-menu.css (Jmix) */

vaadin-menu-bar[jmix-role='jmix-user-menu'] {
    flex-shrink: 0;
}

vaadin-menu-bar[jmix-role='jmix-user-menu'] vaadin-menu-bar-button.jmix-user-menu-button {
    padding: 0;
    height: auto;
}

vaadin-menu-bar[jmix-role='jmix-user-menu'] > vaadin-menu-bar-button:nth-last-of-type(2)::part(suffix) {
    display: none;
}

vaadin-menu-bar[jmix-role='jmix-user-menu'] vaadin-menu-bar-button.jmix-user-menu-button::part(label) {
    padding: 0;
}

vaadin-menu-bar[jmix-role='jmix-user-menu'] vaadin-menu-bar-item.jmix-user-menu-button {
    padding: 0;
    margin: 0;

    height: 100%;
}

vaadin-menu-bar[jmix-role='jmix-user-menu'] vaadin-menu-bar-item::part(content) {
    display: flex;
    align-items: center;
    gap: var(--vaadin-gap-s);
}

/* ============================================ jmix-list-menu.css (Jmix) */

:where(:root),
:where(:host) {
    --jmix-list-menu-item-font-size: var(--aura-font-size-s);
    --jmix-list-menu-item-font-weight: 500;
    --jmix-list-menu-item-line-height: var(--aura-line-height-s);
}

.jmix-list-menu {
    color: var(--vaadin-text-color-secondary);
    margin: 0;
    overflow: auto;
    padding: 0 var(--vaadin-padding-s);
    list-style-type: none;
}

.jmix-list-menu .jmix-menubar-item .menubar-list {
    margin: 0;
    margin-inline-start: var(--vaadin-padding-l);
    list-style-type: none;
    padding: 0;
}

/* пункты группы стоят с отступом — длинные подписи («Құқық бұзушылықсыз қала») переносятся, а не обрезаются */
.jmix-list-menu .jmix-menubar-item .menubar-list .link-text {
    white-space: normal;
}

.jmix-list-menu .jmix-menubar-item .menubar-list li {
    padding: calc(var(--vaadin-padding-xs) / 2) 0;
}

/* пункты без групп: та же вертикаль, что у вложенных li в Jmix */
.jmix-list-menu > li {
    padding: calc(var(--vaadin-padding-xs) / 2) 0;
}

/* группа среди плоских пунктов («Отчёты»): та же вертикаль, что у пунктов */
.jmix-list-menu .jmix-menubar-item {
    padding: 0;
    margin: 0;
}

.jmix-list-menu .jmix-menubar-item::part(content) {
    margin-inline-start: 0;
    padding: 0;
}

/* заголовок группы выглядит как обычный пункт: цвет, шрифт и иконка пунктов, стрелка справа */
.jmix-list-menu .jmix-menubar-item vaadin-details-summary {
    padding: var(--vaadin-padding-s);
    color: inherit;
    border-radius: var(--vaadin-radius-m);
}

.jmix-list-menu .jmix-menubar-item .jmix-menubar-summary-icon-container {
    display: flex;
    gap: var(--vaadin-gap-s);
    align-items: center;
}

.jmix-list-menu .jmix-menubar-item .menubar-summary {
    font-size: var(--jmix-list-menu-item-font-size);
    line-height: var(--jmix-list-menu-item-line-height);
    white-space: nowrap;
    font-weight: var(--jmix-list-menu-item-font-weight);
    text-overflow: ellipsis;
    overflow: hidden;
}

.jmix-list-menu a.jmix-menu-item {
    display: flex;
    gap: var(--vaadin-gap-s);
    padding: var(--vaadin-padding-s);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    align-items: center;
}

.jmix-list-menu a.jmix-menu-item .link-text {
    font-size: var(--jmix-list-menu-item-font-size);
    font-weight: var(--jmix-list-menu-item-font-weight);
    line-height: var(--jmix-list-menu-item-line-height);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jmix-list-menu a.jmix-menu-item[highlight] {
    color: var(--aura-accent-text-color);
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    border-radius: var(--vaadin-radius-m);

    outline-offset: 2px;
}

.jmix-list-menu a.jmix-menu-item[highlight] .link-text {
    font-weight: var(--aura-font-weight-semibold);
}

.jmix-list-menu .jmix-menubar-item vaadin-details-summary::part(content) {
    display: flex;
    overflow: hidden;
    width: 100%;
    align-items: center;
}

.jmix-list-menu[theme~='toggle-reverse'] vaadin-details-summary {
    justify-content: space-between;
}

.jmix-list-menu[theme~='toggle-reverse'] vaadin-details-summary::part(toggle) {
    order: 1;
    margin-inline-end: 0;
}

@supports selector(:focus-visible) {
    .jmix-list-menu a.jmix-menu-item:focus-visible {
        border-radius: var(--vaadin-radius-m);
        outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
        outline-offset: 1px;
    }
}

@media (forced-colors: active) {
    .jmix-list-menu a.jmix-menu-item[highlight] {
        border: 1px solid CanvasText;
    }
}

/* ====================================== jmix-simple-pagination.css (Jmix) */

.buttons-panel .jmix-simple-pagination:not([slot]):last-child {
    margin-inline-start: auto
}

.jmix-simple-pagination {
    --_gap: var(--jmix-simple-pagination-gap, var(--vaadin-gap-xs));

    align-items: center;
    display: flex;
    gap: var(--_gap);
}

.jmix-simple-pagination-status-bar {
    margin: 0 var(--_gap);
    display: flex;
    gap: var(--_gap);
}

.jmix-simple-pagination-status {
    white-space: nowrap;
}

.jmix-simple-pagination-navigation-button {
    padding: 0;
    margin: 0;
    height: 1.5rem;
    min-width: 1.5rem;

    font-size: var(--aura-font-size-s);
}

.jmix-simple-pagination-navigation-button vaadin-icon[dir='rtl'] {
    rotate: 180deg;
}

/* ============================== login-view.css + jmix-login-form.css (Jmix) */

body.login-page {
    min-height: 100vh;
}

/* корневой vaadin-vertical-layout экрана входа: padding 12px, gap 8px, всё по центру */
.jmix-login-main-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--vaadin-gap-s);
    width: 100%;
    height: 100vh;
    padding: var(--vaadin-padding-m);
    box-sizing: border-box;
    overflow: auto;
}

.jmix-login-main-layout vaadin-login-form::part(form) {
    --vaadin-login-form-border-radius: var(--vaadin-radius-l);
    --vaadin-login-form-background: var(--aura-surface-color);

    box-shadow: var(--aura-shadow-s);
    border: 1px solid var(--vaadin-border-color);
}

/* в Jmix тег jmix-login-form, и «плашка» ошибки из Aura для vaadin-login-form на него не действует */
.jmix-login-main-layout vaadin-login-form::part(error-message) {
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.jmix-login-main-layout vaadin-login-form::part(error-message-title) {
    font-weight: 700;
}

.jmix-login-form-additional-fields-container {
    display: flex;
    gap: var(--vaadin-gap-s);
    justify-content: end;
    padding-top: var(--vaadin-gap-s);
}

.jmix-login-form-remember-me {
    align-self: center;
    flex-grow: 1;
}

.jmix-login-form-locales-select {
    width: var(--jmix-login-form-locales-select-width, 8em);
}

vaadin-select.jmix-login-form-locales-select vaadin-select-value-button {
    width: 0;
}

/* ================================================= публичные страницы */

/*
 * Публичные страницы (терминал оценки питания, ссылка учителя и т. п.):
 * без панели и шапки, содержимое по центру в узкой колонке.
 */
body.public-page {
    min-height: 100vh;
}

.public-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--vaadin-gap-m);
    width: 100%;
    max-width: 40em;
    margin: 0 auto;
    padding: var(--vaadin-padding-l) var(--vaadin-padding-m);
    box-sizing: border-box;
}

.public-layout > vaadin-form-layout,
.public-layout > vaadin-grid {
    width: 100%;
}

/* ================================================================ экраны */

/*
 * Корень каждого экрана — как vaadin-vertical-layout theme="padding spacing"
 * с jmix-role="jmix-view-layout": padding 12px, gap 8px, дети прижаты к
 * левому краю (широкие блоки сами задают width: 100%).
 */
.view-content,
.view-layout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vaadin-gap-s);
    box-sizing: border-box;
}

.view-content {
    padding: var(--vaadin-padding-m);
    width: 100%;
    height: 100%;
    overflow: auto;
}

/*
 * Обёртки экранов внутри карточки: та же сетка отступов, что у корня.
 * Обёртка не сжимается — тогда нижний padding карточки (12px) входит в
 * прокручиваемую область, как в Jmix. Сжимаются только экраны с таблицей,
 * чтобы таблица тянулась до низа карточки.
 */
.view-layout {
    width: 100%;
    flex: 0 0 auto;
}

.view-layout.view-layout-grid {
    flex: 1 1 0;
    min-height: 0;
}

.view-layout[hidden] {
    display: none;
}

.view-content > vaadin-details,
.view-content > vaadin-grid,
.view-layout > vaadin-details,
.view-layout > vaadin-grid,
.view-layout > vaadin-form-layout {
    width: 100%;
}

/* vaadin-horizontal-layout theme="spacing wrap" width 100% */
.buttons-panel {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vaadin-gap-s);
    width: 100%;
    box-sizing: border-box;
}

/* поля фильтра в один ряд: vaadin-horizontal-layout theme="spacing wrap" align-items="end" */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--vaadin-gap-s);
    width: 100%;
    box-sizing: border-box;
}

/* чекбокс в ряду фильтра — по нижней кромке полей (34px), как поле без подписи;
   хост — grid, поэтому квадратик центрируется через align-content */
.filter-row > vaadin-checkbox {
    align-self: flex-end;
    min-height: 34px;
    box-sizing: border-box;
    align-items: center;
    align-content: center;
}

/* архивные ученики в списке приглушены */
vaadin-grid::part(archived) {
    color: var(--vaadin-text-color-secondary);
}

/* vaadin-horizontal-layout theme="spacing" align-items="end" */
.field-row {
    display: flex;
    align-items: flex-end;
    gap: var(--vaadin-gap-s);
    width: 100%;
    box-sizing: border-box;
}

.section-title {
    margin: 0;
}

/* vaadin-vertical-layout без padding и spacing */
.checkbox-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
}

/* vaadin-horizontal-layout theme="spacing" */
.card-actions {
    display: flex;
    gap: var(--vaadin-gap-s);
}

/* display: flex перебивает [hidden] — кнопки карточки прячутся, пока открыта панель записи */
.card-actions[hidden],
.buttons-panel[hidden],
.works-block[hidden] {
    display: none;
}

.hint {
    display: block;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
}

.hint[hidden] {
    display: none;
}

/* главная: карточки со сводкой — как .food-stat-card в теме Jmix */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--vaadin-gap-m);
    width: 100%;
}

.stat-card,
.panel {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: var(--vaadin-padding-m);
    border: 1px solid var(--vaadin-border-color);
    border-radius: var(--vaadin-radius-m);
    background: var(--vaadin-background-container);
    box-shadow: var(--aura-shadow-xs);
    box-sizing: border-box;
}

.stat-title {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
}

.stat-value {
    font-size: var(--aura-font-size-xl);
    font-weight: var(--aura-font-weight-semibold);
    line-height: 1.2;
}

.stat-hint {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xs);
    line-height: var(--aura-line-height-xs);
}

.panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: var(--vaadin-gap-m);
    width: 100%;
}

/* заголовок панели — h4, как заголовки секций в Jmix (food-section-title) */
.panel h4 {
    margin: 0 0 var(--vaadin-padding-s);
}

/* панель формы (посещение в обходе) прячется атрибутом hidden — display: flex его иначе перебивает */
.panel[hidden] {
    display: none;
}

/* ==================================================== карта микрорайона */

/* колонка типов слева, карта справа — во всю высоту карточки (как таблицы) */
.map-view {
    flex-direction: row;
    align-items: stretch;
    gap: var(--vaadin-gap-s);
}

.map-types {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
    flex: 0 0 14em;
    overflow: auto;
}

/* кнопки-типы одной ширины, текст у левого края — это легенда маркеров */
.map-types vaadin-button {
    width: 100%;
    justify-content: flex-start;
}

.map-types vaadin-button::part(label) {
    text-align: start;
    flex-grow: 1;
}

.map-type-dot {
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.7) inset;
}

/* рамка и радиус как у vaadin-grid в Aura: 1px / --vaadin-radius-m (9px) */
.map-canvas {
    flex: 1 1 0;
    min-width: 0;
    min-height: 20em;
    border: 1px solid var(--vaadin-border-color);
    border-radius: var(--vaadin-radius-m);
    overflow: hidden;
    isolation: isolate; /* z-index панелей Leaflet (400/1000) не выходит за карту: шапка и меню не перекрываются */
    font-family: var(--aura-font-family);
}

.map-canvas.map-canvas-placing {
    cursor: crosshair;
}

.map-canvas .leaflet-tooltip.map-label {
    font-size: var(--aura-font-size-xs);
    padding: 1px 4px;
}

.map-popup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vaadin-gap-xs);
    font-family: var(--aura-font-family);
    font-size: var(--aura-font-size-s);
}

.map-popup-remove {
    margin-top: var(--vaadin-gap-xs);
}

/* узкое окно: типы строкой с переносом над картой, карта во всю ширину */
@media (max-width: 700px) {
    .map-view {
        flex-direction: column;
    }

    .map-types {
        flex: 0 0 auto;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .map-types vaadin-button {
        width: auto;
    }

    .map-canvas {
        min-height: 60vh;
    }
}