/* Personal preferences checkpoint */
.preferences-setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
  align-items: center;
  gap: 24px;
}

.preference-select-control {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--margi-control-line, #e4e2dd);
  border-radius: var(--margi-control-radius, 14px);
  padding: 0 40px 0 14px;
  background: var(--margi-surface, #fffefb);
  color: var(--margi-text, var(--margi-ink));
  font: inherit;
}

.preferences-accent-section,
.typography-section,
.preferences-people {
  grid-column: 1 / -1;
}

.preferences-accent-section .accent-options {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.preferences-accent-section .accent-options label {
  display: flex;
  justify-content: center;
  flex: 1 1 0;
  min-width: 54px;
}

.preferences-dialog {
  max-height: min(92dvh, 900px) !important;
  overflow: hidden !important;
}

.preferences-dialog > form {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: min(92dvh, 900px);
  min-height: 0;
  overflow: hidden;
}

.preferences-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

html[data-accent="ink"] {
  --margi-accent: var(--margi-ink);
  --margi-accent-dark: var(--margi-ink);
  --margi-accent-soft: #f8f7f4;
}

html[data-accent="ink"][data-card-style="outline"] :is(
  .kpi-grid .billing-kpi,
  .kpi-grid .late-kpi,
  .kpi-grid .expense-kpi,
  .kpi-grid .cash-kpi,
  .kpi-grid .goal-kpi,
  .tasks-summary-card,
  .events-summary-card,
  .monthly-chart-card,
  .accounts-summary-card,
  .crm-column,
  .task-column,
  .card
) {
  border-color: var(--margi-ink) !important;
}

:is(.late-kpi, .cash-kpi) :is(.metric-value, .kpi-value, .value),
.kpi-grid .kpi-value.danger,
.kpi-grid .kpi-value.positive {
  color: var(--margi-text, var(--margi-ink)) !important;
}

.preferences-person {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--margi-control-line, #e4e2dd);
}

.preferences-person-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--margi-control-line, #e4e2dd) 45%, var(--margi-surface, #fffefb));
  color: var(--margi-text, var(--margi-ink));
  font-weight: 700;
}

.preferences-person div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.preferences-person strong,
.preferences-person small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preferences-person small,
.preferences-person > span:last-child {
  color: var(--margi-muted, #74716d);
}

.preferences-person > span:last-child {
  font-size: .82rem;
}

@media (min-width: 761px) {
  .preferences-dialog {
    width: min(940px, 100vw) !important;
  }

  .preferences-body {
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    padding: 0 24px 24px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .preferences-profile,
  .preferences-accent-section,
  .typography-section,
  .preferences-people {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .preferences-setting-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .preferences-accent-section .accent-options {
    gap: 8px;
  }

  .preferences-accent-section .accent-options label {
    min-width: 44px;
  }

  .preferences-person {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .preferences-person-avatar {
    width: 36px;
    height: 36px;
  }

  .preferences-person > span:last-child {
    grid-column: 2;
  }
}