@import "./settings-app-hub.css";

.app-dashboard-lp .cd-app-dashboard-preview {
  display: flex;
  justify-content: center;
}

.app-dashboard-lp .cd-app-dashboard-preview__phone {
  width: min(100%, 16.5rem);
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1.55rem;
  background: #fff;
  box-shadow:
    0 1.6rem 3.6rem rgba(0, 40, 100, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.95) inset;
}

.app-dashboard-lp .cd-app-dashboard-preview__status,
.app-dashboard-lp .cd-app-dashboard-preview__phone header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.52rem 0.78rem;
}

.app-dashboard-lp .cd-app-dashboard-preview__status {
  color: #111827;
  font-size: 0.6rem;
  font-weight: 900;
}

.app-dashboard-lp .cd-app-dashboard-preview__phone header {
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.app-dashboard-lp .cd-app-dashboard-preview__phone header strong {
  color: #111827;
  font-size: 0.75rem;
}

.app-dashboard-lp .cd-app-dashboard-preview__phone header i {
  color: #0071e3;
}

.app-dashboard-lp .cd-app-dashboard-preview__task,
.app-dashboard-lp .cd-app-dashboard-preview__today,
.app-dashboard-lp .cd-app-dashboard-preview__search,
.app-dashboard-lp .cd-app-dashboard-preview__tiles {
  margin: 0.62rem 0.75rem;
}

.app-dashboard-lp .cd-app-dashboard-preview__task div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #111827;
}

.app-dashboard-lp .cd-app-dashboard-preview__task div strong,
.app-dashboard-lp .cd-app-dashboard-preview__today > strong {
  font-size: 0.72rem;
}

.app-dashboard-lp .cd-app-dashboard-preview__task div em {
  width: 1.55rem;
  height: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 113, 227, 0.14);
  color: #0071e3;
  font-style: normal;
  font-weight: 900;
}

.app-dashboard-lp .cd-app-dashboard-preview__task p {
  margin: 0.55rem 0 0;
  padding: 0.58rem 0.7rem;
  border-left: 3px solid #0071e3;
  border-radius: 0.7rem;
  background: #f3f1f8;
  color: #111827;
  font-size: 0.68rem;
  font-weight: 800;
}

.app-dashboard-lp .cd-app-dashboard-preview__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.42rem;
  margin-top: 0.42rem;
}

.app-dashboard-lp .cd-app-dashboard-preview__stats span,
.app-dashboard-lp .cd-app-dashboard-preview__tiles span {
  display: block;
  border-radius: 0.8rem;
  background: #f3f1f8;
  color: #64748b;
  box-shadow: 0 0.45rem 1rem rgba(0, 40, 100, 0.04);
}

.app-dashboard-lp .cd-app-dashboard-preview__stats span {
  padding: 0.48rem 0.6rem;
  border-left: 3px solid #0071e3;
  font-size: 0.54rem;
  font-weight: 700;
}

.app-dashboard-lp .cd-app-dashboard-preview__stats span:nth-child(2) {
  border-left-color: #3fc77d;
}

.app-dashboard-lp .cd-app-dashboard-preview__stats span:nth-child(3) {
  border-left-color: #35a7d6;
}

.app-dashboard-lp .cd-app-dashboard-preview__stats span:nth-child(4) {
  border-left-color: #f5b21a;
}

.app-dashboard-lp .cd-app-dashboard-preview__stats b {
  display: block;
  color: #0071e3;
  font-size: 0.95rem;
  line-height: 1;
  margin-bottom: 0.22rem;
}

.app-dashboard-lp .cd-app-dashboard-preview__search {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.56rem 0.65rem;
  border-radius: 0.8rem;
  background: #f3f1f8;
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 800;
}

.app-dashboard-lp .cd-app-dashboard-preview__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.48rem;
}

.app-dashboard-lp .cd-app-dashboard-preview__tiles span {
  min-height: 3.15rem;
  padding: 0.58rem;
  color: #111827;
  font-size: 0.62rem;
  font-weight: 900;
}

.app-dashboard-lp .cd-app-dashboard-preview__tiles i {
  display: block;
  color: #0071e3;
  font-size: 1rem;
  margin-bottom: 0.28rem;
}

.app-dashboard-lp .cd-app-dashboard-preview__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0.38rem 0.28rem 0.48rem;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  background: rgba(255, 255, 255, 0.96);
}

.app-dashboard-lp .cd-app-dashboard-preview__tabs span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  color: #8b929d;
  font-size: 0.45rem;
  font-weight: 800;
}

.app-dashboard-lp .cd-app-dashboard-preview__tabs i {
  font-size: 0.86rem;
}

.app-dashboard-lp .cd-app-dashboard-preview__tabs .is-active {
  color: #0071e3;
}