/*
 * Dashboard
 *
 * Shared dashboard widgets used by admin/main dashboard partials.
 */

.dashboard-trend__body,
.dashboard-stat__body,
.dashboard-vote__item-body {
  padding: 1.25rem 1rem;
}

@media (min-width: 640px) {
  .dashboard-trend__body,
  .dashboard-stat__body,
  .dashboard-vote__item-body {
    padding: 1.5rem;
  }
}

.dashboard-trend__title,
.dashboard-stat__title {
  overflow: hidden;
  color: var(--color-ink-lighter);
  font-weight: 500;
  line-height: 1.25rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-trend__title {
  font-size: 1rem;
}

.dashboard-trend__value-row,
.dashboard-stat__value-row {
  display: flex;
  align-items: baseline;
}

.dashboard-trend__value {
  margin: 0;
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.dashboard-trend__change,
.dashboard-stat-period {
  display: flex;
  align-items: baseline;
  margin-inline-start: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
}

.dashboard-trend__change--green,
.dashboard-stat-period--green {
  color: var(--color-success-strong);
}

.dashboard-trend__change--red,
.dashboard-stat-period--red {
  color: var(--color-danger-strong);
}

.dashboard-trend__change--indigo,
.dashboard-stat-period--indigo {
  color: var(--color-brand-strong);
}

.dashboard-trend__icon,
.dashboard-stat-period__icon {
  align-self: center;
  flex-shrink: 0;
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.dashboard-trend__icon--up,
.dashboard-stat-period__icon--up {
  color: var(--color-success);
}

.dashboard-trend__icon--down,
.dashboard-stat-period__icon--down {
  color: var(--color-danger);
}

.dashboard-vote {
  margin-block-start: 1.5rem;
}

.dashboard-vote__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  margin-block-start: 1.5rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 768px) {
  .dashboard-vote__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.dashboard-vote__item + .dashboard-vote__item {
  border-block-start: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .dashboard-vote__item + .dashboard-vote__item {
    border-block-start: 0;
    border-inline-start: 1px solid var(--color-border);
  }
}

.dashboard-vote__label {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}

.dashboard-vote__label--good {
  color: rgb(var(--palette-green-700));
}

.dashboard-vote__label--fine {
  color: rgb(var(--palette-blue-700));
}

.dashboard-vote__label--bad {
  color: rgb(var(--palette-red-700));
}

@media (min-width: 768px) {
  .dashboard-vote__value-row {
    display: block;
  }
}

@media (min-width: 1024px) {
  .dashboard-vote__value-row {
    display: flex;
  }
}

.dashboard-vote__hint,
.dashboard-stat__hint {
  margin-inline-start: 0.5rem;
  color: var(--color-ink-lighter);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.dashboard-stat__row {
  display: flex;
  align-items: center;
}

.dashboard-stat__content {
  flex: 1 1 0;
  inline-size: 0;
  margin-inline-start: 1.25rem;
}

.dashboard-stat__title {
  font-size: 1.125rem;
}

@media (min-width: 1024px) {
  .dashboard-stat__title {
    margin-inline-start: 3rem;
  }
}


@media (min-width: 1024px) {
  .dashboard-stat__value {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

.dashboard-stat__footer {
  background-color: var(--color-surface-muted);
  padding: 1rem;
}

@media (min-width: 640px) {
  .dashboard-stat__footer {
    padding-inline: 1.5rem;
  }
}

.dashboard-stat__footer-text {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.dashboard-stat__link {
  color: var(--color-brand-strong);
  font-weight: 500;
  transition:
    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-stat__link:hover {
  color: var(--color-brand);
}

.dashboard-onboarding-list {
  display: flex;
  flex-direction: column;
}

.dashboard-onboarding-list__empty {
  margin: 0;
  color: var(--color-ink-light);
  text-align: center;
}

.admin-dashboard-section {
  margin-block-start: 1.5rem;
}

.admin-dashboard-card-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-block-start: 1.5rem;
}

@media (min-width: 768px) {
  .admin-dashboard-card-list--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.admin-dashboard-card-list--narrow {
  margin-block-start: 1.5rem;
}

.admin-dashboard-split__pane {
  min-inline-size: 0;
}

@media (min-width: 640px) {
  .admin-dashboard-split {
    flex-direction: row;
    justify-content: space-between;
  }

  .admin-dashboard-split__pane {
    inline-size: 50%;
  }
}

.idea-dashboard__header {
  padding: 1rem 1.5rem;
  border-block-end: 1px solid var(--color-border);
}


.idea-dashboard-filter {
  margin-block-end: 0.5rem;
}

.idea-dashboard-filter__fields {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.idea-dashboard-filter__field {
  inline-size: 100%;
}

@media (min-width: 640px) {
  .idea-dashboard-filter__fields {
    flex-direction: row;
    align-items: flex-end;
  }

  .idea-dashboard-filter__field {
    inline-size: auto;
  }
}

@media (min-width: 1024px) {
  .idea-dashboard-card-list--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .idea-dashboard-card-list--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .idea-dashboard-card--wide {
    grid-column: span 2 / span 2;
  }
}

.idea-dashboard-card {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  padding: 1rem;
  box-shadow: var(--shadow-panel);
}

.idea-dashboard-card__title {
  margin: 0;
  color: var(--color-ink-lighter);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.idea-dashboard-card__value {
  margin: 0;
  color: var(--color-ink);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 2.5rem;
}

.idea-dashboard-card__hint {
  margin: 0;
  color: var(--color-ink-medium);
  font-size: 0.75rem;
  line-height: 1rem;
}

.idea-dashboard-sla {
  inline-size: 100%;
  margin-block-start: 0.5rem;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.idea-dashboard-sla__heading-row {
  color: var(--color-ink-lighter);
  text-align: left;
}

.idea-dashboard-sla__heading,
.idea-dashboard-sla__cell {
  padding-block: 0.25rem;
}

.idea-dashboard-sla__heading--number,
.idea-dashboard-sla__cell--number {
  text-align: right;
}

.idea-dashboard-sla__row {
  border-block-start: 1px solid var(--color-border-muted);
}

.idea-dashboard-sla__status-dot {
  display: inline-block;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-inline-end: 0.25rem;
  border-radius: var(--radius-pill);
}

.idea-dashboard-sla__cell--overdue {
  color: var(--color-danger-strong);
  font-weight: 600;
}

.dashboard-filter-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-inline-size: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.dashboard-filter-panel__field {
  min-inline-size: min(100%, 14rem);
}

.dashboard-filter-panel__actions {
  display: flex;
  align-items: flex-end;
}

@media (min-width: 640px) {
  .dashboard-filter-panel {
    flex-direction: row;
    align-items: flex-end;
  }
}

.dashboard-breakdown--center {
  align-items: center;
}

.dashboard-breakdown__list {
  min-inline-size: 0;
}

.dashboard-breakdown__list--center {
  margin-inline: auto;
}

.dashboard-breakdown__heading {
  font-weight: 600;
}

.dashboard-breakdown__chart {
  inline-size: 100%;
  max-block-size: 15rem;
}

.dashboard-breakdown__chart--center {
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  .dashboard-breakdown--center {
    justify-content: center;
  }

  .dashboard-breakdown__chart {
    inline-size: 50%;
  }
}

.admin-analytics-header__content {
  flex: 1 1 0;
  min-inline-size: 0;
}

.admin-analytics-header__title {
  margin: 0;
  overflow: hidden;
  color: rgb(var(--palette-purple-900));
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-analytics-header__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.admin-analytics-action {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background-color: rgb(var(--palette-yellow-100));
  color: rgb(var(--palette-yellow-700));
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1rem;
  text-decoration: none;
  transition:
    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-analytics-action:hover {
  background-color: rgb(var(--palette-yellow-50));
}

.admin-analytics-action:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.admin-analytics-action:focus-visible {
  border-color: rgb(var(--palette-yellow-300));
  box-shadow: 0 0 0 3px rgb(var(--palette-yellow-200));
}

.admin-analytics-action:active {
  background-color: rgb(var(--palette-yellow-200));
}

@media (min-width: 640px) {
  .admin-analytics-header__title {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}


.admin-analytics-panel {
  overflow: hidden;
  margin-block-start: 1.5rem;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.admin-analytics-panel__title {
  margin: 0;
  padding: 1.25rem 1rem;
  color: var(--color-ink);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5rem;
}

@media (min-width: 640px) {
  .admin-analytics-panel__title {
    padding-inline: 1.5rem;
  }
}

.admin-analytics-graph {
  margin-block-start: 0.5rem;
  padding: 0.5rem;
  border-block-start: 1px solid var(--color-border);
}

.admin-ranking-content {
  display: flex;
  flex-direction: column;
}

.admin-ranking-board {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 1.5rem;
  border-radius: var(--radius-md);
}

.admin-ranking-board__column {
  inline-size: 100%;
  padding-inline: 0.5rem;
}

.admin-ranking-board__title {
  margin: 0;
  color: rgb(var(--palette-yellow-900));
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5rem;
  text-align: center;
}

.admin-ranking-board__body {
  padding-block: 0.5rem;
}

@media (min-width: 1024px) {
  .admin-ranking-board {
    flex-direction: row;
  }
}

.dashboard-onboarding-employee {
  display: flex;
  justify-content: space-between;
  inline-size: 100%;
  gap: 1rem;
  padding: 0.5rem 1rem;
}

.dashboard-onboarding-employee__summary,
.dashboard-onboarding-employee__date {
  margin: 0;
}

.dashboard-onboarding-employee__summary {
  min-inline-size: 0;
}

.dashboard-onboarding-employee__date {
  flex-shrink: 0;
}

.dashboard-onboarding-employee__link {
  color: var(--color-brand-strong);
  font-weight: 500;
  transition:
    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-onboarding-employee__link:hover {
  color: var(--color-brand);
}

.dashboard-onboarding-employee__link:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  text-decoration-line: underline;
}

.onboarding-row__empty {
  padding: 0.5rem;
}

.onboarding-responsible__name {
  color: var(--color-ink);
}

.onboarding-responsible__title {
  color: var(--color-ink-lighter);
}

.dashboard-gauge-layout {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.25rem;
  margin-block-start: 1.5rem;
  padding-block: 1rem;
}

@media (min-width: 768px) {
  .dashboard-gauge-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dashboard-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dashboard-gauge__title {
  margin-block-end: 0.5rem;
}

.dashboard-kpi__body {
  padding: 1.25rem 1rem;
}

@media (min-width: 640px) {
  .dashboard-kpi__body {
    padding: 1.5rem;
  }
}

.dashboard-kpi__title {
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 400;
}


@media (min-width: 768px) {
  .dashboard-kpi__row {
    display: block;
  }
}

@media (min-width: 1024px) {
  .dashboard-kpi__row {
    display: flex;
  }
}

.dashboard-kpi__hint {
  margin-inline-start: 0.5rem;
  color: var(--color-ink-lighter);
  font-size: 0.875rem;
  font-weight: 500;
}

.dashboard-kpi__icon {
  align-self: center;
  flex-shrink: 0;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-inline: -0.25rem 0.125rem;
}

.dashboard-kpi__icon--up {
  color: var(--color-success);
}

.dashboard-kpi__icon--down {
  color: var(--color-danger);
}

.employee-dashboard-welcome {
  flex: 1 1 0;
  min-inline-size: 0;
}

.employee-dashboard-welcome__profile {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.employee-dashboard-welcome__identity {
  flex: 1 1 0;
  min-inline-size: 0;
}

.employee-dashboard-welcome__name {
  margin: 0;
  color: var(--color-ink);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 2.5rem;
}

.employee-dashboard-welcome__meta {
  margin-block: 0.75rem 0;
  color: var(--color-ink-lighter);
  font-size: 0.75rem;
  line-height: 1rem;
}

@media (min-width: 768px) {
  .employee-dashboard-welcome__activity {
    margin-block: 2.5rem 1rem;
  }
}

.employee-dashboard-header__content {
  flex: 1 1 0;
}

.dashboard-time-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (min-width: 1024px) {
  .dashboard-time-tiles--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.dashboard-time-empty {
  color: var(--color-ink-light);
  text-align: center;
}

.clock-in-active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  margin-block-start: -0.125rem;
  margin-inline-start: -0.125rem;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 2px currentColor;
}

.clock-in-active:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.clock-in-active--review {
  color: var(--color-warning);
}

.clock-in-active--review:hover {
  color: rgb(var(--palette-yellow-600));
}

.clock-in-active--normal {
  color: var(--color-success);
}

.clock-in-active--normal:hover {
  color: var(--color-success-strong);
}

.clock-in-active__icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.home-salute__hour,
.home-salute__message {
  margin-block: 0;
  color: var(--color-ink);
  font-weight: 700;
}

.home-salute__hour {
  font-size: 3.75rem;
  line-height: 1;
}

.home-salute__message {
  margin-block-start: 1.5rem;
  font-size: 2.25rem;
  line-height: 2.5rem;
}

@media (min-width: 640px) {
  .home-salute__message {
    font-size: 3.75rem;
    line-height: 1;
  }
}


.employee-dashboard-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: var(--radius-lg);
  padding: 0.5rem 1rem;
  color: var(--color-ink-light);
  font-size: 1.125rem;
  line-height: 1.75rem;
  box-shadow: inset 0 0 0 1px var(--employee-dashboard-status-ring-color);
}

.employee-dashboard-status--danger {
  --employee-dashboard-status-ring-color: rgb(var(--palette-rose-700) / 0.2);

  background-color: rgb(var(--palette-rose-50) / 0.5);
}

.employee-dashboard-status--warning {
  --employee-dashboard-status-ring-color: rgb(var(--palette-amber-700) / 0.2);

  background-color: rgb(var(--palette-amber-50) / 0.5);
}

.employee-dashboard-status--success {
  --employee-dashboard-status-ring-color: rgb(var(--palette-emerald-700) / 0.2);

  background-color: rgb(var(--palette-mint-50) / 0.5);
}

.employee-dashboard-status__indicator {
  display: inline-block;
  flex: 0 0 auto;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 4px var(--employee-dashboard-status-indicator-ring);
}

.employee-dashboard-status__indicator--danger {
  --employee-dashboard-status-indicator-ring: rgb(var(--palette-rose-200));

  background-color: rgb(var(--palette-rose-500));
}

.employee-dashboard-status__indicator--warning {
  --employee-dashboard-status-indicator-ring: rgb(var(--palette-amber-200));

  background-color: rgb(var(--palette-amber-500));
}

.employee-dashboard-status__indicator--success {
  --employee-dashboard-status-indicator-ring: rgb(var(--palette-emerald-200));

  background-color: rgb(var(--palette-emerald-500));
}

.employee-dashboard-clock-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  inline-size: 100%;
  border: 0;
  border-radius: var(--radius-2xl);
  background-image: linear-gradient(to right, rgb(var(--palette-pink-500)), var(--color-danger));
  color: var(--color-ink-inverted);
  padding: 1rem 1.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.75rem;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
}

.employee-dashboard-clock-action--success {
  background-image: linear-gradient(to right, rgb(var(--palette-emerald-500)), var(--color-success));
}

.employee-dashboard-clock-action--warning {
  background-image: linear-gradient(to right, rgb(var(--palette-amber-500)), var(--color-warning));
}

.employee-dashboard-clock-action--danger {
  background-image: linear-gradient(to right, rgb(var(--palette-pink-500)), var(--color-danger));
}

@media (min-width: 768px) {
  .employee-dashboard-clock-action {
    max-inline-size: 16rem;
  }
}

.employee-dashboard-clock-action:hover {
  filter: brightness(1.05);
}

.employee-dashboard-clock-action:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px rgb(var(--palette-pink-400)),
    0 0 0 4px var(--color-surface);
}

.employee-dashboard-clock-action--success:focus {
  box-shadow:
    0 0 0 2px rgb(var(--palette-emerald-400)),
    0 0 0 4px var(--color-surface);
}

.employee-dashboard-clock-action--warning:focus {
  box-shadow:
    0 0 0 2px rgb(var(--palette-amber-400)),
    0 0 0 4px var(--color-surface);
}

.employee-dashboard-clock-action__icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  transition: transform 150ms ease-in-out;
}

.employee-dashboard-clock-action:hover .employee-dashboard-clock-action__icon {
  transform: scale(1.1);
}

.employee-dashboard-schedule {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 1.5rem;
}

@media (min-width: 640px) {
  .employee-dashboard-schedule {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.employee-dashboard-activity-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.clock-activity-row {
  display: grid;
  grid-template-columns: minmax(6rem, auto) minmax(8rem, 12rem) minmax(4rem, 6rem) minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  margin-block-end: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-subtle);
  color: var(--color-ink-light);
}

.clock-activity-row__status,
.clock-activity-row__duration,
.clock-activity-row__task {
  margin: 0;
}

.clock-activity-row__task {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clock-activity-row__task-link {
  color: var(--color-brand-strong);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.clock-activity-row__task-link:hover {
  color: rgb(var(--palette-indigo-900));
}

@media (max-width: 639px) {
  .clock-activity-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.employee-dashboard-empty {
  margin-block: 0 2.25rem;
  text-align: center;
}

.employee-dashboard-availability {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: auto;
  overflow-y: visible;
  padding: 1rem;
}

@media (min-width: 640px) {
  .employee-dashboard-availability {
    flex-direction: row;
    justify-content: space-between;
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .employee-dashboard-availability {
    padding-inline: 2rem;
  }
}

.employee-dashboard-availability__table {
  min-inline-size: 100%;
  border-spacing: 0;
  border-collapse: separate;
}

.clock-in-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface-subtle);
  padding: 1rem 1.5rem;
  color: var(--color-ink-light);
}

.clock-in-message__icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  flex: 0 0 auto;
}

.clock-in-actions {
  display: flex;
  flex-direction: column;
  column-gap: 1.5rem;
  row-gap: 1rem;
}


.clock-in-form {
  inline-size: 100%;
}

@media (min-width: 768px) {
  .clock-in-form {
    max-inline-size: 16rem;
  }
}

.clock-in-form__field {
  margin-block-end: 1rem;
}

.clock-task-switch {
  margin-block-start: 1.5rem;
}

.clock-task-switch__form,
.clock-task-switch__actions {
  margin-block-start: 1rem;
}

.clock-in-header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-ink-lighter);
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.clock-in-header p {
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* Audit entries                                                       */
/* ------------------------------------------------------------------ */

.audit-entry {
  margin-block-start: 1rem;
}

.audit-entry--indented {
  margin-inline-start: 2.5rem;
}

.audit-entry__title {
  margin: 0;
  color: var(--color-ink);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.audit-entry__body {
  margin: 0.5rem;
  color: var(--color-ink-light);
  font-size: 0.75rem;
  line-height: 1rem;
}

.employee-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-inline-size: 80rem;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .employee-dashboard-stats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding-inline: 0.5rem;
  }
}

@media (min-width: 1280px) {
  .employee-dashboard-stats {
    padding-inline: 0;
  }
}

.employee-dashboard-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .employee-dashboard-stat {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .employee-dashboard-stat {
    padding-inline: 2rem;
  }
}

.employee-dashboard-stat__label {
  color: var(--color-ink-lighter);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.employee-dashboard-stat__value {
  flex: none;
  inline-size: 100%;
  color: var(--color-ink);
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 2.5rem;
}

.employee-dashboard-stat__value--warning {
  color: rgb(var(--palette-amber-600));
}

.employee-dashboard-stat__action {
  color: var(--color-ink-light);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
}

.employee-dashboard-stat__link {
  display: inline-flex;
  align-items: center;
  color: var(--color-brand-strong);
  font-weight: 500;
  transition:
    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.employee-dashboard-stat__link:hover {
  color: var(--color-brand);
}

.employee-dashboard-trends {
  margin-block-start: 1.5rem;
}

.employee-dashboard-trends__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-block-start: 1rem;
}

@media (min-width: 640px) {
  .employee-dashboard-trends__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.home-landing {
  padding-block-start: 3.5rem;
  padding-inline: 1.5rem;
}

.home-landing__inner {
  max-inline-size: 56rem;
  margin-inline: auto;
  padding-block: 8rem;
}

.home-landing__body {
  text-align: center;
}

.home-landing__activity {
  display: flex;
  justify-content: center;
  margin-block-start: 1.5rem;
  color: var(--color-ink-light);
  font-size: 1.125rem;
  line-height: 2rem;
}

.home-landing__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-block-start: 2.5rem;
}

.home-landing__dashboard-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-md);
  background-color: rgb(var(--palette-amber-50));
  color: rgb(var(--palette-amber-600));
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.home-landing__dashboard-link:hover {
  background-color: rgb(var(--palette-amber-100));
}

.home-landing__dashboard-icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

@media (min-width: 640px) {
  .home-landing__inner {
    padding-block: 12rem;
  }
}

@media (min-width: 1024px) {
  .home-landing {
    padding-inline: 2rem;
  }

  .home-landing__inner {
    padding-block: 14rem;
  }
}

.dashboard-main-header {
  display: flex;
  align-items: stretch;
  inline-size: 100%;
  gap: 2rem;
}

.dashboard-leave-days {
  display: flex;
  align-items: center;
}

.dashboard-leave-days__label {
  margin: 0;
  color: var(--color-ink-light);
  font-size: 1.125rem;
  font-weight: 600;
}

.dashboard-leave-days__value {
  margin-block: 0;
  margin-inline-start: 0.5rem;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  background-color: rgb(var(--palette-cyan-500));
  color: var(--color-ink-inverted);
  font-size: 1.125rem;
  font-weight: 600;
}

.dashboard-action {
  display: inline-flex;
  align-items: center;
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1rem;
  text-decoration: none;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.dashboard-action:focus {
  outline: none;
}

.dashboard-action--ranking {
  background-color: rgb(var(--palette-yellow-100));
  color: rgb(var(--palette-yellow-700));
}

.dashboard-action--ranking:hover {
  background-color: rgb(var(--palette-yellow-50));
}

.dashboard-action--ranking:focus {
  border-color: rgb(var(--palette-yellow-300));
  box-shadow: 0 0 0 3px rgb(var(--palette-yellow-100));
}

.dashboard-action--ranking:active {
  background-color: rgb(var(--palette-yellow-200));
}

.dashboard-action--high5 {
  background-color: rgb(var(--palette-indigo-100));
  color: rgb(var(--palette-indigo-700));
}

.dashboard-action--high5:hover {
  background-color: rgb(var(--palette-indigo-50));
}

.dashboard-action--high5:focus {
  border-color: rgb(var(--palette-indigo-300));
  box-shadow: 0 0 0 3px rgb(var(--palette-indigo-100));
}

.dashboard-action--high5:active {
  background-color: rgb(var(--palette-indigo-200));
}

.dashboard-action__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-inline-start: -0.25rem;
}

.dashboard-action__icon--ranking {
  margin-inline-end: 0.5rem;
}

.dashboard-action__icon--high5 {
  margin-inline-end: 0.75rem;
}