@import "fonts/inter/inter.css";
@import "emerald-white.css";
@import "components/u-widgets.css";
@import "components/u-log-viewer.css";
@import "kit/kit.css";
@import "readiness/readiness.css";

/*
 * Application styles, loaded after the Aura theme (see Application.java).
 *
 * Stylesheets referenced by @StyleSheet resolve against this directory,
 * platform-webui/src/main/resources/META-INF/resources.
 *
 * Customize Aura by assigning to its style properties on `html`, not by writing selectors against
 * component internals: `--aura-*` carries the theme-level values (accent, background, contrast level,
 * base radius, base size, typography) and `--vaadin-*` the base and per-component values. Aura computes
 * contrast, surface hierarchy and the light/dark pairs from those, so a handful of properties changes the
 * whole UI coherently. Some `--vaadin-*` properties are derived and read-only; set what they are computed
 * from instead. Before overriding anything, check whether a built-in component variant already covers it.
 *
 * The theme configuration itself lives in emerald-white.css, imported above rather than inlined here, so
 * that a regenerated export replaces one whole file instead of being merged into this one by hand.
 *
 * components/*.css styles the app.zenthal.webui.components package. It is imported after the theme
 * because it reads Aura's tokens, and kept in its own files because it belongs to that package rather
 * than to this application - a view that uses no U-component pays for none of it beyond the bytes.
 */

/*
 * Reopening the drawer after it is closed.
 *
 * The App Layout's drawer toggle sits inside the drawer, which means closing the drawer also hides the
 * control that reopens it, leaving no way back to the navigation. Each view header carries its own toggle
 * (ViewFrame) and this rule keeps it out of the way whenever the drawer is already open, so exactly one
 * toggle is visible at a time. The view content is a light-DOM child of vaadin-app-layout, so the state
 * attribute on the host is reachable from here as a plain descendant selector.
 */
vaadin-app-layout[drawer-opened] .view-drawer-toggle {
  display: none;
}

/* Separator between the navigation sections. Hairline in the theme's own border color, and inset so it
   stops short of the drawer edges rather than cutting the panel in two. */
vaadin-app-layout [slot="drawer"] hr {
  border: 0;
  border-top: 1px solid var(--vaadin-border-color);
  margin: var(--vaadin-gap-s) var(--vaadin-gap-m);
}

/*
 * The crash screen (AppErrorView). It carries no navigation - an error target takes no layout, and the
 * shell may be what failed - so it centres a single column the way the sign-in does, and gives that column
 * a readable measure rather than letting the contact form's text area stretch across a desktop.
 *
 * Scrollable in its own right: the contact form is taller than a short viewport, and there is no page
 * chrome around this one to scroll it.
 */
.zt-crash {
  overflow: auto;
}

.zt-crash-panel {
  display: flex;
  flex-direction: column;
  gap: var(--vaadin-gap-m);
  width: min(100%, 44rem);
}

/* Label and value on one line, the value copyable - or the statement that there is no reference. */
.zt-crash-reference {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vaadin-gap-s);
}

/*
 * A page-shaped region for views that read as a document rather than a dashboard.
 *
 * A4 portrait proportions: 297/210, the sqrt(2) ratio, with margins at A4's own 25mm-on-210mm share of
 * the width. Stated in millimetres and derived from a single width so the shape is the actual paper's and
 * not a guess about anyone's DPI, and so widening the page cannot quietly stop it being A4. min-height,
 * not height, so a form longer than a page keeps going instead of spilling out of it.
 *
 * The surface is the one the dashboard tiles already use, so a sheet reads as the same family of thing
 * and stays flat - no drop shadow, which would be the one raised surface in an otherwise flat theme.
 */
.a4-sheet {
  /* The one number to tune. Everything else is derived from it, so the sheet stays exactly A4's shape at
     whatever size it is set to: 210mm is the paper itself, larger is the same page seen closer. */
  --a4-width: 280mm;

  width: var(--a4-width);
  max-width: 100%;
  min-height: calc(var(--a4-width) * 297 / 210);
  box-sizing: border-box;
  padding: calc(var(--a4-width) * 25 / 210);
  background: var(--vaadin-background-container);
  border: 1px solid var(--vaadin-border-color);
  border-radius: var(--vaadin-radius-l);
}

/* Below the sheet's own width there is no page to preserve, and 25mm of margin on each side would leave
   almost nothing between them. Keep the surface, drop back to ordinary padding. */
@media (max-width: 300mm) {
  .a4-sheet {
    min-height: 0;
    padding: var(--vaadin-padding-l);
  }
}

/*
 * The setup guide's rail (handoff F2 "The rail", FR-032, FR-053).
 *
 * Seven IDENTICAL ticks on one continuous line, the current one ringed, and the position stated in words
 * beside it. Nothing distinguishes one step from another, deliberately: a rail that previewed which step
 * is long or fiddly would invite skipping the ones that look it. A tick therefore says exactly one thing -
 * whether the user has been through that step - and nothing about whether its data is complete (FR-052).
 *
 * Each tick is a link, never a form control (FR-023): a greyed-out checkbox reads as broken, or as not
 * available to you, which is the opposite of done.
 */
.zt-setup-rail {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--vaadin-gap-s);
}

.zt-setup-ticks {
  display: flex;
  align-items: center;
  /* The continuous line the ticks sit on, drawn behind them rather than as a border on each. */
  background: linear-gradient(var(--vaadin-border-color), var(--vaadin-border-color)) center / 100% 2px
    no-repeat;
}

.zt-setup-tick {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: var(--vaadin-padding-s) 0;
}

/* The dot itself. A link has no shape of its own, so the span inside it is the tick. */
.zt-setup-tick > span {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  box-sizing: border-box;
  background: var(--vaadin-background-color);
  border: 2px solid var(--vaadin-border-color);
  /* Keeps the line from showing through the dot. */
  box-shadow: 0 0 0 4px var(--vaadin-background-color);
}

.zt-setup-tick--visited > span {
  background: var(--aura-accent-color);
  border-color: var(--aura-accent-color);
}

/* The ring, which is what says "you are here" - and the only difference between any two ticks. */
.zt-setup-tick--current > span {
  box-shadow: 0 0 0 4px var(--vaadin-background-color),
    0 0 0 6px var(--aura-accent-color);
}

.zt-setup-rail-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--vaadin-gap-m);
  flex-wrap: wrap;
}

.zt-setup-position {
  font-weight: var(--aura-font-weight-semibold);
}

.zt-setup-scent {
  color: var(--vaadin-text-color-secondary);
}

/* The block notice on the last step (FR-050): two labelled groups of links, each with its count. */
.zt-setup-block {
  display: flex;
  flex-direction: column;
  gap: var(--vaadin-gap-m);
}

.zt-setup-block-group {
  display: flex;
  flex-direction: column;
  gap: var(--vaadin-gap-xs, 0.25rem);
}

.zt-setup-block-label {
  color: var(--vaadin-text-color-secondary);
}

.zt-setup-block-row {
  display: flex;
  align-items: baseline;
  gap: var(--vaadin-gap-s);
  flex-wrap: wrap;
}

.zt-setup-block-count {
  color: var(--vaadin-text-color-secondary);
}