/**
 * WISECP · Web Hosting Billing and Digital Services Platform
 *
 * Copyright (c) WISECP LLC — All rights reserved.
 * Unlicensed copying, distribution or use is prohibited.
 *
 * Terms of service: https://wisecp.com/terms-of-service
 */
.ticket-done-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 4rem;
  block-size: 4rem;
  border-radius: 50%;
  font-size: 1.9rem;
  line-height: 1;
  background-color: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}
.composer {
  border: 1px solid var(--mn-border-color);
  border-radius: var(--mn-radius);
  background-color: var(--mn-surface-bg);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.composer:focus-within {
  border-color: var(--mn-primary);
  box-shadow: var(--mn-focus-ring);
}
.composer.is-invalid {
  border-color: var(--bs-danger);
}
.composer.is-invalid:focus-within {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.2);
}
.composer-input.form-control {
  border: 0;
  border-radius: var(--mn-radius) var(--mn-radius) 0 0;
  background-color: transparent;
  resize: vertical;
  min-block-size: 8rem;
}
.composer-input.form-control:focus {
  box-shadow: none;
}
.composer-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  margin-block: 0;
  border-block-start: 1px solid var(--mn-border-color);
  background-color: var(--mn-body-bg);
  border-radius: 0 0 var(--mn-radius) var(--mn-radius);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}
.composer:not(:has(.form-check-input:checked)) .composer-bar:hover {
  background-color: color-mix(in srgb, var(--mn-primary) 6%, var(--mn-body-bg));
}
.composer-lock {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mn-muted-color);
  font-size: 1.2rem;
  line-height: 1;
  transition: color 0.2s ease;
}
.composer-bar-text {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  line-height: 1.25;
  text-align: end;
}
.composer-bar-text .fw-semibold {
  font-size: 0.85rem;
}
.composer-bar-hint {
  font-size: 0.75rem;
  color: var(--mn-muted-color);
}
.composer:has(.form-check-input:checked) {
  border-color: color-mix(in srgb, var(--mn-success) 45%, var(--mn-border-color));
}
.composer:has(.form-check-input:checked) .composer-bar {
  background-color: var(--bs-success-bg-subtle);
  border-block-start-color: color-mix(in srgb, var(--mn-success) 30%, var(--mn-border-color));
}
.composer:has(.form-check-input:checked) .composer-lock {
  color: var(--bs-success-text-emphasis);
}
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid transparent;
  border-radius: var(--mn-radius);
  font-size: 0.85rem;
  line-height: 1.45;
}
.auth-alert > i {
  flex-shrink: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.auth-alert-danger {
  color: var(--bs-danger-text-emphasis);
  background-color: color-mix(in srgb, var(--bs-danger-bg-subtle) 55%, var(--mn-surface-bg));
  border-color: color-mix(in srgb, var(--bs-danger-border-subtle) 65%, var(--mn-surface-bg));
}
.auth-alert-warning {
  color: var(--bs-warning-text-emphasis);
  background-color: color-mix(in srgb, var(--bs-warning-bg-subtle) 55%, var(--mn-surface-bg));
  border-color: color-mix(in srgb, var(--bs-warning-border-subtle) 65%, var(--mn-surface-bg));
}
.kb-suggest {
  padding: 0.5rem;
  border: 1px solid var(--mn-border-color);
  border-radius: var(--mn-radius);
  background-color: var(--mn-body-bg);
}
.kb-suggest-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--mn-muted-color);
}
.kb-suggest-head .bi {
  flex-shrink: 0;
  font-size: 0.95rem;
  color: var(--bs-warning);
}
.kb-suggest-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kb-suggest-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem;
  border-radius: calc(var(--mn-radius) - 0.1rem);
  color: var(--mn-body-color);
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.kb-suggest-item:hover,
.kb-suggest-item:focus-visible {
  background-color: var(--mn-surface-bg);
  color: var(--mn-primary-text);
}
.kb-suggest-item .kb-ico {
  flex-shrink: 0;
  color: var(--mn-primary-text);
}
.kb-suggest-item-title {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-size: 0.85rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kb-suggest-go {
  flex-shrink: 0;
  color: var(--mn-muted-color);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.kb-suggest-item:hover .kb-suggest-go,
.kb-suggest-item:focus-visible .kb-suggest-go {
  opacity: 1;
}
.cred-toggle {
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--mn-border-color);
  border-radius: var(--mn-radius);
  background-color: var(--mn-surface-bg);
  color: var(--mn-body-color);
  text-align: start;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.cred-toggle:hover,
.cred-toggle:focus-visible {
  border-color: var(--mn-primary);
  background-color: var(--mn-primary-subtle);
}
.cred-toggle:not(.collapsed) {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.cred-panel {
  padding: 1rem;
  border: 1px solid var(--mn-border-color);
  border-block-start: 0;
  border-end-start-radius: var(--mn-radius);
  border-end-end-radius: var(--mn-radius);
  background-color: var(--mn-body-bg);
}
.cred-toggle-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.1rem;
  block-size: 2.1rem;
  border-radius: calc(var(--mn-radius) - 0.1rem);
  background-color: var(--mn-primary-subtle);
  color: var(--mn-primary-text);
  font-size: 1.05rem;
}
.cred-toggle-text {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-weight: 600;
}
.cred-secure {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--mn-radius);
  background-color: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
  font-size: 0.78rem;
}
.cred-secure .bi {
  flex-shrink: 0;
  font-size: 0.9rem;
}
.cred-item {
  padding: 0.85rem 1rem 1rem;
  border: 1px solid var(--mn-border-color);
  border-radius: var(--mn-radius);
  background-color: var(--mn-surface-bg);
  transition: border-color 0.2s ease;
}
.cred-item:hover {
  border-color: color-mix(in srgb, var(--mn-primary) 30%, var(--mn-border-color));
}
.cred-item + .cred-item {
  margin-block-start: 0.75rem;
}
.cred-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-end: 0.85rem;
}
.cred-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: calc(var(--mn-radius) - 0.1rem);
  background-color: var(--mn-primary-subtle);
  color: var(--mn-primary-text);
  font-size: 1.05rem;
}
.cred-type {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-weight: 600;
}
.cred-remove {
  flex-shrink: 0;
  --bs-btn-color: var(--mn-muted-color);
  --bs-btn-hover-color: var(--bs-danger);
  --bs-btn-hover-bg: var(--bs-danger-bg-subtle);
  --bs-btn-active-color: var(--bs-danger);
  --bs-btn-active-bg: var(--bs-danger-bg-subtle);
}
.cred-conn-pad {
  padding-block-end: 1rem;
}
.cred-conn-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.cred-conn-fields .cred-f-grow {
  flex: 1 1 12rem;
  min-inline-size: 0;
}
.cred-conn-fields .cred-f-port {
  flex: 0 1 7rem;
}
.cred-add {
  inline-size: 100%;
  margin-block-start: 0.75rem;
  padding: 0.6rem;
  border: 1px dashed var(--mn-border-color);
  border-radius: var(--mn-radius);
  background-color: transparent;
  color: var(--mn-muted-color);
  font-size: 0.85rem;
  font-weight: 600;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}
.cred-add:hover,
.cred-add:focus-visible {
  border-color: var(--mn-primary);
  background-color: var(--mn-primary-subtle);
  color: var(--mn-primary-text);
}