/*
 * Feezless Flow Gateway
 * Consumer styles mapped to @feezless/design-system@0.1.3 tokens.
 * Keep layout and editor geometry in the page; this file owns visual presentation only.
 */

:root {
  color-scheme: light;
  font-family: var(--ds-font-family-sans);
}

html,
body {
  color: var(--ds-color-semantic-text-primary);
  background: var(--ds-color-semantic-bg-page);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-sm);
  line-height: var(--ds-font-line-height-thai);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  letter-spacing: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--ds-color-semantic-text-primary);
  font-weight: var(--ds-font-weight-bold);
  line-height: var(--ds-font-line-height-tight);
}

h1 { font-size: var(--ds-font-size-2xl); }
h2 { font-size: var(--ds-font-size-xl); }
h3 { font-size: var(--ds-font-size-lg); }
h4,
h5,
h6 { font-size: var(--ds-font-size-md); }

p {
  color: var(--ds-color-semantic-text-secondary);
  line-height: var(--ds-font-line-height-thai);
}

label {
  color: var(--ds-color-semantic-text-secondary);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-medium);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-height: 34px;
  padding: var(--ds-space-2) var(--ds-space-3);
  border: 1px solid var(--ds-color-semantic-border-default);
  border-radius: var(--ds-radius-button);
  background: var(--ds-color-semantic-bg-surface);
  color: var(--ds-color-semantic-text-primary);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ds-font-line-height-tight);
  cursor: pointer;
  transition:
    color var(--ds-motion-fast) var(--ds-motion-ease-in-out),
    background-color var(--ds-motion-fast) var(--ds-motion-ease-in-out),
    border-color var(--ds-motion-fast) var(--ds-motion-ease-in-out),
    transform var(--ds-motion-instant) var(--ds-motion-ease-out);
}

button:hover:not(:disabled) {
  border-color: var(--ds-color-semantic-border-strong);
  background: var(--ds-color-semantic-bg-subtle);
}

button:active:not(:disabled) {
  transform: scale(0.99);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ds-color-semantic-focus-ring);
  outline-offset: 2px;
}

ds-icon {
  display: inline-flex;
  flex: none;
  vertical-align: middle;
}

ds-card,
ds-alert,
ds-spinner {
  display: block;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.ds-input {
  min-width: 0;
  border: 1px solid var(--ds-color-semantic-border-default);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-semantic-bg-surface);
  color: var(--ds-color-semantic-text-primary);
  font-size: var(--ds-font-size-sm);
  line-height: var(--ds-font-line-height-thai);
  transition:
    border-color var(--ds-motion-fast) var(--ds-motion-ease-out),
    box-shadow var(--ds-motion-fast) var(--ds-motion-ease-out),
    background-color var(--ds-motion-fast) var(--ds-motion-ease-out);
}

input:not([type="checkbox"]):not([type="radio"]):hover,
select:hover,
textarea:hover,
.ds-input:hover {
  border-color: var(--ds-color-semantic-border-strong);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus,
.ds-input:focus {
  border-color: var(--ds-color-semantic-focus-ring);
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--ds-color-semantic-text-disabled);
  opacity: 1;
}

textarea,
pre,
code,
.font-mono-code {
  font-family: var(--ds-font-family-mono);
}

pre,
code {
  color: var(--ds-color-semantic-text-primary);
}

pre {
  overflow: auto;
  border: 1px solid var(--ds-color-semantic-border-default);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-semantic-bg-subtle);
  line-height: 1.5;
}

a {
  color: var(--ds-color-semantic-brand);
  text-decoration: none;
}

a:hover {
  color: var(--ds-color-semantic-brand-hover);
}

/* Shared controls and badges on the Admin page. Native inputs/buttons remain
   native so browser form submission and existing event handlers are unchanged. */
.ds-input {
  display: block;
  width: 100%;
  padding: var(--ds-space-2) var(--ds-space-3);
}

.ds-input--code {
  font-family: var(--ds-font-family-mono);
}

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-height: 36px;
  padding: var(--ds-space-2) var(--ds-space-4);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-button);
  font-weight: var(--ds-font-weight-medium);
}

.ds-btn--primary {
  border-color: var(--ds-color-semantic-button-primary);
  background: var(--ds-color-semantic-button-primary);
  color: var(--ds-color-semantic-button-primary-text);
}

.ds-btn--primary:hover:not(:disabled) {
  border-color: var(--ds-color-semantic-button-primary-hover);
  background: var(--ds-color-semantic-button-primary-hover);
}

.ds-btn--secondary {
  border-color: var(--ds-color-semantic-border-default);
  background: var(--ds-color-semantic-bg-surface);
  color: var(--ds-color-semantic-text-primary);
}

.ds-btn--sm {
  min-height: 30px;
  padding: var(--ds-space-1) var(--ds-space-3);
  font-size: var(--ds-font-size-xs);
}

.ds-btn--md {
  min-height: 36px;
}

.ds-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: var(--ds-space-1) var(--ds-space-2);
  border: 1px solid var(--ds-color-semantic-border-default);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-semantic-bg-subtle);
  color: var(--ds-color-semantic-text-secondary);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-medium);
  line-height: 1;
}

.ds-badge--success {
  border-color: var(--ds-color-semantic-success-subtle);
  background: var(--ds-color-semantic-success-subtle);
  color: var(--ds-color-semantic-success);
}

/* Authentication screen */
#auth-screen {
  background: var(--ds-color-semantic-bg-page);
}

.auth-card {
  width: 100%;
}

#auth-screen h1 {
  font-size: var(--ds-font-size-2xl);
  letter-spacing: -0.02em;
}

#auth-screen p {
  margin: 0;
}

#auth-screen .auth-card ds-icon {
  color: var(--ds-color-semantic-brand);
}

#auth-scope-badge {
  border: 1px solid var(--ds-color-semantic-border-default);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-semantic-bg-subtle);
  color: var(--ds-color-semantic-text-secondary);
  font-size: var(--ds-font-size-xs);
  line-height: 1.4;
}

#auth-scope-badge > span:first-child {
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-semantic-success);
}

#auth-alert {
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px solid var(--ds-color-semantic-danger);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-semantic-danger-subtle);
  color: var(--ds-color-semantic-danger);
  font-size: var(--ds-font-size-sm);
}

#totp-auth-form label {
  display: block;
  margin-bottom: var(--ds-space-1);
}

#totp-code {
  width: 100%;
  min-height: 48px;
  padding: var(--ds-space-3);
  font-family: var(--ds-font-family-mono);
  font-size: var(--ds-font-size-xl);
  font-weight: var(--ds-font-weight-bold);
  letter-spacing: 0.3em;
}

#totp-hint {
  margin-top: var(--ds-space-2);
  font-size: var(--ds-font-size-xs);
}

#btn-auth-submit,
#btn-create-flow,
#btn-empty-create-flow,
#btn-save-flow,
#btn-run-pipeline,
#btn-confirm-rename,
#btn-save-goal,
.btn-open-flow {
  border-color: var(--ds-color-semantic-button-primary);
  background: var(--ds-color-semantic-button-primary);
  color: var(--ds-color-semantic-button-primary-text);
}

#btn-auth-submit:hover:not(:disabled),
#btn-create-flow:hover:not(:disabled),
#btn-empty-create-flow:hover:not(:disabled),
#btn-save-flow:hover:not(:disabled),
#btn-run-pipeline:hover:not(:disabled),
#btn-confirm-rename:hover:not(:disabled),
#btn-save-goal:hover:not(:disabled),
.btn-open-flow:hover:not(:disabled) {
  border-color: var(--ds-color-semantic-button-primary-hover);
  background: var(--ds-color-semantic-button-primary-hover);
}

#btn-auth-submit {
  width: 100%;
  min-height: 44px;
}

/* Workspace dashboard */
#dashboard-screen {
  background: var(--ds-color-semantic-bg-page);
}

#dashboard-screen > header {
  border-bottom: 1px solid var(--ds-color-semantic-border-default);
  background: var(--ds-color-semantic-bg-surface);
}

#dashboard-screen header p {
  margin: 0;
  font-size: var(--ds-font-size-xs);
}

#dashboard-tenant-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--ds-space-1) var(--ds-space-2);
  border: 1px solid var(--ds-color-semantic-border-default);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-semantic-bg-subtle);
  color: var(--ds-color-semantic-text-secondary);
  font-size: var(--ds-font-size-xs);
}

#flows-grid .flow-card {
  min-width: 0;
  border: 1px solid var(--ds-color-semantic-border-default);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-semantic-bg-surface);
  box-shadow: var(--ds-shadow-sm);
  transition:
    border-color var(--ds-motion-base) var(--ds-motion-ease-out),
    box-shadow var(--ds-motion-base) var(--ds-motion-ease-out),
    transform var(--ds-motion-fast) var(--ds-motion-ease-out);
}

#flows-grid .flow-card:hover {
  border-color: var(--ds-color-semantic-border-strong);
  box-shadow: var(--ds-shadow-md);
  transform: translateY(-1px);
}

.flow-card h3 {
  overflow-wrap: anywhere;
}

.flow-card .btn-open-flow {
  flex: 1;
}

.flow-card .btn-delete-flow,
.btn-delete-node,
.btn-del-inlet,
.btn-disconnect-wire,
#btn-delete-wire,
#btn-confirm-delete,
.btn-delete-flow-test {
  border-color: var(--ds-color-semantic-danger-subtle);
  background: var(--ds-color-semantic-danger-subtle);
  color: var(--ds-color-semantic-danger);
}

.flow-card .btn-delete-flow:hover:not(:disabled),
.btn-delete-node:hover:not(:disabled),
.btn-del-inlet:hover:not(:disabled),
.btn-disconnect-wire:hover:not(:disabled),
#btn-delete-wire:hover:not(:disabled),
#btn-confirm-delete:hover:not(:disabled),
.btn-delete-flow-test:hover:not(:disabled) {
  border-color: var(--ds-color-semantic-danger);
  background: var(--ds-color-semantic-danger);
  color: var(--ds-color-semantic-text-on-brand);
}

/* Flow editor toolbar and canvas */
#app-header {
  border: 1px solid var(--ds-color-semantic-border-default);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-semantic-bg-surface);
  box-shadow: var(--ds-shadow-md);
}

#flow-name-input {
  border: 0;
  background: transparent;
  color: var(--ds-color-semantic-text-primary);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-medium);
}

#flow-name-input:focus {
  outline: 2px solid var(--ds-color-semantic-focus-ring);
  outline-offset: 1px;
  border-radius: var(--ds-radius-sm);
}

#active-flow-ufid-badge,
#steps-count-badge,
#dev-badge-status {
  border: 1px solid var(--ds-color-semantic-border-default);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-semantic-bg-subtle);
  color: var(--ds-color-semantic-text-secondary);
  font-size: var(--ds-font-size-xs);
  line-height: 1.4;
}

#flow-steps-panel,
#dev-suite-drawer,
#logs-drawer-body,
#btn-toggle-logs-drawer {
  border: 1px solid var(--ds-color-semantic-border-default);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-semantic-bg-surface);
  box-shadow: var(--ds-shadow-md);
}

#flow-steps-panel {
  color: var(--ds-color-semantic-text-primary);
}

#flow-steps-panel > div:first-child {
  border-bottom: 1px solid var(--ds-color-semantic-border-default);
}

#flow-steps-panel button[data-view] {
  min-height: 28px;
  padding: var(--ds-space-1) var(--ds-space-2);
  border-color: transparent;
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-font-size-xs);
}

#flow-steps-panel button[data-view].active,
#flow-steps-panel button[data-view][aria-pressed="true"] {
  border-color: var(--ds-color-semantic-border-default);
  background: var(--ds-color-semantic-bg-subtle);
  color: var(--ds-color-semantic-text-primary);
}

.canvas-grid {
  background-color: var(--ds-color-semantic-bg-subtle);
  background-image: radial-gradient(var(--ds-color-semantic-border-default) 1px, transparent 1px);
  background-size: var(--ds-space-6) var(--ds-space-6);
}

.flow-node {
  overflow: visible;
  border: 1px solid var(--ds-color-semantic-border-default);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-semantic-bg-surface);
  color: var(--ds-color-semantic-text-primary);
  box-shadow: var(--ds-shadow-md);
}

.flow-node.is-selected,
.flow-node.selected {
  border-color: var(--ds-color-semantic-brand);
  box-shadow: 0 0 0 2px var(--ds-color-semantic-brand-subtle), var(--ds-shadow-md);
}

.node-drag-handle {
  border-bottom: 1px solid var(--ds-color-semantic-border-default);
  border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
  background: var(--ds-color-semantic-bg-subtle);
}

.node-title-input {
  width: 100%;
  font-weight: var(--ds-font-weight-bold);
}

.flow-node > .p-4 > .p-3 {
  border: 1px solid var(--ds-color-semantic-border-default);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-semantic-bg-surface);
}

.flow-node .btn-delete-node,
.flow-node .btn-del-inlet,
.flow-node .btn-disconnect-wire,
.flow-node .btn-add-inlet,
.flow-node .btn-add-outlet {
  min-width: 28px;
  min-height: 28px;
  padding: var(--ds-space-1);
}

.pin-socket {
  border: 2px solid var(--ds-color-semantic-brand);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-semantic-bg-surface);
  box-shadow: 0 0 0 3px var(--ds-color-semantic-brand-subtle);
}

.pin-socket:hover,
.pin-socket.pin-active {
  background: var(--ds-color-semantic-brand);
}

.inlet-row-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: var(--ds-space-1) var(--ds-space-2);
  border: 1px solid var(--ds-color-semantic-border-default);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-semantic-bg-subtle);
  color: var(--ds-color-semantic-text-secondary);
  font-size: var(--ds-font-size-xs);
}

.inlet-row-item.is-selected {
  border-color: var(--ds-color-semantic-brand);
  background: var(--ds-color-semantic-brand-subtle);
  color: var(--ds-color-semantic-brand);
}

.inlet-row-item button {
  min-height: 20px;
  min-width: 20px;
  padding: 0;
  border: 0;
  background: transparent;
}

.btn-toggle-payload,
.btn-toggle-snippet,
.btn-toggle-transform,
.btn-add-inlet-inline,
.btn-copy-inlet-url,
.btn-copy-snippet,
.btn-quick-connect,
.btn-dispatch-node,
.btn-run-social,
.btn-snippet-lang,
.btn-log-filter,
.btn-wire-output {
  min-height: 28px;
  padding: var(--ds-space-1) var(--ds-space-2);
  font-size: var(--ds-font-size-xs);
}

.btn-add-inlet,
.btn-add-outlet {
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: var(--ds-radius-full);
  color: var(--ds-color-semantic-brand);
}

.btn-snippet-lang {
  min-width: 28px;
  font-family: var(--ds-font-family-mono);
}

.btn-snippet-lang.active,
.btn-log-filter.active,
.btn-log-filter[aria-pressed="true"] {
  border-color: var(--ds-color-semantic-brand);
  background: var(--ds-color-semantic-brand-subtle);
  color: var(--ds-color-semantic-brand);
}

.quick-connect-select,
.social-platform-select,
.node-title-input,
.egress-url-input,
.social-webhook-input,
.social-token-input,
.social-target-input,
.inlet-payload-input,
.exec-code-input,
.social-message-input {
  width: 100%;
  min-width: 0;
  padding: var(--ds-space-2);
}

.inlet-payload-input,
.exec-code-input,
.snippet-code-view {
  font-size: var(--ds-font-size-xs);
  tab-size: 2;
}

#telemetry-pill-wrap {
  color: var(--ds-color-semantic-text-primary);
}

#btn-toggle-logs-drawer {
  cursor: pointer;
}

#btn-toggle-logs-drawer > div:first-child > span:first-child {
  width: var(--ds-space-2);
  height: var(--ds-space-2);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-semantic-success);
}

#logs-container > * {
  border: 1px solid var(--ds-color-semantic-border-default);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-semantic-bg-subtle);
  padding: var(--ds-space-2) var(--ds-space-3);
}

/* Dialog and test runner surfaces */
.modal-shell:not(.hidden) {
  background: var(--ds-color-semantic-overlay);
  backdrop-filter: blur(2px);
}

.modal-panel {
  width: 100%;
  max-width: 32rem;
  max-height: calc(100vh - var(--ds-space-8));
  overflow: auto;
  border: 1px solid var(--ds-color-semantic-border-default);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-semantic-bg-surface);
  color: var(--ds-color-semantic-text-primary);
  box-shadow: var(--ds-shadow-lg);
}

#dev-suite-drawer {
  overflow: auto;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}

#dev-suite-drawer > div:first-child {
  border-bottom: 1px solid var(--ds-color-semantic-border-default);
}

#dev-suite-drawer p {
  margin: 0;
}

#minimap-container {
  border: 1px solid var(--ds-color-semantic-border-default);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-semantic-bg-subtle);
}

#admin-enroll-form label {
  display: block;
}

#qr-container {
  border: 1px solid var(--ds-color-semantic-border-default);
}

/* Responsive presentation */
@media (max-width: 768px) {
  #app-header {
    top: var(--ds-space-2);
    left: var(--ds-space-2);
    right: var(--ds-space-2);
    max-height: 40vh;
    overflow-y: auto;
  }

  #app-header > div {
    max-width: 100%;
  }

  #dev-suite-drawer {
    top: 0;
    width: min(100vw, 460px);
  }

  #telemetry-pill-wrap {
    bottom: var(--ds-space-2);
    left: var(--ds-space-2);
    width: calc(100vw - var(--ds-space-4));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* Consistent page gutters keep primary UI surfaces away from viewport edges. */
:root {
  --ds-layout-gutter: clamp(1rem, 3vw, 2rem);
}

#dashboard-screen > header {
  padding-inline: var(--ds-layout-gutter);
}

#dashboard-screen > main {
  padding-inline: var(--ds-layout-gutter);
}

#app-header {
  left: var(--ds-layout-gutter);
  right: var(--ds-layout-gutter);
}

#telemetry-pill-wrap {
  left: var(--ds-layout-gutter);
  max-width: min(420px, calc(100vw - (2 * var(--ds-layout-gutter))));
}

@media (max-width: 768px) {
  #app-header {
    left: var(--ds-layout-gutter);
    right: var(--ds-layout-gutter);
  }

  #telemetry-pill-wrap {
    left: var(--ds-layout-gutter);
    width: calc(100vw - (2 * var(--ds-layout-gutter)));
  }
}

/* Node names are read-only labels until the pencil control is activated. */
.node-title-row {
  flex: 1;
}

.node-title-label {
  color: var(--ds-color-semantic-text-primary);
  font-weight: var(--ds-font-weight-bold);
  line-height: var(--ds-font-line-height-tight);
}

.btn-edit-node-title {
  min-width: 24px;
  min-height: 24px;
  padding: var(--ds-space-1);
  border-color: transparent;
  background: transparent;
  color: var(--ds-color-semantic-text-secondary);
}

.btn-edit-node-title:hover:not(:disabled) {
  border-color: var(--ds-color-semantic-border-default);
  background: var(--ds-color-semantic-bg-subtle);
  color: var(--ds-color-semantic-brand);
}

.node-title-input {
  flex: 1;
  width: 100%;
}