.workspace-overview {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 0 24px;
}

.workspace-overview__header,
.workspace-overview__actions,
.workspace-overview__metrics,
.workspace-overview__content,
.workspace-panel__header,
.workspace-task,
.workspace-project-link,
.workspace-onboarding__summary,
.workspace-onboarding-item,
.workspace-subscription-notice {
  display: flex;
  align-items: center;
}

.workspace-overview__header,
.workspace-panel__header,
.workspace-onboarding__summary {
  justify-content: space-between;
  gap: 16px;
}

.workspace-overview__eyebrow {
  margin: 0 0 4px;
  color: #26753a;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.workspace-overview h1,
.workspace-overview h2,
.workspace-overview p {
  margin: 0;
}

.workspace-overview h1 {
  font-size: 1.65rem;
  font-weight: 700;
}

.workspace-overview h2 {
  font-size: 1rem;
  font-weight: 700;
}

.workspace-overview__actions {
  flex-wrap: wrap;
  gap: 8px;
}

.workspace-overview__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.workspace-overview__metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0;
}

.workspace-modules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.workspace-module-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #d9e2dd;
  border-radius: 6px;
  color: #183b2a;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.workspace-module-link:hover { border-color: #26753a; color: #167a3d; }
.workspace-module-link i { color: #26753a; }

.workspace-subscription-notice {
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid #c9d9ee;
  border-radius: 8px;
  background: #f4f8fd;
}

.workspace-subscription-notice__icon {
  display: inline-grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 8px;
  background: #e4effc;
  color: #255fa3;
  place-items: center;
}

.workspace-subscription-notice div { min-width: 0; }

.workspace-subscription-notice strong { color: #183b2a; }

.workspace-subscription-notice p {
  margin-top: 3px;
  color: #526173;
  font-size: 0.88rem;
}

.workspace-subscription-notice p span { font-weight: 700; }

.workspace-subscription-notice a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  color: #255fa3;
  flex: 0 0 auto;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.workspace-subscription-notice a:hover { color: #183b2a; }

.workspace-metric,
.workspace-panel,
.workspace-onboarding {
  border: 1px solid #d9e2dd;
  border-radius: 8px;
  background: #ffffff;
}

.workspace-metric {
  min-height: 108px;
  padding: 16px;
}

a.workspace-metric { color: inherit; text-decoration: none; }
a.workspace-metric:hover { border-color: #26753a; }
.workspace-metric--support strong { color: #255fa3; }

.workspace-metric span,
.workspace-panel__header span,
.workspace-task__place,
.workspace-task time {
  color: #667085;
  font-size: 0.85rem;
}

.workspace-metric strong {
  display: block;
  margin-top: 8px;
  color: #183b2a;
  font-size: 2rem;
  line-height: 1;
}

.workspace-metric--danger strong { color: #ba2a2a; }
.workspace-metric--warning strong { color: #a96800; }
.workspace-metric--success strong { color: #26753a; }

.workspace-overview__content {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 16px;
}

.workspace-panel {
  min-width: 0;
  padding: 18px;
}

.workspace-panel--support-queue { grid-column: 1 / -1; }
.workspace-panel--activity { grid-column: 1 / -1; }

.workspace-panel__header {
  margin-bottom: 12px;
}

.workspace-onboarding {
  margin: 0 0 16px;
  padding: 18px;
}

.workspace-onboarding__summary {
  align-items: flex-start;
  margin-bottom: 14px;
}

.workspace-onboarding__summary span {
  color: #667085;
  font-size: 0.88rem;
}

.workspace-onboarding__progress {
  display: grid;
  gap: 7px;
  min-width: 160px;
  text-align: right;
}

.workspace-onboarding__progress strong {
  color: #183b2a;
  font-size: 1.15rem;
  line-height: 1;
}

.workspace-onboarding__bar {
  width: 160px;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eee9;
}

.workspace-onboarding__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #26753a;
}

.workspace-onboarding__items {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.workspace-onboarding-item {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  min-height: 138px;
  padding: 12px;
  border: 1px solid #e4ebe6;
  border-radius: 8px;
  background: #ffffff;
  color: inherit;
  cursor: pointer;
  gap: 10px;
  text-align: left;
  text-decoration: none;
}

.workspace-onboarding-item:hover {
  border-color: #26753a;
  color: #183b2a;
}

.workspace-onboarding-item__icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 8px;
  background: #edf6ef;
  color: #26753a;
  place-items: center;
}

.workspace-onboarding-item__body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.workspace-onboarding-item__body strong {
  color: #183b2a;
  font-size: 0.92rem;
  line-height: 1.25;
}

.workspace-onboarding-item__body small {
  color: #667085;
  font-size: 0.79rem;
  line-height: 1.35;
}

.workspace-onboarding-item__status {
  display: inline-flex;
  align-self: flex-start;
  margin-left: auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #667085;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
}

.workspace-onboarding-item--done .workspace-onboarding-item__status {
  background: #e7f5ec;
  color: #26753a;
}

.workspace-task-list,
.workspace-project-list {
  display: grid;
}

.workspace-task,
.workspace-project-link {
  gap: 10px;
  min-height: 48px;
  border-top: 1px solid #edf1ee;
  color: inherit;
  text-decoration: none;
}

.workspace-task:hover,
.workspace-project-link:hover {
  color: #167a3d;
}

.workspace-task__priority {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #d0a100;
}

.workspace-task__priority--urgent,
.workspace-task__priority--high,
.workspace-task__priority--critical { background: #d83a3a; }
.workspace-task__priority--low { background: #2d8a57; }

.workspace-task__name {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-task__place {
  margin-left: auto;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-task time {
  min-width: 82px;
  text-align: right;
}

.workspace-project-link {
  justify-content: space-between;
  font-weight: 600;
}

.workspace-project-link i:first-child { color: #2d8a57; }

.workspace-empty-state {
  display: grid;
  min-height: 180px;
  place-content: center;
  gap: 8px;
  color: #667085;
  text-align: center;
}

.workspace-empty-state i {
  color: #2d8a57;
  font-size: 1.7rem;
}

body.dark .workspace-module-link,
body.dark .workspace-metric,
body.dark .workspace-panel,
body.dark .workspace-onboarding,
body.dark .workspace-onboarding-item {
  border-color: #39463f;
  background: var(--card-bg);
  color: var(--text);
}

body.dark .workspace-module-link:hover,
body.dark .workspace-onboarding-item:hover,
body.dark a.workspace-metric:hover {
  border-color: #54ba70;
  color: var(--text);
}

body.dark .workspace-subscription-notice {
  border-color: #365170;
  background: #1b2d40;
}

body.dark .workspace-subscription-notice__icon {
  background: #264461;
  color: #a9d0ff;
}

body.dark .workspace-subscription-notice strong,
body.dark .workspace-subscription-notice a,
body.dark .workspace-onboarding__progress strong,
body.dark .workspace-onboarding-item__body strong {
  color: var(--text);
}

body.dark .workspace-subscription-notice p,
body.dark .workspace-metric span,
body.dark .workspace-panel__header span,
body.dark .workspace-task__place,
body.dark .workspace-task time,
body.dark .workspace-onboarding__summary span,
body.dark .workspace-onboarding-item__body small,
body.dark .workspace-empty-state {
  color: #aeb9c6;
}

body.dark .workspace-metric strong {
  color: #dce5ef;
}

body.dark .workspace-metric--danger strong { color: #ff9d9d; }
body.dark .workspace-metric--warning strong { color: #ffd27a; }
body.dark .workspace-metric--success strong { color: #9be0ae; }
body.dark .workspace-metric--support strong { color: #a9d0ff; }

body.dark .workspace-onboarding-item__icon {
  background: #1f4830;
  color: #9be0ae;
}

body.dark .workspace-onboarding-item__status {
  background: #303941;
  color: #c3ccd7;
}

body.dark .workspace-onboarding-item--done .workspace-onboarding-item__status {
  background: #1f4830;
  color: #9be0ae;
}

body.dark .workspace-onboarding__bar {
  background: #354139;
}

body.dark .workspace-task,
body.dark .workspace-project-link {
  border-color: #354139;
  color: var(--text);
}

body.dark .workspace-task:hover,
body.dark .workspace-project-link:hover {
  color: #9be0ae;
}

@media (max-width: 850px) {
  .workspace-overview__metrics,
  .workspace-overview__content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-overview__content { grid-template-columns: 1fr; }
  .workspace-onboarding__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .workspace-overview { padding-top: 0; }
  .workspace-overview__header { align-items: flex-start; flex-direction: column; }
  .workspace-overview__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-onboarding__summary { flex-direction: column; }
  .workspace-onboarding__progress { width: 100%; text-align: left; }
  .workspace-onboarding__bar { width: 100%; }
  .workspace-onboarding__items { grid-template-columns: 1fr; }
  .workspace-onboarding-item { min-height: 0; }
  .workspace-subscription-notice { align-items: flex-start; flex-wrap: wrap; }
  .workspace-subscription-notice a { margin-left: 48px; }
  .workspace-task { align-items: flex-start; flex-wrap: wrap; padding: 9px 0; }
  .workspace-task__place { margin-left: 18px; width: calc(100% - 18px); text-align: left; }
  .workspace-task time { margin-left: 18px; text-align: left; }
}