@layer components {

/* Dashboard Page Layout */
.dashboard-page {
  max-inline-size: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

  @media (width <= 640px) {
.dashboard-page {
    padding: 1rem
}
  }

/* Dashboard Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-block-start: 1.5rem;
}

  @media (width <= 768px) {
.dashboard-grid {
    grid-template-columns: 1fr
}
  }

/* Dashboard Card */
.dashboard-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  padding: 1.25rem;
  min-block-size: 200px;
  display: flex;
  flex-direction: column;
}

.dashboard-card h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-emphasis);
  margin: 0 0 1rem;
  padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--color-border-primary);
}

  html[data-theme="dark"] .dashboard-card {
    background: var(--color-surface-dark);
  }

    html[data-theme="dark"] .dashboard-card h2 {
      color: var(--color-slate-100);
    }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .dashboard-card {
      background: var(--color-surface-dark);
      border-color: var(--color-border-dark);
    }

      html:not([data-theme]) .dashboard-card h2 {
        color: var(--color-slate-100);
        border-block-end-color: var(--color-border-dark);
      }
  }

.card-empty {
  color: var(--color-text-tertiary);
  font-size: 0.875rem;
  font-style: italic;
  text-align: center;
  padding: 1.5rem 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

  html[data-theme="dark"] .card-empty {
    color: var(--color-slate-500);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .card-empty {
      color: var(--color-slate-500);
    }
  }

.card-footer-link {
  margin-block-start: auto;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--color-border-primary);
  font-size: 0.875rem;
}

.card-footer-link a {
  color: var(--color-text-link);
  text-decoration: none;
}

    .card-footer-link a:hover {
      text-decoration: underline;
    }

  /* card-footer-link border auto-adapts via --color-border-primary */

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .card-footer-link {
      border-block-start-color: var(--color-border-dark);
    }
  }

/* Team Stats List */
.team-stats-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.team-stat-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-block-end: 1px solid var(--color-border-primary);
}

  .team-stat-item:last-child {
    border-block-end: none;
  }

  /* team-stat-item border auto-adapts via --color-border-primary */

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .team-stat-item {
      border-block-end-color: var(--color-border-dark);
    }
  }

.team-color-dot {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.team-name {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--color-text-strong);
}

  html[data-theme="dark"] .team-name {
    color: var(--color-slate-300);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .team-name {
      color: var(--color-slate-300);
    }
  }

.team-count {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-emphasis);
  background: var(--color-bg-tertiary);
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  min-inline-size: 2.5rem;
  text-align: center;
}

  html[data-theme="dark"] .team-count {
    background: var(--color-slate-800);
    color: var(--color-slate-200);
    border: 1px solid var(--color-border-dark);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .team-count {
      background: var(--color-slate-800);
      color: var(--color-slate-200);
      border: 1px solid var(--color-border-dark);
    }
  }

/* Compact Issue List */
.issue-list-compact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.issue-item-compact {
  display: flex;
  gap: 0.75rem;
  padding: 0.625rem;
  background: var(--color-bg-subtle);
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

.issue-item-compact:hover {
  background: var(--color-bg-tertiary);
}

.issue-identifier-small {
  font-family: ui-monospace, monospace;
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  min-inline-size: 4rem;
  padding-block-start: 0.125rem;
}

  @media (width <= 640px) {
.issue-identifier-small {
    display: none
}
  }

  html[data-theme="dark"] .issue-identifier-small {
    color: var(--color-slate-500);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .issue-identifier-small {
      color: var(--color-slate-500);
    }
  }

.issue-item-content {
  flex: 1;
  min-inline-size: 0;
}

.issue-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-emphasis);
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.issue-link:hover {
  color: var(--color-text-link);
}

.issue-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 0.375rem;
  font-size: 0.75rem;
}

.issue-status-small {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-text-tertiary);
}

  .issue-status-small::before {
    content: '';
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--status-color, #888);
  }

  html[data-theme="dark"] .issue-status-small {
    color: var(--color-slate-400);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .issue-status-small {
      color: var(--color-slate-400);
    }
  }

.issue-team-small {
  color: var(--color-text-muted);
  font-weight: 500;
}

  html[data-theme="dark"] .issue-team-small {
    color: var(--color-slate-500);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .issue-team-small {
      color: var(--color-slate-500);
    }
  }

.issue-assignee-small {
  color: var(--color-text-tertiary);
}

  html[data-theme="dark"] .issue-assignee-small {
    color: var(--color-slate-500);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .issue-assignee-small {
      color: var(--color-slate-500);
    }
  }

.activity-time {
  color: var(--color-text-muted);
}

  html[data-theme="dark"] .activity-time {
    color: var(--color-slate-500);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .activity-time {
      color: var(--color-slate-500);
    }
  }

/* Due Date Badge */
.due-date-badge {
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.6875rem;
  background: var(--color-bg-tertiary);
  color: var(--color-text-strong);
}

.due-date-badge.due-today {
  background: var(--color-status-warning-subtle);
  color: var(--color-status-warning-text);
}

.due-date-badge.overdue {
  --_due-bg: var(--color-error-100);
  --_due-color: var(--color-error-700);

  background: var(--_due-bg);
  color: var(--_due-color);
}

/* Header Actions */
.header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

  @media (width <= 640px) {
.header-actions {
    inline-size: 100%;
    justify-content: flex-end
}
  }

.workspace-status {
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
  padding: 0.5rem 0.75rem;
  background: var(--color-bg-tertiary);
  border-radius: 6px;
}

  html[data-theme="dark"] .workspace-status {
    background: var(--color-slate-800);
    color: var(--color-slate-400);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .workspace-status {
      background: var(--color-slate-800);
      color: var(--color-slate-400);
    }
  }

/* Client Accounts Summary */
.client-accounts-summary {
  margin-block-start: 1.5rem;
}

.client-accounts-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.client-account-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  transition: box-shadow 0.15s ease;
}

.client-account-row:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

  @media (width >= 768px) {
.client-account-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between
}
  }

  html[data-theme="dark"] .client-account-row {
    background: var(--color-surface-dark);
  }

  html[data-theme="dark"] .client-account-row:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .client-account-row {
      background: var(--color-surface-dark);
    }

    html:not([data-theme]) .client-account-row:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
  }

.client-account-info {
  flex: 1;
  min-inline-size: 0;
}

.client-account-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-block-end: 0.5rem;
}

.client-account-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-emphasis);
  text-decoration: none;
}


.client-account-name:hover {
  color: var(--color-text-link);
}

.client-account-utilization {
  min-inline-size: 280px;
  max-inline-size: 400px;
}

  @media (width >= 768px) {
.client-account-utilization {
    flex: 0 0 400px
}
  }

  @media (width <= 767px) {
.client-account-utilization {
    max-inline-size: none
}
  }

.utilization-bar {
  margin-block-end: 0.5rem;
}

.utilization-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.utilization-stat {
  color: var(--color-text-tertiary);
}

.client-account-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.client-account-period {
  color: var(--color-text-tertiary);
}

  html[data-theme="dark"] .client-account-period {
    color: var(--color-slate-400);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .client-account-period {
      color: var(--color-slate-400);
    }
  }

.client-account-period--placeholder {
  font-style: italic;
  color: var(--color-text-muted);
}

.client-account-plan-name {
  color: var(--color-text-strong);
  font-weight: 500;
}

.client-account-plan-name--none {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Plan Type Badge */
.plan-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.plan-type-badge--points {
  background: var(--color-bg-accent-hover);
  color: var(--color-text-accent);
}

.plan-type-badge--concurrent {
  background: var(--color-status-warning-subtle);
  color: var(--color-status-warning-text);
}

.plan-type-badge--custom {
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
}

.plan-type-badge--project {
  background: var(--color-error-100);
  color: var(--color-error-700);
}

/* Plan Change Badge */
.plan-change-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

  .plan-change-badge--upgrade {
    background: var(--color-success-100);
    color: var(--color-success-700);
  }

  .plan-change-badge--downgrade {
    background: var(--color-warning-100);
    color: var(--color-warning-700);
  }

  .plan-change-badge--neutral {
    background: var(--color-neutral-100);
    color: var(--color-neutral-600);
  }

  /* Dark Mode - Plan Change Badge */

    html[data-theme="dark"] .plan-change-badge--downgrade {
      background: var(--color-warning-alpha-20);
      color: var(--color-warning-400);
    }

    html[data-theme="dark"] .plan-change-badge--neutral {
      background: var(--color-slate-700);
      color: var(--color-slate-400);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) .plan-change-badge--downgrade {
        background: rgba(245, 158, 11, 0.2);
        color: var(--color-warning-400);
      }

      html:not([data-theme]) .plan-change-badge--neutral {
        background: var(--color-slate-700);
        color: var(--color-slate-400);
      }
    }

.plan-change-icon {
  inline-size: 0.875rem;
  block-size: 0.875rem;
}

.utilization-stat--todo {
  color: var(--color-text-tertiary);
}

.utilization-stat--remaining {
  color: var(--color-text-secondary);
}

.utilization-stat--over {
  color: var(--color-status-error-action);
  font-weight: 600;
}

.utilization-stat--total {
  color: var(--color-text-muted);
}

.utilization-stat--none {
  color: var(--color-text-muted);
  font-style: italic;
}

.concurrent-utilization,
.custom-utilization {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Progress Bar for Dashboard - consistent with Linear status colors */
.points-progress-bar__completed,
.points-progress-bar__done {
  background: var(--color-indigo-500);
  block-size: 100%;
  transition: width 0.3s ease;
}

.points-progress-bar__in-progress {
  background: var(--color-amber-500);
  block-size: 100%;
  transition: width 0.3s ease;
}

.points-progress-bar__todo {
  background: var(--color-neutral-400);
  block-size: 100%;
  transition: width 0.3s ease;
}

/* Dark Mode - Plan badges */
html[data-theme="dark"] .plan-type-badge--points {
  background: var(--color-indigo-alpha-20);
}

html[data-theme="dark"] .plan-type-badge--project {
  background: var(--color-error-alpha-20, rgba(239, 68, 68, 0.2));
  color: var(--color-error-400, #f87171);
}

html[data-theme="dark"] .plan-change-badge--upgrade {
  background: var(--color-emerald-alpha-20);
  color: var(--color-success-400);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .plan-type-badge--points {
    background: var(--color-indigo-alpha-20);
  }

  html:not([data-theme]) .plan-type-badge--project {
    background: var(--color-error-alpha-20, rgba(239, 68, 68, 0.2));
    color: var(--color-error-400, #f87171);
  }

  html:not([data-theme]) .plan-change-badge--upgrade {
    background: var(--color-emerald-alpha-20);
    color: var(--color-success-400);
  }
}
} /* @layer components */