/*
 * Luminous UI for the Apps pages (gallery, runner, App Builder): a static port of the v1-frontend v2 classes, so
 * these pages are built from the same elements as the rest of Luminous and read as native pages inside it.
 *
 * Ported from v1-frontend @ da99a32615 (2026-09-25). When Luminous tokens or components change, re-sync from:
 *   tokens        src/v2/styles/var/{_color,_text,_shadow,_spacing}.scss, module/_border.theme.scss, _focus.theme.scss
 *   page chrome   src/v2/styles/core/layout/_page.scss        (.lum-page-header, .lum-page__card, card grid)
 *   buttons       src/v2/styles/override/_mat-button.override.scss, module/_button.mix.scss   (.lum-button)
 *   forms         src/v2/styles/module/form/_form.theme.scss, override/_mat-input / _mat-select / _mat-checkbox
 *   toggle, tabs  override/_mat-slide-toggle.override.scss, override/_mat-tabs.override.scss
 *   chips         override/_mat-chip.override.scss              (.lum-chip)
 *   badges        v2/modules/automation-rule/components/automation-rule-card-list (status badge)
 *   alerts        core/_alert.style.scss; dialog: override/_mat-modal.override.scss; menu: _mat-menu.override.scss
 *   empty state   v2/standalone/empty-state + /assets/icons/svgs/empty.svg
 * Sizes are rem on Luminous's 13px root (Keen theme bundle: html{font-size:13px}); spacing(n) = n × .25rem.
 */

/* ---------------------------------------------------------------- tokens */
:root {
  --col-cloud-100: #fbf9fe; --col-cloud-200: #efebf5; --col-cloud-300: #d6d1df; --col-cloud-400: #b3aec1; --col-cloud-500: #8b879f;
  --col-cloud-600: #65627f; --col-cloud-700: #454364; --col-cloud-800: #2e2e50; --col-cloud-900: #12131a;
  --col-gray-100: #f6f6f8; --col-gray-200: #e9e9eb; --col-gray-300: #d9d9dc; --col-gray-500: #8c8c8f; --col-gray-600: #68686b; --col-gray-700: #464649;
  --col-purple-100: #f3efff; --col-purple-200: #d5c2ff; --col-purple-300: #b79aff; --col-purple-400: #9970ff; --col-purple-500: #7d4ff8;
  --col-purple-600: #602ee7; --col-purple-700: #4c0ebc; --col-purple-800: #37008a; --col-purple-900: #22005b;
  --col-green-100: #e7feea; --col-green-200: #baffca; --col-green-500: #00d15e; --col-green-600: #00943c; --col-green-800: #004613; --col-green-900: #002b05;
  --col-yellow-100: #fff8d6; --col-yellow-200: #fff18f; --col-yellow-500: #f5c000; --col-yellow-600: #c49a00; --col-yellow-800: #604d00; --col-yellow-900: #2b2000;
  --col-red-100: #ffeff0; --col-red-200: #ffd7e1; --col-red-300: #ffa8c1; --col-red-500: #ff576d; --col-red-600: #cb304b; --col-red-800: #6f001d;
  --col-blue-100: #eef9fb; --col-blue-200: #bff5fe; --col-blue-600: #0072e8; --col-blue-700: #0d2fd3; --col-blue-900: #001a57;

  --col-primary: var(--col-purple-600);
  --col-primary-hover: var(--col-purple-700);
  --col-primary-active: var(--col-purple-800);
  --col-muted: var(--col-cloud-500);
  --app-background: var(--col-cloud-100);
  --app-text: var(--col-cloud-800);
  --lum-border: var(--col-gray-200);          /* $border-color-default */
  --lum-border-subtle: var(--col-cloud-200);  /* $border-color-subtle */
  --lum-border-subtler: #f5f2f9;              /* $border-color-subtler (5% purple-800 in white) */
  --lum-radius: 4px;
  --lum-radius-control: 8px;
  --lum-shadow: 0 0 1rem 0 rgba(55, 0, 138, 0.05);
  --lum-shadow-strong: 0 0 1rem 0 rgba(55, 0, 138, 0.1);
  --lum-shadow-overlay: 0 2px 4px -1px rgba(55, 0, 138, 0.1), 0 8px 24px -4px rgba(55, 0, 138, 0.18);
  --lum-font: 'Manrope', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --lum-font-mono: 'JetBrains Mono', ui-monospace, Menlo, Monaco, 'Roboto Mono', Consolas, monospace;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem;
  --sectioning-space: 1.25rem;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 13px; }
@media (max-width: 1024px) { html { font-size: 12px; } }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--lum-font); font-size: 1rem; line-height: 1.5; font-weight: 400;
  color: var(--app-text); background: var(--app-background);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--col-primary); }
code, pre, kbd { font-family: var(--lum-font-mono); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--app-text); }
[hidden] { display: none !important; }

/* Focus ring: module/_focus.mix.scss */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 0.25rem solid var(--lum-focus--ring-color, var(--col-purple-100));
  outline-offset: 0.125rem;
}

.lum-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; vertical-align: middle; }
.lum-icon svg { width: 100%; height: 100%; display: block; }
.lum-muted { color: var(--col-muted); }
.lum-text-sm { font-size: var(--text-sm); }
.lum-text-xs { font-size: var(--text-xs); }
.lum-spacer { flex: 1; }

/* ---------------------------------------------------------------- page chrome */
.lum-page-header {
  display: flex; align-items: center; flex-wrap: wrap; column-gap: 1rem;
  min-height: 4rem; padding: 0.25rem 1.25rem;
  background: #fff; border-bottom: 1px solid var(--lum-border);
}
@media (min-width: 768px) { .lum-page-header { min-height: 5.5rem; } }
.lum-page-header--sticky { position: sticky; top: 0; z-index: 3; }
.lum-page-header--compact { min-height: 4rem; }
.lum-page-header__heading { margin: 0.5rem 0; font-size: var(--text-lg); font-weight: 400; line-height: 1.2; color: var(--app-text); }
.lum-page-header__heading a { color: var(--col-primary); text-decoration: none; }
.lum-page-header__heading a:hover { text-decoration: underline; }
.lum-page-header__heading-group { display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.lum-page-header__heading-group > .lum-page-header__heading:first-child { white-space: nowrap; }
.lum-page-header__subheading { font-size: var(--text-sm); color: var(--col-muted); margin: -0.25rem 0 0.5rem; flex-basis: 100%; order: 3; }
.lum-page-header__actions { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; min-height: 4.25rem; }
.lum-page-header--compact .lum-page-header__actions { min-height: 3.5rem; }

.lum-page-content { padding: var(--sectioning-space); }

.lum-page__card {
  position: relative; background: #fff; border-radius: var(--lum-radius); box-shadow: var(--lum-shadow);
  padding: var(--sectioning-space);
}
.lum-page__card:where(a, button) {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: border-color .15s ease, box-shadow .15s ease;
}
.lum-page__card:where(a, button):hover { border-color: var(--lum-border); box-shadow: var(--lum-shadow-strong); }
.lum-page__card-title { margin: 0 0 0.5rem; font-size: var(--text-lg); font-weight: 600; color: var(--app-text); }
:where(a.lum-page__card:hover, button.lum-page__card:hover, a.lum-page__card:focus-visible) .lum-page__card-title { color: var(--col-primary); }
.lum-page__card-grid { display: grid; gap: var(--sectioning-space); grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr)); }

/* Section heading (integration-catalog-grid): the uppercase label above a group of cards. */
.lum-section-heading { margin: 0 0 0.75rem; color: var(--col-gray-600); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* ---------------------------------------------------------------- buttons */
.lum-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 11px 16px; border-radius: var(--lum-radius-control); border: 1px solid currentColor;
  font-family: var(--lum-font); font-size: var(--text-sm); font-weight: 600; line-height: 1; white-space: nowrap;
  color: var(--col-primary); background: transparent; cursor: pointer; text-decoration: none;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.lum-button:hover:not(:disabled) { background: var(--col-purple-100); }
.lum-button:active:not(:disabled) { color: var(--col-primary-hover); }
.lum-button:disabled, .lum-button[aria-disabled='true'] { opacity: .6; cursor: not-allowed; }
.lum-button .lum-icon { width: 14px; height: 14px; }
.lum-button--small { padding: 6px 12px; font-size: var(--text-xs); }
.lum-button--large { padding: 11px 24px; font-size: var(--text-md); }
.lum-button--solid { background: var(--col-primary); border-color: var(--col-primary); color: #fff; }
.lum-button--solid:hover:not(:disabled) { background: var(--col-primary-hover); border-color: var(--col-primary-hover); }
.lum-button--solid:active:not(:disabled) { background: var(--col-primary-active); border-color: var(--col-primary-active); color: #fff; }
.lum-button--neutral { color: var(--col-cloud-700); }
.lum-button--neutral:hover:not(:disabled) { background: var(--col-cloud-200); }
.lum-button--danger { color: var(--col-red-600); }
.lum-button--danger:hover:not(:disabled) { background: var(--col-red-100); }
.lum-button--solid.lum-button--danger { background: var(--col-red-500); border-color: var(--col-red-500); color: #12131a; }
.lum-button--link { border-color: transparent; color: var(--col-primary); }
.lum-button--link:hover:not(:disabled) { background: var(--col-cloud-200); }
.lum-button--link:active:not(:disabled) { background: var(--col-cloud-300); }
.lum-button--link.lum-button--neutral { color: var(--col-cloud-700); }
.lum-button--square { padding: 11px; }
.lum-button--small.lum-button--square { padding: 6px; }

/* ---------------------------------------------------------------- form controls */
.lum-label { display: block; margin-bottom: 0.5rem; font-size: var(--text-sm); line-height: 1.5; color: var(--col-cloud-700); }
.lum-input, .lum-textarea, .lum-select {
  display: block; width: 100%; min-width: 0;
  background: #fff; color: var(--col-cloud-900);
  border: 1px solid var(--col-cloud-600); border-radius: var(--lum-radius-control);
  padding: 0.75rem 1rem; font-size: var(--text-sm); line-height: 1.2;
}
.lum-textarea { line-height: 1.5; resize: vertical; }
.lum-input::placeholder, .lum-textarea::placeholder { color: var(--col-muted); }
.lum-input:focus, .lum-textarea:focus, .lum-select:focus { outline: 0.25rem solid var(--col-purple-100); outline-offset: 0; border-color: var(--col-primary); }
.lum-input:disabled, .lum-textarea:disabled, .lum-select:disabled { color: var(--col-muted); background: var(--col-gray-100); border-color: currentColor; }
.lum-select {
  appearance: none; cursor: pointer; padding-right: 2.25rem;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9.1l5.7 5.7a.4.4 0 0 0 .6 0L18 9.1' stroke='%23454364' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat right 0.75rem center / 14px;
}
.lum-input--small, .lum-select--small { padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: var(--text-xs); }
.lum-select--small { padding-right: 2rem; }

/* Checkbox + radio: Luminous look on native inputs (override/_mat-checkbox, theme/_mat.theme radio). */
.lum-checkbox, .lum-radio { display: inline-flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; font-size: var(--text-md); color: var(--app-text); }
.lum-checkbox input, .lum-radio input {
  appearance: none; flex-shrink: 0; margin: 0.125rem 0 0; width: 16px; height: 16px; cursor: pointer;
  border: 1px solid var(--col-gray-500); background: #fff; display: inline-grid; place-content: center;
}
.lum-checkbox input { border-radius: 2px; }
.lum-radio input { border-radius: 50%; }
.lum-checkbox input:hover, .lum-radio input:hover { outline: 1px solid var(--col-cloud-200); }
.lum-checkbox input:checked { background: var(--col-primary); border-color: var(--col-primary); }
.lum-checkbox input:checked::after { content: ''; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.lum-radio input:checked { border-color: var(--col-primary); }
.lum-radio input:checked::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--col-primary); }
.lum-checkbox input:disabled, .lum-radio input:disabled { opacity: .6; cursor: default; }

/* Slide toggle (legacy mat-slide-toggle geometry, Luminous colors): 36×14 bar, 20px thumb. */
.lum-toggle { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: var(--text-sm); font-weight: 500; color: var(--col-cloud-700); white-space: nowrap; }
.lum-toggle__switch { position: relative; width: 36px; height: 14px; border-radius: 8px; border: 0; padding: 0; background: var(--col-cloud-300); cursor: pointer; flex-shrink: 0; }
.lum-toggle__switch::after {
  content: ''; position: absolute; top: -3px; left: 0; width: 20px; height: 20px; border-radius: 50%;
  background: #fafafa; box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
  transition: transform .15s ease, background-color .15s ease;
}
.lum-toggle__switch[aria-checked='true'] { background: var(--col-purple-300); }
.lum-toggle__switch[aria-checked='true']::after { transform: translateX(16px); background: var(--col-primary); }
.lum-toggle:has([aria-checked='true']) { color: var(--app-text); }

/* ---------------------------------------------------------------- tabs (mat-tab look) */
.lum-tabs { display: flex; gap: 0; background: #fff; border-bottom: 1px solid var(--lum-border); overflow-x: auto; }
.lum-tab {
  position: relative; height: 3.5rem; min-width: 6rem; padding: 0 1.5rem; border: 0; background: none; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--col-cloud-700); white-space: nowrap;
}
.lum-tab:hover { color: var(--col-primary-hover); }
.lum-tab[aria-selected='true'] { color: var(--col-primary-hover); }
.lum-tab[aria-selected='true']::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 0.125rem; border-radius: 999px; background: var(--col-primary); }
/* Pill tabs (.lum-page-header__tabs): for small in-card filters. */
.lum-pill-tabs { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; }
.lum-pill-tab { border: 0; background: none; cursor: pointer; border-radius: var(--lum-radius-control); padding: 0.5rem 0.875rem; font-size: var(--text-sm); font-weight: 600; color: var(--col-cloud-700); }
.lum-pill-tab:hover { background: var(--col-cloud-200); }
.lum-pill-tab[aria-selected='true'] { background: var(--col-purple-100); color: var(--col-primary-hover); }

/* ---------------------------------------------------------------- chips, badges */
.lum-chip {
  display: inline-flex; align-items: center; gap: 0.25rem; min-height: 18px; padding: 3px 0.75rem; border-radius: 24px;
  font-size: var(--text-sm); line-height: normal; white-space: nowrap;
  background: var(--col-cloud-100); border: 1px solid var(--lum-border); color: var(--col-cloud-700);
}
button.lum-chip { cursor: pointer; font-family: inherit; }
button.lum-chip:hover { border-color: var(--col-cloud-400); }
.lum-chip--small { min-height: 16px; padding: 0 0.5rem; font-size: var(--text-xs); }
.lum-chip--primary { background: var(--col-primary); border-color: var(--col-primary); color: #fff; }
button.lum-chip--primary:hover { border-color: var(--col-primary-hover); background: var(--col-primary-hover); }
.lum-chip--outline.lum-chip--success { background: var(--col-green-100); border-color: var(--col-green-500); color: var(--col-green-900); }
.lum-chip--outline.lum-chip--warning { background: var(--col-yellow-100); border-color: var(--col-yellow-500); color: var(--col-yellow-900); }
.lum-chip--outline.lum-chip--danger { background: var(--col-red-100); border-color: var(--col-red-500); color: var(--col-red-800); }
.lum-chip--outline.lum-chip--info { background: var(--col-blue-100); border-color: var(--col-blue-600); color: var(--col-blue-900); }
.lum-chip--outline.lum-chip--primary { background: var(--col-purple-100); border-color: var(--col-primary); color: var(--col-purple-900); }
button.lum-chip--outline:hover { filter: brightness(0.98); }

/* Status badge (automation-rule-card-list). */
.lum-status { display: inline-flex; align-items: center; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; background: var(--col-gray-200); color: var(--col-gray-700); }
.lum-status--active { background: var(--col-green-100); color: var(--col-green-800); }
.lum-status--error { background: var(--col-red-100); color: var(--col-red-800); }
.lum-status--info { background: var(--col-blue-100); color: var(--col-blue-900); }
.lum-status--primary { background: var(--col-purple-100); color: var(--col-purple-700); }
.lum-status--warning { background: var(--col-yellow-100); color: var(--col-yellow-800); }

/* ---------------------------------------------------------------- alerts */
.lum-alert { padding: 10px 15px; border-radius: 5px; border: 1px solid; font-size: var(--text-md); }
.lum-alert__title { font-weight: 700; margin-bottom: 0.125rem; }
.lum-alert--info { background: var(--col-blue-100); border-color: var(--col-blue-200); color: var(--col-blue-900); }
.lum-alert--success { background: var(--col-green-100); border-color: var(--col-green-200); color: var(--col-green-900); }
.lum-alert--warning { background: var(--col-yellow-100); border-color: var(--col-yellow-200); color: var(--col-yellow-900); }
.lum-alert--error { background: var(--col-red-100); border-color: var(--col-red-300); color: var(--col-red-800); }
.lum-alert--primary { background: var(--col-purple-100); border-color: var(--col-purple-200); color: var(--col-purple-900); }

/* ---------------------------------------------------------------- menu (mat-menu look) */
.lum-menu-anchor { position: relative; display: inline-flex; }
.lum-mat-menu {
  position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; min-width: 12rem; padding: 0.5rem 0;
  background: #fff; border-radius: var(--lum-radius); box-shadow: var(--lum-shadow-overlay);
}
.lum-mat-menu__item {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; height: 3rem; padding: 0 1rem;
  border: 0; background: none; cursor: pointer; text-align: left; text-decoration: none;
  font-size: var(--text-md); color: var(--app-text); white-space: nowrap;
}
.lum-mat-menu__item:hover, .lum-mat-menu__item:focus-visible { background: var(--col-cloud-100); outline: none; }
.lum-mat-menu__item .lum-icon { width: 16px; height: 16px; color: var(--col-cloud-600); }
.lum-mat-menu__item--danger { color: var(--col-red-600); }
.lum-mat-menu__row { display: flex; align-items: center; padding: 0.625rem 1rem; }

/* ---------------------------------------------------------------- table */
.lum-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.lum-table th { text-align: left; font-weight: 700; color: var(--app-text); border-bottom: 1px solid var(--lum-border-subtler); }
.lum-table th, .lum-table td { padding: 0.75rem; vertical-align: top; }
.lum-table td { border-bottom: 1px solid var(--lum-border-subtle); }
.lum-table tbody tr:nth-child(odd) td { background: rgba(251, 249, 254, .5); }
.lum-table tbody tr:hover td { background: rgba(96, 46, 231, .05); }

/* ---------------------------------------------------------------- dialog */
.lum-dialog {
  border: 0; padding: 0; border-radius: 4px; width: calc(100% - 2rem); max-width: 40rem; max-height: 85vh;
  color: var(--app-text); background: #fff;
  box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
}
.lum-dialog::backdrop { background: rgba(0, 0, 0, .32); }
.lum-dialog__header { display: flex; align-items: center; gap: 1rem; padding: 2rem 1.5rem 1.5rem; border-bottom: 1px solid var(--lum-border-subtle); }
.lum-dialog__title { margin: 0; font-size: var(--text-lg); font-weight: 600; flex: 1; }
.lum-dialog__content { padding: 1.5rem; overflow: auto; display: flex; flex-direction: column; gap: 1rem; }
.lum-dialog__footer { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; padding: 1rem 1.5rem; border-top: 1px solid var(--lum-border-subtle); }

/* ---------------------------------------------------------------- empty state */
.lum-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.75rem; padding: 3rem 1rem; }
.lum-empty-state__art { width: 156px; height: 135px; }
.lum-empty-state__title { margin: 0.5rem 0 0; font-size: 1.5rem; font-weight: 500; color: var(--app-text); }
.lum-empty-state__text { margin: 0; max-width: 34rem; color: var(--col-cloud-600); font-size: var(--text-md); }

/* ---------------------------------------------------------------- misc */
.lum-spinner { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--col-purple-200); border-top-color: var(--col-primary); animation: lum-spin .8s linear infinite; display: inline-block; }
@keyframes lum-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lum-spinner { animation-duration: 2s; } }
.lum-loading { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 40vh; color: var(--col-cloud-600); }