/* V0 Supplements surface palette + layout (dérivé de me/todo/v0-palette.css).
   Couleurs partagées + layout spécifique à l'inventaire compléments. */

:root {
  --surface-color-bg:        #fcfcfd;
  --surface-color-bg-card:   #ffffff;
  --surface-color-text:      #1f2937;
  --surface-color-muted:     #6b7280;
  --surface-color-rule:      #e5e7eb;
  --surface-color-link:       #1e3a8a;
  --surface-color-link-hover: #1e40af;
  --surface-color-focus:      #3b82f6;
  --surface-color-code-bg:    rgba(30, 58, 138, 0.06);

  --suppl-color-ok:      #059669;
  --suppl-color-warn:    #d97706;
  --suppl-color-danger:  #dc2626;
}

/* ---------- shared auth / header (copié des surfaces health/todo) ---------- */

.health-page-title {
  margin-block-start: var(--ds-space-6);
  margin-block-end: var(--ds-space-2);
}

.health-meta {
  color: var(--surface-color-muted);
  font-size: var(--ds-font-size-sm);
  margin-block-end: var(--ds-space-4);
}

.health-auth-status {
  margin-inline-start: auto;
  font-size: var(--ds-font-size-sm);
  color: var(--surface-color-muted);
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
}
.health-auth-status[data-state="authed"] { color: var(--suppl-color-ok); }
.health-auth-status[data-state="error"]  { color: var(--suppl-color-danger); }
.health-auth-status__btn {
  background: none;
  border: none;
  color: var(--surface-color-link);
  cursor: pointer;
  font-size: inherit;
  text-decoration: underline;
}

.health-auth-gate {
  max-width: 32rem;
  margin: var(--ds-space-7) auto;
}
.health-gsi-button-wrap {
  margin-block-start: var(--ds-space-5);
  display: flex;
  justify-content: center;
}
.health-auth-error {
  color: var(--suppl-color-danger);
  font-size: var(--ds-font-size-sm);
  margin-block-start: var(--ds-space-3);
}

.todo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ds-space-4);
  flex-wrap: wrap;
  margin-block-start: var(--ds-space-6);
}

/* ---------- supplements list ---------- */

.suppl-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}

.suppl-row {
  position: relative;
  border: 1px solid var(--surface-color-rule);
  border-radius: 0.5rem;
  padding: var(--ds-space-4);
  padding-inline-end: var(--ds-space-7);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}

.suppl-row__line {
  display: flex;
  gap: var(--ds-space-3);
  flex-wrap: wrap;
}

.suppl-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-width: 0;
}
.suppl-field--amount { flex: 0 0 6rem; }
.suppl-field--unit   { flex: 0 0 8rem; }

.suppl-field__label {
  font-size: var(--ds-font-size-xs);
  color: var(--surface-color-muted);
}

.suppl-field__input {
  font: inherit;
  font-size: var(--ds-font-size-sm);
  padding: var(--ds-space-2);
  border: 1px solid var(--surface-color-rule);
  border-radius: 0.25rem;
  background: var(--surface-color-bg);
  color: var(--surface-color-text);
  width: 100%;
  box-sizing: border-box;
}
.suppl-field__input:focus {
  outline: 2px solid var(--surface-color-focus);
  outline-offset: 1px;
}

.suppl-row__delete {
  position: absolute;
  inset-block-start: var(--ds-space-2);
  inset-inline-end: var(--ds-space-2);
  background: none;
  border: none;
  color: var(--surface-color-muted);
  cursor: pointer;
  font-size: var(--ds-font-size-md);
  line-height: 1;
  padding: var(--ds-space-1);
}
.suppl-row__delete:hover { color: var(--suppl-color-danger); }

.suppl-savebar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--ds-space-3);
  margin-block: var(--ds-space-5) var(--ds-space-7);
  position: sticky;
  inset-block-end: 0;
  background: var(--surface-color-bg);
  padding-block: var(--ds-space-3);
}
.suppl-savebar__hint {
  font-size: var(--ds-font-size-sm);
  color: var(--surface-color-muted);
}
.suppl-savebar__hint[data-state="dirty"]  { color: var(--suppl-color-warn); }
.suppl-savebar__hint[data-state="saved"]  { color: var(--suppl-color-ok); }
.suppl-savebar__hint[data-state="error"]  { color: var(--suppl-color-danger); }

@media (max-width: 32rem) {
  .suppl-field--amount,
  .suppl-field--unit { flex: 1 1 8rem; }
}

/* ---------- tabs ---------- */

.suppl-tabs {
  display: flex;
  gap: var(--ds-space-1);
  border-bottom: 1px solid var(--surface-color-rule);
  margin-block-start: var(--ds-space-6);
}

.suppl-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--ds-space-3) var(--ds-space-4);
  font: inherit;
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--surface-color-muted);
  cursor: pointer;
}
.suppl-tab--active {
  color: var(--surface-color-link);
  border-bottom-color: var(--surface-color-link);
}

/* ---------- répartition view ---------- */

#repartition-slots {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}

.rep-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rep-item {
  padding-block: var(--ds-space-3);
  border-bottom: 1px solid var(--surface-color-rule);
}
.rep-item:last-child { border-bottom: none; }

.rep-item__head {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-space-3);
  align-items: baseline;
}
.rep-item__name {
  font-weight: var(--ds-font-weight-semibold);
}
.rep-item__dose {
  font-size: var(--ds-font-size-sm);
  color: var(--surface-color-link);
  white-space: nowrap;
}
.rep-item__why {
  font-size: var(--ds-font-size-sm);
  color: var(--surface-color-muted);
  margin-block-start: 0.15rem;
}

.suppl-notes {
  margin: 0;
  padding-inline-start: var(--ds-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  font-size: var(--ds-font-size-sm);
}