/* Independent visual foundation for the connected-area laboratory.
   This file deliberately uses laboratory-owned tokens and stays scoped to
   cloned authenticated pages while legacy styles are retired progressively. */
body.deesco-connected-lab {
  --lab-ink: #1e2d25;
  --lab-muted: #64756a;
  --lab-line: #dce6df;
  --lab-surface: #ffffff;
  --lab-subtle-surface: #f7faf8;
  --lab-brand: #2e9f59;
  --lab-brand-deep: #176d3d;
  --lab-highlight: #ffcb52;
  --lab-radius-sm: 10px;
  --lab-radius-md: 16px;
  --lab-radius-lg: 20px;
  /* Compatibility tokens owned by the laboratory, not by the exported app. */
  --p-primary-50: #edf8f0;
  --p-primary-200: #b9dfc5;
  --p-primary-300: #8ccaa0;
  --p-primary-400: #5db77a;
  --p-primary-500: #2e9f59;
  --p-primary-600: #227e45;
  --p-primary-700: #176d3d;
  --p-primary-contrast-color: #fff;
  --p-surface-0: #fff;
  --p-surface-50: #f8faf9;
  --p-surface-100: #f1f5f2;
  --p-surface-200: #dce6df;
  --p-surface-300: #c4d2c9;
  --p-surface-400: #9bab9f;
  --p-surface-500: #718176;
  --p-surface-600: #526057;
  --p-surface-900: #1e2d25;
  --p-neutral-50: #fafafa;
  --p-neutral-200: #e5e5e5;
  --p-neutral-300: #d4d4d4;
  --p-neutral-400: #a3a3a3;
  --p-neutral-500: #737373;
  --p-neutral-600: #525252;
  --p-neutral-700: #404040;
  --p-neutral-900: #171717;
  --p-slate-200: #e2e8f0;
  --p-slate-300: #cbd5e1;
  --p-slate-400: #94a3b8;
  --p-slate-500: #64748b;
  --p-slate-600: #475569;
  --p-slate-700: #334155;
  --p-slate-800: #1e293b;
  --p-slate-900: #0f172a;
  --p-border-radius-sm: 8px;
  --p-border-radius-md: 12px;
  --p-border-radius-lg: 16px;
  --p-text-color: var(--lab-ink);
  --p-text-muted-color: var(--lab-muted);
  --p-text-hover-muted-color: var(--lab-ink);
  color: var(--lab-ink);
  background: var(--lab-surface);
  font-family: Arial, sans-serif;
}

body.deesco-connected-lab *,
body.deesco-connected-lab *::before,
body.deesco-connected-lab *::after {
  box-sizing: border-box;
}

body.deesco-connected-lab :focus-visible {
  outline: 3px solid var(--lab-highlight);
  outline-offset: 3px;
}

body.deesco-connected-lab img {
  max-width: 100%;
}

body.deesco-connected-lab button,
body.deesco-connected-lab input,
body.deesco-connected-lab select,
body.deesco-connected-lab textarea {
  font: inherit;
}

/* Canonical Deesco action buttons.  These neutral classes are intentionally
   independent from Bootstrap/PrimeVue semantic names such as "success".
   They are available for progressive migrations; existing buttons opt in
   explicitly and are not changed by this definition alone. */
body.deesco-connected-lab .deesco-btn-primary,
body.deesco-connected-lab .deesco-btn-secondary {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .68rem 1.05rem;
  border: 1px solid #111;
  border-radius: .62rem;
  appearance: none;
  font: 800 .92rem/1.2 Arial, sans-serif;
  letter-spacing: -.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .17s ease, border-color .17s ease, color .17s ease, box-shadow .17s ease, transform .17s ease;
}

body.deesco-connected-lab .deesco-btn-primary {
  background: #111;
  color: #fff;
  box-shadow: 0 .45rem .95rem rgba(15, 23, 42, .18);
}

body.deesco-connected-lab .deesco-btn-primary:hover:not(:disabled),
body.deesco-connected-lab .deesco-btn-primary:focus-visible:not(:disabled) {
  border-color: #2b2b2b;
  background: #2b2b2b;
  color: #fff;
  transform: translateY(-1px);
}

body.deesco-connected-lab .deesco-btn-secondary {
  background: #fff;
  color: #111;
  box-shadow: none;
}

body.deesco-connected-lab .deesco-btn-secondary:hover:not(:disabled),
body.deesco-connected-lab .deesco-btn-secondary:focus-visible:not(:disabled) {
  border-color: #111;
  background: var(--p-surface-100, #f4f5f4);
  color: #111;
  transform: translateY(-1px);
}

body.deesco-connected-lab .deesco-btn-primary:disabled,
body.deesco-connected-lab .deesco-btn-secondary:disabled,
body.deesco-connected-lab .deesco-btn-primary[aria-disabled="true"],
body.deesco-connected-lab .deesco-btn-secondary[aria-disabled="true"] {
  cursor: default;
  opacity: .6;
  transform: none;
}

body.deesco-connected-lab .deesco-btn-primary .p-button-label,
body.deesco-connected-lab .deesco-btn-secondary .p-button-label {
  color: inherit !important;
  font: inherit !important;
}

body.deesco-connected-lab .deesco-btn-primary svg,
body.deesco-connected-lab .deesco-btn-secondary svg {
  flex: 0 0 auto;
  color: currentColor;
}

/* Shared primary action language for every connected journey.  The black
   dashboard buttons are the reference: a restrained dark gradient, subtle
   depth and a compact white action mark before the label. */
body.deesco-connected-lab .p-button.p-button-primary:not(.p-button-text):not(.p-button-outlined):not(.p-button-icon-only) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #17281f !important;
  border-radius: .78rem !important;
  background: linear-gradient(135deg, #263c30 0%, #14251c 48%, #0b1710 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 16px rgba(15, 35, 24, .19), inset 0 1px 0 rgba(255,255,255,.16) !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
  transition: transform .17s ease, box-shadow .17s ease, border-color .17s ease !important;
}

body.deesco-connected-lab .p-button.p-button-primary:not(.p-button-text):not(.p-button-outlined):not(.p-button-icon-only) .p-button-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .48rem;
}

body.deesco-connected-lab .p-button.p-button-primary:not(.p-button-text):not(.p-button-outlined):not(.p-button-icon-only):hover:not(:disabled) {
  border-color: #345845 !important;
  background: linear-gradient(135deg, #304c3c 0%, #193023 48%, #101d15 100%) !important;
  box-shadow: 0 11px 20px rgba(15, 35, 24, .25), inset 0 1px 0 rgba(255,255,255,.19) !important;
  transform: translateY(-1px);
}

body.deesco-connected-lab .p-button.p-button-primary:not(.p-button-text):not(.p-button-outlined):not(.p-button-icon-only):disabled {
  border-color: #7e8982 !important;
  background: #8d9790 !important;
  box-shadow: none !important;
}

body.deesco-connected-lab .deesco-connected-lab__main {
  background: var(--lab-surface);
}