:root {
  --one-navy: #062b5b;
  --one-navy-strong: #041f43;
  --one-coral: #ff665e;
  --one-blue: #3978d4;
  --one-teal: #3978d4;
  --one-violet: #7b61b8;
  --one-green: #2f8f63;
  --one-amber: #c98a1d;
  --one-cyan: #238fa8;
  --one-magenta: #bd4c91;
  --one-page: #f4f7fb;
  --one-surface: #ffffff;
  --one-surface-soft: #edf2f7;
  --one-line: #d7e0ea;
  --one-text: #152033;
  --one-muted: #657084;
  --one-shadow-sm: 0 6px 18px rgb(11 31 58 / 8%);
  --one-shadow-md: 0 18px 48px rgb(11 31 58 / 12%);
  --one-control-height: 42px;
  --one-touch-control-height: 46px;
  --one-control-compact-height: 36px;
  --one-touch-control-compact-height: 42px;
  --one-control-radius: 10px;
  --one-field-gap: 6px;
  --background: var(--one-page);
  --page: var(--one-page);
  --surface: var(--one-surface);
  --surface-raised: var(--one-surface);
  --surface-soft: var(--one-surface-soft);
  --line: var(--one-line);
  --text: var(--one-text);
  --muted: var(--one-muted);
  --primary: var(--one-navy);
  --primary-text: #ffffff;
  --navy: var(--one-navy);
  --accent: var(--one-coral);
  --red: var(--one-coral);
  --teal: var(--one-teal);
  --shadow-sm: var(--one-shadow-sm);
  --shadow-md: var(--one-shadow-md);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

:root[data-theme="dark"] {
  --one-page: #0c1420;
  --one-surface: #142033;
  --one-surface-soft: #1d2b40;
  --one-line: #34445a;
  --one-text: #f5f7fb;
  --one-muted: #b7c1d0;
  --primary: #a9c7f7;
  --primary-text: #07162b;
  --navy: #a9c7f7;
  --accent: #ff9187;
  --red: #ff9187;
  --teal: #9ec5ff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --one-page: #0c1420;
    --one-surface: #142033;
    --one-surface-soft: #1d2b40;
    --one-line: #34445a;
    --one-text: #f5f7fb;
    --one-muted: #b7c1d0;
    --primary: #a9c7f7;
    --primary-text: #07162b;
    --navy: #a9c7f7;
    --accent: #ff9187;
    --red: #ff9187;
    --teal: #9ec5ff;
  }
}

.one-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: block;
  border-radius: 18%;
  filter: drop-shadow(0 7px 13px rgb(6 43 91 / 18%));
}

.one-mark.large {
  width: 60px;
  height: 60px;
  flex-basis: 60px;
}

.one-mark.small {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}

.tenant-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  background: var(--surface);
}

.panel,
.metric-card,
.quick-action,
.auth-panel,
.login-panel,
.data-panel,
.activation-panel,
.step-view,
.intro,
dialog {
  border-radius: 10px;
}

button,
input,
select,
textarea {
  border-radius: var(--one-control-radius);
  box-sizing: border-box;
  max-width: 100%;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
select,
button:not(.icon-button):not(.dialog-close) {
  height: var(--one-control-height);
  min-height: var(--one-control-height);
}

button.content-height-control:not(.icon-button):not(.dialog-close) {
  height: auto;
  min-height: var(--one-content-control-min-height, var(--one-control-height));
}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
select {
  width: 100%;
  padding-block: 0;
  line-height: normal;
}

input[type="color"] {
  width: 100%;
  height: var(--one-control-height);
  min-height: var(--one-control-height);
  padding: 5px;
}

input[type="file"] {
  padding: 5px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

input[type="file"]::file-selector-button {
  min-height: var(--one-control-compact-height);
  margin: 0 9px 0 0;
  border: 0;
  border-radius: calc(var(--one-control-radius) - 3px);
  padding: 0 11px;
  background: var(--one-surface-soft);
  color: var(--one-text);
  font: inherit;
  font-weight: 750;
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  margin: 0;
}

textarea {
  width: 100%;
  min-height: 84px;
  padding: 10px 12px;
  line-height: 1.45;
}

:where(.form-grid, .dialog-form, .settings-form, .field-grid) {
  align-items: start;
}

:where(.form-grid, .dialog-form, .settings-form, .field-grid) > *,
:where(.field, label) > :where(input, select, textarea) {
  min-width: 0;
}

:where(.check, .check-field, .permission-option, .consent) {
  min-height: var(--one-control-height);
  align-items: center;
}

.field,
.form-grid label,
.dialog-form label {
  min-width: 0;
  align-content: start;
}

.field > input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.field > select,
.form-grid label > input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.form-grid label > select {
  height: var(--one-control-height);
  min-height: var(--one-control-height);
}

.compact-control,
.compact-control input,
.compact-control select,
button.compact-control {
  min-height: var(--one-control-compact-height);
  height: var(--one-control-compact-height);
}

.segmented > button {
  min-height: var(--one-control-compact-height);
  height: var(--one-control-compact-height);
}

dialog {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}

dialog :where(.dialog-shell, .form-editor-shell) {
  max-width: 100%;
  max-height: calc(100dvh - 24px);
}

dialog :where(.dialog-body, #dialog-body) {
  min-width: 0;
  overscroll-behavior: contain;
}

.form-actions,
.dialog-actions,
.actions {
  align-items: center;
}

.form-actions > button,
.dialog-actions > button,
.actions > button,
.actions > .button {
  min-height: var(--one-control-height);
}

.field-error {
  display: block;
  color: var(--danger, #b42318);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

[aria-invalid="true"] {
  border-color: var(--danger, #b42318) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger, #b42318) 14%, transparent);
}

.login,
.login-shell,
.activation-shell,
.auth-visual,
.login-panel {
  background-image: none !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--one-blue) 38%, transparent);
  outline-offset: 2px;
}

@media (pointer: coarse) {
  :root {
    --one-control-height: var(--one-touch-control-height);
    --one-control-compact-height: var(--one-touch-control-compact-height);
  }
}

@media (max-width: 560px) {
  :root {
    --one-control-height: var(--one-touch-control-height);
    --one-control-compact-height: var(--one-touch-control-compact-height);
  }
  .one-mark { width: 40px; height: 40px; flex-basis: 40px; }
  .tenant-logo { display: none; }

  .form-actions,
  .dialog-actions,
  .actions {
    flex-wrap: wrap;
  }

  .form-actions > button,
  .dialog-actions > button,
  .actions > button,
  .actions > .button {
    flex: 1 1 150px;
    white-space: normal;
  }
}