/*
 * Providers Operations Console
 * Scoped to /dashboard/providers/*.
 */

html:has(.kt-providers-page) {
  scrollbar-gutter: stable;
}

.kt-providers-page {
  --provider-primary: var(--kt-color-primary, #344d70);
  --provider-primary-solid: var(--kt-primary-strong, #344d70);
  --provider-on-primary: var(--kt-color-on-primary, #fff);
  --provider-primary-hover: var(--kt-color-primary-hover, #2a405e);
  --provider-primary-soft: var(--kt-color-primary-soft, #edf3f9);
  --provider-accent: var(--kt-color-accent, #ff9f34);
  --provider-accent-soft: var(--kt-color-accent-soft, #fff4e8);
  --provider-surface: var(--kt-color-surface, #fff);
  --provider-surface-soft: var(--kt-color-surface-subtle, #f8fafc);
  --provider-surface-muted: var(--kt-color-surface-muted, #f1f5f9);
  --provider-elevated: var(--kt-card-elevated, var(--provider-surface));
  --provider-text: var(--kt-color-text, #0f172a);
  --provider-muted: var(--kt-color-text-muted, #64748b);
  --provider-subtle: var(--kt-color-text-subtle, #94a3b8);
  --provider-border: var(--kt-color-border, #e2e8f0);
  --provider-border-strong: var(--kt-color-border-strong, #cbd5e1);
  --provider-success: var(--kt-color-success, #159455);
  --provider-success-soft: var(--kt-color-success-soft, #eaf8f0);
  --provider-warning: var(--kt-color-warning, #c97812);
  --provider-warning-soft: var(--kt-color-warning-soft, #fff5df);
  --provider-danger: var(--kt-color-danger, #d84a61);
  --provider-danger-soft: var(--kt-color-danger-soft, #fff0f3);
  --provider-focus: var(--kt-color-focus, rgb(52 77 112 / 28%));
  --provider-shadow-xs: var(--kt-shadow-xs, 0 1px 2px rgb(15 23 42 / 5%));
  --provider-shadow-sm: var(--kt-shadow-sm, 0 3px 12px rgb(15 23 42 / 7%));
  --provider-shadow-md: var(--kt-shadow-md, 0 14px 34px rgb(15 23 42 / 11%));

  inline-size: min(100%, 72.5rem);
  margin-inline: auto;
  padding-block-end: 2rem;
  color: var(--provider-text);
  font-family:
    "Tajawal",
    "IBM Plex Sans Arabic",
    "Noto Sans Arabic",
    system-ui,
    sans-serif;
}

.kt-providers-page *,
.kt-providers-page *::before,
.kt-providers-page *::after {
  box-sizing: border-box;
}

.kt-providers-page button,
.kt-providers-page input {
  font: inherit;
}

.kt-providers-page button,
.kt-providers-page a {
  -webkit-tap-highlight-color: transparent;
}

.kt-providers-hero {
  position: relative;
  min-block-size: 7.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  overflow: hidden;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--provider-border);
  border-radius: 1.2rem;
  background:
    radial-gradient(
      circle at 3% -12%,
      color-mix(in srgb, var(--provider-accent-soft) 80%, transparent) 0,
      transparent 29%
    ),
    linear-gradient(
      118deg,
      var(--provider-surface) 0%,
      color-mix(in srgb, var(--provider-primary-soft) 52%, var(--provider-surface)) 100%
    );
  box-shadow: var(--provider-shadow-sm);
}

.kt-providers-hero::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 2rem;
  inline-size: 3.25rem;
  block-size: 0.18rem;
  border-radius: 0 0 999px 999px;
  background: var(--provider-accent);
}

.kt-providers-hero__identity {
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

.kt-providers-hero__icon,
.kt-providers-console__title-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid
    color-mix(in srgb, var(--provider-primary) 19%, var(--provider-border));
  background:
    color-mix(in srgb, var(--provider-primary-soft) 74%, var(--provider-surface));
  color: var(--provider-primary);
}

.kt-providers-hero__icon {
  inline-size: 3.45rem;
  block-size: 3.45rem;
  border-radius: 1rem;
  font-size: 1.48rem;
}

.kt-providers-hero__eyebrow {
  display: block;
  margin-block-end: 0.1rem;
  color: var(--provider-accent);
  font-size: 0.76rem;
  font-weight: 850;
}

.kt-providers-hero h1 {
  margin: 0;
  color: var(--provider-text);
  font-size: clamp(1.58rem, 2.4vw, 2.12rem);
  font-weight: 900;
  line-height: 1.3;
}

.kt-providers-hero p {
  max-inline-size: 41rem;
  margin: 0.25rem 0 0;
  color: var(--provider-muted);
  font-size: 0.91rem;
  font-weight: 650;
  line-height: 1.65;
}

.kt-providers-hero__summary {
  flex: 0 0 14rem;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: 0.72rem;
  padding: 0.78rem 0.86rem;
  border: 1px solid
    color-mix(in srgb, var(--provider-primary) 17%, var(--provider-border));
  border-radius: 0.98rem;
  background: color-mix(in srgb, var(--provider-surface) 90%, transparent);
  box-shadow: var(--provider-shadow-xs);
}

.kt-providers-hero__summary-icon {
  inline-size: 2.5rem;
  min-inline-size: 2.5rem;
  block-size: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 0.78rem;
  background: var(--provider-accent-soft);
  color: var(--provider-accent);
  font-size: 1.12rem;
}

.kt-providers-hero__summary > span:last-child {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.08rem 0.7rem;
}

.kt-providers-hero__summary small,
.kt-providers-hero__summary em {
  color: var(--provider-muted);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 720;
  line-height: 1.35;
}

.kt-providers-hero__summary strong {
  grid-row: 1 / 3;
  grid-column: 2;
  color: var(--provider-primary);
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1;
}

.kt-providers-statuses {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-block: 0.9rem;
}

.kt-provider-status {
  --provider-status-tone: var(--provider-primary);
  --provider-status-soft: var(--provider-primary-soft);

  position: relative;
  min-inline-size: 0;
  min-block-size: 5.25rem;
  display: grid;
  grid-template-columns: 2.45rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  overflow: hidden;
  padding: 0.78rem 0.82rem;
  border: 1px solid var(--provider-border);
  border-radius: 1rem;
  background: var(--provider-surface);
  box-shadow: var(--provider-shadow-xs);
  color: var(--provider-text);
  text-decoration: none !important;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    background-color 180ms ease;
}

.kt-provider-status--active {
  --provider-status-tone: var(--provider-success);
  --provider-status-soft: var(--provider-success-soft);
}

.kt-provider-status--notActive {
  --provider-status-tone: var(--provider-warning);
  --provider-status-soft: var(--provider-warning-soft);
}

.kt-provider-status--block {
  --provider-status-tone: var(--provider-danger);
  --provider-status-soft: var(--provider-danger-soft);
}

.kt-provider-status::after {
  content: "";
  position: absolute;
  inset-inline: 0.75rem;
  inset-block-end: 0;
  block-size: 0.16rem;
  border-radius: 999px 999px 0 0;
  background: transparent;
  transition: background-color 180ms ease;
}

.kt-provider-status:hover {
  border-color:
    color-mix(in srgb, var(--provider-status-tone) 25%, var(--provider-border));
  box-shadow: var(--provider-shadow-sm);
  color: var(--provider-text);
  transform: translateY(-2px);
}

.kt-provider-status:focus-visible,
.kt-provider-button:focus-visible,
.kt-providers-search:focus-within,
.kt-provider-action:focus-visible,
.kt-provider-check input:focus-visible + span,
.kt-provider-modal__button:focus-visible,
.kt-provider-modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--provider-focus);
}

.kt-provider-status.is-active {
  border-color:
    color-mix(in srgb, var(--provider-status-tone) 34%, var(--provider-border));
  background:
    color-mix(in srgb, var(--provider-status-soft) 58%, var(--provider-surface));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--provider-status-tone) 7%, transparent),
    var(--provider-shadow-sm);
}

.kt-provider-status.is-active::after {
  background: var(--provider-accent);
}

.kt-provider-status.is-transitioning {
  border-color:
    color-mix(in srgb, var(--provider-status-tone) 42%, var(--provider-border));
}

.kt-provider-status.is-transitioning .kt-provider-status__icon i {
  animation: provider-status-pulse 850ms ease-in-out infinite;
}

.kt-provider-status__icon {
  inline-size: 2.45rem;
  block-size: 2.45rem;
  display: grid;
  place-items: center;
  border-radius: 0.78rem;
  background: var(--provider-status-soft);
  color: var(--provider-status-tone);
  font-size: 1.08rem;
}

.kt-provider-status__copy {
  min-inline-size: 0;
}

.kt-provider-status__copy strong,
.kt-provider-status__copy small {
  display: block;
}

.kt-provider-status__copy strong {
  color: var(--provider-text);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.45;
}

.kt-provider-status__copy small {
  margin-block-start: 0.12rem;
  color: var(--provider-muted);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.4;
}

.kt-provider-status__count {
  color: var(--provider-status-tone);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
}

.kt-providers-console {
  overflow: hidden;
  border: 1px solid var(--provider-border);
  border-radius: 1.2rem;
  background: var(--provider-surface);
  box-shadow: var(--provider-shadow-sm);
}

.kt-providers-console__header {
  min-block-size: 5.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-block-end: 1px solid var(--provider-border);
  background:
    linear-gradient(
      100deg,
      var(--provider-surface) 0%,
      color-mix(in srgb, var(--provider-surface-soft) 76%, var(--provider-surface)) 100%
    );
}

.kt-providers-console__title {
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: 0.72rem;
}

.kt-providers-console__title-icon {
  inline-size: 2.65rem;
  min-inline-size: 2.65rem;
  block-size: 2.65rem;
  border-radius: 0.8rem;
  font-size: 1.15rem;
}

.kt-providers-console__title h2 {
  margin: 0;
  color: var(--provider-text);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.45;
}

.kt-providers-console__title p {
  margin: 0.08rem 0 0;
  color: var(--provider-muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.5;
}

.kt-providers-toolbar {
  min-inline-size: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

.kt-providers-search {
  inline-size: clamp(13rem, 23vw, 18rem);
  block-size: 2.75rem;
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 0.78rem 0.42rem;
  border: 1px solid var(--provider-border);
  border-radius: 0.82rem;
  background: var(--provider-surface-soft);
  color: var(--provider-muted);
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.kt-providers-search:focus-within {
  border-color:
    color-mix(in srgb, var(--provider-primary) 42%, var(--provider-border));
  background: var(--provider-surface);
}

.kt-providers-search input {
  min-inline-size: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--provider-text);
  font-size: 0.79rem;
  font-weight: 650;
}

.kt-providers-search input::placeholder {
  color: var(--provider-muted);
  opacity: 0.9;
}

.kt-providers-search__clear {
  inline-size: 1.9rem;
  block-size: 1.9rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0.6rem;
  background: transparent;
  color: var(--provider-muted);
  cursor: pointer;
}

.kt-providers-search__clear:hover {
  background: var(--provider-surface-muted);
  color: var(--provider-primary);
}

.kt-provider-button {
  min-inline-size: 7.75rem;
  block-size: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  padding-inline: 0.78rem;
  border: 1px solid var(--provider-border-strong);
  border-radius: 0.82rem;
  background: var(--provider-surface);
  color: var(--provider-primary);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.kt-provider-button:hover:not(:disabled) {
  border-color:
    color-mix(in srgb, var(--provider-primary) 34%, var(--provider-border));
  background: var(--provider-primary-soft);
  box-shadow: var(--provider-shadow-xs);
  transform: translateY(-1px);
}

.kt-provider-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.kt-provider-button--danger-soft {
  border-color:
    color-mix(in srgb, var(--provider-danger) 24%, var(--provider-border));
  background: var(--provider-danger-soft);
  color: var(--provider-danger);
}

.kt-provider-button--danger-soft b {
  min-inline-size: 1.35rem;
  block-size: 1.35rem;
  display: inline-grid;
  place-items: center;
  padding-inline: 0.28rem;
  border-radius: 999px;
  background:
    color-mix(in srgb, var(--provider-danger) 13%, var(--provider-surface));
  font-size: 0.67rem;
}

.kt-provider-button--refresh {
  inline-size: 8.8rem;
}

.kt-provider-button--refresh.is-loading [data-provider-refresh-icon] {
  animation: provider-spin 750ms linear infinite;
}

.kt-providers-console__body {
  min-block-size: 9rem;
}

.kt-provider-directory {
  position: relative;
  min-inline-size: 0;
  padding: 0.75rem;
  background:
    color-mix(in srgb, var(--provider-surface-soft) 45%, var(--provider-surface));
}

.kt-provider-progress {
  position: absolute;
  z-index: 3;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 0.18rem;
  overflow: hidden;
  pointer-events: none;
}

.kt-provider-progress::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inline-size: 38%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--provider-accent),
    var(--provider-primary),
    transparent
  );
  opacity: 0;
  transform: translateX(220%);
}

.kt-provider-directory.is-loading .kt-provider-progress::after {
  opacity: 1;
  animation: provider-progress 1.05s ease-in-out infinite;
}

.kt-provider-directory.is-loading .kt-provider-list,
.kt-provider-directory.is-loading .kt-provider-selection,
.kt-provider-directory.is-loading .kt-provider-pagination {
  opacity: 0.62;
  pointer-events: none;
}

.kt-provider-selection {
  min-block-size: 2.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 0.65rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--provider-border);
  border-radius: 0.85rem;
  background: var(--provider-surface);
}

.kt-provider-selection p {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  margin: 0;
  color: var(--provider-muted);
  font-size: 0.7rem;
  font-weight: 650;
}

.kt-provider-selection p i {
  color: var(--provider-primary);
  font-size: 0.95rem;
}

.kt-provider-check {
  min-inline-size: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  cursor: pointer;
}

.kt-provider-check input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.kt-provider-check > span {
  inline-size: 1.55rem;
  min-inline-size: 1.55rem;
  block-size: 1.55rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--provider-border-strong);
  border-radius: 0.5rem;
  background: var(--provider-surface);
  color: transparent;
  font-size: 0.75rem;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.kt-provider-check input:checked + span {
  border-color: var(--provider-primary);
  background: var(--provider-primary);
  color: #fff;
}

.kt-provider-check input:indeterminate + span {
  border-color: var(--provider-primary);
  background:
    linear-gradient(
      var(--provider-primary),
      var(--provider-primary)
    ) center / 0.65rem 0.12rem no-repeat,
    var(--provider-surface);
}

.kt-provider-check input:indeterminate + span i {
  opacity: 0;
}

.kt-provider-check em {
  color: var(--provider-muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 750;
}

.kt-provider-list {
  display: grid;
  gap: 0.72rem;
  transition: opacity 180ms ease;
}

.kt-provider-card {
  position: relative;
  min-inline-size: 0;
  display: grid;
  grid-template-columns:
    minmax(15rem, 0.9fr)
    minmax(14rem, 1.05fr)
    minmax(15rem, 1.05fr);
  grid-template-areas:
    "identity contact access"
    "identity operations operations"
    "footer footer footer";
  gap: 0.55rem;
  padding: 0.65rem 0.65rem 0;
  overflow: hidden;
  border: 1px solid var(--provider-border);
  border-inline-start: 0.18rem solid var(--provider-success);
  border-radius: 1rem;
  background: var(--provider-surface);
  box-shadow: var(--provider-shadow-xs);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    background-color 180ms ease;
}

.kt-provider-card:hover {
  border-color:
    color-mix(in srgb, var(--provider-primary) 22%, var(--provider-border));
  box-shadow: var(--provider-shadow-sm);
  transform: translateY(-1px);
}

.kt-provider-card--blocked {
  border-inline-start-color: var(--provider-danger);
}

.kt-provider-card.is-selected {
  border-color:
    color-mix(in srgb, var(--provider-primary) 34%, var(--provider-border));
  border-inline-start-color: var(--provider-accent);
  background:
    color-mix(in srgb, var(--provider-primary-soft) 30%, var(--provider-surface));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--provider-primary) 7%, transparent),
    var(--provider-shadow-sm);
}

.kt-provider-card.is-busy {
  pointer-events: none;
}

.kt-provider-card.is-busy::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  background: color-mix(in srgb, var(--provider-surface) 55%, transparent);
}

.kt-provider-card__select {
  position: absolute;
  z-index: 2;
  inset-block-start: 0.7rem;
  inset-inline-end: 0.7rem;
}

.kt-provider-card__identity,
.kt-provider-card__contact,
.kt-provider-card__access,
.kt-provider-card__operations {
  min-inline-size: 0;
  padding: 0.82rem;
}

.kt-provider-card__identity {
  grid-area: identity;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-inline-end: 2.8rem;
  border-radius: 0.82rem;
  background:
    linear-gradient(
      140deg,
      color-mix(in srgb, var(--provider-primary-soft) 58%, var(--provider-surface)) 0%,
      var(--provider-surface) 100%
    );
}

.kt-provider-avatar {
  position: relative;
  inline-size: 4.3rem;
  min-inline-size: 4.3rem;
  block-size: 4.3rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0.22rem solid var(--provider-surface);
  border-radius: 1.15rem;
  background:
    linear-gradient(
      145deg,
      var(--provider-primary-soft),
      var(--provider-surface-muted)
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--provider-primary) 20%, var(--provider-border)),
    var(--provider-shadow-sm);
  color: var(--provider-primary);
  font-size: 1.05rem;
  font-weight: 900;
}

.kt-provider-avatar img,
.kt-provider-avatar > span {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.kt-provider-avatar img {
  z-index: 2;
  object-fit: cover;
}

.kt-provider-avatar > span {
  display: grid;
  place-items: center;
}

.kt-provider-avatar img.is-broken {
  display: none;
}

.kt-provider-avatar > i {
  position: absolute;
  z-index: 3;
  inset-inline-end: 0.2rem;
  inset-block-end: 0.2rem;
  inline-size: 0.65rem;
  block-size: 0.65rem;
  border: 0.13rem solid var(--provider-surface);
  border-radius: 999px;
  background: var(--provider-success);
}

.kt-provider-card__identity-copy {
  min-inline-size: 0;
}

.kt-provider-card__eyebrow,
.kt-provider-card__section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  color: var(--provider-muted);
  font-size: 0.67rem;
  font-weight: 780;
  line-height: 1.45;
}

.kt-provider-card__eyebrow i,
.kt-provider-card__section-label i {
  color: var(--provider-accent);
  font-size: 0.9rem;
}

.kt-provider-card__identity h3 {
  max-inline-size: 100%;
  margin: 0.3rem 0 0.18rem;
  color: var(--provider-text);
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.kt-provider-card__code {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  color: var(--provider-muted);
  font-size: 0.66rem;
  font-weight: 650;
}

.kt-provider-card__code b {
  color: var(--provider-primary);
  font-weight: 800;
}

.kt-provider-card__contact {
  grid-area: contact;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.48rem;
  border-radius: 0.82rem;
  background:
    color-mix(in srgb, var(--provider-surface-soft) 66%, var(--provider-surface));
}

.kt-provider-card__meta {
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: 0.42rem;
  color: var(--provider-text);
}

.kt-provider-card__meta > i {
  inline-size: 1.7rem;
  min-inline-size: 1.7rem;
  block-size: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: 0.55rem;
  background: var(--provider-surface-muted);
  color: var(--provider-primary);
  font-size: 0.8rem;
}

.kt-provider-card__meta strong {
  min-inline-size: 0;
  color: inherit;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.kt-provider-card__meta--muted {
  color: var(--provider-muted);
}

.kt-provider-card__access {
  grid-area: access;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.52rem;
  border-radius: 0.82rem;
  background:
    color-mix(in srgb, var(--provider-surface-soft) 66%, var(--provider-surface));
}

.kt-provider-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.kt-provider-chip {
  min-block-size: 1.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding-inline: 0.48rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.kt-provider-chip--success {
  border-color:
    color-mix(in srgb, var(--provider-success) 20%, var(--provider-border));
  background: var(--provider-success-soft);
  color: var(--provider-success);
}

.kt-provider-chip--danger {
  border-color:
    color-mix(in srgb, var(--provider-danger) 20%, var(--provider-border));
  background: var(--provider-danger-soft);
  color: var(--provider-danger);
}

.kt-provider-chip--warning {
  border-color:
    color-mix(in srgb, var(--provider-warning) 21%, var(--provider-border));
  background: var(--provider-warning-soft);
  color: var(--provider-warning);
}

.kt-provider-chip--primary {
  border-color:
    color-mix(in srgb, var(--provider-primary) 18%, var(--provider-border));
  background: var(--provider-primary-soft);
  color: var(--provider-primary);
}

.kt-provider-chip--muted {
  border-color: var(--provider-border);
  background: var(--provider-surface-muted);
  color: var(--provider-muted);
}

.kt-provider-card__date {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--provider-muted);
}

.kt-provider-card__date > i {
  color: var(--provider-primary);
  font-size: 0.92rem;
}

.kt-provider-card__date span {
  display: flex;
  align-items: center;
  gap: 0.34rem;
}

.kt-provider-card__date small,
.kt-provider-card__date time {
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.3;
}

.kt-provider-card__date time {
  color: var(--provider-text);
  direction: ltr;
}

.kt-provider-card__operations {
  grid-area: operations;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 0.45rem;
  border: 1px solid
    color-mix(in srgb, var(--provider-primary) 10%, var(--provider-border));
  border-radius: 0.82rem;
  background:
    color-mix(in srgb, var(--provider-surface-soft) 55%, var(--provider-surface));
}

.kt-provider-metric {
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--provider-text);
  text-decoration: none !important;
}

a.kt-provider-metric:hover strong {
  color: var(--provider-primary);
}

.kt-provider-metric__icon {
  inline-size: 2rem;
  min-inline-size: 2rem;
  block-size: 2rem;
  display: grid;
  place-items: center;
  border-radius: 0.65rem;
  background: var(--provider-primary-soft);
  color: var(--provider-primary);
  font-size: 0.9rem;
}

.kt-provider-metric__icon--rating {
  background: var(--provider-accent-soft);
  color: var(--provider-accent);
}

.kt-provider-metric > span:last-child {
  min-inline-size: 0;
}

.kt-provider-metric small,
.kt-provider-metric strong {
  display: block;
  overflow-wrap: anywhere;
}

.kt-provider-metric small {
  color: var(--provider-muted);
  font-size: 0.63rem;
  font-weight: 680;
}

.kt-provider-metric strong {
  margin-block-start: 0.08rem;
  color: var(--provider-text);
  font-size: 0.72rem;
  font-weight: 850;
}

.kt-provider-card__footer {
  grid-area: footer;
  min-inline-size: 0;
  padding: 0.62rem 0.72rem;
  border-block-start: 1px solid var(--provider-border);
  background:
    color-mix(in srgb, var(--provider-surface-soft) 62%, var(--provider-surface));
  margin-inline: -0.65rem;
}

.kt-provider-card__actions {
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.kt-provider-action {
  position: relative;
  min-inline-size: 5.1rem;
  block-size: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.36rem;
  padding-inline: 0.7rem;
  border: 1px solid var(--provider-border);
  border-radius: 0.72rem;
  background: var(--provider-surface);
  color: var(--provider-primary);
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none !important;
  transition:
    border-color 170ms ease,
    background-color 170ms ease,
    box-shadow 170ms ease,
    color 170ms ease,
    transform 170ms ease;
}

.kt-provider-action:hover:not(:disabled) {
  border-color:
    color-mix(in srgb, currentColor 24%, var(--provider-border));
  box-shadow: var(--provider-shadow-xs);
  color: var(--provider-primary);
  transform: translateY(-1px);
}

.kt-provider-action:disabled {
  cursor: wait;
  opacity: 0.72;
}

.kt-provider-action--edit {
  border-color: var(--provider-primary-solid);
  background: var(--provider-primary-solid);
  color: var(--provider-on-primary);
  box-shadow:
    0 0.3rem 0.8rem color-mix(in srgb, var(--provider-primary-solid) 18%, transparent);
}

.kt-provider-action--edit:hover {
  border-color: var(--provider-primary-hover) !important;
  background: var(--provider-primary-hover);
  color: #fff !important;
}

.kt-provider-action--access {
  border-color:
    color-mix(in srgb, var(--provider-warning) 24%, var(--provider-border));
  background: var(--provider-warning-soft);
  color: var(--provider-warning);
}

.kt-provider-action--block,
.kt-provider-action--delete {
  border-color:
    color-mix(in srgb, var(--provider-danger) 21%, var(--provider-border));
  background: var(--provider-danger-soft);
  color: var(--provider-danger);
}

.kt-provider-action--unblock {
  border-color:
    color-mix(in srgb, var(--provider-success) 22%, var(--provider-border));
  background: var(--provider-success-soft);
  color: var(--provider-success);
}

.kt-provider-card__action-divider {
  inline-size: 1px;
  block-size: 1.65rem;
  margin-inline: 0.16rem;
  background: var(--provider-border);
}

.kt-provider-action__spinner,
.kt-provider-modal__spinner {
  display: none;
  animation: provider-spin 700ms linear infinite;
}

.kt-provider-action.is-loading > i:first-child,
.kt-provider-modal__button.is-loading > i:first-child {
  display: none;
}

.kt-provider-action.is-loading .kt-provider-action__spinner,
.kt-provider-modal__button.is-loading .kt-provider-modal__spinner {
  display: inline-block;
}

.kt-provider-pagination {
  display: flex;
  justify-content: center;
  padding-block: 0.75rem 0.15rem;
}

.kt-provider-pagination .pagination {
  display: inline-flex;
  gap: 0.32rem;
  margin: 0;
  padding: 0.3rem;
  border: 1px solid var(--provider-border);
  border-radius: 0.8rem;
  background: var(--provider-surface);
}

.kt-provider-pagination .page-link {
  min-inline-size: 2.2rem;
  block-size: 2.2rem;
  display: grid;
  place-items: center;
  padding: 0.25rem 0.55rem;
  border: 0 !important;
  border-radius: 0.58rem !important;
  background: transparent;
  color: var(--provider-muted);
  font-size: 0.72rem;
  font-weight: 800;
  box-shadow: none !important;
}

.kt-provider-pagination .page-item.active .page-link {
  background: var(--provider-primary);
  color: #fff;
}

.kt-provider-pagination .page-link:hover {
  background: var(--provider-primary-soft);
  color: var(--provider-primary);
}

.kt-provider-pagination .page-item.disabled .page-link {
  color: var(--provider-subtle);
  opacity: 0.6;
}

.kt-provider-empty {
  min-block-size: 15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.15rem;
  padding: 2rem;
  text-align: start;
}

.kt-provider-empty__visual {
  position: relative;
  inline-size: 5.2rem;
  min-inline-size: 5.2rem;
  block-size: 5.2rem;
  display: grid;
  place-items: center;
  border: 1px solid
    color-mix(in srgb, var(--provider-primary) 16%, var(--provider-border));
  border-radius: 1.4rem;
  background: var(--provider-primary-soft);
  color: var(--provider-primary);
  font-size: 2rem;
}

.kt-provider-empty__visual b {
  position: absolute;
  border-radius: 999px;
  background: var(--provider-accent);
}

.kt-provider-empty__visual b:first-of-type {
  inset-block-start: 0.55rem;
  inset-inline-end: 0.7rem;
  inline-size: 0.58rem;
  block-size: 0.58rem;
}

.kt-provider-empty__visual b:last-of-type {
  inset-block-end: 0.72rem;
  inset-inline-start: 0.7rem;
  inline-size: 0.34rem;
  block-size: 0.34rem;
  opacity: 0.5;
}

.kt-provider-empty h3 {
  margin: 0;
  color: var(--provider-text);
  font-size: 1rem;
  font-weight: 900;
}

.kt-provider-empty p {
  max-inline-size: 27rem;
  margin: 0.3rem 0 0;
  color: var(--provider-muted);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.65;
}

.kt-provider-modal[hidden],
.kt-provider-toast[hidden] {
  display: none !important;
}

.kt-provider-modal {
  position: fixed;
  z-index: 1095;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.kt-provider-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgb(8 18 37 / 42%);
  backdrop-filter: blur(2px);
  cursor: default;
}

.kt-provider-modal__panel {
  position: relative;
  z-index: 1;
  inline-size: min(100%, 27.5rem);
  padding: 1.25rem;
  border: 1px solid var(--provider-border);
  border-radius: 1.15rem;
  background: var(--provider-elevated);
  box-shadow: var(--provider-shadow-md);
  text-align: center;
  animation: provider-modal-in 190ms ease both;
}

.kt-provider-modal__close {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  inline-size: 2.15rem;
  block-size: 2.15rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--provider-border);
  border-radius: 0.68rem;
  background: var(--provider-surface-soft);
  color: var(--provider-muted);
  cursor: pointer;
}

.kt-provider-modal__icon {
  inline-size: 3.1rem;
  block-size: 3.1rem;
  display: grid;
  place-items: center;
  margin: 0 auto 0.75rem;
  border: 1px solid
    color-mix(in srgb, var(--provider-warning) 23%, var(--provider-border));
  border-radius: 0.95rem;
  background: var(--provider-warning-soft);
  color: var(--provider-warning);
  font-size: 1.35rem;
}

.kt-provider-modal[data-provider-action-type="delete"] .kt-provider-modal__icon,
.kt-provider-modal[data-provider-action-type="bulk-delete"] .kt-provider-modal__icon,
.kt-provider-modal[data-provider-action-type="block"] .kt-provider-modal__icon {
  border-color:
    color-mix(in srgb, var(--provider-danger) 22%, var(--provider-border));
  background: var(--provider-danger-soft);
  color: var(--provider-danger);
}

.kt-provider-modal__copy h3 {
  margin: 0;
  color: var(--provider-text);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.5;
}

.kt-provider-modal__copy p {
  margin: 0.38rem auto 0;
  color: var(--provider-muted);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.75;
}

.kt-provider-modal__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-block-start: 1rem;
}

.kt-provider-modal__button {
  block-size: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  border: 1px solid var(--provider-border);
  border-radius: 0.78rem;
  background: var(--provider-surface);
  color: var(--provider-primary);
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
}

.kt-provider-modal__button--confirm {
  border-color: var(--provider-primary-solid);
  background: var(--provider-primary-solid);
  color: var(--provider-on-primary);
}

.kt-provider-modal[data-provider-action-type="delete"] .kt-provider-modal__button--confirm,
.kt-provider-modal[data-provider-action-type="bulk-delete"] .kt-provider-modal__button--confirm,
.kt-provider-modal[data-provider-action-type="block"] .kt-provider-modal__button--confirm {
  border-color: var(--provider-danger);
  background: var(--provider-danger);
}

.kt-provider-toast {
  position: fixed;
  z-index: 1100;
  inset-block-start: calc(var(--kt-topbar-height, 4rem) + 0.85rem);
  inset-inline-start: 50%;
  inline-size: min(22rem, calc(100% - 2rem));
  min-block-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid
    color-mix(in srgb, var(--provider-success) 24%, var(--provider-border));
  border-radius: 0.85rem;
  background: var(--provider-elevated);
  box-shadow: var(--provider-shadow-md);
  color: var(--provider-success);
  font-size: 0.78rem;
  font-weight: 800;
  transform: translateX(-50%);
}

.kt-provider-toast.is-error {
  border-color:
    color-mix(in srgb, var(--provider-danger) 25%, var(--provider-border));
  color: var(--provider-danger);
}

[dir="rtl"] .kt-provider-toast {
  transform: translateX(50%);
}

@keyframes provider-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes provider-progress {
  from {
    inset-inline-start: -42%;
  }
  to {
    inset-inline-start: 106%;
  }
}

@keyframes provider-status-pulse {
  50% {
    transform: scale(0.82);
    opacity: 0.55;
  }
}

@keyframes provider-modal-in {
  from {
    opacity: 0;
    transform: translateY(0.8rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1199.98px) {
  .kt-providers-console__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .kt-providers-toolbar {
    inline-size: 100%;
    justify-content: flex-start;
  }

  .kt-providers-search {
    inline-size: min(100%, 21rem);
  }

  .kt-provider-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "identity contact"
      "access operations"
      "footer footer";
  }

  .kt-provider-card__identity,
  .kt-provider-card__contact,
  .kt-provider-card__access,
  .kt-provider-card__operations {
    min-block-size: 7.8rem;
  }

  .kt-provider-card__access {
    border-inline-start: 0;
  }

  .kt-provider-card__operations {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 991.98px) {
  .kt-providers-statuses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kt-providers-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .kt-providers-hero__summary {
    inline-size: 100%;
    flex-basis: auto;
  }

  .kt-provider-card__actions {
    flex-wrap: wrap;
  }

  .kt-provider-card__action-divider {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .kt-providers-page {
    padding-block-end: 1rem;
  }

  .kt-providers-hero {
    min-block-size: auto;
    padding: 1rem;
    border-radius: 1rem;
  }

  .kt-providers-hero__identity {
    align-items: flex-start;
  }

  .kt-providers-hero__icon {
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: 0.85rem;
    font-size: 1.25rem;
  }

  .kt-providers-hero h1 {
    font-size: 1.48rem;
  }

  .kt-providers-hero p {
    font-size: 0.8rem;
  }

  .kt-providers-statuses {
    gap: 0.55rem;
    margin-block: 0.7rem;
  }

  .kt-provider-status {
    min-block-size: 4.75rem;
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding: 0.65rem;
    border-radius: 0.88rem;
  }

  .kt-provider-status__icon {
    inline-size: 2.2rem;
    block-size: 2.2rem;
  }

  .kt-provider-status__copy strong {
    font-size: 0.75rem;
  }

  .kt-provider-status__copy small {
    font-size: 0.62rem;
  }

  .kt-provider-status__count {
    font-size: 1.15rem;
  }

  .kt-providers-console {
    border-radius: 1rem;
  }

  .kt-providers-console__header {
    padding: 0.78rem;
  }

  .kt-providers-console__title p {
    display: none;
  }

  .kt-providers-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.9rem;
  }

  .kt-providers-search {
    inline-size: 100%;
  }

  .kt-provider-button--danger-soft {
    grid-column: 1 / -1;
    grid-row: 2;
    inline-size: 100%;
  }

  .kt-provider-button--refresh {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .kt-provider-directory {
    padding: 0.55rem;
  }

  .kt-provider-selection {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .kt-provider-selection p {
    padding-inline-start: 2rem;
  }

  .kt-provider-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "identity"
      "contact"
      "access"
      "operations"
      "footer";
  }

  .kt-provider-card__identity,
  .kt-provider-card__contact,
  .kt-provider-card__access,
  .kt-provider-card__operations {
    min-block-size: auto;
    padding: 0.85rem;
  }

  .kt-provider-card__identity {
    padding-inline-end: 2.8rem;
  }

  .kt-provider-card__contact,
  .kt-provider-card__access,
  .kt-provider-card__operations {
    border-inline-start: 0;
  }

  .kt-provider-card__operations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kt-provider-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.48rem;
  }

  .kt-provider-action {
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 2.55rem;
  }

  .kt-provider-action--delete {
    grid-column: 1 / -1;
  }

  .kt-provider-empty {
    min-block-size: 13rem;
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 479.98px) {
  .kt-providers-statuses {
    grid-template-columns: minmax(0, 1fr);
  }

  .kt-provider-status {
    min-block-size: 4.35rem;
  }

  .kt-providers-console__title-icon {
    display: none;
  }

  .kt-providers-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .kt-provider-button--refresh {
    grid-row: 2;
  }

  .kt-provider-button--danger-soft {
    grid-row: 3;
  }

  .kt-provider-modal__actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

/* Provider operational profile — show page only. */
.kt-provider-profile-page {
  --provider-primary: var(--kt-color-primary, #344d70);
  --provider-on-primary: var(--kt-color-on-primary, #fff);
  --provider-primary-soft: var(--kt-color-primary-soft, #edf3f9);
  --provider-accent: var(--kt-color-accent, #ff9f34);
  --provider-accent-soft: var(--kt-color-accent-soft, #fff4e8);
  --provider-surface: var(--kt-color-surface, #fff);
  --provider-surface-soft: var(--kt-color-surface-subtle, #f8fafc);
  --provider-elevated: var(--kt-card-elevated, var(--provider-surface));
  --provider-text: var(--kt-color-text, #0f172a);
  --provider-muted: var(--kt-color-text-muted, #64748b);
  --provider-border: var(--kt-color-border, #e2e8f0);
  --provider-border-strong: var(--kt-color-border-strong, #cbd5e1);
  --provider-success: var(--kt-color-success, #159455);
  --provider-success-soft: var(--kt-color-success-soft, #eaf8f0);
  --provider-warning: var(--kt-color-warning, #c97812);
  --provider-warning-soft: var(--kt-color-warning-soft, #fff5df);
  --provider-danger: var(--kt-color-danger, #d84a61);
  --provider-danger-soft: var(--kt-color-danger-soft, #fff0f3);
  --provider-shadow-sm: var(--kt-shadow-sm, 0 3px 12px rgb(15 23 42 / 7%));
  --provider-shadow-md: var(--kt-shadow-md, 0 14px 34px rgb(15 23 42 / 11%));
  inline-size: min(100%, 74rem);
  margin-inline: auto;
  padding-block-end: 2rem;
  color: var(--provider-text);
  font-family: "Tajawal", "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
}

.kt-provider-profile-page *,
.kt-provider-profile-page *::before,
.kt-provider-profile-page *::after { box-sizing: border-box; }

.kt-provider-profile-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  overflow: hidden;
  min-block-size: 9rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--provider-border);
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 0 0, var(--provider-accent-soft), transparent 32%),
    linear-gradient(120deg, var(--provider-surface), color-mix(in srgb, var(--provider-primary-soft) 58%, var(--provider-surface)));
  box-shadow: var(--provider-shadow-sm);
}

.kt-provider-profile-hero::after {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 2rem;
  inline-size: 4.5rem;
  block-size: 3px;
  border-radius: 999px;
  background: var(--provider-accent);
  content: "";
}

.kt-provider-profile-hero__identity,
.kt-provider-profile-hero__actions,
.kt-provider-profile-chips,
.kt-provider-profile-action,
.kt-provider-profile-nav__item,
.kt-provider-overview__header,
.kt-provider-fact > span,
.kt-provider-services h3,
.kt-provider-location header,
.kt-provider-communication summary,
.kt-provider-communication summary > span { display: flex; align-items: center; }

.kt-provider-profile-hero__identity { min-inline-size: 0; gap: 1rem; }
.kt-provider-profile-avatar {
  position: relative;
  inline-size: 5rem;
  block-size: 5rem;
  flex: 0 0 5rem;
  display: grid;
  place-items: center;
  border: 4px solid var(--provider-surface);
  border-radius: 1.35rem;
  background: var(--provider-primary-soft);
  color: var(--provider-primary);
  box-shadow: 0 0 0 1px var(--provider-border), var(--provider-shadow-sm);
  overflow: visible;
}
.kt-provider-profile-avatar img { inline-size: 100%; block-size: 100%; border-radius: 1.05rem; object-fit: cover; }
.kt-provider-profile-avatar__fallback { font-size: 1.15rem; font-weight: 900; letter-spacing: 0.05em; }
.kt-provider-profile-avatar__status { position: absolute; inset-inline-start: -0.15rem; inset-block-end: -0.15rem; inline-size: 0.9rem; block-size: 0.9rem; border: 3px solid var(--provider-surface); border-radius: 50%; background: var(--provider-muted); }
.kt-provider-profile-avatar__status.is-online { background: var(--provider-success); }
.kt-provider-profile-hero__copy { min-inline-size: 0; }
.kt-provider-profile-hero__eyebrow { display: block; margin-block-end: 0.25rem; color: var(--provider-accent); font-size: 0.72rem; font-weight: 900; }
.kt-provider-profile-hero h1 { margin: 0; color: var(--provider-text); font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 900; line-height: 1.35; overflow-wrap: anywhere; }
.kt-provider-profile-hero p { margin: 0.25rem 0 0.65rem; color: var(--provider-muted); font-size: 0.8rem; line-height: 1.75; }
.kt-provider-profile-chips { flex-wrap: wrap; gap: 0.4rem; }
.kt-provider-profile-chips .kt-provider-chip { min-block-size: 1.8rem; }
.kt-provider-profile-hero__actions { flex: 0 0 auto; gap: 0.55rem; }
.kt-provider-profile-action {
  justify-content: center;
  gap: 0.4rem;
  min-block-size: 2.65rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 0.85rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.kt-provider-profile-action:hover { transform: translateY(-1px); }
.kt-provider-profile-action--primary { background: var(--provider-primary); color: var(--provider-on-primary); box-shadow: var(--provider-shadow-sm); }
.kt-provider-profile-action--danger { border-color: color-mix(in srgb, var(--provider-danger) 22%, transparent); background: var(--provider-danger-soft); color: var(--provider-danger); }

.kt-provider-profile-nav {
  display: inline-flex;
  gap: 0.35rem;
  margin-block: 0.8rem;
  padding: 0.28rem;
  border: 1px solid var(--provider-border);
  border-radius: 0.95rem;
  background: var(--provider-surface);
  box-shadow: var(--provider-shadow-sm);
}
.kt-provider-profile-nav__item { gap: 0.4rem; min-block-size: 2.35rem; padding: 0.5rem 0.8rem; border-radius: 0.72rem; color: var(--provider-muted); font-size: 0.78rem; font-weight: 800; }
.kt-provider-profile-nav__item.is-active { background: var(--provider-primary-soft); color: var(--provider-primary); }

.kt-provider-profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 19.5rem); gap: 0.9rem; align-items: start; }
.kt-provider-profile-main { position: relative; min-inline-size: 0; transition: opacity 180ms ease; }
.kt-provider-profile-main.is-loading { opacity: 0.52; pointer-events: none; }
.kt-provider-profile-main.is-loading::after { position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--provider-accent), transparent); content: ""; animation: kt-provider-profile-loading 900ms linear infinite; }
@keyframes kt-provider-profile-loading { from { transform: translateX(-80%); } to { transform: translateX(80%); } }

.kt-provider-overview,
.kt-provider-communication {
  border: 1px solid var(--provider-border);
  border-radius: 1.15rem;
  background: var(--provider-surface);
  box-shadow: var(--provider-shadow-sm);
}
.kt-provider-overview { overflow: hidden; }
.kt-provider-overview__header { gap: 0.7rem; padding: 0.9rem 1rem; border-block-end: 1px solid var(--provider-border); }
.kt-provider-overview__icon { inline-size: 2.55rem; block-size: 2.55rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: 0.8rem; background: var(--provider-primary-soft); color: var(--provider-primary); font-size: 1.15rem; }
.kt-provider-overview__header h2 { margin: 0; color: var(--provider-text); font-size: 0.98rem; font-weight: 900; }
.kt-provider-overview__header p { margin: 0.15rem 0 0; color: var(--provider-muted); font-size: 0.72rem; line-height: 1.6; }
.kt-provider-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.3rem 1rem 0.8rem; }
.kt-provider-fact { min-inline-size: 0; padding: 0.75rem 0.15rem; border-block-end: 1px solid color-mix(in srgb, var(--provider-border) 72%, transparent); }
.kt-provider-fact:nth-last-child(-n + 2) { border-block-end: 0; }
.kt-provider-fact > span { gap: 0.35rem; margin-block-end: 0.25rem; color: var(--provider-muted); font-size: 0.7rem; font-weight: 800; }
.kt-provider-fact > span i { color: var(--provider-primary); font-size: 0.9rem; }
.kt-provider-fact strong { display: block; color: var(--provider-text); font-size: 0.8rem; font-weight: 850; overflow-wrap: anywhere; }
.kt-provider-services,
.kt-provider-location { margin: 0 1rem 1rem; padding: 0.85rem; border-radius: 0.9rem; background: var(--provider-surface-soft); }
.kt-provider-services h3 { gap: 0.4rem; margin: 0 0 0.65rem; color: var(--provider-text); font-size: 0.8rem; font-weight: 900; }
.kt-provider-services__list { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.kt-provider-services__list > span { display: grid; gap: 0.1rem; min-inline-size: 8rem; padding: 0.55rem 0.65rem; border: 1px solid var(--provider-border); border-radius: 0.7rem; background: var(--provider-surface); }
.kt-provider-services__list b { color: var(--provider-text); font-size: 0.75rem; }
.kt-provider-services__list small { color: var(--provider-muted); font-size: 0.68rem; }
.kt-provider-location header { justify-content: space-between; gap: 0.8rem; margin-block-end: 0.6rem; }
.kt-provider-location header > span { color: var(--provider-text); font-size: 0.8rem; font-weight: 900; }
.kt-provider-location header small { color: var(--provider-muted); font-size: 0.68rem; }
.kt-provider-location__map { block-size: 18rem; overflow: hidden; border-radius: 0.8rem; }

.kt-provider-profile-aside { display: grid; gap: 0.7rem; min-inline-size: 0; }
.kt-provider-communication { overflow: hidden; }
.kt-provider-communication summary { justify-content: space-between; gap: 0.65rem; min-block-size: 3.25rem; padding: 0.75rem 0.85rem; cursor: pointer; color: var(--provider-text); list-style: none; font-size: 0.76rem; font-weight: 900; }
.kt-provider-communication summary::-webkit-details-marker { display: none; }
.kt-provider-communication summary > span { gap: 0.45rem; }
.kt-provider-communication summary > span i { inline-size: 1.95rem; block-size: 1.95rem; display: grid; place-items: center; border-radius: 0.62rem; background: var(--provider-primary-soft); color: var(--provider-primary); font-size: 0.9rem; }
.kt-provider-communication summary > i { color: var(--provider-muted); transition: transform 160ms ease; }
.kt-provider-communication[open] summary > i { transform: rotate(180deg); }
.kt-provider-communication__body { padding: 0.75rem 0.85rem 0.9rem; border-block-start: 1px solid var(--provider-border); }
.kt-provider-communication .row { margin-inline: -0.3rem; }
.kt-provider-communication [class*="col-"] { padding-inline: 0.3rem; }
.kt-provider-communication .form-group { margin-block-end: 0.55rem; }
.kt-provider-communication label { margin-block-end: 0.3rem; color: var(--provider-text); font-size: 0.7rem; font-weight: 800; }
.kt-provider-communication .form-control { min-block-size: 2.55rem; border: 1px solid var(--provider-border); border-radius: 0.7rem; background: var(--provider-surface-soft); color: var(--provider-text); font-size: 0.75rem; }
.kt-provider-communication textarea.form-control { min-block-size: 5.4rem; resize: vertical; }
.kt-provider-communication hr { margin: 0.65rem 0; border-color: var(--provider-border); }
.kt-provider-communication .btn { min-block-size: 2.45rem; border-radius: 0.72rem; background: var(--provider-primary); border-color: var(--provider-primary); font-size: 0.75rem; font-weight: 900; }

.kt-provider-profile-modal { position: fixed; z-index: 11050; inset: 0; display: grid; place-items: center; padding: 1rem; }
.kt-provider-profile-modal[hidden] { display: none !important; }
.kt-provider-profile-modal__backdrop { position: absolute; inset: 0; border: 0; background: rgb(15 23 42 / 38%); backdrop-filter: blur(2px); }
.kt-provider-profile-modal__panel { position: relative; inline-size: min(100%, 27rem); padding: 1.25rem; border: 1px solid var(--provider-border); border-radius: 1.25rem; background: var(--provider-elevated); box-shadow: var(--provider-shadow-md); text-align: center; }
.kt-provider-profile-modal__icon { inline-size: 2.9rem; block-size: 2.9rem; display: grid; place-items: center; margin: 0 auto 0.75rem; border-radius: 0.9rem; background: var(--provider-danger-soft); color: var(--provider-danger); font-size: 1.15rem; }
.kt-provider-profile-modal h2 { margin: 0; color: var(--provider-text); font-size: 1.05rem; font-weight: 900; }
.kt-provider-profile-modal p { margin: 0.4rem 0 1rem; color: var(--provider-muted); font-size: 0.77rem; line-height: 1.75; }
.kt-provider-profile-modal__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.kt-provider-profile-modal__button { min-block-size: 2.65rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border: 1px solid var(--provider-border); border-radius: 0.78rem; font: inherit; font-size: 0.78rem; font-weight: 900; }
.kt-provider-profile-modal__button--cancel { background: var(--provider-surface-soft); color: var(--provider-text); }
.kt-provider-profile-modal__button--confirm { border-color: color-mix(in srgb, var(--provider-danger) 22%, transparent); background: var(--provider-danger-soft); color: var(--provider-danger); }
.kt-provider-profile-modal__button--confirm.is-loading { opacity: 0.65; pointer-events: none; }

@media (max-width: 991.98px) {
  .kt-provider-profile-grid { grid-template-columns: minmax(0, 1fr); }
  .kt-provider-profile-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .kt-provider-profile-hero { align-items: flex-start; flex-direction: column; padding: 1rem; }
  .kt-provider-profile-hero__actions { inline-size: 100%; }
  .kt-provider-profile-action { flex: 1 1 0; }
  .kt-provider-profile-nav { inline-size: 100%; }
  .kt-provider-profile-nav__item { flex: 1 1 0; justify-content: center; }
  .kt-provider-profile-aside { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 479.98px) {
  .kt-provider-profile-hero__identity { align-items: flex-start; }
  .kt-provider-profile-avatar { inline-size: 3.8rem; block-size: 3.8rem; flex-basis: 3.8rem; border-radius: 1rem; }
  .kt-provider-profile-avatar img { border-radius: 0.76rem; }
  .kt-provider-profile-hero p { font-size: 0.74rem; }
  .kt-provider-facts { grid-template-columns: minmax(0, 1fr); }
  .kt-provider-fact:nth-last-child(2) { border-block-end: 1px solid color-mix(in srgb, var(--provider-border) 72%, transparent); }
  .kt-provider-location__map { block-size: 14rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kt-provider-profile-page *,
  .kt-provider-profile-page *::before,
  .kt-provider-profile-page *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* Provider create/edit workspace — keeps the established field contract while
 * presenting it as part of the Providers Operations Console. */
.kt-provider-form-page {
  --provider-primary: var(--kt-color-primary, #344d70);
  --provider-on-primary: var(--kt-color-on-primary, #fff);
  --provider-primary-soft: var(--kt-color-primary-soft, #edf3f9);
  --provider-accent: var(--kt-color-accent, #ff9f34);
  --provider-accent-soft: var(--kt-color-accent-soft, #fff4e8);
  --provider-surface: var(--kt-color-surface, #fff);
  --provider-surface-soft: var(--kt-color-surface-subtle, #f8fafc);
  --provider-text: var(--kt-color-text, #0f172a);
  --provider-muted: var(--kt-color-text-muted, #64748b);
  --provider-border: var(--kt-color-border, #e2e8f0);
  --provider-border-strong: var(--kt-color-border-strong, #cbd5e1);
  --provider-danger: var(--kt-color-danger, #d84a61);
  --provider-focus: var(--kt-color-focus, rgb(52 77 112 / 28%));
  --provider-shadow-sm: var(--kt-shadow-sm, 0 3px 12px rgb(15 23 42 / 7%));
  --provider-shadow-md: var(--kt-shadow-md, 0 14px 34px rgb(15 23 42 / 11%));
  inline-size: min(100%, 72.5rem);
  margin-inline: auto;
  padding-block-end: 2rem;
  color: var(--provider-text);
  font-family: "Tajawal", "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
}

.kt-provider-form-page *,
.kt-provider-form-page *::before,
.kt-provider-form-page *::after { box-sizing: border-box; }

.kt-provider-form-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  overflow: hidden;
  min-block-size: 8rem;
  margin-block-end: 0.9rem;
  padding: 1.2rem 1.35rem;
  border: 1px solid var(--provider-border);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 0 0, var(--provider-accent-soft), transparent 30%),
    linear-gradient(118deg, var(--provider-surface), color-mix(in srgb, var(--provider-primary-soft) 54%, var(--provider-surface)));
  box-shadow: var(--provider-shadow-sm);
}

.kt-provider-form-hero::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 2rem;
  inline-size: 3.5rem;
  block-size: 3px;
  border-radius: 0 0 999px 999px;
  background: var(--provider-accent);
  content: "";
}

.kt-provider-form-hero__identity,
.kt-provider-form-hero__back,
.kt-provider-form-card__header,
.kt-provider-form__commands { display: flex; align-items: center; }
.kt-provider-form-hero__identity { min-inline-size: 0; gap: 0.85rem; }
.kt-provider-form-hero__icon,
.kt-provider-form-card__header > span {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--provider-primary) 18%, var(--provider-border));
  background: var(--provider-primary-soft);
  color: var(--provider-primary);
}
.kt-provider-form-hero__icon { inline-size: 3.4rem; block-size: 3.4rem; border-radius: 1rem; font-size: 1.35rem; }
.kt-provider-form-hero__eyebrow { display: block; margin-block-end: 0.2rem; color: var(--provider-accent); font-size: 0.72rem; font-weight: 900; }
.kt-provider-form-hero h1 { margin: 0; color: var(--provider-text); font-size: clamp(1.35rem, 2.5vw, 1.9rem); font-weight: 900; line-height: 1.35; }
.kt-provider-form-hero p { margin: 0.28rem 0 0; color: var(--provider-muted); font-size: 0.8rem; font-weight: 650; line-height: 1.7; }
.kt-provider-form-hero__back {
  justify-content: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  min-block-size: 2.55rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--provider-border);
  border-radius: 0.78rem;
  background: var(--provider-surface);
  color: var(--provider-primary);
  font-size: 0.76rem;
  font-weight: 900;
  box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
}

.kt-provider-form-page > .row { margin-inline: 0; }
.kt-provider-form-page > .row > [class*="col-"] { padding-inline: 0; }
.kt-provider-form-card {
  overflow: visible;
  margin: 0;
  border: 1px solid var(--provider-border) !important;
  border-radius: 1.25rem !important;
  background: var(--provider-surface) !important;
  box-shadow: var(--provider-shadow-sm) !important;
}
.kt-provider-form-card__body { padding: 0 !important; }
.kt-provider-form-card__header {
  gap: 0.7rem;
  padding: 0.9rem 1.1rem;
  border-block-end: 1px solid var(--provider-border);
}
.kt-provider-form-card__header > span { inline-size: 2.6rem; block-size: 2.6rem; border-radius: 0.8rem; font-size: 1.05rem; }
.kt-provider-form-card__header h2 { margin: 0; color: var(--provider-text); font-size: 0.98rem; font-weight: 900; }
.kt-provider-form-card__header p { margin: 0.12rem 0 0; color: var(--provider-muted); font-size: 0.72rem; line-height: 1.6; }
.kt-provider-form__body { padding: 1rem 1.1rem 0; }
.kt-provider-form__grid { margin-inline: -0.45rem; }
.kt-provider-form__grid > [class*="col-"] { padding-inline: 0.45rem; }
.kt-provider-form-page .form-group { margin-block-end: 0.9rem; }
.kt-provider-form-page label:not(.uploadImg) { margin-block-end: 0.38rem; color: var(--provider-text); font-size: 0.76rem; font-weight: 850; }
.kt-provider-form-page .form-control,
.kt-provider-form-page .select2-selection {
  min-block-size: 3.15rem;
  border: 1px solid var(--provider-border) !important;
  border-radius: 0.85rem !important;
  background: var(--provider-surface-soft) !important;
  color: var(--provider-text) !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 0.8rem;
}
.kt-provider-form-page .form-control { padding-inline: 0.85rem; }
.kt-provider-form-page .form-control:focus,
.kt-provider-form-page .select2-container--focus .select2-selection,
.kt-provider-form-page .select2-container--open .select2-selection {
  border-color: color-mix(in srgb, var(--provider-primary) 58%, var(--provider-border)) !important;
  box-shadow: 0 0 0 3px var(--provider-focus) !important;
}
.kt-provider-form-page .form-control::placeholder { color: var(--provider-muted); opacity: 0.82; }
.kt-provider-form-page .invalid-feedback { margin-block-start: 0.32rem; color: var(--provider-danger); font-size: 0.7rem; font-weight: 750; }
.kt-provider-form-page .helper-text { margin-block-start: 0.3rem; color: var(--provider-muted) !important; font-size: 0.68rem; }
.kt-provider-form-page .select2-container { inline-size: 100% !important; }
.kt-provider-form-page .select2-selection { display: flex; align-items: center; padding-inline: 0.85rem; }
.kt-provider-form-page .select2-selection__rendered { color: var(--provider-text) !important; padding: 0 !important; }
.kt-provider-form-page .select2-selection__arrow { inset-inline-start: 0.75rem !important; inset-inline-end: auto !important; block-size: 100% !important; }
.kt-provider-form-page .image_groub {
  inline-size: 100%;
  margin: 0 0 1rem !important;
  padding: 0.85rem;
  border: 1px dashed color-mix(in srgb, var(--provider-primary) 24%, var(--provider-border));
  border-radius: 1rem;
  background: var(--provider-surface-soft);
}
.kt-provider-form-page .kt-image-preview-shell { flex: 0 0 auto; overflow: hidden; border-radius: 0.9rem; background: var(--provider-primary-soft); }
.kt-provider-form-page .medium-img { inline-size: 7rem !important; block-size: 7rem !important; object-fit: cover; }
.kt-provider-form-page .medium-button { min-block-size: 2.55rem; border-radius: 0.75rem; font-size: 0.75rem; font-weight: 850; }
.kt-provider-form__media { padding-inline: 0.45rem !important; }
.kt-provider-form-page #service-prices-container { inline-size: 100%; margin-inline: 0; }
.kt-provider-form-page .mapControls { margin-block-end: 0.55rem; }
.kt-provider-form-page .map-register { overflow: hidden; margin-block-start: 0.55rem; border: 1px solid var(--provider-border); border-radius: 1rem; }
.kt-provider-form__commands {
  justify-content: flex-start;
  gap: 0.55rem;
  margin-block-start: 0.25rem;
  padding: 0.85rem 1.1rem !important;
  border-block-start: 1px solid var(--provider-border);
  background: var(--provider-surface-soft);
}
.kt-provider-form__commands .btn { min-inline-size: 7rem; min-block-size: 2.65rem; border-radius: 0.78rem; font-size: 0.78rem; font-weight: 900; }
.kt-provider-form__commands .btn-primary { border-color: var(--provider-primary); background: var(--provider-primary); color: var(--provider-on-primary); }
.kt-provider-form__commands .btn-label-secondary { border: 1px solid var(--provider-border); background: var(--provider-surface); color: var(--provider-text); }

@media (max-width: 767.98px) {
  .kt-provider-form-hero { align-items: flex-start; flex-direction: column; min-block-size: auto; padding: 1rem; }
  .kt-provider-form-hero__back { align-self: stretch; }
  .kt-provider-form__body { padding: 0.85rem 0.85rem 0; }
  .kt-provider-form-card__header { padding-inline: 0.9rem; }
  .kt-provider-form-page .image_groub { align-items: stretch !important; }
  .kt-provider-form__commands { padding-inline: 0.85rem !important; }
  .kt-provider-form__commands .btn { flex: 1 1 0; min-inline-size: 0; }
}

@media (max-width: 479.98px) {
  .kt-provider-form-hero__identity { align-items: flex-start; }
  .kt-provider-form-hero__icon { inline-size: 2.8rem; block-size: 2.8rem; border-radius: 0.82rem; }
  .kt-provider-form-card__header > span { display: none; }
  .kt-provider-form-page .medium-img { inline-size: 5.5rem !important; block-size: 5.5rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .kt-provider-form-page *,
  .kt-provider-form-page *::before,
  .kt-provider-form-page *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}