
/* Unified empty/error/offline/access states for ServiceCRM. */
.crm-state{
  --crm-state-accent:var(--app-accent);
  --crm-state-bg:linear-gradient(180deg,color-mix(in srgb,var(--app-surface) 94%,transparent),color-mix(in srgb,var(--app-surface) 86%,transparent));
  --crm-state-border:color-mix(in srgb,var(--app-accent) 16%,transparent);
  --crm-state-shadow:var(--app-shadow-soft);
  box-sizing:border-box;
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  align-items:flex-start;
  padding:18px;
  border:1px solid var(--crm-state-border);
  border-radius:22px;
  background:var(--crm-state-bg);
  color:var(--app-text);
  box-shadow:var(--crm-state-shadow);
}
.crm-state *{box-sizing:border-box;min-width:0}
.crm-state-grid-full{grid-column:1 / -1}
.crm-state__icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:16px;
  background:color-mix(in srgb,var(--crm-state-accent) 12%,transparent);
  color:var(--crm-state-accent);
  font-size:22px;
  line-height:1;
}
.crm-state__body{display:grid;gap:7px;align-content:start}
.crm-state__title{margin:0;font-size:18px;font-weight:900;line-height:1.2;color:var(--app-text)}
.crm-state__text{margin:0;color:var(--app-muted);font-size:14px;font-weight:600;line-height:1.45;overflow-wrap:anywhere}
.crm-state__action{justify-self:start;margin-top:6px}
.crm-state--offline{--crm-state-accent:var(--app-warning);--crm-state-border:var(--app-warning-border)}
.crm-state--error{--crm-state-accent:var(--app-danger);--crm-state-border:var(--app-danger-border)}
.crm-state--access,.crm-state--session{--crm-state-accent:var(--app-info);--crm-state-border:var(--app-info-border)}
.crm-state--success{--crm-state-accent:var(--app-success);--crm-state-border:var(--app-success-border)}
.catalog-card-grid > .crm-state{grid-column:1 / -1}
.split-list > .crm-state{margin:0}
.responsive-record-table > .crm-state{margin-top:0}
.standard-page--pwa .crm-state,
.standard-page--mobile .crm-state{
  padding:16px;
  border-radius:20px;
  box-shadow:var(--app-shadow-soft);
}
.standard-page--pwa .crm-state__icon,
.standard-page--mobile .crm-state__icon{
  width:40px;
  height:40px;
  border-radius:14px;
  font-size:20px;
}
.standard-page--pwa .crm-state__title,
.standard-page--mobile .crm-state__title{font-size:17px}
@media (max-width:640px){
  .crm-state{grid-template-columns:1fr;gap:12px;padding:16px;border-radius:20px;text-align:left}
  .crm-state__icon{width:42px;height:42px}
  .crm-state__action{width:100%;justify-self:stretch}
}
@media (prefers-color-scheme:dark){
  .crm-state{
    --crm-state-bg:linear-gradient(180deg,color-mix(in srgb,var(--app-surface) 94%,transparent),color-mix(in srgb,var(--app-bg) 90%,transparent));
    --crm-state-border:color-mix(in srgb,var(--app-accent-strong) 16%,transparent);
    --crm-state-shadow:var(--app-shadow-soft);
  }
  .crm-state__icon{background:color-mix(in srgb,var(--app-accent-strong) 12%,transparent)}
}


html[data-crm-theme="dark"] .crm-state{
  --crm-state-bg:linear-gradient(180deg,color-mix(in srgb,var(--app-surface) 94%,transparent),color-mix(in srgb,var(--app-bg) 90%,transparent));
  --crm-state-border:color-mix(in srgb,var(--app-accent-strong) 16%,transparent);
  --crm-state-shadow:var(--app-shadow-soft);
  color:var(--mobile-text,var(--app-text));
}

html[data-crm-theme="dark"] .crm-state__title{
  color:var(--mobile-text,var(--app-text));
}

html[data-crm-theme="dark"] .crm-state__text{
  color:var(--mobile-muted,var(--app-muted));
}

html[data-crm-theme="dark"] .crm-state__icon{
  background:color-mix(in srgb,var(--app-accent-strong) 12%,transparent);
}

@media(prefers-color-scheme:dark){
  html[data-crm-theme="system"] .crm-state{
    color:var(--mobile-text,var(--app-text));
  }
  html[data-crm-theme="system"] .crm-state__title{
    color:var(--mobile-text,var(--app-text));
  }
  html[data-crm-theme="system"] .crm-state__text{
    color:var(--mobile-muted,var(--app-muted));
  }
}
