/* Base semantic tokens (mirrors Polaris input.css dark defaults). @theme below aliases these for Tailwind. */
:root {
  --primary-color: #24cade;
  --primary-hover: #1db6c9;
  --primary-active: #1899a9;
  --primary-text: #0f172a;
  --bg-dark: #0f131a;
  --bg-medium: #1f2630;
  --bg-light: #181f25;
  --bg-content: #0f131a;
  --border-color: #2a313c;
  --text-primary: #e6ebf0;
  --text-secondary: #7e8ca0;
  --text-light: #d8e0e8;
  --text-muted: #7f8a9c;
  --status-success: #22c55e;
  --status-warning: #f59e0b;
  --status-info: #24cade;
  --status-danger: #f87171;
}

:root[data-theme="light"],
html[data-theme="light"],
body[data-theme="light"] {
  --primary-color: #0c7d8a;
  --primary-hover: #0a6a75;
  --primary-active: #085861;
  --primary-text: #ffffff;
  --bg-dark: #ffffff;
  --bg-medium: #f1f4f7;
  --bg-light: #ffffff;
  --bg-content: transparent;
  --border-color: #e7eaee;
  --text-primary: #10151c;
  --text-secondary: #687180;
  --text-light: #3c4650;
  --text-muted: #9aa3ae;
  --status-success: #15803d;
  --status-warning: #b45309;
  --status-info: #0c7d8a;
  --status-danger: #c0344d;
}

@theme {
  --polaris-space-1: 0.25rem;
  --polaris-space-2: 0.5rem;
  --polaris-space-3: 0.75rem;
  --polaris-space-4: 1rem;
  --polaris-space-6: 1.5rem;
  --polaris-space-8: 2rem;
  --color-polaris-bg-dark: var(--bg-dark);
  --color-polaris-bg-medium: var(--bg-medium);
  --color-polaris-bg-light: var(--bg-light);
  --color-polaris-bg-content: var(--bg-content);
  --color-polaris-border: var(--border-color);
  --color-polaris-primary: var(--primary-color);
  --color-polaris-primary-hover: var(--primary-hover);
  --color-polaris-primary-active: var(--primary-active);
  --color-polaris-primary-text: var(--primary-text);
  --color-polaris-text-primary: var(--text-primary);
  --color-polaris-text-secondary: var(--text-secondary);
  --color-polaris-text-light: var(--text-light);
  --color-polaris-success: var(--status-success);
  --color-polaris-warning: var(--status-warning);
  --color-polaris-danger: var(--status-danger);
}

.form-input {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  background: var(--bg-light);
  color: var(--text-primary);
  padding: 0.5rem 0.75rem;
}

.form-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.btn-studio-primary,
.btn-studio-secondary,
.btn-studio-danger,
.btn-studio-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
}

.btn-studio-primary {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-text);
}

.btn-studio-secondary {
  background: transparent;
  border-color: var(--border-color);
  color: var(--text-light);
}

.btn-studio-danger {
  border-color: var(
    --pill-danger-border,
    color-mix(in srgb, var(--status-danger) 35%, transparent)
  );
  background-color: var(--pill-danger-bg, color-mix(in srgb, var(--status-danger) 18%, transparent));
  color: var(--pill-danger-fg, color-mix(in srgb, var(--status-danger) 72%, white));
}

.btn-studio-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.alert-studio-warning {
  border: 1px solid
    var(--pill-warning-border, color-mix(in srgb, var(--status-warning) 50%, transparent));
  background: var(--pill-warning-bg, color-mix(in srgb, var(--status-warning) 10%, transparent));
  border-radius: 0.5rem;
  padding: 0.75rem;
}

.alert-studio-danger {
  border: 1px solid var(--pill-danger-border, color-mix(in srgb, var(--status-danger) 50%, transparent));
  background: var(--pill-danger-bg, color-mix(in srgb, var(--status-danger) 10%, transparent));
  border-radius: 0.5rem;
  padding: 0.75rem;
}

/* -------------------------------------------------------------------------- */
/* UxGroupBox / UxCollapsibleGroupBox — section cards + nested Syncfusion      */
/* (ChildContent from callers lives inside .group-box; styles belong here.)   */
/* -------------------------------------------------------------------------- */
.group-box {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--border-color) 92%, transparent);
  border-radius: 12px;
  padding: 1.12rem 1rem 1rem;
  margin: 0.42rem 0 1rem 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-light) 96%, var(--border-color)) 0%,
    color-mix(in srgb, var(--bg-light) 90%, var(--bg-medium)) 100%
  );
  display: block;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-light) 4%, transparent);
}

.group-box-title {
  position: absolute;
  top: 0;
  left: 0.78rem;
  transform: translateY(-50%);
  margin: 0;
  padding: 0 0.38rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  line-height: 1;
  z-index: 1;
  background: color-mix(in srgb, var(--bg-light) 98%, var(--border-color));
}

.group-box .form-label {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0.625rem;
}

.group-box .form-group .e-input-group,
.group-box .form-group .e-multiselect,
.group-box .form-group .e-textarea,
.group-box .form-group .e-float-input,
.group-box .form-group .e-input-group.e-control-wrapper {
  width: 100% !important;
}

.group-box .e-input-group:not(.e-disabled),
.group-box .e-multi-select-wrapper .e-multi-select-wrapper-inner,
.group-box .e-multiselect .e-multi-select-wrapper {
  background-color: color-mix(in srgb, var(--bg-content) 88%, var(--border-color)) !important;
  border-color: color-mix(in srgb, var(--border-color) 92%, transparent) !important;
  border-radius: 8px !important;
}

.group-box .e-input-group .e-input,
.group-box input.e-input,
.group-box textarea.e-input {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

.group-box .e-input-group.e-input-focus,
.group-box .e-multi-select-wrapper.e-input-focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 14%, transparent) !important;
}

.group-box .e-float-line,
.group-box .e-float-text {
  color: var(--text-secondary) !important;
}

/* MultiSelect chips: see SINGLE SOURCE OF TRUTH in
   Polaris/wwwroot/css/syncfusion-polaris-overrides.css (.e-multi-select-wrapper
   .e-chips block). Do not re-style chips here — `.e-chips .e-chip` does not
   match the v32 MultiSelect DOM and the global rule already handles it. */

.group-box textarea.e-input {
  min-height: 4.5rem;
}

.group-box .e-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.85;
}

.collapsible-group-box-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  margin: 0 0 0.75rem 0;
  padding: 0.25rem 0;
  border: none;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  -webkit-user-select: none;
  user-select: none;
}

.collapsible-group-box-title:hover {
  color: var(--primary-color);
}

*,
*::before,
*::after {
  caret-color: transparent;
}

input,
textarea,
[contenteditable]:not([contenteditable="false"]) {
  caret-color: auto;
}