/**
 * @file admin-ui.css
 * Baseline styling for Drupal's generic admin/editing markup (Layout Builder,
 * revision forms, buttons) that this theme's component-based CSS does not
 * otherwise cover, since ellamaa_theme has no global element styling.
 * Colors reuse the theme's existing design tokens from theme.css.
 */

/*
 * Drupal's off-canvas dialog width is set via inline JS styling at dialog
 * open time (core's own CSS has to fight it with !important too, see
 * wrapper.css) - the default is narrow enough to clip form fields and
 * force extra CKEditor toolbar items into an overflow menu. Widen it.
 */
#drupal-off-canvas-wrapper {
  width: min(90vw, 640px) !important;
}

.layout-builder,
.layout-builder * {
  font-family: var(--font-body);
}

/*
 * The wildcard above is meant for Layout Builder's own UI chrome (section
 * borders, region labels, buttons) - a deliberately broad safety net since
 * this theme has no global element styling. It also reaches into the
 * actual rendered block CONTENT nested inside though, overriding h1-h3's
 * Ephesis font from theme.css back to the body font, purely because
 * ".layout-builder *" (one class + universal) is more specific than a
 * plain "h1, h2, h3" selector. Restore Ephesis specifically for headings,
 * so the "Manage layout" preview matches both the CKEditor editing view
 * and the real published page (found 2026-09-23: only the Layout Builder
 * preview was wrong, editor and live page were both already correct).
 */
.layout-builder h1,
.layout-builder h2,
.layout-builder h3 {
  font-family: "Ephesis", cursive;
}

.layout-builder__section {
  position: relative;
  margin-block: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, var(--radius));
  background: var(--card);
}

.layout-builder__region {
  min-height: 4rem;
  padding: 0.75rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md, var(--radius));
  background: var(--background);
}

.layout-builder__region + .layout-builder__region {
  margin-top: 0.75rem;
}

.layout__region-info.layout-builder__region-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

.layout-builder-block {
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, var(--radius));
  background: var(--background);
}

/*
 * Excludes --remove: Drupal core styles it as a self-contained circular
 * icon button (hidden text, inline SVG X icon via `background: url(...)`).
 * Applying our own background here would silently overwrite that icon,
 * since theme CSS loads after module CSS in Drupal's cascade.
 */
.layout-builder__link:not(.layout-builder__link--remove) {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.65rem;
  margin-right: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--primary);
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: 9999px;
  transition: background-color 0.15s ease;
}

.layout-builder__link:not(.layout-builder__link--remove):hover,
.layout-builder__link:not(.layout-builder__link--remove):focus {
  background: var(--secondary);
  text-decoration: none;
}

.layout-builder__add-block,
.layout-builder__add-section {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem;
  font-weight: 500;
  text-align: center;
  color: var(--muted-foreground);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md, var(--radius));
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.layout-builder__add-block:hover,
.layout-builder__add-section:hover,
.layout-builder__add-block:focus,
.layout-builder__add-section:focus {
  color: var(--primary);
  border-color: var(--primary);
  text-decoration: none;
}

/*
 * This wrapper hosts ellamaa_theme's own fixed-position toast notifications
 * (see [data-drupal-messages]) - it has no visible content of its own once
 * the toast is pulled out to its fixed position, so it must stay unstyled.
 */
.layout-builder__message--overrides {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Generic buttons and form controls Drupal renders without theme styling. */
.button,
.form-submit,
input[type="submit"],
input[type="button"] {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  cursor: pointer;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, var(--radius));
  transition: background-color 0.15s ease;
}

.button:hover,
.form-submit:hover {
  background: var(--muted);
}

.button--primary {
  color: var(--primary-foreground);
  background: var(--primary);
  border-color: var(--primary);
}

.button--primary:hover {
  opacity: 0.9;
  background: var(--primary);
}

fieldset {
  padding: 1rem;
  margin-block: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, var(--radius));
}

fieldset legend {
  padding-inline: 0.35rem;
  font-weight: 600;
}

.form-item {
  margin-block: 0.75rem;
}

.form-item label {
  font-weight: 500;
}

textarea,
input[type="text"],
input[type="email"],
input[type="tel"] {
  width: 100%;
  max-width: 40rem;
  padding: 0.5rem 0.65rem;
  font-family: var(--font-body);
  border: 1px solid var(--input);
  border-radius: var(--radius-md, var(--radius));
  background: var(--background);
  color: var(--foreground);
}

/* Breadcrumb on admin/editing pages. */
nav[aria-label="Breadcrumb"] ol,
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin-block: 0.5rem 1.5rem;
  list-style: none;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

nav[aria-label="Breadcrumb"] a {
  color: var(--primary);
  text-decoration: none;
}

nav[aria-label="Breadcrumb"] a:hover {
  text-decoration: underline;
}