/* Dialect design system tokens (https://www.figma.com/design/6DRThj0vmRgfjMIdsmkaIy) */
:root {
  /* Support both schemes; actual scheme is picked by the theme toggle setting
     `color-scheme` on <html> (see MainLayout's theme switch). */
  color-scheme: light dark;

  --dialect-primary: #e86c00;
  --dialect-secondary: #f6b93b;
  --dialect-bg: light-dark(#f4f6f9, #14171f);
  --dialect-surface: light-dark(#ffffff, #1c2029);
  --dialect-ink: light-dark(#14171f, #e6eaf0);
  --dialect-border: light-dark(#e6eaf0, #2b303b);
  --dialect-radius: 14px;
  /* light-dark() only takes 2 args, so each shadow layer gets its own light-dark()
     call and the layers are joined below (var() is a text substitution, so the
     comma-separated shadow list still parses correctly). */
  --dialect-shadow-1: light-dark(0 6px 20px rgba(20, 23, 31, 0.08), 0 6px 20px rgba(0, 0, 0, 0.35));
  --dialect-shadow-2: light-dark(0 1px 2px rgba(20, 23, 31, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3));
  --dialect-shadow: var(--dialect-shadow-1), var(--dialect-shadow-2);
  --dialect-navbar-shadow: light-dark(0 1px 3px rgba(20, 23, 31, 0.05), 0 1px 3px rgba(0, 0, 0, 0.3));

  /* Alias onto Aura's theming hooks */
  --aura-accent-color-light: var(--dialect-primary);
  --aura-accent-color-dark: var(--dialect-primary);
  --aura-background-color-light: var(--dialect-bg);
  --aura-background-color-dark: var(--dialect-bg);
  --aura-orange: var(--dialect-primary);
  --aura-yellow: var(--dialect-secondary);

  /* Flush, square app-layout content (no floating rounded card) */
  --aura-app-layout-inset: 0px;
  --aura-app-layout-radius: 0px;

  /* Minimal (near-square) control + overlay corners, overriding Aura's rounded defaults */
  --vaadin-radius-s: 1px;
  --vaadin-radius-m: 2px;
  --vaadin-radius-l: 2px;

  /* Sidebar defaults to width: auto (shrink-to-content) — force a real column width */
  --vaadin-app-layout-drawer-width: 260px;
}

/* Readonly/disabled fields: Aura's default cue is a dashed border, which reads
   as "incomplete" rather than "not editable". Use a solid muted border + tinted
   background instead (readonly: field-like but flat; disabled: same border, faded text). */
[readonly]::part(input-field) {
  border-style: solid;
  border-color: var(--dialect-border);
  background: var(--dialect-bg);
}

[readonly]:focus-within::part(input-field) {
  outline-style: solid;
}

[disabled]::part(input-field) {
  border-style: solid;
  border-color: var(--dialect-border);
}

[readonly]::part(checkbox),
[readonly]::part(radio-button) {
  border-style: solid;
}

/* Icon-only buttons (e.g. theme toggle): Font Awesome's icon-font metrics give
   the button's label part an inflated line box, growing the button and pushing
   the icon toward the top instead of centering it. Vaadin SVG icons didn't hit
   this because they don't route through font line-height at all. */
vaadin-button[theme~="icon"]::part(label) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Top bar: solid white, opaque, divider + soft shadow below.
   Separates it from the sidebar/content instead of blending into one surface. */
vaadin-app-layout::part(navbar) {
  background: var(--dialect-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--dialect-border);
  box-shadow: var(--dialect-navbar-shadow);
}

/* Sidebar: solid white, right divider separates it from the canvas */
vaadin-app-layout::part(drawer) {
  background: var(--dialect-surface);
  border-inline-end: 1px solid var(--dialect-border);
}

/* Canvas: gray, so white chrome and white cards both read against it */
vaadin-app-layout::part(content) {
  background: var(--dialect-bg);
  border: none;
}

.dialect-title {
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--dialect-ink);
}

.dialect-content {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--lumo-space-l, 24px);
  gap: 24px;
}

.dialect-card {
  background: var(--dialect-surface);
  border-radius: var(--dialect-radius);
  box-shadow: var(--dialect-shadow);
  padding: 20px;
}

.dialect-card__title {
  font-weight: 600;
  color: var(--dialect-ink);
  margin: 0 0 12px 0;
}

/* Secondary text (e.g. the layout status line in GridStackView). */
.dialect-muted {
  color: var(--dialect-ink);
  opacity: 0.65;
  font-size: 0.9rem;
}

/* GridStackLayout (components/GridStackLayout.java): extend the same alias
   layer used by .dialect-card rather than hardcoding new colors. */
.grid-stack-item-content {
  background: var(--dialect-surface);
  border-radius: var(--dialect-radius);
  box-shadow: var(--dialect-shadow);
  overflow: auto;
}

/* A Card placed inside a grid item should fill the item instead of
   stacking its own surface/shadow on top of grid-stack-item-content's. */
.grid-stack-item-content > .dialect-card {
  height: 100%;
  box-shadow: none;
}

/* Drag grip: gridstack drags items by this element only (`handle` option in
   GridStackLayout), so the item body keeps its own interactivity. The item
   itself is absolutely positioned by gridstack, so it is the offset parent. */
.dialect-drag-handle {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--dialect-ink);
  opacity: 0;
  cursor: grab;
  transition: opacity 120ms ease;
}

.grid-stack-item:hover > .dialect-drag-handle,
.dialect-drag-handle:focus-visible {
  opacity: 0.65;
}

.dialect-drag-handle:active {
  cursor: grabbing;
  opacity: 1;
}

/* Close button (GridStackItem#setClosable): same affordance as the grip, in
   the outermost corner slot. The grip steps aside only when it is there, so a
   non-closable item keeps its grip flush with the corner. */
.dialect-close-button {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--dialect-ink);
  opacity: 0;
  cursor: pointer;
  transition: opacity 120ms ease;
}

.grid-stack-item:has(> .dialect-close-button) > .dialect-drag-handle {
  right: 48px;
}

.grid-stack-item:hover > .dialect-close-button,
.dialect-close-button:focus-visible {
  opacity: 0.65;
}

.dialect-close-button:hover,
.dialect-close-button:active {
  opacity: 1;
  color: var(--dialect-primary);
}

/* Touch devices never hover — keep the corner controls permanently visible. */
@media (pointer: coarse) {
  .dialect-drag-handle,
  .dialect-close-button {
    opacity: 0.65;
  }
}

.grid-stack-item[gs-no-move] > .dialect-drag-handle {
  display: none;
}

.grid-stack-item-content .ui-resizable-handle {
  background: var(--dialect-primary);
  opacity: 0.6;
  border-radius: 2px;
}

.grid-stack-placeholder > .placeholder-content {
  background: var(--dialect-bg);
  border: 2px dashed var(--dialect-border);
  border-radius: var(--dialect-radius);
}